From 63ddf2fc8d79dff5986e683e2dc7158f463b72aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=86=E7=A6=BB?= Date: Fri, 3 Mar 2017 22:10:21 +0800 Subject: [PATCH] Add Demo for Certain Category (#5105) + close #5095 + close #5135 + support OptGroup of AutoComplete --- .../auto-complete/demo/certain-category.md | 167 ++++++++++++++++++ .../auto-complete/demo/uncertain-category.md | 10 +- components/auto-complete/index.en-US.md | 1 + components/auto-complete/index.tsx | 8 +- 4 files changed, 179 insertions(+), 7 deletions(-) create mode 100644 components/auto-complete/demo/certain-category.md diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md new file mode 100644 index 0000000000..8886b0558b --- /dev/null +++ b/components/auto-complete/demo/certain-category.md @@ -0,0 +1,167 @@ +--- +order: 4 +title: + zh-CN: 查询模式 - 确定类目 + en-US: Lookup-Patterns - Certain Category +--- + +## zh-CN + +[查询模式: 确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。 + +## en-US + +Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). +Basic Usage, set datasource of autocomplete with `dataSource` property. + +````jsx +import { Icon, Input, AutoComplete } from 'antd'; +const Option = AutoComplete.Option; +const OptGroup = AutoComplete.OptGroup; + +const dataSource = [{ + title: '话题', + children: [{ + title: 'AntDesign', + count: 10000, + }, { + title: 'AntDesign UI', + count: 10600, + }], +}, { + title: '问题', + children: [{ + title: 'AntDesign UI 有多好', + count: 60100, + }, { + title: 'AntDesign 是啥', + count: 30010, + }], +}, { + title: '文章', + children: [{ + title: 'AntDesign 是一个设计语言', + count: 100000, + }], +}]; + +function renderTitle(title) { + return ( + {title} + 更多 + + ); +} + +const options = dataSource.map(group => + + {group.children.map(opt => + ) + } + ).concat([ + , + ]); + +function Complete() { + return ( +
+ + } + /> + +
+ ); +} + +ReactDOM.render(, mountNode); +```` + +````css +.certain-category-search.ant-select-auto-complete .ant-input { + height: 40px; + padding: 11px 12px; +} +.certain-category-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix { + right: 16px; +} + +.certain-category-search.ant-select-auto-complete .ant-select-selection__placeholder { + top: 20px; + margin-left: 12px; + margin-right: 12px; +} + +.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title { + color: #666; + font-weight: bold; +} + +.certain-category-search-dropdown .ant-select-dropdown-menu-item-group { + border-bottom: 1px solid #F6F6F6; +} + +.certain-category-search-dropdown .ant-select-dropdown-menu-item { + padding-left: 16px; +} + +.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all { + text-align: center; + cursor: default; +} + +.certain-category-search-dropdown .ant-select-dropdown-menu { + max-height: 300px; +} + +.certain-search-item-count { + position: absolute; + color: #999; + right: 16px; +} + +.certain-category-search.ant-select-focused .certain-category-icon { + color: #49A9EE; +} + +.certain-category-icon { + color: #6E6E6E; + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + font-size: 16px; +} +```` diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md index 3fd43f86e9..199c200512 100644 --- a/components/auto-complete/demo/uncertain-category.md +++ b/components/auto-complete/demo/uncertain-category.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 5 title: zh-CN: 查询模式 - 不确定类目 en-US: Lookup-Patterns - Uncertain Category @@ -58,11 +58,9 @@ class Complete extends React.Component { } handleChange = (value) => { - if (value) { - this.setState({ - dataSource: searchResult(value), - }); - } + this.setState({ + dataSource: value ? searchResult(value) : [], + }); } render() { diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index af15500952..94e6465428 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -31,4 +31,5 @@ const dataSource = ['12345', '23456', '34567']; | placeholder | placeholder of input | string | - | | children (for dataSource) | Data source for autocomplet | React.ReactElement / Array> | - | | children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement | `` | +| optionLabelProp | Which prop value of option will render as content of select. | string | `children` | | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index 15768ef8ba..8e8ccad980 100755 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -55,6 +55,10 @@ class InputElement extends React.Component { } } +function isSelectOptionOrSelectOptGroup(child: any): Boolean { + return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup); +} + export default class AutoComplete extends React.Component { static Option = Option as React.ClassicComponentClass; static OptGroup = OptGroup as React.ClassicComponentClass; @@ -94,7 +98,9 @@ export default class AutoComplete extends React.Component).type === Option) { + if (childArray.length && + isSelectOptionOrSelectOptGroup(childArray[0]) + ) { options = children; } else { options = dataSource ? dataSource.map((item) => {