amis 1.9.1-beta.18 → 1.9.1-beta.22

package/src/components/ResultBox.tsx

@@ -1,11 +1,14 @@
 import {ThemeProps, themeable} from '../theme';
 import React from 'react';
+import omit from 'lodash/omit';
+import isInteger from 'lodash/isInteger';
 import {InputBoxProps} from './InputBox';
 import {uncontrollable} from 'uncontrollable';
 import {Icon} from './icons';
 import Input from './Input';
 import {autobind, isMobile, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
+import TooltipWrapper, {TooltipObject} from './TooltipWrapper';
 import isPlainObject = require('lodash/isPlainObject');
 
 export interface ResultBoxProps
@@ -22,6 +25,8 @@ export interface ResultBoxProps
   inputPlaceholder: string;
   useMobileUI?: boolean;
   hasDropDownArrow?: boolean;
+  maxTagCount?: number;
+  overflowTagPopover?: TooltipObject;
 }
 
 export class ResultBox extends React.Component<ResultBoxProps> {
@@ -94,6 +99,91 @@ export class ResultBox extends React.Component<ResultBoxProps> {
     onChange?.(e.currentTarget.value);
   }
 
+  renderMultipeTags(tags: any[]) {
+    const {
+      maxTagCount,
+      overflowTagPopover,
+      itemRender,
+      classnames: cx
+    } = this.props;
+
+    if (
+      maxTagCount != null &&
+      isInteger(Math.floor(maxTagCount)) &&
+      Math.floor(maxTagCount) >= 0 &&
+      Math.floor(maxTagCount) < tags.length
+    ) {
+      const maxVisibleCount = Math.floor(maxTagCount);
+      const tooltipProps: TooltipObject = {
+        placement: 'top',
+        trigger: 'hover',
+        showArrow: false,
+        offset: [0, -10],
+        tooltipClassName: cx(
+          'ResultBox-overflow',
+          overflowTagPopover?.tooltipClassName
+        ),
+        ...omit(overflowTagPopover, ['children', 'content', 'tooltipClassName'])
+      };
+
+      return [
+        ...tags.slice(0, maxVisibleCount),
+        {label: `+ ${tags.length - maxVisibleCount} ...`}
+      ].map((item, index) => {
+        return index === maxVisibleCount ? (
+          <TooltipWrapper
+            key={tags.length}
+            tooltip={{
+              ...tooltipProps,
+              children: () => (
+                <div className={cx('ResultBox-overflow-wrapper')}>
+                  {tags
+                    .slice(maxVisibleCount, tags.length)
+                    .map((item, index) => {
+                      const itemIndex = index + maxVisibleCount;
+
+                      return (
+                        <div className={cx('ResultBox-value')} key={itemIndex}>
+                          <span className={cx('ResultBox-valueLabel')}>
+                            {itemRender(item)}
+                          </span>
+                          <a data-index={itemIndex} onClick={this.removeItem}>
+                            <Icon icon="close" className="icon" />
+                          </a>
+                        </div>
+                      );
+                    })}
+                </div>
+              )
+            }}
+          >
+            <div className={cx('ResultBox-value')} key={index}>
+              <span className={cx('ResultBox-valueLabel')}>{item.label}</span>
+            </div>
+          </TooltipWrapper>
+        ) : (
+          <div className={cx('ResultBox-value')} key={index}>
+            <span className={cx('ResultBox-valueLabel')}>
+              {itemRender(item)}
+            </span>
+            <a data-index={index} onClick={this.removeItem}>
+              <Icon icon="close" className="icon" />
+            </a>
+          </div>
+        );
+      });
+    }
+
+    return tags.map((item, index) => (
+      <div className={cx('ResultBox-value')} key={index}>
+        <span className={cx('ResultBox-valueLabel')}>{itemRender(item)}</span>
+        <a data-index={index} onClick={this.removeItem}>
+          <Icon icon="close" className="icon" />
+        </a>
+      </div>
+    ));
+  }
+
   render() {
     const {
       className,
@@ -125,6 +215,9 @@ export class ResultBox extends React.Component<ResultBoxProps> {
     } = this.props;
     const isFocused = this.state.isFocused;
     const mobileUI = useMobileUI && isMobile();
+    /** 不需要透传给Input的属性 */
+    const omitPropsList = ['maxTagCount', 'overflowTagPopover'];
+
     return (
       <div
         className={cx('ResultBox', className, {
@@ -144,16 +237,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
         onBlur={allowInput ? undefined : onBlur}
       >
         {Array.isArray(result) && result.length ? (
-          result.map((item, index) => (
-            <div className={cx('ResultBox-value')} key={index}>
-              <span className={cx('ResultBox-valueLabel')}>
-                {itemRender(item)}
-              </span>
-              <a data-index={index} onClick={this.removeItem}>
-                <Icon icon="close" className="icon" />
-              </a>
-            </div>
-          ))
+          this.renderMultipeTags(result)
         ) : result && !Array.isArray(result) ? (
           <span className={cx('ResultBox-singleValue')}>
             {isPlainObject(result) ? itemRender(result) : result}
@@ -166,7 +250,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
 
         {allowInput && !disabled ? (
           <Input
-            {...rest}
+            {...omit(rest, omitPropsList)}
             onKeyPress={onKeyPress}
             ref={this.inputRef}
             value={value || ''}
@@ -174,7 +258,9 @@ export class ResultBox extends React.Component<ResultBoxProps> {
             placeholder={__(
               Array.isArray(result) && result.length
                 ? inputPlaceholder
-                : (result ? '' : placeholder)
+                : result
+                ? ''
+                : placeholder
             )}
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}

package/src/components/ResultTableList.tsx

@@ -43,7 +43,10 @@ export interface ResultTableSelectionState {
   searchTableOptions: Options;
 }
 
-export class BaseResultTableSelection extends BaseSelection<ResultTableSelectionProps, ResultTableSelectionState> {
+export class BaseResultTableSelection extends BaseSelection<
+  ResultTableSelectionProps,
+  ResultTableSelectionState
+> {
   static defaultProps = {
     ...BaseSelection.defaultProps,
     cellRender: (
@@ -55,25 +58,21 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
       option: Option,
       colIndex: number,
       rowIndex: number
-    ) => <span>{resolveVariable(column.name, option)}</span>,
+    ) => <span>{resolveVariable(column.name, option)}</span>
   };
 
   state: ResultTableSelectionState = {
     tableOptions: [],
     searching: false,
     searchTableOptions: []
-  }
+  };
 
   static getDerivedStateFromProps(props: ResultTableSelectionProps) {
-    const {
-      options,
-      value,
-      option2value,
-    } = props;
+    const {options, value, option2value} = props;
     const valueArray = BaseSelection.value2array(value, options, option2value);
     return {
       tableOptions: valueArray
-    }
+    };
   }
 
   @autobind
@@ -117,15 +116,16 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
     }
 
     const {value, onSearch} = this.props;
-    const searchOptions = ((value || []) as Options)
-      .filter(item => onSearch?.(inputValue, item));
+    const searchOptions = ((value || []) as Options).filter(item =>
+      onSearch?.(inputValue, item)
+    );
 
     this.setState({
       searching: true,
       searchTableOptions: searchOptions
     });
   }
-  
+
   @autobind
   clearSearch() {
     this.setState({
@@ -152,9 +152,7 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
 
     return (
       <div className={cx('ResultTableList', className)}>
-        {
-          Array.isArray(value) && value.length ?
-          (
+        {Array.isArray(value) && value.length ? (
           <TableSelection
             columns={columns}
             options={!searching ? tableOptions : searchTableOptions}
@@ -163,6 +161,7 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
             option2value={option2value}
             onChange={onChange}
             multiple={false}
+            resultMode={true}
             cellRender={(
               column: {
                 name: string;
@@ -176,27 +175,28 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
               const raw = cellRender(column, option, colIndex, rowIndex);
               if (colIndex === columns.length - 1) {
                 return (
-                <>
-                  {raw}
-                  {
-                    <span
-                      className={cx('ResultTableList-close-btn')}
-                      onClick={(e: React.SyntheticEvent<HTMLElement>) => {
-                        e.stopPropagation();
-                        this.handleCloseItem(option);
-                      }}
-                    >
-                      <CloseIcon />
-                    </span>
-                  }
-                </>)
+                  <>
+                    {raw}
+                    {
+                      <span
+                        className={cx('ResultTableList-close-btn')}
+                        onClick={(e: React.SyntheticEvent<HTMLElement>) => {
+                          e.stopPropagation();
+                          this.handleCloseItem(option);
+                        }}
+                      >
+                        <CloseIcon />
+                      </span>
+                    }
+                  </>
+                );
               }
               return raw;
             }}
           />
-          )
-          : (<div className={cx('Selections-placeholder')}>{__(placeholder)}</div>)
-        }
+        ) : (
+          <div className={cx('Selections-placeholder')}>{__(placeholder)}</div>
+        )}
       </div>
     );
   }
@@ -211,7 +211,6 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
       placeholder = __('Transfer.searchKeyword')
     } = this.props;
 
-
     return (
       <div className={cx('Selections', className)}>
         {title ? <div className={cx('Selections-title')}>{title}</div> : null}

package/src/components/Select.tsx

@@ -7,6 +7,9 @@
 
 import {uncontrollable} from 'uncontrollable';
 import React from 'react';
+import merge from 'lodash/merge';
+import isInteger from 'lodash/isInteger';
+import omit from 'lodash/omit';
 import VirtualList from './virtual-list';
 import Overlay from './Overlay';
 import PopOver from './PopOver';
@@ -24,15 +27,12 @@ import {
   normalizeNodePath,
   isMobile
 } from '../utils/helper';
-import find from 'lodash/find';
 import isPlainObject from 'lodash/isPlainObject';
-import union from 'lodash/union';
 import {highlight} from '../renderers/Form/Options';
 import {findDOMNode} from 'react-dom';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import Checkbox from './Checkbox';
 import Input from './Input';
-import {Api} from '../types';
 import {LocaleProps, localeable} from '../locale';
 import Spinner from './Spinner';
 import {Option, Options} from '../Schema';
@@ -40,6 +40,8 @@ import {RemoteOptionsProps, withRemoteConfig} from './WithRemoteConfig';
 import Picker from './Picker';
 import PopUp from './PopUp';
 
+import type {TooltipObject} from '../components/TooltipWrapper';
+
 export {Option, Options};
 
 export interface OptionProps {
@@ -60,6 +62,8 @@ export interface OptionProps {
   disabled?: boolean;
   creatable?: boolean;
   pathSeparator?: string;
+  itemHeight?: number; // 每个选项的高度，主要用于虚拟渲染
+  virtualThreshold?: number; // 数据量多大的时候开启虚拟渲染
   hasError?: boolean;
   block?: boolean;
   onAdd?: (
@@ -350,6 +354,16 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
    * 移动端样式类名
    */
   mobileClassName?: string;
+
+  /**
+   * 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
+   */
+  maxTagCount?: number;
+
+  /**
+   * 收纳标签的Popover配置
+   */
+  overflowTagPopover?: TooltipObject;
 }
 
 interface SelectState {
@@ -382,7 +396,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
     checkAll: false,
     checkAllLabel: 'Select.checkAll',
     defaultCheckAll: false,
-    overlayPlacement: 'auto'
+    overlayPlacement: 'auto',
+    virtualThreshold: 100
   };
 
   input: HTMLInputElement;
@@ -397,7 +412,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       inputValue: '',
       highlightedIndex: -1,
       selection: value2array(props.value, props),
-      itemHeight: 35,
+      itemHeight: 32 /** Select选项高度保持一致 */,
       pickerSelectItem: ''
     };
   }
@@ -712,7 +727,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
   @autobind
   menuItemRef(ref: any) {
-    ref && this.setState({itemHeight: ref.offsetHeight});
+    if (ref && typeof ref.offsetHeight === 'number' && ref > 0) {
+      this.setState({itemHeight: ref.offsetHeight});
+    }
   }
 
   renderValue({inputValue, isOpen}: ControllerStateAndHelpers<any>) {
@@ -723,11 +740,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
       placeholder,
       labelField,
       disabled,
+      maxTagCount,
+      overflowTagPopover,
       translate: __
     } = this.props;
-
     const selection = this.state.selection;
-    // console.log('selection', selection);
 
     if (!selection.length) {
       return (
@@ -737,6 +754,114 @@ export class Select extends React.Component<SelectProps, SelectState> {
       );
     }
 
+    if (
+      multiple &&
+      maxTagCount != null &&
+      isInteger(Math.floor(maxTagCount)) &&
+      Math.floor(maxTagCount) >= 0 &&
+      Math.floor(maxTagCount) < selection.length
+    ) {
+      const maxVisibleCount = Math.floor(maxTagCount);
+      const tooltipProps: TooltipObject = {
+        placement: 'top',
+        trigger: 'hover',
+        showArrow: false,
+        offset: [0, -10],
+        tooltipClassName: cx(
+          'Select-overflow',
+          overflowTagPopover?.tooltipClassName
+        ),
+        ...omit(overflowTagPopover, ['children', 'content', 'tooltipClassName'])
+      };
+      return [
+        ...selection.slice(0, maxVisibleCount),
+        {label: `+ ${selection.length - maxVisibleCount} ...`}
+      ].map((item, index) => {
+        if (index === maxVisibleCount) {
+          return (
+            <TooltipWrapper
+              key={selection.length}
+              tooltip={{
+                ...tooltipProps,
+                children: () => (
+                  <div className={cx('Select-overflow-wrapper')}>
+                    {selection
+                      .slice(maxVisibleCount, selection.length)
+                      .map((item, index) => {
+                        const itemIndex = index + maxVisibleCount;
+                        return (
+                          <div
+                            key={itemIndex}
+                            className={cx('Select-value', {
+                              'is-disabled': disabled,
+                              'is-invalid': item.__unmatched
+                            })}
+                          >
+                            <span className={cx('Select-valueLabel')}>
+                              {item[labelField || 'label']}
+                            </span>
+                            <span
+                              className={cx('Select-valueIcon', {
+                                'is-disabled': disabled || item.disabled
+                              })}
+                              onClick={this.removeItem.bind(this, itemIndex)}
+                            >
+                              <Icon icon="close" className="icon" />
+                            </span>
+                          </div>
+                        );
+                      })}
+                  </div>
+                )
+              }}
+            >
+              <div
+                className={cx('Select-value', {
+                  'is-disabled': disabled,
+                  'is-invalid': item.__unmatched
+                })}
+                onClick={(e: React.MouseEvent) =>
+                  e.stopPropagation()
+                } /** 避免点击查看浮窗时呼出下拉菜单 */
+              >
+                <span className={cx('Select-valueLabel')}>
+                  {item[labelField || 'label']}
+                </span>
+              </div>
+            </TooltipWrapper>
+          );
+        }
+
+        return (
+          <TooltipWrapper
+            placement={'top'}
+            tooltip={item[labelField || 'label']}
+            trigger={'hover'}
+            key={index}
+          >
+            <div
+              className={cx('Select-value', {
+                'is-disabled': disabled,
+                'is-invalid': item.__unmatched
+              })}
+            >
+              <span className={cx('Select-valueLabel')}>
+                {item[labelField || 'label']}
+              </span>
+              <span
+                className={cx('Select-valueIcon', {
+                  'is-disabled': disabled || item.disabled
+                })}
+                onClick={this.removeItem.bind(this, index)}
+              >
+                <Icon icon="close" className="icon" />
+              </span>
+            </div>
+          </TooltipWrapper>
+        );
+      });
+    }
+
     return selection.map((item, index) => {
       if (!multiple) {
         return (
@@ -822,6 +947,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       hideSelected,
       renderMenu,
       mobileClassName,
+      virtualThreshold = 100,
       useMobileUI = false
     } = this.props;
     const {selection} = this.state;
@@ -835,7 +961,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
           })
         : options.concat()
     ).filter((option: Option) => !option.hidden && option.visible !== false);
-
+    const enableVirtualRender =
+      filtedOptions.length && filtedOptions.length > virtualThreshold;
     const selectionValues = selection.map(select => select[valueField]);
     if (multiple && checkAll) {
       const optionsValues = (checkAllBySearch ? filtedOptions : options).map(
@@ -850,7 +977,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
       );
     }
 
-    const itemHeight = this.state.itemHeight;
+    // 用于虚拟渲染的每项高度
+    const virtualItemHeight = this.props.itemHeight || this.state.itemHeight;
 
     // 渲染单个选项
     const renderItem = ({index, style}: {index: number; style?: object}) => {
@@ -874,7 +1002,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
             item,
             disabled: item.disabled
           })}
-          style={style}
+          style={merge(style, enableVirtualRender ? {width: '100%'} : {})}
           className={cx(`Select-option`, {
             'is-disabled': item.disabled,
             'is-highlight': highlightedIndex === index,
@@ -952,7 +1080,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
               {item.tip}
             </Checkbox>
           ) : (
-            <span>
+            <span
+              className={cx('Select-option-content')}
+              title={
+                typeof item[labelField] === 'string' ? item[labelField] : ''
+              }
+            >
               {item.disabled
                 ? item[labelField]
                 : highlight(
@@ -976,8 +1109,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       <div
         ref={this.menu}
         className={cx('Select-menu', {
-          'Select--longlist':
-            filtedOptions.length && filtedOptions.length > 100,
+          'Select--longlist': enableVirtualRender,
           'is-mobile': mobileUI
         })}
       >
@@ -1039,15 +1171,15 @@ export class Select extends React.Component<SelectProps, SelectState> {
         ) : null}
 
         {filtedOptions.length ? (
-          filtedOptions.length > 100 ? ( // 超过 100 行数据才启用 virtuallist 避免滚动条问题
+          filtedOptions.length > virtualThreshold ? ( // 较多数据时才启用 virtuallist，避免滚动条问题
             <VirtualList
               height={
                 filtedOptions.length > 8
                   ? 266
-                  : filtedOptions.length * itemHeight
+                  : filtedOptions.length * virtualItemHeight
               }
               itemCount={filtedOptions.length}
-              itemSize={itemHeight}
+              itemSize={virtualItemHeight}
               renderItem={renderItem}
             />
           ) : (

package/src/components/TableSelection.tsx

@@ -5,9 +5,12 @@ import {uncontrollable} from 'uncontrollable';
 import Checkbox from './Checkbox';
 import {Option} from './Select';
 import {resolveVariable} from '../utils/tpl-builtin';
+import {noop} from '../utils/helper';
 import {localeable} from '../locale';
 
 export interface TableSelectionProps extends BaseSelectionProps {
+  /** 是否为结果渲染列表 */
+  resultMode?: boolean;
   columns: Array<{
     name: string;
     label: string;
@@ -108,7 +111,8 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
       multiple,
       option2value,
       translate: __,
-      itemClassName
+      itemClassName,
+      resultMode
     } = this.props;
     const columns = this.getColumns();
     let valueArray = BaseSelection.value2array(value, options, option2value);
@@ -122,6 +126,12 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
             return (
               <tr
                 key={rowIndex}
+                /** 被ResultTableList引用，如果设置click事件，会导致错误删除结果列表的内容，先加一个开关判断 */
+                onClick={
+                  resultMode
+                    ? noop
+                    : e => e.defaultPrevented || this.toggleOption(option)
+                }
                 className={cx(
                   itemClassName,
                   option.className,
@@ -130,18 +140,15 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
                 )}
               >
                 {multiple ? (
-                  <td className={cx('Table-checkCell')}
+                  <td
+                    className={cx('Table-checkCell')}
                     key="checkbox"
                     onClick={e => {
                       e.stopPropagation();
                       this.toggleOption(option);
                     }}
                   >
-                    <Checkbox
-                      size="sm"
-                      checked={checked}
-                      disabled={disabled}
-                    />
+                    <Checkbox size="sm" checked={checked} disabled={disabled} />
                   </td>
                 ) : null}
                 {columns.map((column, colIndex) => (
@@ -183,4 +190,4 @@ export default themeable(
       value: 'onChange'
     })
   )
-);
+);