amis 1.9.1-beta.19 → 1.9.1-beta.23

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/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/locale/de-DE.ts

@@ -132,7 +132,7 @@ register('de-DE', {
   'File.retry': 'Wiederholen',
   'File.start': 'Hochladen beginnen',
   'File.upload': 'Hochladen',
-  'Image.upload':'Hochladen',
+  'Image.upload': 'Hochladen',
   'File.uploadFailed': 'Zurückgegebene Daten der Upload-API sind leer',
   'File.uploading': 'Wird hochgeladen...',
   'FormItem.autoUpdateloadFaild': 'Die Schnittstelle hat einen Fehler zurückgegeben, bitte sorgfältig prüfen',
@@ -333,5 +333,5 @@ register('de-DE', {
   'JSONSchema.description': 'Description',
   'JSONSchema.key': 'Key',
   'JSONSchema.array_items': 'Items',
-  'TimeNow': 'Jetzt',
+  'TimeNow': 'Jetzt'
 });

package/src/locale/en-US.ts

@@ -134,7 +134,7 @@ register('en-US', {
   'File.sizeLimit': 'The maximum file size is {{maxSize}} B',
   'File.start': 'Start upload',
   'File.upload': 'Upload',
-  'Image.upload':'Upload image',
+  'Image.upload': 'Upload image',
   'File.uploadFailed': 'return data of udpload api is empty',
   'File.uploading': 'Uploading',
   'FormItem.autoUpdateloadFaild': 'return data of autoUpdate api is error',
@@ -336,5 +336,5 @@ register('en-US', {
   'JSONSchema.description': 'Description',
   'JSONSchema.key': 'Key',
   'JSONSchema.array_items': 'Items',
-  'TimeNow': 'Now',
+  'TimeNow': 'Now'
 });

package/src/renderers/CRUD.tsx

@@ -490,8 +490,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     // 另外autoGenerateFilter时，table 里面会单独处理这块逻辑
     // 所以这里应该忽略 autoGenerateFilter 情况
     if (
-      (!this.props.filter || (store.filterTogggable && !store.filterVisible)) &&
-      !autoGenerateFilter
+      (!this.props.filter && !autoGenerateFilter) ||
+      (store.filterTogggable && !store.filterVisible)
     ) {
       this.handleFilterInit({});
     }

package/src/renderers/Form/Group.tsx

@@ -89,7 +89,7 @@ export class ControlGroupRenderer extends React.Component<InputGroupProps> {
     const subSchema: any = control;
 
     return render(`${index}`, subSchema, {
-      disabled,
+      disabled: control.disabled || disabled,
       formMode: subFormMode || mode || formMode,
       formHorizontal: subFormHorizontal || horizontal || formHorizontal,
       ...otherProps

package/src/renderers/Form/InputImage.tsx

@@ -1569,7 +1569,7 @@ export default class ImageControl extends React.Component<
                                           />
                                         </a>
                                       ) : null}
-        
+
                                       {!disabled ? (
                                         <a
                                           data-tooltip={__('Select.clear')}
@@ -1636,7 +1636,9 @@ export default class ImageControl extends React.Component<
                         ) : (
                           <>
                             <Icon icon="plus-fine" className="icon" />
-                            <span className={cx('ImageControl-addBtn-text')}>{__('Image.upload')}</span>
+                            <span className={cx('ImageControl-addBtn-text')}>
+                              {__('Image.upload')}
+                            </span>
                           </>
                         )}
 

package/src/renderers/Form/InputTag.tsx

@@ -32,6 +32,16 @@ export interface TagControlSchema extends FormOptionsControl {
    * 是否为下拉模式
    */
   dropdown?: boolean;
+
+  /**
+   * 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
+   */
+  maxTagCount?: number;
+
+  /**
+   * 收纳标签的Popover配置
+   */
+  overflowTagPopover?: object;
 }
 
 // declare function matchSorter(items:Array<any>, input:any, options:any): Array<any>;
@@ -316,6 +326,8 @@ export default class TagControl extends React.PureComponent<
       dropdown,
       options,
       optionsTip,
+      maxTagCount,
+      overflowTagPopover,
       translate: __
     } = this.props;
 
@@ -359,6 +371,8 @@ export default class TagControl extends React.PureComponent<
                 onResultChange={this.handleChange}
                 itemRender={this.renderItem}
                 clearable={clearable}
+                maxTagCount={maxTagCount}
+                overflowTagPopover={overflowTagPopover}
                 allowInput
               >
                 {loading ? <Spinner size="sm" /> : undefined}

package/src/renderers/Form/Options.tsx

@@ -320,10 +320,14 @@ export function registerOptionsControl(config: OptionsConfig) {
 
         this.toDispose.push(
           reaction(
-            () => JSON.stringify(formItem.options),
-            () => this.mounted && this.syncAutoFill(formItem.tmpValue)
+            () =>
+              JSON.stringify(formItem.getSelectedOptions(formItem.tmpValue)),
+            () =>
+              this.mounted &&
+              this.syncAutoFill(formItem.getSelectedOptions(formItem.tmpValue))
           )
         );
+
         // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
         if (
           multiple &&
@@ -361,10 +365,6 @@ export function registerOptionsControl(config: OptionsConfig) {
     componentDidMount() {
       this.mounted = true;
       this.normalizeValue();
-
-      if (this.props.value) {
-        this.syncAutoFill(this.props.value);
-      }
     }
 
     shouldComponentUpdate(nextProps: OptionsProps) {
@@ -448,7 +448,6 @@ export function registerOptionsControl(config: OptionsConfig) {
 
       if (prevProps.value !== props.value || formItem?.expressionsInOptions) {
         formItem.syncOptions(undefined, props.data);
-        this.syncAutoFill(props.value);
       }
     }
 
@@ -482,7 +481,7 @@ export function registerOptionsControl(config: OptionsConfig) {
       }
     }
 
-    syncAutoFill(value: any) {
+    syncAutoFill(selectedOptions: Array<any>) {
       const {autoFill, multiple, onBulkChange, data} = this.props;
       const formItem = this.props.formItem as IFormItemStore;
 
@@ -492,7 +491,6 @@ export function registerOptionsControl(config: OptionsConfig) {
         !isEmpty(autoFill) &&
         formItem.filteredOptions.length
       ) {
-        const selectedOptions = formItem.getSelectedOptions(value);
         const toSync = dataMapping(
           autoFill,
           multiple

package/src/renderers/Form/Select.tsx

@@ -18,6 +18,9 @@ import Spinner from '../../components/Spinner';
 import {BaseTransferRenderer, TransferControlSchema} from './Transfer';
 import TransferDropDown from '../../components/TransferDropDown';
 
+import type {TooltipObject} from '../../components/TooltipWrapper';
+import type {SchemaClassName} from '../../Schema';
+
 /**
  * Select 下拉选择框。
  * 文档：https://baidu.gitee.io/amis/docs/components/form/select
@@ -85,18 +88,46 @@ export interface SelectControlSchema extends FormOptionsControl {
    * 搜索 API
    */
   searchApi?: SchemaApi;
+
+  /**
+   * 单个选项的高度，主要用于虚拟渲染
+   */
+  itemHeight?: number;
+
+  /**
+   * 在选项数量达到多少时开启虚拟渲染
+   */
+  virtualThreshold?: number;
+
   /**
    * 可多选条件下，是否可全选
    */
   checkAll?: boolean;
+
   /**
    * 可多选条件下，是否默认全选中所有值
    */
   defaultCheckAll?: boolean;
+
   /**
    * 可多选条件下，全选项文案，默认 ”全选“
    */
   checkAllLabel?: string;
+
+  /**
+   * 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
+   */
+  maxTagCount?: number;
+
+  /**
+   * 收纳标签的Popover配置
+   */
+  overflowTagPopover?: object;
+
+  /**
+   * 选项的自定义CSS类名
+   */
+  optionClassName?: SchemaClassName;
 }
 
 export interface SelectProps extends OptionsControlProps {
@@ -104,6 +135,8 @@ export interface SelectProps extends OptionsControlProps {
   searchable?: boolean;
   defaultOpen?: boolean;
   useMobileUI?: boolean;
+  maxTagCount?: number;
+  overflowTagPopover?: TooltipObject;
 }
 
 export type SelectRendererEvent =
@@ -322,9 +355,11 @@ export default class SelectControl extends React.Component<SelectProps, any> {
 
   @autobind
   renderMenu(option: Option, state: any) {
-    const {menuTpl, render, data} = this.props;
+    const {menuTpl, render, data, optionClassName} = this.props;
 
     return render(`menu/${state.index}`, menuTpl, {
+      showNativeTitle: true,
+      className: cx('Select-option-content', optionClassName),
       data: createObject(createObject(data, state), option)
     });
   }
@@ -476,7 +511,9 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
       leftMode,
       borderMode,
       useMobileUI,
-      popOverContainer
+      popOverContainer,
+      maxTagCount,
+      overflowTagPopover
     } = this.props;
 
     // 目前 LeftOptions 没有接口可以动态加载
@@ -520,6 +557,8 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
           borderMode={borderMode}
           useMobileUI={useMobileUI}
           popOverContainer={popOverContainer}
+          maxTagCount={maxTagCount}
+          overflowTagPopover={overflowTagPopover}
         />
 
         <Spinner overlay key="info" show={loading} />

package/src/renderers/Form/Transfer.tsx

@@ -150,6 +150,12 @@ export class BaseTransferRenderer<
 > extends React.Component<T> {
   tranferRef?: BaseTransfer;
 
+  reload() {
+    const {reloadOptions} = this.props;
+
+    reloadOptions?.();
+  }
+
   @autobind
   async handleChange(value: Array<Option> | Option, optionModified?: boolean) {
     const {

package/src/renderers/Form/TreeSelect.tsx

@@ -112,7 +112,6 @@ export interface TreeSelectProps extends OptionsControlProps {
 
 export interface TreeSelectState {
   isOpened: boolean;
-  isFocused: boolean;
   inputValue: string;
 }
 
@@ -157,8 +156,7 @@ export default class TreeSelectControl extends React.Component<
 
     this.state = {
       inputValue: '',
-      isOpened: false,
-      isFocused: false
+      isOpened: false
     };
 
     this.open = this.open.bind(this);
@@ -206,22 +204,23 @@ export default class TreeSelectControl extends React.Component<
 
   handleFocus(e: any) {
     const {dispatchEvent, value, data} = this.props;
-    this.setState({
-      isFocused: true
-    });
-    dispatchEvent('focus', createObject(data, {
-      value
-    }));
+
+    dispatchEvent(
+      'focus',
+      createObject(data, {
+        value
+      })
+    );
   }
 
   handleBlur(e: any) {
     const {dispatchEvent, value, data} = this.props;
-    this.setState({
-      isFocused: false
-    });
-    dispatchEvent('blur', createObject(data, {
-      value
-    }));
+    dispatchEvent(
+      'blur',
+      createObject(data, {
+        value
+      })
+    );
   }
 
   handleKeyPress(e: React.KeyboardEvent) {
@@ -645,7 +644,6 @@ export default class TreeSelectControl extends React.Component<
             'TreeSelect--searchable':
               searchable || isEffectiveApi(autoComplete),
             'is-opened': this.state.isOpened,
-            'is-focused': this.state.isFocused,
             'is-disabled': disabled
           })}
           result={

package/src/renderers/Form/index.tsx

@@ -63,7 +63,7 @@ export interface FormSchemaHorizontal {
   right?: number;
   leftFixed?: boolean | number | 'xs' | 'sm' | 'md' | 'lg';
   justify?: boolean; // 两端对齐
-  labelAlign?: 'left' | 'right' // label对齐方式
+  labelAlign?: 'left' | 'right'; // label对齐方式
 }
 
 /**
@@ -988,7 +988,14 @@ export default class Form extends React.Component<FormProps, object> {
       data = store.data;
     }
     if (Array.isArray(action.required) && action.required.length) {
-      return store.validateFields(action.required).then(async result => {
+      store.clearErrors(); // 如果是按钮指定了required，则校验前先清空一下遗留的校验报错
+
+      const fields = action.required.map(item => ({
+        name: item,
+        rules: {isRequired: true}
+      }));
+
+      return store.validateFields(fields).then(async result => {
         if (!result) {
           const dispatcher = await dispatchEvent(
             'validateError',
@@ -997,6 +1004,9 @@ export default class Form extends React.Component<FormProps, object> {
           if (!dispatcher?.prevented) {
             env.notify('error', __('Form.validateFailed'));
           }
+
+          /** 抛异常是为了在dialog中catch这个错误，避免弹窗直接关闭 */
+          return Promise.reject(__('Form.validateFailed'));
         } else {
           dispatchEvent('validateSucc', this.props.data);
           this.handleAction(
@@ -1006,6 +1016,7 @@ export default class Form extends React.Component<FormProps, object> {
             throwErrors,
             delegate
           );
+          return;
         }
       });
     }

package/src/renderers/QRCode.tsx

@@ -1,11 +1,22 @@
 import React from 'react';
 import cx from 'classnames';
+import mapValues from 'lodash/mapValues';
 import {Renderer, RendererProps} from '../factory';
 import {FormItem, FormControlProps} from './Form/Item';
 import {filter} from '../utils/tpl';
 import {QRCodeSVG} from 'qrcode.react';
 import {BaseSchema, SchemaClassName} from '../Schema';
-import {getPropValue} from '../utils/helper';
+import {getPropValue, isObject, isNumeric} from '../utils/helper';
+import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+
+export interface QRCodeImageSettings {
+  src: string;
+  height: number;
+  width: number;
+  excavate: boolean;
+  x?: number;
+  y?: number;
+}
 
 /**
  * 二维码展示控件。
@@ -49,6 +60,11 @@ export interface QRCodeSchema extends BaseSchema {
    * 占位符
    */
   placeholder?: string;
+
+  /**
+   * 图片配置
+   */
+  imageSettings?: QRCodeImageSettings;
 }
 
 export interface QRCodeProps
@@ -65,6 +81,38 @@ export default class QRCode extends React.Component<QRCodeProps, any> {
     placeholder: '-'
   };
 
+  /**
+   * 获取图片配置
+   */
+  getImageSettings(): QRCodeImageSettings | undefined {
+    const {imageSettings, data} = this.props;
+
+    if (
+      !imageSettings ||
+      !isObject(imageSettings) ||
+      !imageSettings.src ||
+      typeof imageSettings.src !== 'string'
+    ) {
+      return undefined;
+    }
+
+    if (isPureVariable(imageSettings.src)) {
+      imageSettings.src = resolveVariableAndFilter(
+        imageSettings.src,
+        data,
+        '| raw'
+      );
+    }
+
+    return mapValues(imageSettings, (value: any, key: string) => {
+      if (!!~['width', 'height', 'x', 'y'].indexOf(key)) {
+        /** 处理非数字格式的输入，QRCodeSVG内部会对空值进行默认赋值 */
+        return isNumeric(value) ? Number(value) : null;
+      }
+      return value;
+    });
+  }
+
   render() {
     const {
       className,
@@ -102,6 +150,7 @@ export default class QRCode extends React.Component<QRCodeProps, any> {
             bgColor={backgroundColor}
             fgColor={foregroundColor}
             level={level || 'L'}
+            imageSettings={this.getImageSettings()}
           />
         )}
       </div>

package/src/renderers/Table/exportExcel.ts

@@ -91,6 +91,10 @@ export async function exportExcel(
   // 自定义导出列配置
   if (toolbar.exportColumns && Array.isArray(toolbar.exportColumns)) {
     columns = toolbar.exportColumns;
+    // 因为后面列 props 都是从 pristine 里获取，所以这里归一一下
+    for (const column of columns) {
+      column.pristine = column;
+    }
   }
 
   const filteredColumns = exportColumnNames
@@ -123,14 +127,15 @@ export async function exportExcel(
   // 数据从第二行开始
   let rowIndex = 1;
   for (const row of rows) {
+    const rowData = createObject(data, row.data);
     rowIndex += 1;
     const sheetRow = worksheet.getRow(rowIndex);
     let columIndex = 0;
     for (const column of filteredColumns) {
       columIndex += 1;
       const name = column.name!;
-      const value = getVariable(row.data, name);
-      if (typeof value === 'undefined' && !(column as TplSchema).tpl) {
+      const value = getVariable(rowData, name);
+      if (typeof value === 'undefined' && !column.pristine.tpl) {
         continue;
       }
       // 处理合并单元格
@@ -199,21 +204,33 @@ export async function exportExcel(
           console.warn(e.stack);
         }
       } else if (type == 'link') {
-        const linkURL = getAbsoluteUrl(value);
+        const href = column.pristine.href;
+        const linkURL =
+          (typeof href === 'string' && href
+            ? filter(href, rowData, '| raw')
+            : undefined) || value;
+        const body = column.pristine.body;
+        // 没法支持嵌套了
+        const text =
+          typeof body === 'string' && body
+            ? filter(body, rowData, '| raw')
+            : undefined;
+
+        const absoluteURL = getAbsoluteUrl(linkURL);
         sheetRow.getCell(columIndex).value = {
-          text: value,
-          hyperlink: linkURL
+          text: text || absoluteURL,
+          hyperlink: absoluteURL
         };
-      } else if (type === 'mapping') {
+      } else if (type === 'mapping' || (type as any) === 'static-mapping') {
         // 拷贝自 Mapping.tsx
-        let map = (column as MappingSchema).map;
-        const source = (column as MappingSchema).source;
+        let map = column.pristine.map;
+        const source = column.pristine.source;
         if (source) {
           let sourceValue = source;
           if (isPureVariable(source)) {
             sourceValue = resolveVariableAndFilter(
               source as string,
-              data,
+              rowData,
               '| raw'
             );
           }
@@ -222,7 +239,7 @@ export async function exportExcel(
           if (mapKey in remoteMappingCache) {
             map = remoteMappingCache[mapKey];
           } else {
-            const res = await env.fetcher(sourceValue, data);
+            const res = await env.fetcher(sourceValue, rowData);
             if (res.data) {
               remoteMappingCache[mapKey] = res.data;
               map = res.data;
@@ -248,7 +265,7 @@ export async function exportExcel(
           fromNow,
           format = 'YYYY-MM-DD',
           valueFormat = 'X'
-        } = column as DateSchema;
+        } = column.pristine;
         if (value) {
           let ISODate = moment(value, moment.ISO_8601);
           let NormalDate = moment(value, valueFormat);
@@ -267,9 +284,9 @@ export async function exportExcel(
           sheetRow.getCell(columIndex).value = viewValue;
         }
       } else {
-        if ((column as TplSchema).tpl) {
+        if (column.pristine.tpl) {
           sheetRow.getCell(columIndex).value = removeHTMLTag(
-            filter((column as TplSchema).tpl, createObject(data, row.data))
+            filter(column.pristine.tpl, rowData)
           );
         } else {
           sheetRow.getCell(columIndex).value = value;