🐛[Select][TreeSelect]修改showTag默认值

Author: liyuan-meng

src/components/select/demos/searchable.md

@@ -69,94 +69,84 @@ export default function SelectDemo() {
       <Checkbox checked={disabled} onChange={checked => {
         setDisabled(checked)
       }}>禁用</Checkbox>
-      <div>
-        <h5>搜索框在下拉框内（单选）</h5>
-        <Select
-          searchable
-          searchInBox={false}
-          allowClear
-          disabled={disabled}
-          supportLightText
-          placeholder="带搜索的下拉单选"
-          onSearch={handleSearch}
-          onChange={handleChange}
-          style={{width: 260}}
-          dataSource={dataList}
-          position="auto"
-          // size="large"
-        />
-      </div>
-      <div>
-        <h5>搜索框在下拉框内（多选）</h5>
-        <Select
-          hasSelectAll
-          multiple
-          searchable
-          searchInBox={false}
-          allowClear
-          disabled={disabled}
-          supportLightText
-          placeholder="带搜索的下拉单选"
-          onSearch={handleSearch}
-          onChange={handleChange}
-          style={{width: 260}}
-          dataSource={dataList}
-          // size="large"
-        />
-      </div>
-      <div>
-        <h5>搜索框在下拉框外（单选-新）</h5>
-        <Select
-          searchable
-          allowClear
-          disabled={disabled}
-          supportLightText
-          placeholder="带搜索的下拉单选"
-          onSearch={handleSearch}
-          onChange={handleChange}
-          style={{width: 260}}
-          dataSource={dataList}
-          // size="large"
-        />
-      </div>
-      <div>
-        <h5>搜索框在下拉框外（多选-新）</h5>
-        <Select
-          hasSelectAll
-          searchable
-          allowClear
-          disabled={disabled}
-          multiple
-          supportLightText
-          placeholder="带搜索的下拉多选"
-          onSearch={handleSearch}
-          onChange={handleChange}
-          style={{width: 260}}
-          labelKey="name"
-          valueKey="userId"
-          dataSource={dataList.map(item => ({
-            name: item.label,
-            userId: item.value
-          }))}
-        />
-      </div>
-      <div>
-        <h5>搜索框在下拉框外（多选限制标签数量-新）</h5>
-        <Select
-          hasSelectAll
-          searchable
-          allowClear
-          disabled={disabled}
-          multiple
-          supportLightText
-          placeholder="带搜索的下拉多选"
-          onSearch={handleSearch}
-          onChange={handleChange}
-          style={{width: 260}}
-          dataSource={dataList}
-          maxTagCount={1}
-        />
-      </div>
+      <h5>搜索框在下拉框外（单选-新）</h5>
+      <Select
+        searchable
+        allowClear
+        disabled={disabled}
+        supportLightText
+        placeholder="带搜索的下拉单选"
+        onSearch={handleSearch}
+        onChange={handleChange}
+        style={{width: 260}}
+        dataSource={dataList}
+        // size="large"
+      />
+      <h5>搜索框在下拉框外（多选-新）</h5>
+      <Select
+        hasSelectAll
+        searchable
+        allowClear
+        disabled={disabled}
+        multiple
+        supportLightText
+        placeholder="带搜索的下拉多选"
+        onSearch={handleSearch}
+        onChange={handleChange}
+        style={{width: 260}}
+        labelKey="name"
+        valueKey="userId"
+        dataSource={dataList.map(item => ({
+          name: item.label,
+          userId: item.value
+        }))}
+      />
+      <h5>搜索框在下拉框外（多选限制标签数量-新）</h5>
+      <Select
+        hasSelectAll
+        searchable
+        allowClear
+        disabled={disabled}
+        multiple
+        supportLightText
+        placeholder="带搜索的下拉多选"
+        onSearch={handleSearch}
+        onChange={handleChange}
+        style={{width: 260}}
+        dataSource={dataList}
+        maxTagCount={1}
+      />
+      <h5 style={{ color: 'rgba(0,0,0,0.45)', fontWeight: 400 }}>搜索框在下拉框内（单选-旧）</h5>
+      <Select
+        searchable
+        searchInBox={false}
+        allowClear
+        disabled={disabled}
+        supportLightText
+        placeholder="带搜索的下拉单选"
+        onSearch={handleSearch}
+        onChange={handleChange}
+        style={{width: 260}}
+        dataSource={dataList}
+        position="auto"
+        // size="large"
+      />
+      <h5 style={{ color: 'rgba(0,0,0,0.45)', fontWeight: 400 }}>搜索框在下拉框内（多选-旧）</h5>
+      <Select
+        hasSelectAll
+        multiple
+        searchable
+        searchInBox={false}
+        allowClear
+        disabled={disabled}
+        supportLightText
+        placeholder="带搜索的下拉单选"
+        onSearch={handleSearch}
+        onChange={handleChange}
+        style={{width: 260}}
+        dataSource={dataList}
+        // size="large"
+      />
     </div>
   );
 }

src/components/select/index.js

@@ -519,6 +519,8 @@ class Select extends Component {
           value={value}
           dataSource={this.children}
           onChange={this.onSimpleOptionChange}
+          searchValue={this.state.searchValue}
+          onSearchValueChange={this.onSearchValueChange}
         />
       );
     }
@@ -644,6 +646,7 @@ Select.propTypes = {
   lightTextColor: PropTypes.string,
   supportUnlimited: PropTypes.bool,
   unlimitedLabel: PropTypes.string,
+  showTag: PropTypes.bool,
   maxTagCount: PropTypes.number,
   dropdownStyle: PropTypes.object,
   dropdownClassName: PropTypes.string,
@@ -686,6 +689,7 @@ Select.defaultProps = {
   lightTextColor: undefined,
   supportUnlimited: false,
   unlimitedLabel: '不限',
+  showTag: true,
   maxTagCount: undefined,
   dropdownStyle: {},
   dropdownClassName: '',

src/components/select/index.less

@@ -146,6 +146,9 @@
         position: relative;
 
         .@{select-prefix-cls}-search-input {
+          position: absolute;
+          top: 50%;
+          transform: translate(0, -50%);
           width: 100%;
           height: 30px;
           border: none;
@@ -213,6 +216,7 @@
         font-size: 12px;
         padding: 0 6px;
         max-width: 49%;
+        min-width: 38px;
 
         &-text {
           white-space: nowrap;

src/components/select/index.md

@@ -38,6 +38,7 @@ group:
 | placeholder       | 选择框默认文案                                                                                                                                       | string                                  | -              |
 | searchable        | 使下拉框带搜索                                                                                                                                       | boolean                                 | false          |
 | searchInBox        | 搜索框在输入框内                                                                                                                                      | boolean                                 | true          |
+| showTag           | 多选下拉已选项为tag形式                                                                                                                      |  boolean                                 | true          |
 | maxTagCount        | 多选下拉最多显示多少个tag                                                                                                                      | number                                 | -          |
 | searchPlaceholder | 搜索框默认文案                                                                                                                                       | string                                  | -              |
 | emptyRender       | 数据为空时下拉框显示内容                                                                                                                             | string \| node                             | '暂无数据'+缺省图 |
@@ -89,9 +90,6 @@ group:
 ### 大小
 <embed src="@components/select/demos/sizeSelect.md" />
 
-### 可搜索
-<embed src="@components/select/demos/searchable.md" />
-
 ### 定制化选项
 <embed src="@components/select/demos/customItem.md" />
 
@@ -113,6 +111,9 @@ group:
 ### 分组可搜索
 <embed src="@components/select/demos/groupSearch.md" />
 
+### 可搜索
+<embed src="@components/select/demos/searchable.md" />
+
 ### 多选下拉支持不限
 <embed src="@components/select/demos/unlimited.md" />
 

src/components/select/views/group-select.js

@@ -31,9 +31,11 @@ export default function GroupSelect(props) {
     onSearch,
     searchPlaceholder,
     className,
+    searchInBox,
+    searchValue,
+    onSearchValueChange: setSearchValue,
   } = props;
   const [ options, setOptions ] = useState(dataSource);
-  const [ searchValue, setSearchValue ] = useState('');
   const classNames = classnames(
     `${selector}-group-select-options ${selector}-select-options`,
     className,
@@ -86,7 +88,7 @@ export default function GroupSelect(props) {
   return (
     <div className={classNames}>
       <div className={`${selector}-single-options`}>
-        {searchable && (
+        {searchable && !searchInBox && (
           <OptionsSearch
             searchValue={searchValue}
             placeholder={searchPlaceholder}

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

@@ -16,6 +16,7 @@ export default function MultiSearch({
   maxTagCount,
   setSearchStatus,
   disabled,
+  searchable,
 }) {
   const searchRef = useRef();
   const [selectList, setSelectList] = useState([]);
@@ -33,14 +34,16 @@ export default function MultiSearch({
   };
 
   useEffect(() => {
-    if (open) {
-      searchRef.current.querySelector('input').focus();
-      setSearchStatus(true);
-    } else {
-      setSearchStatus(false);
-      clearSearchValue();
+    if (searchable) {
+      if (open) {
+        searchRef.current.querySelector('input').focus();
+        setSearchStatus(true);
+      } else {
+        setSearchStatus(false);
+        clearSearchValue();
+      }
     }
-  }, [open, selectedList]);
+  }, [open, selectedList, searchable]);
 
   useEffect(() => {
     setSelectList([...selectedList]);
@@ -58,7 +61,6 @@ export default function MultiSearch({
       positionPop();
     }
   };
-  console.log(selectList);
 
   const onItemClose = (evt, item) => {
     evt.stopPropagation();
@@ -87,17 +89,19 @@ export default function MultiSearch({
           {hideSelectList.length}
         </span>
       ) : null}
-      <div ref={searchRef} className={`${selector}-search`}>
-        <Input
-          disabled={disabled}
-          // useComposition
-          value={searchValue}
-          placeholder=""
-          onChange={onOptionsSearch}
-          className={`${selector}-search-input`}
-          onKeyDown={onKeyDown}
-        />
-      </div>
+      {searchable && (
+        <div ref={searchRef} className={`${selector}-search`}>
+          <Input
+            disabled={disabled}
+            // useComposition
+            value={searchValue}
+            placeholder=""
+            onChange={onOptionsSearch}
+            className={`${selector}-search-input`}
+            onKeyDown={onKeyDown}
+          />
+        </div>
+      )}
       <p className={`${selector}-multi-search-placeholder`}>{selectList.length || searchValue ? '' : placeholder}</p>
     </>
   );

src/components/select/views/selected.js

@@ -140,6 +140,7 @@ export default class Selected extends React.Component {
         maxTagCount,
         isSearch,
         setSearchStatus,
+        showTag,
       },
       state: { selected, clear },
       onMouseEnter,
@@ -149,8 +150,8 @@ export default class Selected extends React.Component {
       disabled,
       empty: supportUnlimited ? false : !dataSource.length,
       hidden: !showSelectStyle,
-      'search-in-box': searchable && searchInBox,
-      'multi-search-in-box': searchable && searchInBox && multiple,
+      'search-in-box': searchable && searchInBox || multiple && showTag,
+      'multi-search-in-box': multiple && (searchable && searchInBox || showTag),
       [`${size}`]: true,
     });
     const iconClasses = classnames(`${selector}-select-icon`, {
@@ -181,7 +182,7 @@ export default class Selected extends React.Component {
     if (searchable && searchInBox && !multiple) {
       SearchCom = SingleSearch;
     }
-    if (searchable && searchInBox && multiple) {
+    if ((searchable && searchInBox || showTag) && multiple) {
       SearchCom = MultiSearch;
     }
 
@@ -193,12 +194,7 @@ export default class Selected extends React.Component {
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
-        {(!searchable || searchable && !searchInBox) && (
-          <span className={`${selector}-selected`} title={title}>
-            {selected.length ? selected : placeholder}
-          </span>
-        )}
-        {SearchCom && (
+        {SearchCom ? (
           <SearchCom
             placeholder={placeholder}
             selected={this.state.selected}
@@ -214,7 +210,12 @@ export default class Selected extends React.Component {
             maxTagCount={maxTagCount}
             setSearchStatus={setSearchStatus}
             disabled={disabled}
+            searchable={searchable && searchInBox}
           />
+        ) : (
+          <span className={`${selector}-selected`} title={title}>
+            {selected.length ? selected : placeholder}
+          </span>
         )}
         <Icon type="close-fill-1" className={clearClasses} onClick={onClear} />
         <Icon type="search" className={searchClasses} />