fix(SearchSelect): 优化操作流程 (#645)

uiwjs · Mar 9, 2022 · 27be03e · 27be03e
1 parent 3a615e4
commit 27be03e
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 41 deletions.
diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
@@ -8,7 +8,7 @@ SearchSelect 搜索选择器
 搜索选择器
 
 ```jsx
-import { SearchSelect } from 'uiw';
+import { SearchSelect, Row ,Col } from 'uiw';
 // or
 import SearchSelect from '@uiw/react-search-select';
 ```
@@ -18,7 +18,7 @@ import SearchSelect from '@uiw/react-search-select';
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import ReactDOM from 'react-dom';
-import { SearchSelect } from 'uiw';
+import { SearchSelect,Row,Col } from 'uiw';
 
 const Demo = () => {
   const selectOption=[
@@ -34,34 +34,63 @@ const Demo = () => {
 
   const [option, setOption] = React.useState(selectOption);
   const [loading, setLoading] = React.useState(false);
-  const [value, setValue] = React.useState([{label: 'a8', value: 8}]);
+  const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]);
+  const [value, setValue] = React.useState([{label: 'a7', value: 7}]);
+
   function handleSearch(e) {
     setLoading(true)
     setTimeout(() =>  {
-      setOption();
+     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
+      setOption([...filterOpion]);
       setLoading(false);
-    }, 2000);
+    }, 500);
   }
+
   return(
-    <SearchSelect
-      mode="multiple"
-      style={{ width: 176 }}
-      showSearch={true}
-      labelInValue={true}
-      maxTagCount={6}
-      allowClear
-      value={value}
-      disabled={false}
-      placeholder="请输入选择"
-      onSearch={handleSearch}
-      // onSelect={(value)=>console.log('onSelect',value)}
-      loading={loading}
-      option={option}
-      onChange={(value) => {
-        console.log('value',value)
-        setValue(value)
-      }}
-    />
+    <Row gutter={20}>
+     <Row>
+       <SearchSelect
+         mode="multiple"
+         style={{ width: 176 }}
+         showSearch={true}
+         labelInValue={true}
+         maxTagCount={6}
+         allowClear
+         value={values}
+         disabled={false}
+         placeholder="请输入选择"
+         onSearch={handleSearch}
+         // onSelect={(value)=>console.log('onSelect',value)}
+         loading={loading}
+         option={option}
+         onChange={(value) => {
+           console.log('value', value)
+           setValues(value)
+         }}
+       />
+     </Row>
+     <Row>
+       <SearchSelect
+         mode="single"
+         style={{ width: 176 }}
+         showSearch={true}
+         labelInValue={true}
+         maxTagCount={6}
+         allowClear
+         value={value}
+         disabled={false}
+         placeholder="请输入选择"
+         onSearch={handleSearch}
+         // onSelect={(value)=>console.log('onSelect',value)}
+         loading={loading}
+         option={option}
+         onChange={(value) => {
+           console.log('value', value)
+           setValue(value)
+         }}
+       />
+     </Row>
+    </Row>
   );
 };
 ReactDOM.render(<Demo />, _mount_);
@@ -77,19 +106,26 @@ import ReactDOM from 'react-dom';
 import { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';
 
 const Demo = () => {
-  const [option, setOption] = React.useState([]);
+  const selectOption =[
+        { label: 'a1', value: 1 },
+        { label: 'a2', value: 2 },
+        { label: 'a3', value: 3 },
+        { label: 'a4', value: 4 },
+        { label: 'a5', value: 5 },
+        { label: 'a6', value: 6 },
+        { label: 'a7', value: 7 },
+        { label: 'a8', value: 8 },
+      ];
+  const [option, setOption] = React.useState(selectOption);
   const [loading, setLoading] = React.useState(false);
+
   function handleSearch(e) {
-    console.log('handleSearch',e)
     setLoading(true)
     setTimeout(() =>  {
-      setOption([
-        { label: 'a', value: 2 },
-        { label: 'aa', value: 3 },
-        { label: 'aaa', value: 4 },
-      ]);
+     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
+      setOption([...filterOpion]);
       setLoading(false);
-    }, 2000);
+    }, 500);
   }
 
   return (
@@ -119,8 +155,30 @@ const Demo = () => {
         }}
         fields={{
           selectField: {
+            initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],
             children: (
               <SearchSelect
+                allowClear
+                labelInValue={true}
+                showSearch={true}
+                mode="multiple"
+                disabled={false}
+                placeholder="请输入选择"
+                onSearch={handleSearch}
+                onChange={(v)=>{
+                  console.log('onChange',v)
+                }}
+                option={option}
+                loading={loading}
+              />
+            )
+          },
+          selectSingle: {
+            initialValue:[{label: 'a7', value: 7}],
+            children: (
+              <SearchSelect
+                mode="single"
+                labelInValue={true}
                 showSearch={true}
                 allowClear
                 disabled={false}
@@ -139,9 +197,12 @@ const Demo = () => {
         {({ fields, state, canSubmit }) => {
           return (
             <div>
-              <Row>
+              <Row gutter={20}>
                 <Col fixed>{fields.selectField}</Col>
               </Row>
+              <Row gutter={20}>
+                <Col fixed>{fields.selectSingle}</Col>
+              </Row>
               <Row>
                 <Col fixed>
                   <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>

diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
@@ -63,7 +63,7 @@ export default function SearchSelect(props: SearchSelectProps) {
   const isMultiple = useMemo(() => mode === 'multiple', [mode]);
   const [innerIsOpen, setInnerIsOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState<Array<SearchSelectOptionData>>([]);
-  const [selectedLabel, setSelectedLabel] = useState('');
+  const [selectedLabel, setSelectedLabel] = useState<string>('');
   const [selectIconType, setSelectIconType] = useState('');
   const omitTagCount = useMemo(
     () => (maxTagCount && selectedValue.length > maxTagCount ? selectedValue.length - maxTagCount : 0),
@@ -95,7 +95,6 @@ export default function SearchSelect(props: SearchSelectProps) {
     changeValue: ValueType | Array<ValueType> | SearchSelectOptionData | Array<SearchSelectOptionData>,
   ) {
     let opts: Array<SearchSelectOptionData> = [];
-
     if (labelInValue) {
       if (Array.isArray(changeValue)) {
         opts = changeValue as Array<SearchSelectOptionData>;
@@ -113,6 +112,8 @@ export default function SearchSelect(props: SearchSelectProps) {
         }
       }
     }
+
+    if (!isMultiple && opts.length > 0) setSelectedLabel(opts[0].label || '');
     setSelectedValue(opts);
   }
 
@@ -138,6 +139,7 @@ export default function SearchSelect(props: SearchSelectProps) {
   }
 
   function handleChange(resultValue: ValueType | Array<ValueType>, values: SearchSelectOptionData[]) {
+    setSelectedLabel('');
     onSelect && onSelect(resultValue);
     handleSelectChange(resultValue, values); // 支持form组件
 
@@ -157,7 +159,7 @@ export default function SearchSelect(props: SearchSelectProps) {
   // handle change
   function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
     const value = e.target.value;
-    setInnerIsOpen(!!value);
+    setInnerIsOpen(true);
     setSelectedLabel(value);
     setSelectIconType(showSearch && value ? 'loading' : '');
     showSearch && onSearch && onSearch(value);
@@ -183,17 +185,22 @@ export default function SearchSelect(props: SearchSelectProps) {
     }
   }
 
+  function onVisibleChange(open: boolean) {
+    if (!open) setSelectedLabel('');
+    if (!isMultiple && selectedValue.length > 0) {
+      setSelectedLabel(selectedValue[0].label);
+    }
+    setInnerIsOpen(open);
+  }
+
   return (
     <Dropdown
       className={cls}
-      trigger="focus"
+      trigger="click"
       style={{ marginTop: 5 }}
       disabled={option && option.length > 0 ? false : true}
       {...others}
-      onVisibleChange={(open) => {
-        if (!open && isMultiple) setSelectedLabel('');
-        setInnerIsOpen(open);
-      }}
+      onVisibleChange={onVisibleChange}
       isOpen={innerIsOpen}
       menu={
         <Menu