fix: TreeSelect hooks重构

NSFI · Dec 30, 2021 · f87e92b · f87e92b
1 parent 6034a60
commit f87e92b
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 104 deletions.
diff --git a/source/components/TreeSelect/index.tsx b/source/components/TreeSelect/index.tsx
@@ -8,121 +8,126 @@ import ConfigConsumer from '../Config/Locale/Consumer';
 import { LocaleProperties } from '../Locale';
 
 import './style/index.less';
+import { useMemo } from 'react';
+
+
+const InternalTreeSelect:React.ForwardRefRenderFunction<unknown, TreeSelectProps> = (props, ref) => {
+  const {
+    prefixCls,
+    className,
+    size,
+    notFoundContent,
+    dropdownStyle,
+    dropdownClassName,
+    treeCheckable,
+    multiple,
+    editable,
+    ...restProps
+  } = props;
+  warning(
+    props.multiple !== false || !props.treeCheckable,
+    '`multiple` will alway be `true` when `treeCheckable` is true',
+  );
+  const treeRef = React.createRef<RcTreeSelect>();
+  React.useImperativeHandle(ref, () => {
+    return {
+      focus: treeRef.current?.focus(),
+      blur: treeRef.current?.blur(),
+    };
+  });
 
-export default class TreeSelect extends React.Component<TreeSelectProps, any> {
-  static TreeNode = TreeNode;
-
-  static SHOW_ALL = SHOW_ALL;
-
-  static SHOW_PARENT = SHOW_PARENT;
-
-  static SHOW_CHILD = SHOW_CHILD;
-
-  static defaultProps = {
-    autoClearSearchValue: false,
-    autoExpandParent: false,
-    choiceTransitionName: 'zoom',
-    editable: true,
-    esc: true,
-    required: false,
-    prefixCls: 'fishd-treeselect',
-    showCheckedStrategy: SHOW_PARENT,
-    showSearch: false,
-    tagWidth: 100,
-    transitionName: 'slide-up',
-    treeCheckStrictly: false,
-    placement: 'bottomLeft',
-    uniqueTreeNodeByLabel: false,
-    getPopupContainer: () => document.body,
-  };
-
-  private rcTreeSelect: any;
-
-  constructor(props: TreeSelectProps) {
-    super(props);
-
-    warning(
-      props.multiple !== false || !props.treeCheckable,
-      '`multiple` will alway be `true` when `treeCheckable` is true',
-    );
-  }
-
-  // i18n
-  genPropsByLocale = Locale => {
+  const genPropsByLocale = (Locale) => {
     const {
       placeholder = Locale.placeholder,
       searchPlaceholder = Locale.searchPlaceholder,
       treeNodeResetTitle = Locale.treeNodeResetTitle,
-    } = this.props;
+    } = props;
     return {
       searchPlaceholder,
       placeholder,
       treeNodeResetTitle,
     };
   };
 
-  focus() {
-    this.rcTreeSelect.focus();
-  }
-
-  blur() {
-    this.rcTreeSelect.blur();
-  }
-
-  saveTreeSelect = (node: typeof RcTreeSelect) => {
-    this.rcTreeSelect = node;
-  };
-
-  render() {
-    const {
-      prefixCls,
-      className,
-      size,
-      notFoundContent,
-      dropdownStyle,
-      dropdownClassName,
-      treeCheckable,
-      ...restProps
-    } = this.props;
-    const isEditableMul = (restProps.multiple || treeCheckable) && restProps.editable;
-
-    const cls = classNames(
-      {
-        [`${prefixCls}-ctner`]: true,
-        [`${prefixCls}-scroll`]: isEditableMul,
-        [`${prefixCls}-singleline`]: !isEditableMul,
-        [`${prefixCls}-lg`]: size === 'large',
-        [`${prefixCls}-sm`]: size === 'small',
-      },
-      className,
-    );
-
-    let checkable = treeCheckable;
-    if (checkable) {
-      checkable = <span className={`${prefixCls}-tree-checkbox-inner`} />;
-    }
-    return (
-      <ConfigConsumer componentName="TreeSelect">
-        {(Locale: LocaleProperties['TreeSelect']) => {
-          return (
-            <RcTreeSelect
-              {...restProps}
-              {...this.genPropsByLocale(Locale)}
-              dropdownClassName={classNames(dropdownClassName, `${prefixCls}-tree-dropdown`)}
-              prefixCls={prefixCls}
-              className={cls}
-              dropdownStyle={{
-                maxHeight: '100vh',
-                overflow: 'auto',
-                ...dropdownStyle,
-              }}
-              treeCheckable={checkable}
-              notFoundContent={notFoundContent}
-              ref={this.saveTreeSelect}
-            />
-          );
-        }}
-      </ConfigConsumer>
-    );
+  const isEditableMul = useMemo(() => {
+    return (multiple || treeCheckable) && editable;
+  }, [multiple, editable, treeCheckable]);
+
+
+  const cls = classNames(
+    {
+      [`${prefixCls}-ctner`]: true,
+      [`${prefixCls}-scroll`]: isEditableMul,
+      [`${prefixCls}-singleline`]: !isEditableMul,
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-sm`]: size === 'small',
+    },
+    className,
+  );
+
+  let checkable = treeCheckable;
+  if (checkable) {
+    checkable = <span className={`${prefixCls}-tree-checkbox-inner`} />;
   }
+  return (
+    <ConfigConsumer componentName="TreeSelect">
+      {(Locale: LocaleProperties['TreeSelect']) => {
+        return (
+          <RcTreeSelect
+            {...restProps}
+            {...genPropsByLocale(Locale)}
+            multiple={multiple}
+            editable={editable}
+            dropdownClassName={classNames(dropdownClassName, `${prefixCls}-tree-dropdown`)}
+            prefixCls={prefixCls}
+            className={cls}
+            dropdownStyle={{
+              maxHeight: '100vh',
+              overflow: 'auto',
+              ...dropdownStyle,
+            }}
+            treeCheckable={checkable}
+            notFoundContent={notFoundContent}
+            ref={treeRef}
+          />
+        );
+      }}
+    </ConfigConsumer>
+  );
+};
+const TreeSelectRef = React.forwardRef(InternalTreeSelect);
+
+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;
+
+TreeSelect.defaultProps = {
+  autoClearSearchValue: false,
+  autoExpandParent: false,
+  choiceTransitionName: 'zoom',
+  editable: true,
+  esc: true,
+  required: false,
+  prefixCls: 'fishd-treeselect',
+  showCheckedStrategy: SHOW_PARENT,
+  showSearch: false,
+  tagWidth: 100,
+  transitionName: 'slide-up',
+  treeCheckStrictly: false,
+  placement: 'bottomLeft',
+  uniqueTreeNodeByLabel: false,
+  getPopupContainer: () => document.body,
+};
+
+export default TreeSelect;
diff --git a/source/components/TreeSelect/interface.tsx b/source/components/TreeSelect/interface.tsx
@@ -83,4 +83,5 @@ export interface TreeSelectProps extends AbstractSelectProps {
   onReset?: (value: any) => void;
   onSearch?: (value: any) => void;
   onSelect?: (value: any) => void;
+  esc?: boolean;
 }