Add Demo for Certain Category (#5105)

+ close #5095 + close #5135 + support OptGroup of AutoComplete
8 years ago · 63ddf2fc8d
4 changed files with 179 additions and 7 deletions
--- a/components/auto-complete/demo/certain-category.md
+++ 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 (<span>
+    {title}
+    <a
+      style={{ float: 'right' }}
+      href="https://www.google.com/search?q=antd"
+      target="_blank"
+      rel="noopener noreferrer"
+    >更多
+    </a>
+  </span>);
+}
+
+const options = dataSource.map(group =>
+  <OptGroup
+    key={group.title}
+    label={renderTitle(group.title)}
+  >
+    {group.children.map(opt =>
+      <Option key={opt.title} value={opt.title}>
+        {opt.title}
+        <span className="certain-search-item-count">{opt.count} 人 关注</span>
+      </Option>)
+    }
+  </OptGroup>).concat([
+    <Option disabled key="all" className="show-all">
+      <a
+        href="https://www.google.com/search?q=antd"
+        target="_blank"
+        rel="noopener noreferrer"
+      >查看所有结果</a>
+    </Option>,
+  ]);
+
+function Complete() {
+  return (
+    <div className="certain-category-search-wrapper" style={{ width: 250 }}>
+      <AutoComplete
+        className="certain-category-search"
+        dropdownClassName="certain-category-search-dropdown"
+        dropdownMatchSelectWidth={false}
+        dropdownStyle={{ width: 300 }}
+        size="large"
+        style={{ width: '100%' }}
+        dataSource={options}
+        placeholder="input here"
+        optionLabelProp="value"
+        dropdownAlign={{
+          points: ['bl', 'tl'],
+          offset: [0, -4],
+          overflow: {
+            adjustX: 0,
+            adjustY: 0,
+          },
+        }}
+      >
+        <Input
+          suffix={<Icon type="search" className="certain-category-icon" />}
+        />
+      </AutoComplete>
+    </div>
+  );
+}
+
+ReactDOM.render(<Complete />, 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;
+}
+````
--- 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() {
--- 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<OptionProps> /  Array<React.ReactElement<OptionProps>> | - |
 | children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
+| 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     |
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@ -55,6 +55,10 @@ class InputElement extends React.Component<any, any> {
  }
 }

+function isSelectOptionOrSelectOptGroup(child: any): Boolean {
+  return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
+}
+
 export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
  static Option = Option as React.ClassicComponentClass<OptionProps>;
  static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
@ -94,7 +98,9 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any

    let options;
    const childArray = React.Children.toArray(children);
-    if (childArray.length && (childArray[0] as React.ReactElement<any>).type === Option) {
+    if (childArray.length &&
+        isSelectOptionOrSelectOptGroup(childArray[0])
+      ) {
      options = children;
    } else {
      options = dataSource ? dataSource.map((item) => {