chore: remove unnecessary logic

react-component · Nov 6, 2024 · 4640c4d · 4640c4d
1 parent 5d29cc0
commit 4640c4d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 35 deletions.
diff --git a/examples/basic.tsx b/examples/basic.tsx
@@ -216,6 +216,7 @@ class Demo extends React.Component {
             console.log('onPopupScroll:', evt.target);
           }}
         />
+
         <h2>single select (just select children)</h2>
         <TreeSelect
           style={{ width: 300 }}
@@ -232,6 +233,7 @@ class Demo extends React.Component {
           filterTreeNode={false}
           onChange={this.onChangeChildren}
         />
+
         <h2>multiple select</h2>
         <TreeSelect
           style={{ width: 300 }}
@@ -247,6 +249,7 @@ class Demo extends React.Component {
           onSelect={this.onSelect}
           allowClear
         />
+
         <h2>check select</h2>
         <TreeSelect
           open
@@ -278,6 +281,7 @@ class Demo extends React.Component {
             return `${valueList.length} rest...`;
           }}
         />
+
         <h2>labelInValue & show path</h2>
         <TreeSelect
           style={{ width: 500 }}
@@ -295,6 +299,7 @@ class Demo extends React.Component {
           filterTreeNode={false}
           onChange={this.onChangeLV}
         />
+
         <h2>use treeDataSimpleMode</h2>
         <TreeSelect
           style={{ width: 300 }}
@@ -318,6 +323,7 @@ class Demo extends React.Component {
             this.onSelect(...args);
           }}
         />
+
         <h2>Testing in extreme conditions (Boundary conditions test) </h2>
         <TreeSelect
           style={{ width: 200 }}
@@ -341,6 +347,7 @@ class Demo extends React.Component {
           ]}
           onChange={(val, ...args) => console.log(val, ...args)}
         />
+
         <h2>use TreeNode Component (not recommend)</h2>
         <TreeSelect
           style={{ width: 200 }}
@@ -377,6 +384,7 @@ class Demo extends React.Component {
           </TreeNode>
           <TreeNode value="same value3" title="same title" key="0-3" />
         </TreeSelect>
+
         <h2>title render</h2>
         <TreeSelect<{ label: string }>
           open

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
@@ -10,7 +10,6 @@ import LegacyContext from './LegacyContext';
 import TreeSelectContext from './TreeSelectContext';
 import type { Key, SafeKey } from './interface';
 import { getAllKeys, isCheckDisabled } from './utils/valueUtil';
-import { flattenTreeData } from 'rc-tree/lib/utils/treeUtil';
 
 const HIDDEN_STYLE = {
   width: 0,
@@ -77,10 +76,6 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     (prev, next) => next[0] && prev[1] !== next[1],
   );
 
-  // ========================== Active Key ==========================
-  const [activeKey, setActiveKey] = React.useState<Key>(null);
-  const activeEntity = keyEntities[activeKey as SafeKey];
-
   // ========================== Values ==========================
   const mergedCheckedKeys = React.useMemo(() => {
     if (!checkable) {
@@ -93,7 +88,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     };
   }, [checkable, checkedKeys, halfCheckedKeys]);
 
-  // ========================== Scroll Effect ==========================
+  // ========================== Scroll ==========================
   React.useEffect(() => {
     // Single mode should scroll to current key
     if (open && !multiple && checkedKeys.length) {
@@ -123,15 +118,6 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     }
   };
 
-  // ========================== Search ==========================
-  const lowerSearchValue = String(searchValue).toLowerCase();
-  const filterTreeNode = (treeNode: EventDataNode<any>) => {
-    if (!lowerSearchValue) {
-      return false;
-    }
-    return String(treeNode[treeNodeFilterProp]).toLowerCase().includes(lowerSearchValue);
-  };
-
   // =========================== Keys ===========================
   const [expandedKeys, setExpandedKeys] = React.useState<Key[]>(treeDefaultExpandedKeys);
   const [searchExpandedKeys, setSearchExpandedKeys] = React.useState<Key[]>(null);
@@ -152,7 +138,15 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     }
   };
 
-  // ========================== Search Effect ==========================
+  // ========================== Search ==========================
+  const lowerSearchValue = String(searchValue).toLowerCase();
+  const filterTreeNode = (treeNode: EventDataNode<any>) => {
+    if (!lowerSearchValue) {
+      return false;
+    }
+    return String(treeNode[treeNodeFilterProp]).toLowerCase().includes(lowerSearchValue);
+  };
+
   React.useEffect(() => {
     if (searchValue) {
       setSearchExpandedKeys(getAllKeys(treeData, fieldNames));
@@ -161,25 +155,14 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
   }, [searchValue]);
 
   // ========================== Get First Selectable Node ==========================
-  const getFirstMatchingNode = (
-    nodes: EventDataNode<any>[],
-    searchVal?: string,
-  ): EventDataNode<any> | null => {
+  const getFirstMatchingNode = (nodes: EventDataNode<any>[]): EventDataNode<any> | null => {
     for (const node of nodes) {
-      if (node.disabled || node.selectable === false) {
-        continue;
-      }
-
-      if (searchVal) {
-        if (filterTreeNode(node)) {
-          return node;
-        }
-      } else {
+      if (!node.disabled && node.selectable !== false) {
         return node;
       }
 
       if (node[fieldNames.children]) {
-        const matchInChildren = getFirstMatchingNode(node[fieldNames.children], searchVal);
+        const matchInChildren = getFirstMatchingNode(node[fieldNames.children]);
         if (matchInChildren) {
           return matchInChildren;
         }
@@ -188,16 +171,18 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     return null;
   };
 
-  // ========================== Active Key Effect ==========================
+  // ========================== Active ==========================
+  const [activeKey, setActiveKey] = React.useState<Key>(null);
+  const activeEntity = keyEntities[activeKey as SafeKey];
+
   React.useEffect(() => {
     if (!open) {
-      setActiveKey(null);
       return;
     }
 
-    // Prioritize activating the searched node
+    // // Prioritize activating the searched node
     if (searchValue) {
-      const firstNode = getFirstMatchingNode(treeData, searchValue);
+      const firstNode = getFirstMatchingNode(memoTreeData);
       setActiveKey(firstNode ? firstNode[fieldNames.value] : null);
       return;
     }
@@ -209,7 +194,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     }
 
     // If no search value and no checked nodes, activate the first node
-    const firstNode = getFirstMatchingNode(treeData);
+    const firstNode = getFirstMatchingNode(memoTreeData);
     setActiveKey(firstNode ? firstNode[fieldNames.value] : null);
   }, [open, searchValue]);