feat(Transfer): 增加选项搜索功能 (#667)

uiwjs · Mar 15, 2022 · 9847ee0 · 9847ee0
1 parent 6223c70
commit 9847ee0
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 12 deletions.
diff --git a/packages/react-transfer/README.md b/packages/react-transfer/README.md
@@ -71,7 +71,6 @@ const options = [
 
   return (
     <Row style={{ flexDirection:'column' }} >
-      <span style={{margin:'10px 0px 10px 0px'}}>树形节点</span>
       <Transfer
         options={options}
         value={value}
@@ -86,6 +85,58 @@ const options = [
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+## 搜索选项
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React from 'react';
+import { Transfer } from 'uiw';
+
+function Demo() {
+const options = [
+    {
+      label: '武汉市',
+      key: 1,
+      children: [
+        { label: '新洲区', key: 2, disabled: true },
+        { label: '武昌区', key: 3 },
+        {
+          label: '汉南区',
+          key: 4,
+          children: [
+            { label: '汉南区1', key: 5 },
+            { label: '汉南区2', key: 6 },
+            { label: '汉南区3', key: 7 },
+          ]
+        },
+      ]
+    }
+  ];
+
+  const [value,valueSet] = React.useState([
+    { label: '武昌区', key: 3 },
+    { label: '汉南区1', key: 5 },
+    { label: '汉南区2', key: 6 },
+  ])
+
+  return (
+    <Row style={{ flexDirection:'column' }} >
+      <Transfer
+        options={options}
+        showSearch={true}
+        placeholder="搜索内容"
+        value={value}
+        onChange={(transfer,option)=>{
+          valueSet(option)
+        }}
+      />
+    </Row>
+  );
+}
+
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## Form中使用
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
@@ -190,3 +241,6 @@ ReactDOM.render(<Demo />, _mount_);
 | onChange | 点击穿梭时回调 | (arrow, selectkeys) => void | - |
 | value | 指定当前选中的条目 | [{label, key }] | - |
 | options | 下拉数据源,可参考Tree下拉数据源 | [{ label, key, children: [{label, key}] }] | - |
+| showSearch | 启用搜索 | boolean | false |
+| placeholder | 搜索输入框文字 | string | - |
+| onSearch | 搜索时回调函数 |  (arrow, searchValue) => void | - |
diff --git a/packages/react-transfer/src/index.tsx b/packages/react-transfer/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { IProps } from '@uiw/utils';
 import Card from '@uiw/react-card';
 import Icon from '@uiw/react-icon';
-import Input from '@uiw/react-Input';
+import Input from '@uiw/react-input';
 import TreeChecked from '@uiw/react-tree-checked';
 import { TreeData } from '@uiw/react-tree';
 import './style/index.less';
@@ -17,7 +17,7 @@ interface TransferProps extends IProps {
   bodyStyle?: React.CSSProperties;
 
   onChange?: (transfer: string, selectedAll: Array<TransferOptionType>) => void;
-  onSearch?: (seachValue: string) => void;
+  onSearch?: (transfer: string, seachValue: string) => void;
   showSearch?: boolean;
   value?: Array<TransferOptionType>;
   options?: TreeData[];
@@ -44,7 +44,7 @@ function Transfer(props: TransferProps) {
   const [selectOption, selectOptionSet] = useState<Map<string | number, string>>(new Map());
   const [leftSelectedKeys, leftSelectedKeySet] = useState<Array<string | number | undefined>>([]);
   const [rightSelectedKeys, rightSelectedKeySet] = useState<Array<string | number | undefined>>([]);
-  const [rightOpions, rightOpionSet] = useState<Array<TransferOptionType>>([]);
+  const [rightOpions, rightOpionSet] = useState<Array<TreeData>>([]);
 
   useEffect(() => {
     leftSelectedKeySet([]);
@@ -86,7 +86,7 @@ function Transfer(props: TransferProps) {
   const rightTreeOnSelected = (
     selectedKeys: Array<string | number | undefined>,
     _1: any,
-    isChecked: boolean,
+    _2: boolean,
     evn: TreeData,
   ) => {
     rightSelectedKeySet(selectedKeys);
@@ -129,18 +129,38 @@ function Transfer(props: TransferProps) {
     props.onChange?.(transferType, option);
   };
 
-  const searchValueLeftChange = (vlaue: string) => {
-    searchValueLeftSet(vlaue);
+  const searchValueLeftChange = (searchValue: string) => {
+    hiddenNode((child: TreeData) => {
+      let searchIsMatch = !(child.label as string).includes(searchValue.trim());
+      if (!searchIsMatch) {
+        const isSekected = rightOpions.find((selected) => selected.key === child.key);
+        searchIsMatch = !!isSekected;
+      }
+      return searchIsMatch;
+    });
+
+    searchValueLeftSet(searchValue);
+
+    props.onSearch?.('left', searchValue);
   };
 
-  const searchValueRightChange = (vlaue: string) => {
-    searchValueRightSet(vlaue);
+  const searchValueRightChange = (searchValue: string) => {
+    searchValueRightSet(searchValue);
+
+    rightOpions.forEach((option) => {
+      const isHide = !(option.label as string).includes(searchValue.trim());
+      option.hideNode = isHide;
+    });
+    console.log('rightOpions', rightOpions);
+    rightOpionSet(rightOpions);
+
+    props.onSearch?.('right', searchValue);
   };
 
   return (
     <div className={cls} style={{ width: 400, ...style }}>
       <Card
-        bodyStyle={{ padding: '5px 0px 5px 5px' }}
+        bodyStyle={{ padding: 5 }}
         title={`${leftSelectedKeys.length}/${selectedOptions.length}`}
         className={`${prefixCls}-card`}
       >
@@ -153,6 +173,7 @@ function Transfer(props: TransferProps) {
         )}
         <div className={`${prefixCls}-cheked-content`}>
           <TreeChecked
+            defaultExpandAll={true}
             placeholder={placeholder || '搜索选项'}
             data={selectedOptions}
             selectedKeys={leftSelectedKeys}
@@ -175,13 +196,13 @@ function Transfer(props: TransferProps) {
         />
       </div>
       <Card
-        bodyStyle={{ padding: '5px 0px 5px 0px' }}
+        bodyStyle={{ padding: 5 }}
         className={`${prefixCls}-card`}
         title={`${rightSelectedKeys.length}/${rightOpions.length}`}
       >
         {showSearch && (
           <Input
-            placeholder={placeholder || '搜索选项'}
+            placeholder={placeholder}
             value={searchValueRight}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => searchValueRightChange(e.target.value)}
           />