feat(SearchTree): 增加valueAmount参数限制最大value长度 (#722)

uiwjs · Mar 29, 2022 · 8e8bf3d · 8e8bf3d
1 parent 18f94a8
commit 8e8bf3d
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 13 deletions.
diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
@@ -57,7 +57,6 @@ function handleSearch(e) {
          maxTagCount={6}
          allowClear
          value={values}
-         disabled={false}
          placeholder="请输入选择"
          onSearch={handleSearch}
          // onSelect={(value)=>console.log('onSelect',value)}
@@ -78,7 +77,6 @@ function handleSearch(e) {
          maxTagCount={6}
          allowClear
          value={value}
-         disabled={false}
          placeholder="请输入选择"
          onSearch={handleSearch}
          // onSelect={(value)=>console.log('onSelect',value)}
@@ -90,6 +88,14 @@ function handleSearch(e) {
          }}
        />
      </Row>
+     <Row>
+       <SearchSelect
+         mode="single"
+         style={{ width: 200 }}
+         placeholder="请输入选择"
+         disabled={true}
+       />
+     </Row>
     </Row>
   );
 };
@@ -115,11 +121,10 @@ const Demo = () => {
     { label: 'a8', value: 8 },
   ]
 
+  const valueAmount = 2
   const [option, setOption] = React.useState(selectOption);
   const [loading, setLoading] = React.useState(false);
-  const [values, setValues] = React.useState([{label: 'a7', value: 7}]);
-  const [disabled, setDisabled] = React.useState(false);
-  const maxTagCount = 2
+  const [values, setValues] = React.useState([ 1, 2, 7]);
 
   function handleSearch(e) {
     setLoading(true)
@@ -131,7 +136,70 @@ const Demo = () => {
   }
 
   return(
-    <Row gutter={20}>
+    <Row style={{ marginLeft: 10 }}>
+        <SearchSelect
+          mode="multiple"
+          style={{ width: 200 }}
+          showSearch={true}
+          valueAmount={valueAmount}
+          allowClear
+          value={values}
+          placeholder="请输入选择"
+          onSearch={handleSearch}
+          // onSelect={(value)=>console.log('onSelect',value)}
+          loading={loading}
+          option={option}
+          onChange={(value) => {
+            setValues(value)
+          }}
+        />
+    </Row>
+  );
+};
+ReactDOM.render(<Demo />, _mount_);
+```
+
+## 显示最大数量
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { SearchSelect,Row,Col } from 'uiw';
+
+const Demo = () => {
+  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 maxTagCount = 4
+  const [option, setOption] = React.useState(selectOption);
+  const [loading, setLoading] = React.useState(false);
+  const [values, setValues] = React.useState([
+      { label: 'a1', value: 1 },
+      { label: 'a2', value: 2 },
+      { label: 'a5', value: 5 },
+      { label: 'a7', value: 7 },
+      { label: 'a8', value: 8 },
+    ]);
+
+  function handleSearch(e) {
+    setLoading(true)
+    setTimeout(() =>  {
+     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
+      setOption([...filterOpion]);
+      setLoading(false);
+    }, 500);
+  }
+
+  return(
+    <Row style={{ marginLeft: 10 }}>
         <SearchSelect
           mode="multiple"
           style={{ width: 200 }}
@@ -140,15 +208,11 @@ const Demo = () => {
           maxTagCount={maxTagCount}
           allowClear
           value={values}
-          disabled={disabled}
           placeholder="请输入选择"
           onSearch={handleSearch}
-          // onSelect={(value)=>console.log('onSelect',value)}
           loading={loading}
           option={option}
           onChange={(value) => {
-            if(value?.length >= maxTagCount)
-              setDisabled(true)
             setValues(value)
           }}
         />
@@ -158,6 +222,47 @@ const Demo = () => {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+## 不可搜索
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { SearchSelect,Row,Col } from 'uiw';
+
+const Demo = () => {
+  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 [values, setValues] = React.useState([1,7]);
+
+  return(
+    <Row style={{ marginLeft: 10 }}>
+        <SearchSelect
+          mode="multiple"
+          style={{ width: 200 }}
+          showSearch={true}
+          labelInValue={false}
+          showSearch={false}
+          placeholder="请输入选择"
+          value={values}
+          option={selectOption}
+          onChange={(value) => {
+            setValues(value)
+          }}
+        />
+    </Row>
+  );
+};
+ReactDOM.render(<Demo />, _mount_);
+```
 
 ### 在表单中使用
 
@@ -307,3 +412,4 @@ ReactDOM.render(<Demo />, _mount_);
 | onSearch | 文本框值变化时回调 | function(value: String) | - | - |
 | onSelect | 被选中时调用，参数为选中项的 value | function(value: String/Number ) | - | - |
 | loading | 加载中状态 | Boolean | `false` | - |
+| valueAmount | 多选模式下,限制最多选择多少个(value的长度) | number | - | - |
diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
@@ -15,6 +15,7 @@ export interface SearchSelectProps extends IProps, DropdownProps {
   mode?: 'single' | 'multiple';
   size?: 'large' | 'default' | 'small';
   maxTagCount?: number;
+  valueAmount?: number;
   labelInValue?: boolean;
   loading?: boolean;
   showSearch?: boolean;
@@ -38,9 +39,10 @@ export default function SearchSelect(props: SearchSelectProps) {
   const {
     allowClear = false,
     disabled = false,
+    valueAmount,
     size = 'default',
-    maxTagCount,
     option = [],
+    maxTagCount,
     loading = false,
     labelInValue = false,
     prefixCls = 'w-search-select',
@@ -125,7 +127,7 @@ export default function SearchSelect(props: SearchSelectProps) {
     }
 
     if (!isMultiple && opts.length > 0) setSelectedLabel(opts[0].label || '');
-    setSelectedValue(opts);
+    setSelectedValue(opts.slice(0, valueAmount));
   }
 
   function removeSelectItem(index: number) {
@@ -149,7 +151,10 @@ export default function SearchSelect(props: SearchSelectProps) {
   }
 
   function handleItemsClick(index: number, item?: SearchSelectOptionData) {
-    let values: SearchSelectOptionData[] = index !== -1 ? removeSelectItem(index) : [...selectedValue, item!];
+    let values: SearchSelectOptionData[] =
+      index !== -1
+        ? removeSelectItem(index)
+        : [...selectedValue.slice(0, valueAmount ? valueAmount - 1 : undefined), item!];
     const resultValue = values.map((item) => item.value);
     handleChange(resultValue, values);
   }