fix(Tree): 修复数字key无法被选中问题& 节点key为0时children无法渲染 &增加示例文档 (#647)

uiwjs · Mar 9, 2022 · 418c7a4 · 418c7a4
1 parent 04439ff
commit 418c7a4
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 23 deletions.
diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
@@ -24,39 +24,39 @@ import {  SearchTree } from 'uiw';
 const data = [
   {
     label: '上海市',
-    key: '1-0-0',
+    key: 1,
     children:[
-      { label: '黄浦区', key: '1-0-1' },
-      { label: '卢湾区', key: '1-0-2' },
+      { label: '黄浦区', key: 2 },
+      { label: '卢湾区', key: 3 },
       {
         label: '徐汇区',
-        key: '1-0-3',
+        key: 4,
         children:[
-          { label: '半淞园路街道', key: '1-1-0' },
-          { label: '南京东路街道', key: '1-2-0' },
-          { label: '外滩街道', key: '1-3-0' },
+          { label: '半淞园路街道', key: 6 },
+          { label: '南京东路街道', key: 7 },
+          { label: '外滩街道', key: 8 },
         ]
       },
     ]
   },
   {
     label: '北京市',
-    key: '2-0-0',
+    key: 9,
     children:[
-      { label: '东城区', key: '2-1-0' },
-      { label: '西城区', key: '2-2-0' },
+      { label: '东城区', key: 10 },
+      { label: '西城区', key: 11 },
       {
         label: '崇文区',
-        key: '2-3-0',
+        key: 12,
         children:[
-          { label: '东花市街道', key: '2-3-1' },
-          { label: '体育馆路街道', key: '2-3-2' },
-          { label: '前门街道', key: '2-3-3' },
+          { label: '东花市街道', key: 13 },
+          { label: '体育馆路街道', key: 14 },
+          { label: '前门街道', key: 15 },
         ]
       },
     ]
   },
-  { label: '澳门', key: '3' },
+  { label: '澳门', key: 16 },
 ];
 
 const datas =[
@@ -67,7 +67,7 @@ const datas =[
 
 const Demo = () => {
 
-const [value,valueSet]=useState([{ label: '东花市街道', key: '2-3-1' }])
+const [value,valueSet]=useState([{ label: '黄浦区', key: 12 }])
 const [values,valuesSet]=useState([{ label: '北京市', key: 1 }])
 const [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])
 
@@ -92,7 +92,7 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
       <Col >
         <label>多选</label>
         <SearchTree
-          style={{width:400}}
+          style={{ width:400 }}
           allowClear={true}
           onSearch={(searchValue)=>console.log('multiple',searchValue)}
           onChange={onChange}

diff --git a/packages/react-search-tree/src/SearchTagInput.tsx b/packages/react-search-tree/src/SearchTagInput.tsx
@@ -128,7 +128,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
       options,
     };
     return React.cloneElement(content as JSX.Element, newProps);
-  }, [JSON.stringify(selectedOption), options, emptyOption]);
+  }, [JSON.parse(JSON.stringify(selectedOption)), options, emptyOption]);
 
   return (
     <Dropdown

diff --git a/packages/react-search-tree/src/index.tsx b/packages/react-search-tree/src/index.tsx
@@ -3,7 +3,7 @@ import SearchTagInput, { DropContent, SearchTagInputOption } from './SearchTagIn
 import Tree, { TreeData, TreeProps } from '@uiw/react-tree';
 import TreeChecked, { TreeCheckedProps } from '@uiw/react-tree-checked';
 
-type SelectOtpion = Record<string, string>;
+type SelectOtpion = Record<string | number, string>;
 
 // type TreeCheckedsProps = TreeCheckedProps & Partial<DropContent<SearchTagInputOption>>
 function TreeCheckeds<V extends SearchTagInputOption>(
@@ -22,9 +22,13 @@ function TreeCheckeds<V extends SearchTagInputOption>(
     keysSet(keys || []);
   }, [props.values]);
 
-  const onSelected = (_1: any, _2: any, isChecked: boolean, evn: TreeData) => {
+  const onSelected = (_: any, item: any, isChecked: boolean, evn: TreeData) => {
     const curSelectOption: SelectOtpion = getOptionsRecursion([evn], selectOption, isChecked);
-    const option = Object.entries(curSelectOption).map(([key, label]) => ({ key, label } as V));
+    let isNumberKey = false;
+    if (typeof item === 'number') isNumberKey = true;
+    const option = Object.entries(curSelectOption).map(
+      ([key, label]) => ({ key: isNumberKey ? Number.parseInt(key) : key, label } as V),
+    );
     props.onSelected?.(option, { key: evn.key, label: evn.label as string } as V, isChecked);
   };
 

diff --git a/packages/react-tree/src/TreeNode.tsx b/packages/react-tree/src/TreeNode.tsx
@@ -49,7 +49,7 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
   } = props;
   let isOpen = false;
 
-  if (parent && parent.key) {
+  if (parent && (parent.key || parent.key === 0)) {
     isOpen = !!(openKeys && openKeys.indexOf(parent.key) > -1);
   }
   const onExit = useCallback((node: HTMLElement) => {

diff --git a/packages/react-tree/src/index.tsx b/packages/react-tree/src/index.tsx
@@ -45,7 +45,7 @@ export interface TreeProps extends IProps, Omit<HTMLDivProps, 'onChange'> {
     item: TreeData,
     evn: React.MouseEvent<HTMLElement>,
   ) => void;
-  onChange?: (key: string | number, eys: (string | number | undefined)[]) => void;
+  onChange?: (key: string | number | undefined, eys: (string | number | undefined)[]) => void;
   value?: TreeData['key'][];
 }