mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
feat: Implement optionRender API (#45529)
* feat: implement optionRender api * chore: bump rc-cascader * chore: bump rc-tree-select * docs: update demo * Update components/select/demo/option-render.md Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * Update components/select/demo/option-render.md Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * Update components/select/index.en-US.md Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * Update components/select/index.zh-CN.md Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * docs: fix doc * test: update snap * docs: rename prop --------- Signed-off-by: 红果汁 <pingfj77@gmail.com> Co-authored-by: kiner-tang(文辉) <1127031143@qq.com>
This commit is contained in:
红果汁
GitHub
parent
cd60418531
commit
fc5610653e
@ -7380,6 +7380,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
|
||||
style="height: 0px; width: 0px; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
aria-label="China"
|
||||
aria-selected="true"
|
||||
id="rc_select_TEST_OR_SSR_list_0"
|
||||
role="option"
|
||||
@ -7387,6 +7388,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
|
||||
china
|
||||
</div>
|
||||
<div
|
||||
aria-label="USA"
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
role="option"
|
||||
@ -7410,7 +7412,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
label="China"
|
||||
title="China"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
@ -7465,7 +7467,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
label="USA"
|
||||
title="USA"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
@ -7494,7 +7496,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
label="Japan"
|
||||
title="Japan"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
@ -7523,7 +7525,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
label="Korea"
|
||||
title="Korea"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
|
||||
@ -1,12 +1,38 @@
|
||||
import React from 'react';
|
||||
import type { SelectProps } from 'antd';
|
||||
import { Select, Space } from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const handleChange = (value: string[]) => {
|
||||
console.log(`selected ${value}`);
|
||||
};
|
||||
|
||||
const options: SelectProps['options'] = [
|
||||
{
|
||||
label: 'China',
|
||||
value: 'china',
|
||||
emoji: '🇨🇳',
|
||||
desc: 'China (中国)',
|
||||
},
|
||||
{
|
||||
label: 'USA',
|
||||
value: 'usa',
|
||||
emoji: '🇺🇸',
|
||||
desc: 'USA (美国)',
|
||||
},
|
||||
{
|
||||
label: 'Japan',
|
||||
value: 'japan',
|
||||
emoji: '🇯🇵',
|
||||
desc: 'Japan (日本)',
|
||||
},
|
||||
{
|
||||
label: 'Korea',
|
||||
value: 'korea',
|
||||
emoji: '🇰🇷',
|
||||
desc: 'Korea (韩国)',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Select
|
||||
mode="multiple"
|
||||
@ -15,40 +41,16 @@ const App: React.FC = () => (
|
||||
defaultValue={['china']}
|
||||
onChange={handleChange}
|
||||
optionLabelProp="label"
|
||||
>
|
||||
<Option value="china" label="China">
|
||||
options={options}
|
||||
optionRender={(option) => (
|
||||
<Space>
|
||||
<span role="img" aria-label="China">
|
||||
🇨🇳
|
||||
<span role="img" aria-label={option.data.label}>
|
||||
{option.data.emoji}
|
||||
</span>
|
||||
China (中国)
|
||||
{option.data.desc}
|
||||
</Space>
|
||||
</Option>
|
||||
<Option value="usa" label="USA">
|
||||
<Space>
|
||||
<span role="img" aria-label="USA">
|
||||
🇺🇸
|
||||
</span>
|
||||
USA (美国)
|
||||
</Space>
|
||||
</Option>
|
||||
<Option value="japan" label="Japan">
|
||||
<Space>
|
||||
<span role="img" aria-label="Japan">
|
||||
🇯🇵
|
||||
</span>
|
||||
Japan (日本)
|
||||
</Space>
|
||||
</Option>
|
||||
<Option value="korea" label="Korea">
|
||||
<Space>
|
||||
<span role="img" aria-label="Korea">
|
||||
🇰🇷
|
||||
</span>
|
||||
Korea (韩国)
|
||||
</Space>
|
||||
</Option>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -85,6 +85,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true. If `options` is set, it should be set to `label` | string | `value` | |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` | |
|
||||
| options | Select options. Will get better perf than jsx definition | { label, value }\[] | - | |
|
||||
| optionRender | Customize the rendering dropdown options | (option: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - | 5.11.0 |
|
||||
| placeholder | Placeholder of select | ReactNode | - | |
|
||||
| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
|
||||
| removeIcon | The custom remove icon | ReactNode | - | |
|
||||
|
||||
@ -86,6 +86,7 @@ demo:
|
||||
| optionFilterProp | 搜索时过滤对应的 `option` 属性，如设置为 `children` 表示对内嵌内容进行搜索。若通过 `options` 属性配置选项内容，建议设置 `optionFilterProp="label"` 来对内容进行搜索。 | string | `value` | |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` | |
|
||||
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - | |
|
||||
| optionRender | 自定义渲染下拉选项 | (option: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - | 5.11.0 |
|
||||
| placeholder | 选择框默认文本 | string | - | |
|
||||
| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
|
||||
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
|
||||
|
||||
@ -124,7 +124,7 @@
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"dayjs": "^1.11.1",
|
||||
"qrcode.react": "^3.1.0",
|
||||
"rc-cascader": "~3.19.1",
|
||||
"rc-cascader": "~3.20.0",
|
||||
"rc-checkbox": "~3.1.0",
|
||||
"rc-collapse": "~3.7.1",
|
||||
"rc-dialog": "~9.3.4",
|
||||
@ -144,7 +144,7 @@
|
||||
"rc-rate": "~2.12.0",
|
||||
"rc-resize-observer": "^1.4.0",
|
||||
"rc-segmented": "~2.2.2",
|
||||
"rc-select": "~14.9.2",
|
||||
"rc-select": "~14.10.0",
|
||||
"rc-slider": "~10.3.1",
|
||||
"rc-steps": "~6.0.1",
|
||||
"rc-switch": "~4.1.0",
|
||||
@ -153,7 +153,7 @@
|
||||
"rc-textarea": "~1.5.1",
|
||||
"rc-tooltip": "~6.1.1",
|
||||
"rc-tree": "~5.8.0",
|
||||
"rc-tree-select": "~5.14.0",
|
||||
"rc-tree-select": "~5.15.0",
|
||||
"rc-upload": "~4.3.5",
|
||||
"rc-util": "^5.38.0",
|
||||
"scroll-into-view-if-needed": "^3.1.0",
|
||||
@ -339,4 +339,4 @@
|
||||
"dumi": "^2.3.0-alpha.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user