amis 1.3.5-beta.6 → 1.4.2-beta.1

package/src/renderers/DropDownButton.tsx

@@ -7,10 +7,11 @@ import type {TooltipObject, Trigger} from '../components/TooltipWrapper';
 import {isDisabled, isVisible, noop} from '../utils/helper';
 import {filter} from '../utils/tpl';
 import {Icon} from '../components/icons';
-import {BaseSchema, SchemaClassName} from '../Schema';
+import {BaseSchema, SchemaClassName, SchemaIcon} from '../Schema';
 import {ActionSchema} from './Action';
 import {DividerSchema} from './Divider';
 import {RootClose} from '../utils/RootClose';
+import {generateIcon} from '../utils/icon';
 
 /**
  * 下拉按钮渲染器。
@@ -76,6 +77,21 @@ export interface DropdownButtonSchema extends BaseSchema {
    * 是否只显示图标。
    */
   iconOnly?: boolean;
+
+  /**
+   * 右侧图标
+   */
+  rightIcon?: SchemaIcon;
+
+  /**
+   * 触发条件，默认是 click
+   */
+  trigger?: 'click' | 'hover';
+
+  /**
+   * 是否显示下拉按钮
+   */
+  hideCaret?: boolean;
 }
 
 export interface DropDownButtonProps
@@ -265,10 +281,17 @@ export default class DropDownButton extends React.Component<
       align,
       iconOnly,
       icon,
+      rightIcon,
       isActived,
-      data
+      trigger,
+      data,
+      hideCaret
     } = this.props;
 
+    const iconElement = generateIcon(cx, icon, 'm-r-xs');
+
+    const rightIconElement = generateIcon(cx, rightIcon, 'm-l-xs');
+
     return (
       <div
         className={cx(
@@ -281,6 +304,8 @@ export default class DropDownButton extends React.Component<
           },
           className
         )}
+        onMouseEnter={trigger === 'hover' ? this.open : () => {}}
+        onMouseLeave={trigger === 'hover' ? this.close : () => {}}
         ref={this.domRef}
       >
         <TooltipWrapper
@@ -309,17 +334,14 @@ export default class DropDownButton extends React.Component<
               size ? `Button--${size}` : ''
             )}
           >
-            {icon ? (
-              typeof icon === 'string' ? (
-                <i className={cx(icon, 'm-r-xs')} />
-              ) : (
-                icon
-              )
-            ) : null}
+            {iconElement}
             {typeof label === 'string' ? filter(label, data) : label}
-            <span className={cx('DropDown-caret')}>
-              <Icon icon="caret" className="icon" />
-            </span>
+            {rightIconElement}
+            {!hideCaret ? (
+              <span className={cx('DropDown-caret')}>
+                <Icon icon="ellipsis-v" className="icon" />
+              </span>
+            ) : null}
           </button>
         </TooltipWrapper>
         {this.state.isOpened ? this.renderOuter() : null}

package/src/renderers/Form/ButtonGroupSelect.tsx

@@ -108,6 +108,9 @@ export default class ButtonGroupControl extends React.Component<
             className: cx(option.className, btnClassName),
             disabled: option.disabled || disabled,
             onClick: (e: React.UIEvent<any>) => {
+              if (disabled) {
+                return;
+              }
               this.handleToggle(option);
               e.preventDefault(); // 禁止 onAction 触发
             }

package/src/renderers/Form/Checkbox.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
 import Checkbox from '../../components/Checkbox';
+import {withBadge, BadgeSchema} from '../../components/Badge';
 
 /**
  * Checkbox 勾选框。
@@ -27,6 +28,11 @@ export interface CheckboxControlSchema extends FormBaseControl {
    * 选项说明
    */
   option?: string;
+
+  /**
+   * 角标
+   */
+  badge?: BadgeSchema;
 }
 
 export interface CheckboxProps
@@ -78,4 +84,6 @@ export default class CheckboxControl extends React.Component<
   type: 'checkbox',
   sizeMutable: false
 })
+// @ts-ignore
+@withBadge
 export class CheckboxControlRenderer extends CheckboxControl {}

package/src/renderers/Form/Combo.tsx

@@ -251,7 +251,6 @@ export interface ComboControlSchema extends FormBaseControl {
     /**
      * 最大值验证错误提示
      */
-
     maxLengthValidateFailed?: string;
   };
 }
@@ -1010,7 +1009,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                 {deleteIcon ? (
                   <i className={deleteIcon} />
                 ) : (
-                  <Icon icon="close" className="icon" />
+                  <Icon icon="status-close" className="icon" />
                 )}
               </div>
             );
@@ -1189,7 +1188,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                     {deleteIcon ? (
                       <i className={deleteIcon} />
                     ) : (
-                      <Icon icon="close" className="icon" />
+                      <Icon icon="status-close" className="icon" />
                     )}
                   </a>
                 );

package/src/renderers/Form/Editor.tsx

@@ -118,7 +118,7 @@ export default class EditorControl extends React.Component<EditorProps, any> {
   static defaultProps: Partial<EditorProps> = {
     language: 'javascript',
     editorTheme: 'vs',
-    allowFullscreen: false,
+    allowFullscreen: true,
     options: {
       automaticLayout: true,
       selectOnLineNumbers: true,
@@ -294,26 +294,25 @@ export const availableLanguages = [
   'yaml'
 ];
 
-export const EditorControls: Array<
-  typeof EditorControl
-> = availableLanguages.map((lang: string) => {
-  @FormItem({
-    type: `${lang}-editor`,
-    sizeMutable: false
-  })
-  class EditorControlRenderer extends EditorControl {
-    static lang = lang;
-    static displayName = `${lang[0].toUpperCase()}${lang.substring(
-      1
-    )}EditorControlRenderer`;
-    static defaultProps = {
-      ...EditorControl.defaultProps,
-      language: lang
-    };
-  }
+export const EditorControls: Array<typeof EditorControl> =
+  availableLanguages.map((lang: string) => {
+    @FormItem({
+      type: `${lang}-editor`,
+      sizeMutable: false
+    })
+    class EditorControlRenderer extends EditorControl {
+      static lang = lang;
+      static displayName = `${lang[0].toUpperCase()}${lang.substring(
+        1
+      )}EditorControlRenderer`;
+      static defaultProps = {
+        ...EditorControl.defaultProps,
+        language: lang
+      };
+    }
 
-  return EditorControlRenderer;
-});
+    return EditorControlRenderer;
+  });
 
 @FormItem({
   type: 'js-editor',

package/src/renderers/Form/InputExcel.tsx

@@ -28,6 +28,11 @@ export interface InputExcelControlSchema extends FormBaseControl {
    * 是否包含空内容，主要用于二维数组模式
    */
   includeEmpty: boolean;
+
+  /**
+   * 纯文本模式
+   */
+  plainText: boolean;
 }
 
 export interface ExcelProps
@@ -48,12 +53,15 @@ export default class ExcelControl extends React.PureComponent<
   static defaultProps: Partial<ExcelProps> = {
     allSheets: false,
     parseMode: 'object',
-    includeEmpty: true
+    includeEmpty: true,
+    plainText: true
   };
   state: ExcelControlState = {
     open: false
   };
 
+  ExcelJS: any;
+
   @autobind
   handleDrop(files: File[]) {
     const {allSheets, onChange} = this.props;
@@ -63,6 +71,7 @@ export default class ExcelControl extends React.PureComponent<
     reader.onload = async () => {
       if (reader.result) {
         import('exceljs').then(async (ExcelJS: any) => {
+          this.ExcelJS = ExcelJS;
           const workbook = new ExcelJS.Workbook();
           await workbook.xlsx.load(reader.result);
           if (allSheets) {
@@ -88,7 +97,7 @@ export default class ExcelControl extends React.PureComponent<
    */
   readWorksheet(worksheet: any) {
     const result: any[] = [];
-    const {parseMode} = this.props;
+    const {parseMode, plainText} = this.props;
 
     if (parseMode === 'array') {
       worksheet.eachRow((row: any, rowNumber: number) => {
@@ -107,7 +116,23 @@ export default class ExcelControl extends React.PureComponent<
           const data: any = {};
           row.eachCell((cell: any, colNumber: any) => {
             if (firstRowValues[colNumber]) {
-              data[firstRowValues[colNumber]] = cell.value;
+              let value = cell.value;
+              if (plainText) {
+                const ExcelValueType = this.ExcelJS.ValueType;
+                if (cell.type === ExcelValueType.Hyperlink) {
+                  value = cell.value.hyperlink;
+                } else if (cell.type === ExcelValueType.Formula) {
+                  value = cell.value.result;
+                } else if (cell.type === ExcelValueType.RichText) {
+                  value = cell.value.richText
+                    .map((item: any) => item.text)
+                    .join('');
+                } else if (cell.type === ExcelValueType.Error) {
+                  value = '';
+                }
+              }
+
+              data[firstRowValues[colNumber]] = value;
             }
           });
           result.push(data);

package/src/renderers/Form/InputFile.tsx

@@ -1223,13 +1223,14 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                       onClick={this.handleSelect}
                     >
                       <Icon icon="upload" className="icon" />
-                      {!multiple && files.length
+                      <span>{!multiple && files.length
                         ? __('File.repick')
                         : multiple && files.length
                         ? __('File.continueAdd')
                         : btnLabel
                         ? btnLabel
                         : __('File.upload')}
+                      </span>
                     </Button>
                   ) : null}
 

package/src/renderers/Form/InputImage.tsx

@@ -110,6 +110,16 @@ export interface ImageControlSchema extends FormBaseControl {
         scalable?: boolean;
       };
 
+  /**
+   * 裁剪后的图片类型
+   */
+  cropFormat?: string;
+
+  /**
+   * 裁剪后的质量
+   */
+  cropQuality?: number;
+
   /**
    * 是否允许二次裁剪。
    */
@@ -862,14 +872,19 @@ export default class ImageControl extends React.Component<
   }
 
   handleCrop() {
-    this.cropper.getCroppedCanvas().toBlob((file: File) => {
-      this.addFiles([file]);
-      this.setState({
-        cropFile: undefined,
-        locked: false,
-        lockedReason: ''
-      });
-    });
+    const {cropFormat, cropQuality} = this.props;
+    this.cropper.getCroppedCanvas().toBlob(
+      (file: File) => {
+        this.addFiles([file]);
+        this.setState({
+          cropFile: undefined,
+          locked: false,
+          lockedReason: ''
+        });
+      },
+      cropFormat || 'image/png',
+      cropQuality || 1
+    );
   }
 
   cancelCrop() {
@@ -1362,7 +1377,6 @@ export default class ImageControl extends React.Component<
                                     fixedSize ? fixedSizeClassName : ''
                                   )}
                                 >
-                                  <p>{__('File.uploading')}</p>
                                   <div className={cx('ImageControl-progress')}>
                                     <span
                                       style={{
@@ -1375,6 +1389,7 @@ export default class ImageControl extends React.Component<
                                       )}
                                     />
                                   </div>
+                                  <p>{__('File.uploading')}</p>
                                 </div>
                               </>
                             ) : (
@@ -1509,7 +1524,10 @@ export default class ImageControl extends React.Component<
                             thumbRatio={thumbRatio}
                           />
                         ) : (
-                          <Icon icon="plus" className="icon" />
+                          <>
+                            <Icon icon="plus" className="icon" />
+                            <span>{__('File.upload')}</span>
+                          </>
                         )}
 
                         {isFocused ? (

package/src/renderers/Form/InputTable.tsx

@@ -30,6 +30,26 @@ export interface TableControlSchema
    */
   addable?: boolean;
 
+  /**
+   * 可复制新增
+   */
+  copyable?: boolean;
+
+  /**
+   * 复制按钮文字
+   */
+  copyBtnLabel?: string;
+
+  /**
+   * 复制按钮图标
+   */
+  copyBtnIcon?: string;
+
+  /**
+   * 是否显示复制按钮
+   */
+  copyAddBtn?: boolean;
+
   /**
    * 是否可以拖拽排序
    */
@@ -41,12 +61,12 @@ export interface TableControlSchema
   addApi?: SchemaApi;
 
   /**
-   * 新增按钮
+   * 新增按钮文字
    */
   addBtnLabel?: string;
 
   /**
-   * 新增图标
+   * 新增按钮图标
    */
   addBtnIcon?: string;
 
@@ -73,12 +93,12 @@ export interface TableControlSchema
   /**
    * 更新按钮名称
    */
-  updateBtnLabel?: string;
+  editBtnLabel?: string;
 
   /**
    * 更新按钮图标
    */
-  updateBtnIcon?: string;
+  editBtnIcon?: string;
 
   /**
    * 确认按钮文字
@@ -172,7 +192,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     placeholder: '空',
     scaffold: {},
     addBtnIcon: 'plus',
-    updateBtnIcon: 'pencil',
+    copyBtnIcon: 'copy',
+    editBtnIcon: 'pencil',
     deleteBtnIcon: 'minus',
     confirmBtnIcon: 'check',
     cancelBtnIcon: 'close',
@@ -188,6 +209,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     'showAddBtn',
     'addable',
     'removable',
+    'copyable',
     'editable',
     'addApi',
     'updateApi',
@@ -423,6 +445,26 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     return onAction && onAction(action, ctx, ...rest);
   }
 
+  copyItem(index: number) {
+    const {needConfirm} = this.props;
+    const items = this.state.items.concat();
+
+    items.splice(index + 1, 0, items[index]);
+    index = Math.min(index + 1, items.length - 1);
+    this.setState(
+      {
+        items
+      },
+      () => {
+        if (needConfirm === false) {
+          this.emitValue();
+        } else {
+          this.startEdit(index, true);
+        }
+      }
+    );
+  }
+
   addItem(index: number) {
     const {needConfirm, scaffold, columns} = this.props;
     const items = this.state.items.concat();
@@ -653,6 +695,38 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       });
     }
 
+    if (props.copyable && props.showCopyBtn !== false) {
+      btns.push({
+        children: ({
+          key,
+          rowIndex,
+          offset
+        }: {
+          key: any;
+          rowIndex: number;
+          offset: number;
+        }) =>
+          ~this.state.editIndex && needConfirm !== false ? null : (
+            <Button
+              classPrefix={ns}
+              size="sm"
+              key={key}
+              level="link"
+              tooltip={__('Table.copyRow')}
+              tooltipContainer={
+                env && env.getModalContainer ? env.getModalContainer : undefined
+              }
+              onClick={this.copyItem.bind(this, rowIndex + offset, undefined)}
+            >
+              {props.copyBtnLabel ? <span>{props.copyBtnLabel}</span> : null}
+              {props.copyBtnIcon ? (
+                <Icon icon={props.copyBtnIcon} className="icon" />
+              ) : null}
+            </Button>
+          )
+      });
+    }
+
     if (props.needConfirm === false) {
       columns = columns.map(column => {
         const quickEdit = column.quickEdit;
@@ -716,11 +790,16 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                 }
                 onClick={() => this.startEdit(rowIndex + offset)}
               >
-                {props.updateBtnLabel ? (
-                  <span>{props.updateBtnLabel}</span>
+                {props.updateBtnLabel || props.editBtnLabel ? (
+                  <span>{props.updateBtnLabel || props.editBtnLabel}</span>
                 ) : null}
-                {props.updateBtnIcon ? (
-                  <Icon icon={props.updateBtnIcon} className="icon" />
+                {/* 兼容之前的写法 */}
+                {typeof props.updateBtnIcon !== 'undefined' ? (
+                  props.updateBtnIcon ? (
+                    <Icon icon={props.updateBtnIcon} className="icon" />
+                  ) : null
+                ) : props.editBtnIcon ? (
+                  <Icon icon={props.editBtnIcon} className="icon" />
                 ) : null}
               </Button>
             )

package/src/renderers/Form/Options.tsx

@@ -270,7 +270,8 @@ export function registerOptionsControl(config: OptionsConfig) {
       : [];
     static ComposedComponent = Control;
 
-    reaction?: () => void;
+    toDispose: Array<() => void> = [];
+
     input: any;
     mounted = false;
 
@@ -302,9 +303,18 @@ export function registerOptionsControl(config: OptionsConfig) {
           data
         );
 
-        this.reaction = reaction(
-          () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
-          () => this.mounted && this.forceUpdate()
+        this.toDispose.push(
+          reaction(
+            () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
+            () => this.mounted && this.forceUpdate()
+          )
+        );
+
+        this.toDispose.push(
+          reaction(
+            () => JSON.stringify(formItem.options),
+            () => this.mounted && this.syncAutoFill(formItem.tmpValue)
+          )
         );
         // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
         if (
@@ -432,7 +442,8 @@ export function registerOptionsControl(config: OptionsConfig) {
 
     componentWillUnmount() {
       this.props.removeHook?.(this.reload, 'init');
-      this.reaction?.();
+      this.toDispose.forEach(fn => fn());
+      this.toDispose = [];
     }
 
     syncAutoFill(value: any) {

package/src/renderers/Form/Picker.tsx

@@ -397,14 +397,15 @@ export default class PickerControl extends React.PureComponent<
       options,
       multiple,
       valueField,
-      embed
+      embed,
+      source
     } = this.props;
 
     return render('modal-body', this.state.schema, {
       value: selectedOptions,
       valueField,
       primaryField: valueField,
-      options: options,
+      options: source ? [] : options,
       multiple,
       onSelect: embed ? this.handleChange : undefined,
       ref: this.crudRef,

package/src/renderers/Form/wrapControl.tsx

@@ -506,8 +506,8 @@ export function wrapControl<
 
             if (
               // 如果配置了 minLength 或者 maxLength 就切成及时验证
-              (typeof maxLength && maxLength) ||
-              (typeof minLength && minLength) ||
+              this.model.rules.minLength ||
+              this.model.rules.maxLength ||
               validateOnChange === true ||
               (validateOnChange !== false && (formSubmited || validated))
             ) {

package/src/renderers/IFrame.tsx

@@ -149,7 +149,7 @@ export default class IFrame extends React.Component<IFrameProps, object> {
 
   render() {
     const {width, height} = this.state;
-    let {className, src, frameBorder, data, style} = this.props;
+    let {className, src, name, frameBorder, data, style} = this.props;
 
     let tempStyle: any = {};
 
@@ -177,6 +177,7 @@ export default class IFrame extends React.Component<IFrameProps, object> {
 
     return (
       <iframe
+        name={name}
         className={className}
         frameBorder={frameBorder}
         style={style}

package/src/renderers/Image.tsx

@@ -7,6 +7,7 @@ import {Icon} from '../components/icons';
 import {LocaleProps, localeable} from '../locale';
 import {BaseSchema, SchemaClassName, SchemaTpl, SchemaUrlPath} from '../Schema';
 import {resolveVariable} from '../utils/tpl-builtin';
+import handleAction from '../utils/handleAction';
 
 /**
  * 图片展示控件。
@@ -322,6 +323,14 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
       );
   }
 
+  @autobind
+  handleClick(e: React.MouseEvent<HTMLElement>) {
+    const clickAction = this.props.clickAction;
+    if (clickAction) {
+      handleAction(e, clickAction, this.props);
+    }
+  }
+
   render() {
     const {
       className,
@@ -359,6 +368,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
             : 'ImageField--thumb',
           className
         )}
+        onClick={this.handleClick}
       >
         {value ? (
           <ThemedImageThumb

package/src/renderers/Json.tsx

@@ -97,6 +97,15 @@ export class JSONField extends React.Component<JSONProps, object> {
       }
     }
 
+    let jsonThemeValue = jsonTheme;
+    if (isPureVariable(jsonTheme)) {
+      jsonThemeValue = resolveVariableAndFilter(
+        jsonTheme,
+        this.props.data,
+        '| raw'
+      );
+    }
+
     // JsonView 只支持对象，所以不是对象格式需要转成对象格式。
     if (data && ~['string', 'number'].indexOf(typeof data)) {
       data = {
@@ -112,7 +121,7 @@ export class JSONField extends React.Component<JSONProps, object> {
           <JsonView
             name={false}
             src={data}
-            theme={(jsonTheme as any) ?? 'rjv-default'}
+            theme={(jsonThemeValue as any) ?? 'rjv-default'}
             shouldCollapse={this.shouldExpandNode}
             enableClipboard={false}
             iconStyle="square"