fix(SearchSelect): 修复禁用后任然可以删除问题 #692 (#694)

uiwjs · Mar 21, 2022 · a6a2f47 · a6a2f47
1 parent 30cb101
commit a6a2f47
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 4 deletions.
diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
@@ -37,7 +37,7 @@ const Demo = () => {
   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) {
+function handleSearch(e) {
     setLoading(true)
     setTimeout(() =>  {
      const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
@@ -96,6 +96,69 @@ 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 [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
+
+  function handleSearch(e) {
+    setLoading(true)
+    setTimeout(() =>  {
+     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
+      setOption([...filterOpion]);
+      setLoading(false);
+    }, 500);
+  }
+
+  return(
+    <Row gutter={20}>
+        <SearchSelect
+          mode="multiple"
+          style={{ width: 200 }}
+          showSearch={true}
+          labelInValue={true}
+          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)
+          }}
+        />
+    </Row>
+  );
+};
+ReactDOM.render(<Demo />, _mount_);
+```
+
+
 ### 在表单中使用
 
 在 [`<Form />`](#/components/form) 表单中应用 `<SearchSelect />` 组件。

diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
@@ -85,6 +85,12 @@ export default function SearchSelect(props: SearchSelectProps) {
     }
   }, []);
 
+  useEffect(() => {
+    if (disabled) {
+      setInnerIsOpen(false);
+    }
+  }, [disabled]);
+
   useEffect(() => {
     if (valueVerify(value)) {
       selectedValueChange(value!);
@@ -210,7 +216,7 @@ export default function SearchSelect(props: SearchSelectProps) {
       trigger="click"
       style={{ marginTop: 5 }}
       overlayStyl={{ width: 100 }}
-      disabled={option && option.length > 0 ? false : true}
+      disabled={disabled}
       {...others}
       onVisibleChange={onVisibleChange}
       isOpen={innerIsOpen}
@@ -263,6 +269,7 @@ export default function SearchSelect(props: SearchSelectProps) {
                       color="#393E48"
                       {...tagProps}
                       closable
+                      disabled={disabled}
                       onClose={(e) => {
                         e.stopPropagation();
                         handleItemsClick(index, item);
@@ -290,7 +297,7 @@ export default function SearchSelect(props: SearchSelectProps) {
                 placeholder={selectedValue.length ? '' : placeholder}
               />
             </div>
-            {(selectIconType === 'close' || (selectIconType === 'loading' && loading)) && (
+            {!disabled && (selectIconType === 'close' || (selectIconType === 'loading' && loading)) && (
               <Icon type={selectIconType} spin={loading && selectIconType === 'loading'} onClick={resetSelectedValue} />
             )}
           </div>
@@ -304,6 +311,7 @@ export default function SearchSelect(props: SearchSelectProps) {
             value={selectedLabel}
             placeholder={placeholder}
             addonAfter={
+              !disabled &&
               (selectIconType === 'close' || (selectIconType === 'loading' && loading)) && (
                 <Icon
                   type={selectIconType}

diff --git a/packages/react-search-select/src/style/index.less b/packages/react-search-select/src/style/index.less
@@ -17,6 +17,15 @@
       &:focus {
         box-shadow: none !important;
       }
+
+      &.disabled {
+        box-shadow: none;
+        background: #dddddd;
+        opacity: 0.75;
+        color: #a5a5a5;
+        cursor: not-allowed;
+        resize: none;
+      }
     }
   }
 

diff --git a/packages/react-tag/src/index.tsx b/packages/react-tag/src/index.tsx
@@ -51,7 +51,7 @@ export default (props: TagProps = {}) => {
   return (
     <span className={cls} style={styl} {...other}>
       {title || children}
-      {closable ? (
+      {!disabled && closable ? (
         <svg onClick={onClose} className={`${prefixCls}-close`} width="15" height="15" viewBox="0 0 16 16">
           <path d="M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z" />
         </svg>