amis 1.9.1-beta.12 → 1.9.1-beta.21

package/src/components/Select.tsx

@@ -7,6 +7,8 @@
 
 import {uncontrollable} from 'uncontrollable';
 import React from 'react';
+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 +26,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 +39,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 +61,8 @@ export interface OptionProps {
   disabled?: boolean;
   creatable?: boolean;
   pathSeparator?: string;
+  itemHeight?: number; // 每个选项的高度，主要用于虚拟渲染
+  virtualThreshold?: number; // 数据量多大的时候开启虚拟渲染
   hasError?: boolean;
   block?: boolean;
   onAdd?: (
@@ -350,6 +353,16 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
    * 移动端样式类名
    */
   mobileClassName?: string;
+
+  /**
+   * 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
+   */
+  maxTagCount?: number;
+
+  /**
+   * 收纳标签的Popover配置
+   */
+  overflowTagPopover?: TooltipObject;
 }
 
 interface SelectState {
@@ -382,7 +395,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
     checkAll: false,
     checkAllLabel: 'Select.checkAll',
     defaultCheckAll: false,
-    overlayPlacement: 'auto'
+    overlayPlacement: 'auto',
+    virtualThreshold: 100
   };
 
   input: HTMLInputElement;
@@ -723,11 +737,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 +751,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 (
@@ -778,10 +900,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
               })}
               onClick={this.removeItem.bind(this, index)}
             >
-              <Icon
-                icon="close"
-                className="icon"
-              />
+              <Icon icon="close" className="icon" />
             </span>
           </div>
         </TooltipWrapper>
@@ -825,6 +944,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       hideSelected,
       renderMenu,
       mobileClassName,
+      virtualThreshold = 200,
       useMobileUI = false
     } = this.props;
     const {selection} = this.state;
@@ -853,7 +973,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}) => {
@@ -980,7 +1101,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
         ref={this.menu}
         className={cx('Select-menu', {
           'Select--longlist':
-            filtedOptions.length && filtedOptions.length > 100,
+            filtedOptions.length && filtedOptions.length > virtualThreshold,
           'is-mobile': mobileUI
         })}
       >
@@ -1026,7 +1147,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           </div>
         ) : null}
 
-        <div ref={this.menuItemRef} className={cx('Select-option invisible')}>
+        <div ref={this.menuItemRef} className={cx('Select-option hidden')}>
           {multiple ? (
             <Checkbox size="sm">Placeholder</Checkbox>
           ) : (
@@ -1042,15 +1163,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}
             />
           ) : (
@@ -1083,7 +1204,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           overlay
           className={cx('Select-popover')}
           style={{
-            minWidth: this.target ? this.target.offsetWidth : 'auto'
+            width: this.target ? this.target.offsetWidth : 'auto'
           }}
           onHide={this.close}
         >

package/src/components/Selection.tsx

@@ -33,6 +33,7 @@ export interface BaseSelectionProps extends ThemeProps, LocaleProps {
   itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
   disabled?: boolean;
   onClick?: (e: React.MouseEvent) => void;
+  placeholderRender?: (props: any) => JSX.Element | null;
 }
 
 export interface ItemRenderStates {

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'
     })
   )
-);
+);

package/src/components/TabsTransfer.tsx

@@ -45,8 +45,8 @@ export interface TabsTransferProps
     colIndex: number,
     rowIndex: number
   ) => JSX.Element;
-  onTabChange: (key: number) => void;
-  activeKey: number
+  onTabChange?: (key: number) => void;
+  activeKey?: number
 }
 
 export interface TabsTransferState {

package/src/components/TooltipWrapper.tsx

@@ -63,7 +63,7 @@ export interface TooltipObject {
   /**
    * 浮层内容可通过JSX渲染
    */
-  children?: () => JSX.Element | JSX.Element;
+  children?: () => JSX.Element;
   /**
    * 挂载容器元素
    */
@@ -98,7 +98,7 @@ export interface TooltipWrapperProps {
   /**
    * 显示&隐藏时触发
    */
-   onVisibleChange?: (visible: boolean) => void;
+  onVisibleChange?: (visible: boolean) => void;
 }
 
 interface TooltipWrapperState {
@@ -153,25 +153,31 @@ export class TooltipWrapper extends React.Component<
   }
 
   show() {
-    this.setState({
-      show: true
-    }, () => {
-      if (this.props.onVisibleChange) {
-        this.props.onVisibleChange(true);
+    this.setState(
+      {
+        show: true
+      },
+      () => {
+        if (this.props.onVisibleChange) {
+          this.props.onVisibleChange(true);
+        }
       }
-    });
+    );
   }
 
   hide() {
     waitToHide = null;
     this.moutned &&
-      this.setState({
-        show: false
-      }, () => {
-        if (this.props.onVisibleChange) {
-          this.props.onVisibleChange(false);
+      this.setState(
+        {
+          show: false
+        },
+        () => {
+          if (this.props.onVisibleChange) {
+            this.props.onVisibleChange(false);
+          }
         }
-      });
+      );
   }
 
   getChildProps() {

package/src/components/Transfer.tsx

@@ -664,10 +664,6 @@ export class Transfer<
         onChange={onChange}
         placeholder={placeholder}
         itemRender={resultItemRender}
-        columns={columns!}
-        options={options || []}
-        option2value={option2value}
-        cellRender={cellRender}
         searchable={searchable}
         onSearch={onResultSearch}
       />

package/src/components/TransferDropDown.tsx

@@ -9,6 +9,8 @@ import InputBox from './InputBox';
 import PopOverContainer from './PopOverContainer';
 import {isMobile} from '../utils/helper';
 
+import type {TooltipObject} from './TooltipWrapper';
+
 export interface TransferDropDownProps extends TransferProps {
   // 新的属性？
   multiple?: boolean;
@@ -16,6 +18,8 @@ export interface TransferDropDownProps extends TransferProps {
   useMobileUI?: boolean;
   popOverContainer?: any;
   itemRender: (value: any) => JSX.Element | string;
+  maxTagCount?: number;
+  overflowTagPopover?: TooltipObject;
 }
 
 export class TransferDropDown extends Transfer<TransferDropDownProps> {
@@ -33,7 +37,9 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
       multiple,
       borderMode,
       useMobileUI,
-      popOverContainer
+      popOverContainer,
+      maxTagCount,
+      overflowTagPopover
     } = this.props;
     const {inputValue, searchResult} = this.state;
 
@@ -109,6 +115,8 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
             placeholder={__('Select.placeholder')}
             disabled={disabled}
             clearable={clearable}
+            maxTagCount={maxTagCount}
+            overflowTagPopover={overflowTagPopover}
             ref={ref}
             itemRender={itemRender}
             useMobileUI={useMobileUI}

package/src/components/TreeSelection.tsx

@@ -282,6 +282,7 @@ export class TreeSelection extends BaseSelection<
       placeholder,
       classnames: cx,
       option2value,
+      placeholderRender,
       translate: __
     } = this.props;
 
@@ -298,7 +299,7 @@ export class TreeSelection extends BaseSelection<
           body
         ) : (
           <div className={cx('TreeSelection-placeholder')}>
-            {__(placeholder)}
+            {placeholderRender?.(this.props) ?? __(placeholder)}
           </div>
         )}
       </div>

package/src/components/formula/Editor.tsx

@@ -13,12 +13,13 @@ import CodeMirrorEditor from '../CodeMirror';
 import {autobind, eachTree} from '../../utils/helper';
 import {themeable, ThemeProps} from '../../theme';
 import {localeable, LocaleProps} from '../../locale';
+import {toast} from '../Toast';
 
 export interface VariableItem {
   label: string;
   value?: string;
   children?: Array<VariableItem>;
-  type: '';
+  type?: string;
   tag?: string;
   selectMode?: 'tree' | 'tabs';
 }
@@ -69,6 +70,11 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
   variableClassName?: string;
 
   functionClassName?: string;
+
+  /**
+   * 当前输入项字段 name: 用于避免循环绑定自身导致无限渲染
+   */
+  selfVariableName?: string;
 }
 
 export interface FunctionsProps {
@@ -221,6 +227,13 @@ export class FormulaEditor extends React.Component<
 
   @autobind
   handleVariableSelect(item: VariableItem) {
+    const {evalMode, selfVariableName} = this.props;
+
+    if (item && item.label && selfVariableName === item.label) {
+      toast.warning('不能使用当前变量[self]，避免循环引用。');
+      return;
+    }
+
     this.editorPlugin?.insertContent(
       {
         key: item.value,
@@ -252,7 +265,8 @@ export class FormulaEditor extends React.Component<
       classnames: cx,
       variableClassName,
       functionClassName,
-      classPrefix
+      classPrefix,
+      selfVariableName
     } = this.props;
     const {focused} = this.state;
     const customFunctions = Array.isArray(functions) ? functions : [];
@@ -306,6 +320,7 @@ export class FormulaEditor extends React.Component<
                 selectMode={variableMode}
                 data={variables!}
                 onSelect={this.handleVariableSelect}
+                selfVariableName={selfVariableName}
               />
             </div>
           </div>

package/src/components/formula/Picker.tsx

@@ -17,6 +17,7 @@ import {themeable} from '../../theme';
 import {localeable} from '../../locale';
 import type {SchemaIcon} from '../../Schema';
 import {parse, Evaluator} from 'amis-formula';
+import Input from '../Input';
 
 export interface FormulaPickerProps extends FormulaEditorProps {
   // 新的属性？
@@ -35,7 +36,7 @@ export interface FormulaPickerProps extends FormulaEditorProps {
   /**
    * 控件模式
    */
-  mode?: 'button' | 'input-button';
+  mode?: 'button' | 'input-button' | 'input-group';
 
   /**
    * 边框模式，全边框，还是半边框，或者没边框。
@@ -173,6 +174,12 @@ export class FormulaPicker extends React.Component<
     this.setState({value}, () => this.handleConfirm());
   }
 
+  @autobind
+  handleInputGroupChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const onChange = this.props.onChange;
+    onChange && onChange(e.currentTarget.value);
+  }
+
   @autobind
   handleEditorChange(value: string) {
     this.setState({
@@ -185,6 +192,10 @@ export class FormulaPicker extends React.Component<
   handleEditorConfirm() {
     const {translate: __} = this.props;
     const value = this.state.editorValue;
+    this.confirm(value);
+  }
+
+  confirm(value: string) {
     const validate = this.validate(value);
 
     if (validate === true) {
@@ -237,13 +248,11 @@ export class FormulaPicker extends React.Component<
     const {translate: __} = this.props;
 
     try {
-      const ast = parse(value, {
+      parse(value, {
         evalMode: this.props.evalMode,
         allowFilter: false
       });
 
-      new Evaluator({}).evalute(ast);
-
       return true;
     } catch (e) {
       if (/\s(\d+:\d+)$/.test(e.message)) {
@@ -291,8 +300,14 @@ export class FormulaPicker extends React.Component<
             setState: this.updateState
           })
         ) : (
-          <div className={cx('FormulaPicker', className)}>
-            {mode === 'button' ? (
+          <div
+            className={cx(
+              'FormulaPicker',
+              className,
+              mode === 'input-group' ? 'is-input-group' : ''
+            )}
+          >
+            {mode === 'button' && (
               <Button
                 className={cx('FormulaPicker-action', 'w-full')}
                 level={level}
@@ -321,7 +336,8 @@ export class FormulaPicker extends React.Component<
                   {__(btnLabel || 'FormulaEditor.btnLabel')}
                 </span>
               </Button>
-            ) : (
+            )}
+            {mode === 'input-button' && (
               <>
                 <ResultBox
                   className={cx(
@@ -362,6 +378,26 @@ export class FormulaPicker extends React.Component<
                 </Button>
               </>
             )}
+            {mode === 'input-group' && (
+              <>
+                <Input
+                  className={cx('FormulaPicker-input')}
+                  onChange={this.handleInputGroupChange}
+                  placeholder={allowInput ? placeholder : ''}
+                  autoComplete="off"
+                  value={value}
+                  disabled={disabled}
+                  readOnly={!allowInput}
+                />
+
+                <a
+                  className={cx(`FormulaPicker-toggler`)}
+                  onClick={this.handleClick}
+                >
+                  <Icon icon="function" className="icon" />
+                </a>
+              </>
+            )}
           </div>
         )}
         <Modal
@@ -381,6 +417,7 @@ export class FormulaPicker extends React.Component<
               variableMode={this.state.variableMode ?? variableMode}
               value={editorValue}
               onChange={this.handleEditorChange}
+              selfVariableName={this.props.selfVariableName}
             />
           </Modal.Body>
           <Modal.Footer>