From 3c22f86823e2a9c4f098cdfbe7a3ed95ed32d961 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 22 May 2019 19:33:03 +0800 Subject: [PATCH 1/3] :clapper: Add example for Select ``optionLabelProp` prop, #16709 --- components/select/demo/multiple.md | 4 +- components/select/demo/option-label-prop.md | 49 +++++++++++++++++++++ components/select/index.en-US.md | 2 +- components/select/index.zh-CN.md | 2 +- 4 files changed, 53 insertions(+), 4 deletions(-) create mode 100644 components/select/demo/option-label-prop.md diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md index 5957516e08..f743d3509f 100644 --- a/components/select/demo/multiple.md +++ b/components/select/demo/multiple.md @@ -7,11 +7,11 @@ title: ## zh-CN -多选，从已有条目中选择（scroll the menu） +多选，从已有条目中选择。 ## en-US -Multiple selection, selecting from existing items (scroll the menu). +Multiple selection, selecting from existing items. ```jsx import { Select } from 'antd'; diff --git a/components/select/demo/option-label-prop.md b/components/select/demo/option-label-prop.md new file mode 100644 index 0000000000..bafc592b5f --- /dev/null +++ b/components/select/demo/option-label-prop.md @@ -0,0 +1,49 @@ +--- +order: 4 +title: + zh-CN: 定制回填内容 + en-US: Custom selection render +--- + +## zh-CN + +使用 `optionLabelProp` 指定回填到选择框的 `Option` 属性。 + +## en-US + +Spacified the prop name of Option which will be rendered in select box. + +```jsx +import { Select } from 'antd'; + +const { Option } = Select; + +function handleChange(value) { + console.log(`selected ${value}`); +} + +ReactDOM.render( + , + mountNode, +); +``` diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 553d7cfe0d..17f988bb19 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -43,7 +43,7 @@ Select component to select value from options. | mode | Set mode of Select | 'default' \| 'multiple' \| 'tags' | 'default' | | notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' | | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value | -| optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes | +| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` for `combobox`, `children` for other modes | | placeholder | Placeholder of select | string\|ReactNode | - | | showArrow | Whether to show the drop-down arrow | boolean | true | | showSearch | Whether show search input in single mode. | boolean | false | diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 12c248df51..3d40648b9c 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -43,7 +43,7 @@ title: Select | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - | | mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | - | | notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' | -| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value | +| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value | | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） | | placeholder | 选择框默认文字 | string | - | | showArrow | 是否显示下拉小箭头 | boolean | true | From 44bce091a26076ef99e5ac502b2a241cedecafc5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 22 May 2019 19:34:32 +0800 Subject: [PATCH 2/3] :white_check_mark: update snapshots --- .../__tests__/__snapshots__/demo.test.js.snap | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap index dc540d7c5c..2659fb7edc 100644 --- a/components/select/__tests__/__snapshots__/demo.test.js.snap +++ b/components/select/__tests__/__snapshots__/demo.test.js.snap @@ -647,6 +647,91 @@ exports[`renders ./components/select/demo/optgroup.md correctly 1`] = ` `; +exports[`renders ./components/select/demo/option-label-prop.md correctly 1`] = ` +
+ +
+`; + exports[`renders ./components/select/demo/search.md correctly 1`] = `
Date: Wed, 22 May 2019 19:41:53 +0800 Subject: [PATCH 3/3] :lipstick: fix emoji lint problem https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md --- components/select/demo/option-label-prop.md | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/components/select/demo/option-label-prop.md b/components/select/demo/option-label-prop.md index bafc592b5f..5d075c4205 100644 --- a/components/select/demo/option-label-prop.md +++ b/components/select/demo/option-label-prop.md @@ -32,16 +32,28 @@ ReactDOM.render( optionLabelProp="label" > , mountNode,