feat: AutoComplete.Option should be children, close: #3106 (#3120)

components/auto-complete/demo/options.md

@@ -7,12 +7,11 @@ title:
 
 ## zh-CN
 
-Datasource 的每一项是一个 `AutoComplete.Option`。通过 `AutoComplete.Option` 自定义下拉菜单。
+也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `dataSource`。
 
 ## en-US
 
-Items in dataSource could be an `AutoComplete.Option`.
-
+You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。
 
 ````jsx
 import { AutoComplete } from 'antd';
@@ -36,15 +35,16 @@ const Complete = React.createClass({
   },
   render() {
     const { result } = this.state;
-    const dataSource = result.map((email) => {
+    const children = result.map((email) => {
       return <Option key={email}>{email}</Option>;
     });
     return (
       <AutoComplete
         style={{ width: 200 }}
-        dataSource={dataSource}
         onChange={this.handleChange}
-      />
+      >
+        {children}
+      </AutoComplete>
     );
   },
 });

components/auto-complete/index.tsx

@@ -7,11 +7,14 @@ export interface SelectedValue {
   label: React.ReactNode;
 }
 
+export interface DataSourceItemObject { value: string; text: string; };
+export type DataSourceItemType = string | DataSourceItemObject;
+
 export interface AutoCompleteProps {
   size?: 'large' | 'small' | 'default';
   className?: string;
   notFoundContent?: Element;
-  dataSource: Array<any>;
+  dataSource: DataSourceItemType[];
   prefixCls?: string;
   transitionName?: string;
   optionLabelProp?: string;
@@ -42,7 +45,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
 
   render() {
     let {
-      size, className, notFoundContent, prefixCls, optionLabelProp, dataSource,
+      size, className, notFoundContent, prefixCls, optionLabelProp, dataSource, children,
     } = this.props;
 
     const cls = classNames({
@@ -52,21 +55,20 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
       [`${prefixCls}-show-search`]: true,
     });
 
-    const options = dataSource ? dataSource.map((item, index) => {
+    const options = children || (dataSource ? dataSource.map((item, index) => {
       switch (typeof item) {
         case 'string':
           return <Option key={item}>{item}</Option>;
         case 'object':
-          if (React.isValidElement(item)) {
-            return React.cloneElement(item, {
-              key: item.key || index,
-            });
-          }
-          return <Option key={item.value}>{item.text}</Option>;
+          return (
+            <Option key={(item as DataSourceItemObject).value}>
+              {(item as DataSourceItemObject).text}
+            </Option>
+          );
         default:
-          return [];
+          throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
       }
-    }) : [];
+    }) : []);
 
     return (
       <Select {...this.props}