Add Demo for Certain Category (ant-design#5105)

+ close ant-design#5095 + close ant-design#5135 + support OptGroup of AutoComplete
synsuman · Mar 3, 2017 · 63ddf2f · 63ddf2f
1 parent a82ab5f
commit 63ddf2f
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 7 deletions.
diff --git 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;
+}
+````
diff --git 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
@@ -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     |
diff --git 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) => {