✨[Select]添加禁用状态样式

Author: liyuan-meng

src/components/select/demos/searchable.md

@@ -5,8 +5,8 @@ desc: 可对选项进行搜索
 ---
 
 ```jsx
-import React from 'react';
-import { Select } from 'cloud-react';
+import React, { useState } from 'react';
+import { Select, Checkbox } from 'cloud-react';
 
 const Option = Select.Option;
 
@@ -54,6 +54,8 @@ const dataList = [
 ];
 
 export default function SelectDemo() {
+  const [disabled, setDisabled] = useState(false);
+
   const handleChange = (value) => {
     console.log('select --- ' + value);
   };
@@ -64,11 +66,15 @@ export default function SelectDemo() {
 
   return (
     <div style={{ display: 'flex', gap: 20, flexDirection: 'column' }}>
+      <Checkbox checked={disabled} onChange={checked => {
+        setDisabled(checked)
+      }}>禁用</Checkbox>
       <div>
         <h5>搜索框在下拉框内（单选）</h5>
         <Select
           searchable
           allowClear
+          disabled={disabled}
           supportLightText
           placeholder="带搜索的下拉单选"
           onSearch={handleSearch}
@@ -86,6 +92,7 @@ export default function SelectDemo() {
           multiple
           searchable
           allowClear
+          disabled={disabled}
           supportLightText
           placeholder="带搜索的下拉单选"
           onSearch={handleSearch}
@@ -101,6 +108,7 @@ export default function SelectDemo() {
           searchable
           searchInBox
           allowClear
+          disabled={disabled}
           supportLightText
           placeholder="带搜索的下拉单选"
           onSearch={handleSearch}
@@ -117,6 +125,7 @@ export default function SelectDemo() {
           searchable
           searchInBox
           allowClear
+          disabled={disabled}
           multiple
           supportLightText
           placeholder="带搜索的下拉多选"
@@ -133,6 +142,7 @@ export default function SelectDemo() {
           searchable
           searchInBox
           allowClear
+          disabled={disabled}
           multiple
           supportLightText
           placeholder="带搜索的下拉多选"

src/components/select/index.less

@@ -109,6 +109,14 @@
       .@{select-prefix-cls}-select-icon {
         color: @dropdown-icon-color;
       }
+
+      .@{select-prefix-cls}-single-select-selected {
+        color: @gray-7;
+      }
+
+      .@{select-prefix-cls}-select-icon:hover {
+        color: @gray-6;
+      }
     }
 
     &.empty {
@@ -216,6 +224,11 @@
           font-size: 12px;
           color: #D8D8D8;
         }
+
+        &.disabled {
+          color: @gray-7;
+          border: 1px solid #E8E8E8;
+        }
       }
 
       &.search-in-box {
@@ -460,7 +473,7 @@
     font-size: 12px;
     color: @gray-6;
     > img {
-      width: 48%;
+      width:104px;
       height: auto;
       margin-bottom: 8px;
     }

src/components/select/index.md

@@ -38,7 +38,7 @@ group:
 | placeholder       | 选择框默认文案                                                                                                                                       | string                                  | -              |
 | searchable        | 使下拉框带搜索                                                                                                                                       | boolean                                 | false          |
 | searchInBox        | 搜索框在外侧                                                                                                                                      | boolean                                 | false          |
-| maxTagCount        | 多选下拉最多显示多少个tag                                                                                                                                      | boolean                                 | false          |
+| maxTagCount        | 多选下拉最多显示多少个tag                                                                                                                      | number                                 | -          |
 | searchPlaceholder | 搜索框默认文案                                                                                                                                       | string                                  | -              |
 | emptyRender       | 数据为空时下拉框显示内容                                                                                                                             | string \| node                             | '暂无数据'+缺省图 |
 | defaultValue      | 默认选中的项                                                                                                                                         | string \| number \| array                     | -              |

src/components/select/views/multi-search.js

@@ -17,6 +17,7 @@ export default function MultiSearch({
   valueKey,
   maxTagCount,
   setSearchStatus,
+  disabled,
 }) {
   const searchRef = useRef();
   const [selectList, setSelectList] = useState([]);
@@ -76,19 +77,21 @@ export default function MultiSearch({
   return (
     <>
       {showSelectList.map(item => (
-        <span key={item[valueKey]} className={`${selector}-multiple-search-item`}>
+        <span key={item[valueKey]} className={`${selector}-multiple-search-item ${disabled && 'disabled'}`}>
           <span className={`${selector}-multiple-search-item-text`} title={item[labelKey]}>{item[labelKey]}</span>
-          <Icon type="close" onClick={evt => onItemClose(evt, item)} />
+          {!disabled && <Icon type="close" onClick={evt => onItemClose(evt, item)} />}
         </span>
       ))}
       {hideSelectList.length ? (
-        <span className={`${selector}-multiple-search-item`}>
+        <span className={`${selector}-multiple-search-item ${disabled && 'disabled'}`}>
           +
           {hideSelectList.length}
         </span>
       ) : null}
       <div ref={searchRef} className={`${selector}-search`}>
         <Input
+          disabled={disabled}
+          // useComposition
           value={searchValue}
           placeholder=""
           onChange={onOptionsSearch}

src/components/select/views/selected.js

@@ -213,6 +213,7 @@ export default class Selected extends React.Component {
             valueKey={valueKey}
             maxTagCount={maxTagCount}
             setSearchStatus={setSearchStatus}
+            disabled={disabled}
           />
         )}
         <Icon type="close-fill-1" className={clearClasses} onClick={onClear} />

src/components/select/views/single-search.js

@@ -10,6 +10,7 @@ export default function SingleSearch({
   onSearchValueChange,
   onSearch,
   setSearchStatus,
+  disabled,
 }) {
   const [isFocusSearchInput, setIsFocusSearchInput] = useState(false);
 
@@ -54,6 +55,8 @@ export default function SingleSearch({
       )}
       <div className={`${selector}-search`}>
         <Input
+          disabled={disabled}
+          // useComposition
           value={searchValue}
           placeholder={searchPlaceholder}
           onChange={onOptionsSearch}