amis 1.3.4 → 1.4.0

package/src/renderers/CRUD.tsx

@@ -1057,7 +1057,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
               (!stopAutoRefreshWhen ||
                 !(
                   (stopAutoRefreshWhenModalIsOpen && store.hasModalOpened) ||
-                  evalExpression(stopAutoRefreshWhen, data)
+                  evalExpression(
+                    stopAutoRefreshWhen,
+                    createObject(store.data, store.query)
+                  )
                 )) &&
               (this.timer = setTimeout(
                 silentPolling
@@ -1497,15 +1500,11 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   hasBulkActions() {
     const {bulkActions, itemActions, store} = this.props;
 
-    if (
-      (!bulkActions || !bulkActions.length) &&
-      (!itemActions || !itemActions.length)
-    ) {
+    if (!bulkActions || !bulkActions.length) {
       return false;
     }
 
     let bulkBtns: Array<ActionSchema> = [];
-    let itemBtns: Array<ActionSchema> = [];
     const ctx = store.mergedData;
 
     if (bulkActions && bulkActions.length) {
@@ -1517,21 +1516,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
         .filter(item => !item.hidden && item.visible !== false);
     }
 
-    const itemData = createObject(
-      store.data,
-      store.selectedItems.length ? store.selectedItems[0] : {}
-    );
-
-    if (itemActions && itemActions.length) {
-      itemBtns = itemActions
-        .map(item => ({
-          ...item,
-          ...getExprProperties(item as Schema, itemData)
-        }))
-        .filter(item => !item.hidden && item.visible !== false);
-    }
-
-    return bulkBtns.length || itemBtns.length;
+    return bulkBtns.length;
   }
 
   renderBulkActions(childProps: any) {
@@ -1539,11 +1524,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
 
     const items = childProps.items;
 
-    if (
-      !items.length ||
-      ((!bulkActions || !bulkActions.length) &&
-        (!itemActions || !itemActions.length))
-    ) {
+    if (!items.length || !bulkActions || !bulkActions.length) {
       return null;
     }
 
@@ -1595,7 +1576,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
           render(
             `bulk-action/${index}`,
             {
-              size: 'sm',
               ...omit(btn, ['visibleOn', 'hiddenOn', 'disabledOn']),
               type: 'button',
               ignoreConfirm: true
@@ -1619,7 +1599,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
           render(
             `bulk-action/${index}`,
             {
-              size: 'sm',
               ...omit(btn, ['visibleOn', 'hiddenOn', 'disabledOn']),
               type: 'button'
             },
@@ -1776,16 +1755,17 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     );
   }
 
-  renderExportCSV() {
+  renderExportCSV(toolbar: Schema) {
     const {
       store,
       classPrefix: ns,
       classnames: cx,
       translate: __,
-      loadDataOnce,
-      api
+      loadDataOnce
     } = this.props;
 
+    const api = (toolbar as Schema).api;
+
     return (
       <Button
         classPrefix={ns}
@@ -1797,7 +1777,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
         }
         size="sm"
       >
-        {__('CRUD.exportCSV')}
+        {toolbar.label || __('CRUD.exportCSV')}
       </Button>
     );
   }
@@ -1827,7 +1807,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     } else if (type === 'filter-toggler') {
       return this.renderFilterToggler();
     } else if (type === 'export-csv') {
-      return this.renderExportCSV();
+      return this.renderExportCSV(toolbar as Schema);
     } else if (Array.isArray(toolbar)) {
       const children: Array<any> = toolbar
         .map((toolbar, index) => ({
@@ -2043,7 +2023,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
                 data: store.filterData,
                 onReset: this.handleFilterReset,
                 onSubmit: this.handleFilterSubmit,
-                onInit: this.handleFilterInit
+                onInit: this.handleFilterInit,
+                formStore: undefined
               }
             )
           : null}

package/src/renderers/Card.tsx

@@ -6,7 +6,13 @@ import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Checkbox from '../components/Checkbox';
 import {IItem} from '../store/list';
-import {padArr, isVisible, isDisabled, noop} from '../utils/helper';
+import {
+  padArr,
+  isVisible,
+  isDisabled,
+  noop,
+  isClickOnInput
+} from '../utils/helper';
 import {resolveVariable} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
 import PopOver, {SchemaPopOver} from './PopOver';
@@ -209,19 +215,11 @@ export class Card extends React.Component<CardProps> {
   }
 
   handleClick(e: React.MouseEvent<HTMLDivElement>) {
-    const target: HTMLElement = e.target as HTMLElement;
-    const ns = this.props.classPrefix;
-    let formItem;
-
-    if (
-      !e.currentTarget.contains(target) ||
-      ~['INPUT', 'TEXTAREA'].indexOf(target.tagName) ||
-      ((formItem = target.closest(`button, a, .${ns}Form-item`)) &&
-        e.currentTarget.contains(formItem))
-    ) {
+    if (isClickOnInput(e)) {
       return;
     }
-    const {item, href, data, env, blank} = this.props;
+
+    const {item, href, data, env, blank, itemAction, onAction} = this.props;
     if (href) {
       env.jumpTo(filter(href, data), {
         type: 'button',
@@ -231,6 +229,11 @@ export class Card extends React.Component<CardProps> {
       return;
     }
 
+    if (itemAction) {
+      onAction && onAction(e, itemAction, item?.data || data);
+      return;
+    }
+
     this.props.onCheck && this.props.onCheck(item);
   }
 
@@ -447,7 +450,8 @@ export class Card extends React.Component<CardProps> {
       classPrefix: ns,
       imageClassName,
       avatarTextClassName,
-      href
+      href,
+      itemAction
     } = this.props;
 
     let heading = null;
@@ -558,10 +562,12 @@ export class Card extends React.Component<CardProps> {
     return (
       <div
         onClick={
-          (checkOnItemClick && checkable) || href ? this.handleClick : undefined
+          (checkOnItemClick && checkable) || href || itemAction
+            ? this.handleClick
+            : undefined
         }
         className={cx('Card', className, {
-          'Card--link': href
+          'Card--link': href || itemAction
         })}
       >
         {this.renderToolbar()}

package/src/renderers/Collapse.tsx

@@ -7,6 +7,7 @@ import {
   SchemaCollection,
   SchemaTpl
 } from '../Schema';
+import {isClickOnInput} from '../utils/helper';
 
 /**
  * Collapse 折叠渲染器，格式说明。
@@ -134,7 +135,10 @@ export default class Collapse extends React.Component<
     }
   }
 
-  toggleCollapsed() {
+  toggleCollapsed(e: React.MouseEvent<HTMLElement>) {
+    if (isClickOnInput(e)) {
+      return;
+    }
     this.props.collapsable !== false &&
       this.setState({
         collapsed: !this.state.collapsed

package/src/renderers/Copyable.tsx

@@ -32,54 +32,56 @@ export interface CopyableProps extends RendererProps {
   copyable: SchemaCopyable;
 }
 
-export const HocCopyable = () => (Component: React.ComponentType<any>): any => {
-  class QuickEditComponent extends React.PureComponent<CopyableProps, any> {
-    static ComposedComponent = Component;
-    handleClick(content: string) {
-      const {env} = this.props;
-      env.copy && env.copy(content);
-    }
-    render() {
-      const {
-        copyable,
-        name,
-        className,
-        data,
-        noHoc,
-        classnames: cx,
-        translate: __
-      } = this.props;
+export const HocCopyable =
+  () =>
+  (Component: React.ComponentType<any>): any => {
+    class QuickEditComponent extends React.PureComponent<CopyableProps, any> {
+      static ComposedComponent = Component;
+      handleClick(content: string) {
+        const {env, copyFormat} = this.props;
+        env.copy && env.copy(content, {format: copyFormat});
+      }
+      render() {
+        const {
+          copyable,
+          name,
+          className,
+          data,
+          noHoc,
+          classnames: cx,
+          translate: __
+        } = this.props;
 
-      if (copyable && !noHoc) {
-        const content = filter(
-          (copyable as SchemaCopyableObject).content ||
-            '${' + name + ' | raw }',
-          data
-        );
-        if (content) {
-          return (
-            <Component
-              {...this.props}
-              className={cx(`Field--copyable`, className)}
-            >
-              <Component {...this.props} wrapperComponent={''} noHoc />
-              <a
-                key="edit-btn"
-                data-tooltip={__('Copyable.tip')}
-                className={cx('Field-copyBtn')}
-                onClick={this.handleClick.bind(this, content)}
-              >
-                <Icon icon="copy" className="icon" />
-              </a>
-            </Component>
+        if (copyable && !noHoc) {
+          const content = filter(
+            (copyable as SchemaCopyableObject).content ||
+              '${' + name + ' | raw }',
+            data
           );
+          if (content) {
+            return (
+              <Component
+                {...this.props}
+                className={cx(`Field--copyable`, className)}
+              >
+                <Component {...this.props} wrapperComponent={''} noHoc />
+                <a
+                  key="edit-btn"
+                  data-tooltip={__('Copyable.tip')}
+                  className={cx('Field-copyBtn')}
+                  onClick={this.handleClick.bind(this, content)}
+                >
+                  <Icon icon="copy" className="icon" />
+                </a>
+              </Component>
+            );
+          }
         }
+        return <Component {...this.props} />;
       }
-      return <Component {...this.props} />;
     }
-  }
-  hoistNonReactStatic(QuickEditComponent, Component);
-  return QuickEditComponent;
-};
+    hoistNonReactStatic(QuickEditComponent, Component);
+    return QuickEditComponent;
+  };
 
 export default HocCopyable;

package/src/renderers/Dialog.tsx

@@ -318,7 +318,7 @@ export default class Dialog extends React.Component<DialogProps> {
   handleExited() {
     const {lazySchema, store} = this.props;
     if (isAlive(store)) {
-      store.setFormData({});
+      store.reset();
       store.setEntered(false);
       if (typeof lazySchema === 'function') {
         store.setSchema('');
@@ -395,7 +395,8 @@ export default class Dialog extends React.Component<DialogProps> {
       affixOffsetTop: 0,
       onChange: this.handleFormChange,
       onInit: this.handleFormInit,
-      onSaved: this.handleFormSaved
+      onSaved: this.handleFormSaved,
+      syncLocation: false // 弹框中的 crud 一般不需要同步地址栏
     };
 
     if (!(body as Schema).type) {

package/src/renderers/Drawer.tsx

@@ -394,7 +394,8 @@ export default class Drawer extends React.Component<DrawerProps> {
       popOverContainer: this.getPopOverContainer,
       onChange: this.handleFormChange,
       onInit: this.handleFormInit,
-      onSaved: this.handleFormSaved
+      onSaved: this.handleFormSaved,
+      syncLocation: false
     };
 
     if (schema.type === 'form') {

package/src/renderers/DropDownButton.tsx

@@ -76,6 +76,11 @@ export interface DropdownButtonSchema extends BaseSchema {
    * 是否只显示图标。
    */
   iconOnly?: boolean;
+
+  /**
+   * 触发条件，默认是 click
+   */
+  trigger?: 'click' | 'hover';
 }
 
 export interface DropDownButtonProps
@@ -266,6 +271,7 @@ export default class DropDownButton extends React.Component<
       iconOnly,
       icon,
       isActived,
+      trigger,
       data
     } = this.props;
 
@@ -281,6 +287,8 @@ export default class DropDownButton extends React.Component<
           },
           className
         )}
+        onMouseEnter={trigger === 'hover' ? this.open : () => {}}
+        onMouseLeave={trigger === 'hover' ? this.close : () => {}}
         ref={this.domRef}
       >
         <TooltipWrapper

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/Combo.tsx

@@ -1452,3 +1452,10 @@ export default class ComboControl extends React.Component<ComboProps> {
   extendsData: false
 })
 export class ComboControlRenderer extends ComboControl {}
+
+@FormItem({
+  type: 'input-kv',
+  storeType: ComboStore.name,
+  extendsData: false
+})
+export class KVControlRenderer extends ComboControl {}

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/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() {