amis 1.7.0 → 1.8.0-beta.13

package/src/renderers/Service.tsx

@@ -251,12 +251,18 @@ export default class Service extends React.Component<ServiceProps> {
     let dataProviderFunc = dataProvider;
 
     if (typeof dataProvider === 'string' && dataProvider) {
-      dataProviderFunc = str2AsyncFunction(dataProvider, 'data', 'setData')!;
+      dataProviderFunc = str2AsyncFunction(
+        dataProvider,
+        'data',
+        'setData',
+        'env'
+      )!;
     }
     if (typeof dataProviderFunc === 'function') {
       const unsubscribe = await dataProviderFunc(
         store.data,
-        this.dataProviderSetData
+        this.dataProviderSetData,
+        this.props.env
       );
       if (typeof unsubscribe === 'function') {
         this.dataProviderUnsubscribe = unsubscribe;
@@ -363,6 +369,7 @@ export default class Service extends React.Component<ServiceProps> {
       initFetch,
       initFetchOn,
       store,
+      dataProvider,
       messages: {fetchSuccess, fetchFailed}
     } = this.props;
 
@@ -386,6 +393,10 @@ export default class Service extends React.Component<ServiceProps> {
         })
         .then(this.afterDataFetch);
     }
+
+    if (dataProvider) {
+      this.runDataProvider();
+    }
   }
 
   silentReload(target?: string, query?: any) {
@@ -411,22 +422,35 @@ export default class Service extends React.Component<ServiceProps> {
     // 会被覆写
   }
 
+  @autobind
+  handleDialogConfirm(
+    values: object[],
+    action: Action,
+    ctx: any,
+    targets: Array<any>
+  ) {
+    const {store} = this.props;
+    store.closeDialog(true);
+  }
+
+  @autobind
+  handleDialogClose(confirmed = false) {
+    const {store} = this.props;
+    store.closeDialog(confirmed);
+  }
+
   openFeedback(dialog: any, ctx: any) {
     return new Promise(resolve => {
       const {store} = this.props;
-      const parentStore = store.parentStore;
-
-      // 暂时自己不支持弹出 dialog
-      if (parentStore && parentStore.openDialog) {
-        store.setCurrentAction({
-          type: 'button',
-          actionType: 'dialog',
-          dialog: dialog
-        });
-        store.openDialog(ctx, undefined, confirmed => {
-          resolve(confirmed);
-        });
-      }
+
+      store.setCurrentAction({
+        type: 'button',
+        actionType: 'dialog',
+        dialog: dialog
+      });
+      store.openDialog(ctx, undefined, confirmed => {
+        resolve(confirmed);
+      });
     });
   }
 
@@ -486,18 +510,12 @@ export default class Service extends React.Component<ServiceProps> {
   renderBody() {
     const {render, store, body: schema, classnames: cx} = this.props;
 
-    return (
-      <div className={cx('Service-body')}>
-        {
-          render('body', store.schema || schema, {
-            key: store.schemaKey || 'body',
-            onQuery: this.handleQuery,
-            onAction: this.handleAction,
-            onChange: this.handleChange
-          }) as JSX.Element
-        }
-      </div>
-    );
+    return render('body', store.schema || schema, {
+      key: store.schemaKey || 'body',
+      onQuery: this.handleQuery,
+      onAction: this.handleAction,
+      onChange: this.handleChange
+    }) as JSX.Element;
   }
 
   render() {
@@ -527,6 +545,23 @@ export default class Service extends React.Component<ServiceProps> {
         {this.renderBody()}
 
         <Spinner size="lg" overlay key="info" show={store.loading} />
+
+        {render(
+          // 单独给 feedback 服务的，handleAction 里面先不要处理弹窗
+          'modal',
+          {
+            ...((store.action as Action) &&
+              ((store.action as Action).dialog as object)),
+            type: 'dialog'
+          },
+          {
+            key: 'dialog',
+            data: store.dialogData,
+            onConfirm: this.handleDialogConfirm,
+            onClose: this.handleDialogClose,
+            show: store.dialogOpen
+          }
+        )}
       </div>
     );
   }
@@ -579,4 +614,8 @@ export class ServiceRenderer extends Service {
     const scoped = this.context as IScopedContext;
     scoped.reload(target, data);
   }
+
+  setData(values: object) {
+    return super.afterDataFetch(values);
+  }
 }

package/src/renderers/Spinner.tsx

@@ -1,14 +1,96 @@
 import Spinner from '../components/Spinner';
 import {Renderer, RendererProps} from '../factory';
 import React from 'react';
+import {BaseSchema, SchemaCollection} from '../Schema';
 
-interface SpinnerProps extends RendererProps {}
+export interface SpinnerSchema extends BaseSchema {
+  /**
+   * 组件类型
+   */
+  type: 'spinner';
+
+  /**
+   * 控制Spinner显示与隐藏
+   */
+  show: boolean;
+
+  /**
+   * 自定义spinner的class
+   */
+  className?: string;
+
+  /**
+   * spin图标位置包裹元素的自定义class
+   */
+  spinnerClassName?: string;
+
+  /**
+   * 作为容器使用时最外层元素的class
+   */
+  spinnerWrapClassName?: string;
+
+  /**
+   * @deprecated 已废弃，没有作用
+   */
+  mode?: string;
+
+  /**
+   * spinner Icon 大小
+   */
+  size?: 'sm' | 'lg' | '';
+
+  /**
+   * 自定义icon
+   */
+  icon?: string;
+
+  /**
+   * spinner文案
+   */
+  tip?: string;
+
+  /**
+   * spinner文案位置
+   */
+  tipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+
+  /**
+   * 延迟显示
+   */
+  delay?: number;
+
+  /**
+   * 是否显示遮罩层
+   */
+  overlay?: boolean;
+
+  /**
+   * 作为容器使用时内容
+   */
+  body?: SchemaCollection;
+}
+
+interface SpinnerRenderProps
+  extends RendererProps,
+    Omit<SpinnerSchema, 'className'> {}
 
 @Renderer({
   type: 'spinner'
 })
-export class SpinnerRenderer extends React.Component<SpinnerProps> {
+export class SpinnerRenderer extends React.Component<SpinnerRenderProps> {
+  renderBody() {
+    const {body, render} = this.props;
+    return body ? render('body', body) : null;
+  }
   render() {
-    return <Spinner {...this.props} />;
+    const {classnames: cx, spinnerWrapClassName, body, ...rest} = this.props;
+    return body ? (
+      <div className={cx(`Spinner-wrap`, spinnerWrapClassName)}>
+        <Spinner {...rest}></Spinner>
+        {this.renderBody()}
+      </div>
+    ) : (
+      <Spinner {...rest}></Spinner>
+    );
   }
 }

package/src/renderers/Steps.tsx

@@ -70,6 +70,16 @@ export interface StepsSchema extends BaseSchema {
    * 展示模式
    */
   mode?: 'horizontal' | 'vertical';
+
+  /**
+   * 标签放置位置
+   */
+   labelPlacement?: 'horizontal' | 'vertical';
+
+   /**
+   * 点状步骤条
+   */
+    progressDot?: boolean;
 }
 
 export interface StepsProps
@@ -82,6 +92,8 @@ export function StepsCmpt(props: StepsProps) {
     steps,
     status,
     mode,
+    labelPlacement,
+    progressDot,
     data,
     source,
     config,
@@ -139,6 +151,8 @@ export function StepsCmpt(props: StepsProps) {
       className={className}
       status={status}
       mode={mode}
+      progressDot={progressDot}
+      labelPlacement={labelPlacement}
       useMobileUI={useMobileUI}
     ></Steps>
   );

package/src/renderers/Table/ColumnToggler.tsx

@@ -13,6 +13,8 @@ import type {TooltipObject} from '../../components/TooltipWrapper';
 import {noop, autobind} from '../../utils/helper';
 import {filter} from '../../utils/tpl';
 import {Icon} from '../../components/icons';
+import {getIcon} from '../../components/icons';
+import {generateIcon} from '../../utils/icon';
 import {RootClose} from '../../utils/RootClose';
 import {IColumn} from '../../store/table';
 
@@ -112,6 +114,11 @@ export interface ColumnTogglerProps extends RendererProps {
    */
   columns: Array<IColumn>;
 
+  /**
+   * 弹窗底部按钮大小
+   */
+  footerBtnSize?: 'xs' | 'sm' | 'md' | 'lg';
+
   onColumnToggle: (columns: Array<IColumn>) => void;
   modalContainer?: () => HTMLElement;
 }
@@ -326,7 +333,8 @@ export default class ColumnToggler extends React.Component<
       modalContainer,
       draggable,
       overlay,
-      translate: __
+      translate: __,
+      footerBtnSize
     } = this.props;
 
     const {enableSorting, tempColumns} = this.state;
@@ -372,13 +380,14 @@ export default class ColumnToggler extends React.Component<
                           <a className={cx('ColumnToggler-menuItem-dragBar')}>
                             <Icon icon="drag-bar" className={cx('icon')} />
                           </a>
-                          <span>
-                            {column.label ? render('tpl', column.label) : null}
+                          <span className={cx('ColumnToggler-menuItem-label')}>
+                            <span>{column.label || '-'}</span>
                           </span>
                         </>
                       ) : (
                         <Checkbox
                           size="sm"
+                          labelClassName={cx('ColumnToggler-menuItem-label')}
                           classPrefix={ns}
                           checked={column.toggled}
                           disabled={!column.toggable || enableSorting}
@@ -388,9 +397,7 @@ export default class ColumnToggler extends React.Component<
                             index
                           )}
                         >
-                          <span>
-                            {column.label ? render('tpl', column.label) : null}
-                          </span>
+                          <span>{column.label || '-'}</span>
                         </Checkbox>
                       )}
                     </li>
@@ -430,10 +437,18 @@ export default class ColumnToggler extends React.Component<
               </Button>
             </div>
             <div>
-              <Button className="mr-4" onClick={this.close}>
+              <Button
+                size={footerBtnSize}
+                className="mr-3"
+                onClick={this.close}
+              >
                 {__('cancel')}
               </Button>
-              <Button level="primary" onClick={this.onConfirm}>
+              <Button
+                size={footerBtnSize}
+                level="primary"
+                onClick={this.onConfirm}
+              >
                 {__('confirm')}
               </Button>
             </div>
@@ -492,11 +507,21 @@ export default class ColumnToggler extends React.Component<
       >
         {icon ? (
           typeof icon === 'string' ? (
-            <i className={cx(icon, 'm-r-xs')} />
+            getIcon(icon!) ? (
+              <Icon icon={icon} className={cx('icon', {'m-r-xs': !!label})} />
+            ) : (
+              generateIcon(cx, icon, label ? 'm-r-xs' : '')
+            )
+          ) : React.isValidElement(icon) ? (
+            React.cloneElement(icon, {
+              className: cx({'m-r-xs': !!label})
+            })
           ) : (
-            icon
+            <Icon icon="columns" className="icon m-r-none" />
           )
-        ) : null}
+        ) : (
+          <Icon icon="columns" className="icon m-r-none" />
+        )}
         {typeof label === 'string' ? filter(label, data) : label}
         {hideExpandIcon || draggable ? null : (
           <span className={cx('ColumnToggler-caret')}>

package/src/renderers/Table/TableCell.tsx

@@ -7,6 +7,11 @@ import {observer} from 'mobx-react';
 import omit = require('lodash/omit');
 import {filter} from '../../utils/tpl';
 import {Badge} from '../../components/Badge';
+import ColorScale from '../../utils/ColorScale';
+import {
+  isPureVariable,
+  resolveVariableAndFilter
+} from '../../utils/tpl-builtin';
 
 export interface TableCellProps extends RendererProps {
   wrapperComponent?: React.ReactType;
@@ -34,7 +39,7 @@ export class TableCell extends React.Component<RendererProps> {
       className,
       classNameExpr,
       render,
-      style,
+      style = {},
       wrapperComponent: Component,
       column,
       value,
@@ -106,6 +111,39 @@ export class TableCell extends React.Component<RendererProps> {
       };
     }
 
+    if (column.backgroundScale) {
+      const backgroundScale = column.backgroundScale;
+      let min = backgroundScale.min;
+      let max = backgroundScale.max;
+
+      if (isPureVariable(min)) {
+        min = resolveVariableAndFilter(min, data, '| raw');
+      }
+      if (isPureVariable(max)) {
+        max = resolveVariableAndFilter(max, data, '| raw');
+      }
+
+      if (typeof min === 'undefined') {
+        min = Math.min(...data.rows.map((r: any) => r[column.name]));
+      }
+      if (typeof max === 'undefined') {
+        max = Math.max(...data.rows.map((r: any) => r[column.name]));
+      }
+
+      const colorScale = new ColorScale(
+        min,
+        max,
+        backgroundScale.colors || ['#FFEF9C', '#FF7127']
+      );
+      let value = data[column.name];
+      if (isPureVariable(backgroundScale.source)) {
+        value = resolveVariableAndFilter(backgroundScale.source, data, '| raw');
+      }
+
+      const color = colorScale.getColor(Number(value)).toHexString();
+      style.background = color;
+    }
+
     if (!Component) {
       return body as JSX.Element;
     }

package/src/renderers/Table/TableRow.tsx

@@ -195,7 +195,7 @@ export class TableRow extends React.Component<TableRowProps> {
             'is-checked': item.checked,
             'is-modified': item.modified,
             'is-moved': item.moved,
-            'is-expanded': item.expanded,
+            'is-expanded': item.expanded && item.expandable,
             'is-expandable': item.expandable,
             [`Table-tr--hasItemAction`]: itemAction,
             [`Table-tr--odd`]: itemIndex % 2 === 0,

package/src/renderers/Table/index.tsx

@@ -370,6 +370,7 @@ export interface TableProps extends RendererProps {
 type ExportExcelToolbar = SchemaNode & {
   api?: SchemaApi;
   columns?: string[];
+  exportColumns?: any[];
   filename?: string;
 };
 
@@ -472,6 +473,7 @@ export default class Table extends React.Component<TableProps, object> {
   } = {};
   renderedToolbars: Array<string> = [];
   subForms: any = {};
+  timer: ReturnType<typeof setTimeout>;
 
   constructor(props: TableProps) {
     super(props);
@@ -659,7 +661,7 @@ export default class Table extends React.Component<TableProps, object> {
     const footToolbarHeight = footToolbar ? offset(footToolbar).height : 0;
     // 有时候会拿不到 footToolbar，等一下在执行
     if (!footToolbarHeight && footerToolbar && footerToolbar.length) {
-      setTimeout(() => {
+      this.timer = setTimeout(() => {
         this.updateAutoFillHeight();
       }, 100);
       return;
@@ -777,6 +779,7 @@ export default class Table extends React.Component<TableProps, object> {
     this.unSensor && this.unSensor();
 
     formItem && isAlive(formItem) && formItem.setSubStore(null);
+    clearTimeout(this.timer);
   }
 
   subFormRef(form: any, x: number, y: number) {
@@ -1662,7 +1665,7 @@ export default class Table extends React.Component<TableProps, object> {
           {store.rows.length && multiple ? (
             <Checkbox
               classPrefix={ns}
-              partial={!store.allChecked}
+              partial={store.someChecked && !store.allChecked}
               checked={store.someChecked}
               disabled={store.disabledHeadCheckbox}
               onChange={this.handleCheckAll}
@@ -2200,9 +2203,8 @@ export default class Table extends React.Component<TableProps, object> {
         classPrefix={ns}
         key="columns-toggable"
         size={config?.size || 'sm'}
-        label={
-          config?.label || <Icon icon="columns" className="icon m-r-none" />
-        }
+        icon={config?.icon}
+        label={config?.label}
         draggable={config?.draggable}
         columns={store.columnsData}
         onColumnToggle={this.handleColumnToggle}
@@ -2259,18 +2261,25 @@ export default class Table extends React.Component<TableProps, object> {
       classPrefix: ns,
       classnames: cx,
       translate: __,
-      columns,
-      data
+      data,
+      render
     } = this.props;
 
+    let columns = store.filteredColumns || [];
+
     if (!columns) {
       return null;
     }
 
-    return (
-      <Button
-        classPrefix={ns}
-        onClick={() => {
+    return render(
+      'exportExcel',
+      {
+        label: __('CRUD.exportExcel'),
+        ...(toolbar as any),
+        type: 'button'
+      },
+      {
+        onAction: () => {
           import('exceljs').then(async (ExcelJS: any) => {
             let rows = [];
             let tmpStore;
@@ -2310,10 +2319,28 @@ export default class Table extends React.Component<TableProps, object> {
             });
             worksheet.views = [{state: 'frozen', xSplit: 0, ySplit: 1}];
 
-            const filteredColumns = toolbar.columns
+            let exportColumnNames = toolbar.columns;
+
+            if (isPureVariable(exportColumnNames)) {
+              exportColumnNames = resolveVariableAndFilter(
+                exportColumnNames,
+                data,
+                '| raw'
+              );
+            }
+
+            // 自定义导出列配置
+            if (toolbar.exportColumns && Array.isArray(toolbar.exportColumns)) {
+              columns = toolbar.exportColumns;
+            }
+
+            const filteredColumns = exportColumnNames
               ? columns.filter(column => {
-                  const filterColumnsNames = toolbar.columns!;
-                  if (filterColumnsNames.indexOf(column.name) !== -1) {
+                  const filterColumnsNames = exportColumnNames!;
+                  if (
+                    column.name &&
+                    filterColumnsNames.indexOf(column.name) !== -1
+                  ) {
                     return true;
                   }
                   return false;
@@ -2494,11 +2521,8 @@ export default class Table extends React.Component<TableProps, object> {
               saveAs(blob, filename + '.xlsx');
             }
           });
-        }}
-        size="sm"
-      >
-        {(toolbar as Schema).label || __('CRUD.exportExcel')}
-      </Button>
+        }
+      }
     );
   }