refactor(select): rewrite with hook (#27318)

* refactor(select): rewrite with hook * Update index.tsx * Update index.tsx * Update index.tsx * fix test * Update index.tsx * Update index.tsx
ant-design · Oct 24, 2020 · b0245e7 · b0245e7
1 parent 5c072cd
commit b0245e7
Show file tree

Hide file tree

Showing 5 changed files with 1,066 additions and 147 deletions.
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
@@ -7,18 +7,16 @@
 
 import * as React from 'react';
 import toArray from 'rc-util/lib/Children/toArray';
-import { SelectProps as RcSelectProps } from 'rc-select';
 import classNames from 'classnames';
 import omit from 'omit.js';
+import RcSelect from 'rc-select';
 import Select, { InternalSelectProps, OptionType } from '../select';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import devWarning from '../_util/devWarning';
 import { isValidElement } from '../_util/reactNode';
 
 const { Option } = Select;
 
-const InternalSelect = Select as React.ComponentClass<RcSelectProps>;
-
 export interface DataSourceItemObject {
   value: string;
   text: string;
@@ -37,14 +35,13 @@ function isSelectOptionOrSelectOptGroup(child: any): Boolean {
   return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
 }
 
-const AutoComplete: React.ForwardRefRenderFunction<Select, AutoCompleteProps> = (props, ref) => {
+const AutoComplete: React.ForwardRefRenderFunction<RcSelect<any>, AutoCompleteProps> = (
+  props,
+  ref,
+) => {
   const { prefixCls: customizePrefixCls, className, children, dataSource } = props;
   const childNodes: React.ReactElement[] = toArray(children);
 
-  const selectRef = React.useRef<Select>();
-
-  React.useImperativeHandle<Select, Select>(ref, () => selectRef.current!);
-
   // ============================= Input =============================
   let customizeInput: React.ReactElement | undefined;
 
@@ -113,23 +110,23 @@ const AutoComplete: React.ForwardRefRenderFunction<Select, AutoCompleteProps> =
         const prefixCls = getPrefixCls('select', customizePrefixCls);
 
         return (
-          <InternalSelect
-            ref={selectRef as any}
+          <Select
+            ref={ref}
             {...omit(props, ['dataSource'])}
             prefixCls={prefixCls}
             className={classNames(`${prefixCls}-auto-complete`, className)}
             mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
             getInputElement={getInputElement}
           >
             {optionChildren}
-          </InternalSelect>
+          </Select>
         );
       }}
     </ConfigConsumer>
   );
 };
 
-const RefAutoComplete = React.forwardRef<Select, AutoCompleteProps>(AutoComplete);
+const RefAutoComplete = React.forwardRef<unknown, AutoCompleteProps>(AutoComplete);
 
 type RefAutoCompleteWithOption = typeof RefAutoComplete & {
   Option: OptionType;