fix(SearchTree): 操作流程优化 #629 #631 (#636)

uiwjs · Mar 8, 2022 · d10344f · d10344f
1 parent 99f4007
commit d10344f
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 16 deletions.
diff --git a/packages/react-modal/src/style/index.less b/packages/react-modal/src/style/index.less
@@ -1,7 +1,7 @@
 @modal: ~'w-modal';
 
 .@{modal} {
-  z-index: 990;
+  z-index: 1001;
   &-inner {
     padding-bottom: 20px;
     background: #f9f9f9;

diff --git a/packages/react-overlay-trigger/src/index.tsx b/packages/react-overlay-trigger/src/index.tsx
@@ -97,7 +97,7 @@ export default React.forwardRef<OverlayTriggerRef, OverlayTriggerProps>((props,
     ...other
   } = props;
 
-  const zIndex = useRef<number>(990);
+  const zIndex = useRef<number>(999);
   const triggerRef = useRef<HTMLElement>();
   const popupRef = useRef<HTMLElement>();
   const timeoutRef = useRef<number[]>([]);

diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
@@ -58,22 +58,36 @@ const data = [
   },
   { label: '澳门', key: '3' },
 ];
+
+const datas =[
+  { label: '上海市',  key: 0 },
+  { label: '北京市',  key: 1 },
+  { label: '成都市',  key: 2 },
+]
+
 const Demo = () => {
 
 const [value,valueSet]=useState([{ label: '东花市街道', key: '2-3-1' }])
+const [values,valuesSet]=useState([{ label: '北京市', key: 1 }])
 const [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])
 
 const onChange=(selectd, selectedAll,  isChecked)=>{
   console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)
   valueSet(selectedAll)
 }
 
+const onChanges=(selectd, selectedAll,  isChecked)=>{
+  console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)
+  valuesSet(selectedAll)
+}
+
 const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
   console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)
   valueSingeSet(selectedAll)
 }
 
  return (
+   <>
     <Row>
       <Col >
         <label>多选</label>
@@ -87,8 +101,22 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
           placeholder="请输入选择"
         />
       </Col>
-      <Col >
-        <label>单选</label>
+    </Row>
+    <label>单选</label>
+    <Row>
+      <Col>
+        <SearchTree
+          style={{width:400}}
+          multiple={false}
+          allowClear={true}
+          onSearch={(searchValue)=>console.log('singe',searchValue)}
+          onChange={onChanges}
+          value={values}
+          options={datas}
+          placeholder="请输入选择"
+        />
+      </Col>
+      <Col>
         <SearchTree
           style={{width:400}}
           multiple={false}
@@ -100,8 +128,8 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
           placeholder="请输入选择"
         />
       </Col>
-
     </Row>
+  </>
   )
 }
 ReactDOM.render(<Demo />, _mount_);
@@ -202,7 +230,6 @@ const form=useRef()
           return null;
         }}
         onSubmit={({initial, current}) => {
-          console.log('current',current)
           const errorObj = {};
           if (!current.searchTree) {
             errorObj.searchTree = '默认需要选择内容，选择入内容';

diff --git a/packages/react-search-tree/src/SearchTagInput.tsx b/packages/react-search-tree/src/SearchTagInput.tsx
@@ -29,6 +29,7 @@ export interface SearchTagInputProps<V> extends IProps, DropdownProps, DropConte
   loading?: boolean;
   placeholder?: string;
   emptyOption?: boolean | React.ReactNode;
+  selectCloseDrop?: boolean;
 }
 
 function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputProps<V>) {
@@ -39,6 +40,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
     disabled = false,
     allowClear = false,
     loading = false,
+    selectCloseDrop = false,
     className,
     style,
     placeholder,
@@ -74,7 +76,8 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
   const handleSelectChange = (selectedAll: Array<V>, selectd?: V, isChecked: boolean = true) => {
     setSelectedOption(selectedAll);
 
-    onChange && onChange(selectedAll, selectd!, isChecked);
+    searchValueChange('');
+    onChange?.(selectedAll, selectd!, isChecked);
   };
 
   const removeSelectItem = (index: number) => {
@@ -85,11 +88,16 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
   };
 
   function handleInputChange(value: string) {
-    searchValueSet(value);
-    onSearch?.(value);
+    setInnerIsOpen(true);
+    searchValueChange(value);
     setSelectIconType(value ? 'loading' : '');
   }
 
+  const searchValueChange = (value: string) => {
+    searchValueSet(value);
+    onSearch?.(value);
+  };
+
   // 清除选中的值
   function resetSelectedValue(e: any) {
     e.stopPropagation();
@@ -112,18 +120,24 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
 
     const newProps = {
       ...content.props,
-      onSelected: handleSelectChange,
+      onSelected: (selectedAll: Array<V>, selectd?: V, isChecked: boolean = true) => {
+        setInnerIsOpen(!selectCloseDrop);
+        handleSelectChange(selectedAll, selectd, isChecked);
+      },
       values: selectedOption,
       options,
     };
     return React.cloneElement(content as JSX.Element, newProps);
-  }, [JSON.parse(JSON.stringify(selectedOption)), options, emptyOption]);
+  }, [JSON.stringify(selectedOption), options, emptyOption]);
 
   return (
     <Dropdown
       className={cls}
-      trigger="focus"
-      {...others}
+      trigger="click"
+      onVisibleChange={(isOpen: boolean) => {
+        setInnerIsOpen(isOpen);
+        if (!isOpen) searchValueChange('');
+      }}
       isOpen={innerIsOpen}
       menu={<Card bodyStyle={emptyOption === true ? { padding: 0 } : undefined}>{newContent}</Card>}
     >

diff --git a/packages/react-search-tree/src/index.tsx b/packages/react-search-tree/src/index.tsx
@@ -72,7 +72,7 @@ function SingeTree<V extends SearchTagInputOption>(props: Omit<TreeProps, 'onSel
   const onSelected = (_1: any, _2: any, isChecked: boolean, evn: TreeData) => {
     const { key, label } = evn;
     const cur = { key, label } as V;
-    props.onSelected?.([cur], cur, isChecked);
+    props.onSelected?.(isChecked ? [cur] : [], cur, isChecked);
   };
 
   return (
@@ -158,7 +158,8 @@ function SearchTree<V extends SearchTagInputOption>(props: SearchTreeProps<V>) {
     <SearchTagInput
       {...other}
       emptyOption={isEmpty}
-      onSearch={debounce(selectedSearch, 600)}
+      selectCloseDrop={!multiple}
+      onSearch={selectedSearch}
       onChange={selectedChange}
       values={selectedValues}
       options={selectedOptions}

diff --git a/packages/react-tree/src/index.tsx b/packages/react-tree/src/index.tsx
@@ -193,7 +193,7 @@ export default function Tree(props: TreeProps) {
     let selKeys = [...(curSelectedKeys as TreeData['key'][])];
     const findKey = selKeys.find((v) => v === item.key);
     let selected = false;
-    if (!findKey) {
+    if (!findKey && findKey !== 0) {
       selected = true;
       selKeys.push(item.key);
     } else {