chore: Use const to support generic

Author: zombieJ

src/generate.tsx

@@ -162,6 +162,9 @@ export default function generate(config: {
 
   RefSelect.displayName = 'Select';
 
+  // =================================================================================
+  // =                                      Tree                                     =
+  // =================================================================================
   const RefTreeSelect = React.forwardRef<RefSelectProps, TreeSelectProps>((props, ref) => {
     const {
       multiple,
@@ -198,15 +201,6 @@ export default function generate(config: {
     const treeConduction = treeCheckable && !treeCheckStrictly;
     const mergedLabelInValue = treeCheckStrictly || labelInValue;
 
-    // ========================== Ref ==========================
-    const selectRef = React.useRef<RefSelectProps>(null);
-
-    React.useImperativeHandle(ref, () => ({
-      scrollTo: selectRef.current.scrollTo,
-      focus: selectRef.current.focus,
-      blur: selectRef.current.blur,
-    }));
-
     // ======================= Tree Data =======================
     // Legacy both support `label` or `title` if not set.
     // We have to fallback to function to handle this
@@ -242,6 +236,18 @@ export default function generate(config: {
       return { keyEntities: null };
     }, [mergedTreeData, treeCheckable, treeCheckStrictly]);
 
+    // ========================== Ref ==========================
+    const selectRef = React.useRef<RefSelectProps>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      scrollTo: selectRef.current.scrollTo,
+      focus: selectRef.current.focus,
+      blur: selectRef.current.blur,
+
+      /** @private Internal usage. It's save to remove if `rc-cascader` not use it any longer */
+      getEntityByValue,
+    }));
+
     // ========================= Value =========================
     const [value, setValue] = useMergedState<DefaultValueType>(props.defaultValue, {
       value: props.value,
@@ -569,32 +575,24 @@ export default function generate(config: {
     );
   });
 
-  // Use class component since typescript not support generic
-  // by `forwardRef` with function component yet.
-  return class TreeSelect<ValueType = DefaultValueType> extends React.Component<
-    TreeSelectProps<ValueType>,
-    {}
-  > {
-    static TreeNode = TreeNode;
-
-    static SHOW_ALL: typeof SHOW_ALL = SHOW_ALL;
-
-    static SHOW_PARENT: typeof SHOW_PARENT = SHOW_PARENT;
-
-    static SHOW_CHILD: typeof SHOW_CHILD = SHOW_CHILD;
-
-    selectRef = React.createRef<RefSelectProps>();
-
-    focus = () => {
-      this.selectRef.current.focus();
-    };
+  // =================================================================================
+  // =                                    Generic                                    =
+  // =================================================================================
+  const TreeSelect = RefTreeSelect as any as (<ValueType = DefaultValueType>(
+    props: React.PropsWithChildren<TreeSelectProps<ValueType>> & {
+      ref?: React.Ref<RefSelectProps>;
+    },
+  ) => React.ReactElement) & {
+    TreeNode: typeof TreeNode;
+    SHOW_ALL: typeof SHOW_ALL;
+    SHOW_PARENT: typeof SHOW_PARENT;
+    SHOW_CHILD: typeof SHOW_CHILD;
+  };
 
-    blur = () => {
-      this.selectRef.current.blur();
-    };
+  TreeSelect.TreeNode = TreeNode;
+  TreeSelect.SHOW_ALL = SHOW_ALL;
+  TreeSelect.SHOW_PARENT = SHOW_PARENT;
+  TreeSelect.SHOW_CHILD = SHOW_CHILD;
 
-    render() {
-      return <RefTreeSelect ref={this.selectRef} {...this.props} />;
-    }
-  };
+  return TreeSelect;
 }

src/interface.ts

@@ -50,6 +50,7 @@ export interface FlattenDataNode {
   data: DataNode;
   key: Key;
   level: number;
+  parent?: FlattenDataNode;
 }
 
 export interface SimpleModeConfig {

src/utils/valueUtil.ts

@@ -86,11 +86,32 @@ export function flattenOptions(options: DataNode[]): FlattenDataNode[] {
 
   const flattenList = flattenTreeData(fillKey(options), true);
 
-  return flattenList.map((node) => ({
-    key: node.data.key,
-    data: node.data,
-    level: getLevel(node),
-  }));
+  const cacheMap = new Map<React.Key, FlattenDataNode>();
+  const flattenDateNodeList: (FlattenDataNode & { parentKey?: React.Key })[] = flattenList.map(
+    (node) => {
+      const { data } = node;
+      const { key } = data;
+
+      const flattenNode = {
+        key,
+        data,
+        level: getLevel(node),
+        parentKey: node.parent?.data.key,
+      };
+
+      cacheMap.set(key, flattenNode);
+
+      return flattenNode;
+    },
+  );
+
+  // Fill parent
+  flattenDateNodeList.forEach((flattenNode) => {
+    // eslint-disable-next-line no-param-reassign
+    flattenNode.parent = cacheMap.get(flattenNode.parentKey);
+  });
+
+  return flattenDateNodeList;
 }
 
 function getDefaultFilterOption(optionFilterProp: string) {

tests/shared/focusTest.js

@@ -18,45 +18,36 @@ export default function focusTest(mode) {
   it('focus()', () => {
     const handleFocus = jest.fn();
     const treeData = [{ key: '0', value: '0', title: '0 label' }];
-    const wrapper = mount(
-      <TreeSelect
-        {...{ [mode]: true }}
-        onFocus={handleFocus}
-        treeData={treeData}
-      />,
+    const treeRef = React.createRef();
+
+    mount(
+      <TreeSelect {...{ [mode]: true }} onFocus={handleFocus} treeData={treeData} ref={treeRef} />,
       { attachTo: container },
     );
 
-    wrapper.instance().focus();
+    treeRef.current.focus();
     expect(handleFocus).toHaveBeenCalled();
   });
 
   it('blur()', () => {
     const handleBlur = jest.fn();
     const treeData = [{ key: '0', value: '0', title: '0 label' }];
-    const wrapper = mount(
-      <TreeSelect
-        {...{ [mode]: true }}
-        onBlur={handleBlur}
-        treeData={treeData}
-      />,
+    const treeRef = React.createRef();
+
+    mount(
+      <TreeSelect {...{ [mode]: true }} onBlur={handleBlur} treeData={treeData} ref={treeRef} />,
       { attachTo: container },
     );
-    wrapper.instance().focus();
-    wrapper.instance().blur();
+    treeRef.current.focus();
+    treeRef.current.blur();
     expect(handleBlur).toHaveBeenCalled();
   });
 
   it('autoFocus', () => {
     const handleFocus = jest.fn();
     const treeData = [{ key: '0', value: '0', title: '0 label' }];
     mount(
-      <TreeSelect
-        {...{ [mode]: true }}
-        autoFocus
-        onFocus={handleFocus}
-        treeData={treeData}
-      />,
+      <TreeSelect {...{ [mode]: true }} autoFocus onFocus={handleFocus} treeData={treeData} />,
       { attachTo: container },
     );
     expect(handleFocus).toHaveBeenCalled();