fix(SearchTree): 增加下拉选项为空时展示内容 #584 (#586)

uiwjs · Mar 2, 2022 · 7ccdb57 · 7ccdb57
1 parent 099d488
commit 7ccdb57
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
@@ -67,18 +67,40 @@ const onChange=(selectd, selectedAll,  isChecked)=>{
   valueSet(selectedAll)
 }
 
- return (<SearchTree
-    allowClear={true}
-    onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
-    onChange={onChange}
-    value={value}
-    options={data}
-    placeholder="请输入选择"
-  />)
+ return (
+    <>
+       <SearchTree
+        allowClear={true}
+        onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
+        onChange={onChange}
+        value={value}
+        options={data}
+        placeholder="请输入选择"
+      />
+    </>
+  )
 }
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+## 自定义空选项
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React, { useState, useEffect, useRef } from 'react';
+import {  SearchTree } from 'uiw';
+
+const Demo = () => {
+  return(
+    <>
+      <SearchTree style={{ width:200 }} />
+      <SearchTree style={{ width:200,marginTop:5 }} emptyOption={<span>暂无数据..</span>} placeholder="请输入选择"/>
+    </>
+  )
+}
+
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## Form中使用
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
@@ -222,4 +244,5 @@ ReactDOM.render(<Demo />, _mount_);
 | onChange | 选中 option，或 input 的 value，调用此函数 | function(selectd, selectdAll, isChecked)=>void | - |
 | onSearch | 文本框值变化时回调 | function(searchValue) | - |
 | loading | 加载中状态 | Boolean | `false` |
+| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |
 
diff --git a/packages/react-search-tree/package.json b/packages/react-search-tree/package.json
@@ -46,6 +46,7 @@
     "@uiw/react-card": "^4.13.3",
     "@uiw/react-checkbox": "^4.13.3",
     "@uiw/react-dropdown": "^4.13.3",
+    "@uiw/react-empty": "^4.13.3",
     "@uiw/react-icon": "^4.13.3",
     "@uiw/react-input": "^4.13.3",
     "@uiw/react-tag": "^4.13.3",

diff --git a/packages/react-search-tree/src/SearchTagInput.tsx b/packages/react-search-tree/src/SearchTagInput.tsx
@@ -4,6 +4,7 @@ import Icon from '@uiw/react-icon';
 import Input from '@uiw/react-input';
 import Tag from '@uiw/react-tag';
 import Card from '@uiw/react-card';
+import Empty from '@uiw/react-empty';
 import { IProps } from '@uiw/utils';
 import './style/index.less';
 
@@ -27,6 +28,7 @@ export interface SearchTagInputProps<V> extends IProps, DropdownProps, DropConte
   // mode?: 'single' | 'multiple';
   loading?: boolean;
   placeholder?: string;
+  emptyOption?: boolean | React.ReactNode;
 }
 
 function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputProps<V>) {
@@ -46,6 +48,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
     values,
     onChange,
     onSearch,
+    emptyOption,
     ...others
   } = props;
 
@@ -88,7 +91,8 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
   }
 
   // 清除选中的值
-  function resetSelectedValue() {
+  function resetSelectedValue(e: any) {
+    e.stopPropagation();
     setInnerIsOpen(false);
     setSelectedOption([]);
     handleInputChange('');
@@ -102,14 +106,18 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
   }
 
   const newContent = useMemo(() => {
+    if (emptyOption) {
+      return typeof emptyOption === 'boolean' ? <Empty style={{ minWidth: 200, width: style?.width }} /> : emptyOption;
+    }
+
     const newProps = {
       ...content.props,
       onSelected: handleSelectChange,
       values: selectedOption,
       options,
     };
     return React.cloneElement(content as JSX.Element, newProps);
-  }, [selectedOption, options]);
+  }, [selectedOption, options, emptyOption]);
 
   return (
     <Dropdown className={cls} trigger="focus" {...others} isOpen={innerIsOpen} menu={<Card>{newContent}</Card>}>

diff --git a/packages/react-search-tree/src/index.tsx b/packages/react-search-tree/src/index.tsx
@@ -65,12 +65,14 @@ export interface SearchTreeProps<V> {
   value?: Array<V>;
   options?: TreeData[];
   treeProps?: Omit<TreeCheckedProps, 'onSelected'> & Partial<DropContent<V>>;
+  emptyOption?: React.ReactNode;
 }
 
 function SearchTree<V extends SearchTagInputOption>(props: SearchTreeProps<V>) {
-  const { onChange, onSearch, options = [], value = [], treeProps, ...other } = props;
+  const { onChange, onSearch, options = [], value = [], emptyOption = !options.length, treeProps, ...other } = props;
   const [selectedValues, selectedValuesSet] = useState<Array<V>>(value);
   const [selectedOptions, selectedOptionSet] = useState<Array<TreeData>>(options);
+  const [isEmpty, isEmptySet] = useState(emptyOption);
 
   useEffect(() => {
     selectedValuesSet(value);
@@ -109,11 +111,17 @@ function SearchTree<V extends SearchTagInputOption>(props: SearchTreeProps<V>) {
     };
     hiddenNodeForSeach(options);
     selectedOptionSet([...options]);
+
+    let isEmpt = true;
+    options.forEach((opt) => (isEmpt = isEmpt && !!opt.hideNode));
+    isEmptySet(isEmpt);
+    console.log('isEmpt', isEmpt);
   };
 
   return (
     <SearchTagInput
       {...other}
+      emptyOption={isEmpty}
       onSearch={debounce(selectedSearch, 700)}
       onChange={selectedChange}
       values={selectedValues}