feat(SearchSelect): 增加参数控制tag可见数量,多余显示省略 (#542)

* fix(Form): 修复ref获取不到表单方法

* fix(Form):使用useLayoutEffect替换useEffect绑定绑定ForwardedRef

* refactor:(Form) 修改Ref类型定义

* fix(Form): 修复无法重置(initialValue)表单问题

* fix(Form): 类型导出错误

* feat(search-select):增加多选功能

* fix(form):增加设置表单值方法

* feat(form):增加必传表单项标注 #534

* fix(search-select):增加Tag依赖

* fix(form):增加获取异常信息方法

* fix(form):修复afterSubmit回调失效问题

* fix(search-select):缺失依赖

* refactor(search-select):重命名类型名称

* style(search-select): 多选select样式

* style(search-select): 多选select下拉弹层样式

* fix(Table):data不支持对象内包含布尔类型 #517

* style(search-select):规范样式命名

* style(SearchSelect): 规范命名

* ifx(SearchSelect): 增加value受控支持,多选模式下为数组

* fix(SearchSelect): 修复defaultValue支持

* fix(Tree):修复autoExpandParent参数时效,无法展开父节点

* feat(SearchSelect): 增加参数控制tag可见数量,多余显示省略

* feat(SearchSelect): 增加参数控制tag可见数量,多余显示省略

packages/react-search-select/README.md

@@ -44,6 +44,7 @@ const Demo = () => {
       mode="multiple"
       style={{ maxWidth: 200 }}
       showSearch={true}
+      maxTagCount={2}
       allowClear
       value={value}
       disabled={false}

packages/react-search-select/src/index.tsx

@@ -14,6 +14,7 @@ type ValueType = string | number;
 export interface SearchSelectProps extends IProps, DropdownProps {
   mode?: 'single' | 'multiple';
   size?: 'large' | 'default' | 'small';
+  maxTagCount?: number;
   loading?: boolean;
   showSearch?: boolean;
   allowClear?: boolean;
@@ -36,6 +37,7 @@ export default function SearchSelect(props: SearchSelectProps) {
     allowClear = false,
     disabled = false,
     size = 'default',
+    maxTagCount,
     option = [],
     loading = false,
     prefixCls = 'w-search-select',
@@ -59,6 +61,10 @@ export default function SearchSelect(props: SearchSelectProps) {
   const [selectedValue, setSelectedValue] = useState<Array<SearchSelectOptionData>>([]);
   const [selectedLabel, setSelectedLabel] = useState('');
   const [selectIconType, setSelectIconType] = useState('');
+  const omitTagCount = useMemo(
+    () => (maxTagCount && selectedValue.length > maxTagCount ? selectedValue.length - maxTagCount : 0),
+    [selectedValue.length],
+  );
   const divRef = useRef<HTMLDivElement>(null);
 
   const valueRef = useRef<Array<SearchSelectOptionData>>();
@@ -207,26 +213,25 @@ export default function SearchSelect(props: SearchSelectProps) {
         ref={divRef}
         onMouseOver={() => renderSelectIcon('enter')}
         onMouseLeave={() => renderSelectIcon('leave')}
-        style={{ width: 'auto', maxWidth: 'none', ...style }}
+        style={{ width: '100%', maxWidth: 'none', ...style }}
       >
         <div
           style={
             isMultiple
               ? {
                   display: 'flex',
                   flexFlow: 'wrap',
-                  padding: 2,
                   borderRadius: 3,
                   boxShadow: '0px 0px 2px #333',
                 }
               : undefined
           }
         >
           {isMultiple &&
-            selectedValue.map((item, index) => {
+            selectedValue.slice(0, maxTagCount).map((item, index) => {
               return (
                 <Tag
-                  style={{ margin: '0px 3px 3px 0px', display: 'flex', alignItems: 'center' }}
+                  style={{ margin: 2, display: 'flex', alignItems: 'center' }}
                   key={index}
                   closable
                   onClose={() => setSelectedValue(removeSelectItem(index))}
@@ -236,6 +241,11 @@ export default function SearchSelect(props: SearchSelectProps) {
                 </Tag>
               );
             })}
+          {!!omitTagCount && (
+            <Tag style={{ margin: 2, display: 'flex', alignItems: 'center' }} disabled={true}>
+              +{omitTagCount} …{' '}
+            </Tag>
+          )}
           <Input
             style={{ flex: 1, boxShadow: 'none' }}
             className={isMultiple ? `${prefixCls}-input-contents` : undefined}