refactor(tree-select): rewrite with hook (#27593)

components/tree-select/__tests__/index.test.js

@@ -6,7 +6,7 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
 describe('TreeSelect', () => {
-  focusTest(TreeSelect);
+  focusTest(TreeSelect, { refFocus: true });
   mountTest(TreeSelect);
   rtlTest(TreeSelect);
 

components/tree-select/index.tsx

@@ -8,7 +8,8 @@ import RcTreeSelect, {
 } from 'rc-tree-select';
 import classNames from 'classnames';
 import omit from 'omit.js';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { DefaultValueType } from 'rc-tree-select/lib/interface';
+import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
 import { AntTreeNodeProps } from '../tree';
 import getIcons from '../select/utils/iconUtil';
@@ -35,56 +36,16 @@ export interface TreeSelectProps<T>
   bordered?: boolean;
 }
 
-class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
+export interface RefTreeSelectProps {
-  static TreeNode = TreeNode;
+  focus: () => void;
+  blur: () => void;
+}
 
-  static SHOW_ALL: typeof SHOW_ALL = SHOW_ALL;
+const InternalTreeSelect = <T extends DefaultValueType>(
-
+  {
-  static SHOW_PARENT: typeof SHOW_PARENT = SHOW_PARENT;
-
-  static SHOW_CHILD: typeof SHOW_CHILD = SHOW_CHILD;
-
-  static defaultProps = {
-    transitionName: 'slide-up',
-    choiceTransitionName: '',
-    bordered: true,
-  };
-
-  selectRef = React.createRef<RcTreeSelect>();
-
-  constructor(props: TreeSelectProps<T>) {
-    super(props);
-
-    devWarning(
-      props.multiple !== false || !props.treeCheckable,
-      'TreeSelect',
-      '`multiple` will alway be `true` when `treeCheckable` is true',
-    );
-  }
-
-  focus() {
-    if (this.selectRef.current) {
-      this.selectRef.current.focus();
-    }
-  }
-
-  blur() {
-    if (this.selectRef.current) {
-      this.selectRef.current.blur();
-    }
-  }
-
-  renderTreeSelect = ({
-    getPopupContainer: getContextPopupContainer,
-    getPrefixCls,
-    renderEmpty,
-    direction,
-    virtual,
-    dropdownMatchSelectWidth,
-  }: ConfigConsumerProps) => {
-    const {
     prefixCls: customizePrefixCls,
     size: customizeSize,
+    bordered = true,
     className,
     treeCheckable,
     multiple,
@@ -95,27 +56,42 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
     treeLine,
     getPopupContainer,
     dropdownClassName,
-      bordered,
     treeIcon = false,
-    } = this.props;
+    transitionName = 'slide-up',
+    choiceTransitionName = '',
+    ...props
+  }: TreeSelectProps<T>,
+  ref: React.Ref<RefTreeSelectProps>,
+) => {
+  const {
+    getPopupContainer: getContextPopupContainer,
+    getPrefixCls,
+    renderEmpty,
+    direction,
+    virtual,
+    dropdownMatchSelectWidth,
+  } = React.useContext(ConfigContext);
+  const size = React.useContext(SizeContext);
+
+  devWarning(
+    multiple !== false || !treeCheckable,
+    'TreeSelect',
+    '`multiple` will alway be `true` when `treeCheckable` is true',
+  );
 
   const prefixCls = getPrefixCls('select', customizePrefixCls);
   const treePrefixCls = getPrefixCls('select-tree', customizePrefixCls);
   const treeSelectPrefixCls = getPrefixCls('tree-select', customizePrefixCls);
 
-    const mergedDropdownClassName = classNames(
+  const mergedDropdownClassName = classNames(dropdownClassName, `${treeSelectPrefixCls}-dropdown`, {
-      dropdownClassName,
-      `${treeSelectPrefixCls}-dropdown`,
-      {
     [`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl',
-      },
+  });
-    );
 
   const isMultiple = !!(treeCheckable || multiple);
 
   // ===================== Icons =====================
   const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons({
-      ...this.props,
+    ...props,
     multiple: isMultiple,
     prefixCls,
   });
@@ -129,20 +105,14 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
   }
 
   // ==================== Render =====================
-    const selectProps = omit(this.props, [
+  const selectProps = omit(props, [
-      'prefixCls',
     'suffixIcon',
     'itemIcon',
     'removeIcon',
     'clearIcon',
     'switcherIcon',
-      'size',
-      'bordered',
   ]);
 
-    return (
-      <SizeContext.Consumer>
-        {size => {
   const mergedSize = customizeSize || size;
   const mergedClassName = classNames(
     !customizePrefixCls && treeSelectPrefixCls,
@@ -160,20 +130,17 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
       virtual={virtual}
       dropdownMatchSelectWidth={dropdownMatchSelectWidth}
       {...selectProps}
-              ref={this.selectRef}
+      ref={ref}
       prefixCls={prefixCls}
       className={mergedClassName}
       listHeight={listHeight}
       listItemHeight={listItemHeight}
       treeCheckable={
-                treeCheckable ? (
+        treeCheckable ? <span className={`${prefixCls}-tree-checkbox-inner`} /> : treeCheckable
-                  <span className={`${prefixCls}-tree-checkbox-inner`} />
-                ) : (
-                  treeCheckable
-                )
       }
       inputIcon={suffixIcon}
       menuItemSelectedIcon={itemIcon}
+      multiple={multiple}
       removeIcon={removeIcon}
       clearIcon={clearIcon}
       switcherIcon={(nodeProps: AntTreeNodeProps) =>
@@ -184,18 +151,32 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
       getPopupContainer={getPopupContainer || getContextPopupContainer}
       treeMotion={null}
       dropdownClassName={mergedDropdownClassName}
+      choiceTransitionName={choiceTransitionName}
+      transitionName={transitionName}
     />
   );
-        }}
+};
-      </SizeContext.Consumer>
-    );
-  };
 
-  render() {
+const TreeSelectRef = React.forwardRef(InternalTreeSelect) as <T extends DefaultValueType>(
-    return <ConfigConsumer>{this.renderTreeSelect}</ConfigConsumer>;
+  props: TreeSelectProps<T> & { ref?: React.Ref<RefTreeSelectProps> },
-  }
+) => React.ReactElement;
+
+type InternalTreeSelectType = typeof TreeSelectRef;
+
+interface TreeSelectInterface extends InternalTreeSelectType {
+  TreeNode: typeof TreeNode;
+  SHOW_ALL: typeof SHOW_ALL;
+  SHOW_PARENT: typeof SHOW_PARENT;
+  SHOW_CHILD: typeof SHOW_CHILD;
 }
 
+const TreeSelect = TreeSelectRef as TreeSelectInterface;
+
+TreeSelect.TreeNode = TreeNode;
+TreeSelect.SHOW_ALL = SHOW_ALL;
+TreeSelect.SHOW_PARENT = SHOW_PARENT;
+TreeSelect.SHOW_CHILD = SHOW_CHILD;
+
 export { TreeNode };
 
 export default TreeSelect;