amis 1.8.0-beta.5 → 1.8.0-beta.9

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

@@ -370,6 +370,7 @@ export interface TableProps extends RendererProps {
 type ExportExcelToolbar = SchemaNode & {
   api?: SchemaApi;
   columns?: string[];
+  exportColumns?: any[];
   filename?: string;
 };
 
@@ -2202,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}
@@ -2261,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;
@@ -2312,19 +2319,28 @@ export default class Table extends React.Component<TableProps, object> {
             });
             worksheet.views = [{state: 'frozen', xSplit: 0, ySplit: 1}];
 
-            let exportColumns = toolbar.columns;
-            if (isPureVariable(exportColumns)) {
-              exportColumns = resolveVariableAndFilter(
-                exportColumns,
+            let exportColumnNames = toolbar.columns;
+
+            if (isPureVariable(exportColumnNames)) {
+              exportColumnNames = resolveVariableAndFilter(
+                exportColumnNames,
                 data,
                 '| raw'
               );
             }
 
-            const filteredColumns = exportColumns
+            // 自定义导出列配置
+            if (toolbar.exportColumns && Array.isArray(toolbar.exportColumns)) {
+              columns = toolbar.exportColumns;
+            }
+
+            const filteredColumns = exportColumnNames
               ? columns.filter(column => {
-                  const filterColumnsNames = exportColumns!;
-                  if (filterColumnsNames.indexOf(column.name) !== -1) {
+                  const filterColumnsNames = exportColumnNames!;
+                  if (
+                    column.name &&
+                    filterColumnsNames.indexOf(column.name) !== -1
+                  ) {
                     return true;
                   }
                   return false;
@@ -2505,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>
+        }
+      }
     );
   }
 

package/src/renderers/TooltipWrapper.tsx

@@ -6,7 +6,7 @@ import {escapeHtml} from '../utils/tpl-builtin';
 import {buildStyle} from '../utils/style';
 import {TooltipWrapper as TooltipWrapperComp} from '../components';
 
-import type {Trigger} from '../components/TooltipWrapper';
+import type {Trigger, TooltipObject} from '../components/TooltipWrapper';
 
 export interface TooltipWrapperSchema extends BaseSchema {
   /**
@@ -20,7 +20,12 @@ export interface TooltipWrapperSchema extends BaseSchema {
   title?: string;
 
   /**
-   * 文字提示
+   * 文字提示内容，兼容 tooltip，但建议通过 content 来实现提示内容
+   */
+  content?: string;
+
+  /**
+   *  @deprecated 文字提示内容
    */
   tooltip?: string;
 
@@ -29,15 +34,35 @@ export interface TooltipWrapperSchema extends BaseSchema {
    */
   placement?: 'top' | 'right' | 'bottom' | 'left';
 
+  /**
+   * 浮层位置相对偏移量
+   */
+  offset?: [number, number];
+
+  /**
+   * 是否展示浮层指向箭头
+   */
+  showArrow?: boolean;
+
+  /**
+   * 是否禁用提示
+   */
+  disabled?: boolean;
+
   /**
    * 浮层触发方式，默认为hover
    */
   trigger?: Trigger | Array<Trigger>;
 
   /**
-   * 浮层隐藏延迟时间，单位ms，默认0
+   * 浮层延迟显示时间, 单位 ms
+   */
+
+  mouseEnterDelay?: number;
+  /**
+   * 浮层延迟隐藏时间, 单位 ms
    */
-  delay?: number;
+  mouseLeaveDelay?: number;
 
   /**
    * 是否点击非内容区域关闭提示，默认为true
@@ -60,7 +85,7 @@ export interface TooltipWrapperSchema extends BaseSchema {
   inline?: boolean;
 
   /**
-   * 浮层主题色，默认为light
+   * 主题样式， 默认为light
    */
   tooltipTheme?: 'light' | 'dark';
 
@@ -97,6 +122,7 @@ export interface TooltipWrapperProps extends RendererProps {
   /**
    * 文字提示
    */
+  content?: string;
   tooltip?: string;
   /**
    * 文字提示位置
@@ -105,7 +131,11 @@ export interface TooltipWrapperProps extends RendererProps {
   inline?: boolean;
   trigger: Trigger | Array<Trigger>;
   rootClose?: boolean;
-  delay?: number;
+  showArrow?: boolean;
+  offset?: [number, number];
+  disabled?: boolean;
+  mouseEnterDelay?: number;
+  mouseLeaveDelay?: number;
   container?: React.ReactNode;
   style?: React.CSSProperties;
   tooltipStyle?: React.CSSProperties;
@@ -124,7 +154,8 @@ export default class TooltipWrapper extends React.Component<
     | 'placement'
     | 'trigger'
     | 'rootClose'
-    | 'delay'
+    | 'mouseEnterDelay'
+    | 'mouseLeaveDelay'
     | 'inline'
     | 'wrap'
     | 'tooltipTheme'
@@ -132,7 +163,8 @@ export default class TooltipWrapper extends React.Component<
     placement: 'top',
     trigger: 'hover',
     rootClose: true,
-    delay: 0,
+    mouseEnterDelay: 0,
+    mouseLeaveDelay: 200,
     inline: false,
     wrap: false,
     tooltipTheme: 'light'
@@ -172,41 +204,45 @@ export default class TooltipWrapper extends React.Component<
 
   render() {
     const {
-      tooltipClassName,
       classPrefix: ns,
       classnames: cx,
+      tooltipClassName,
+      tooltipTheme,
       container,
       placement,
       rootClose,
       tooltipStyle,
       title,
+      content,
       tooltip,
-      delay,
+      mouseEnterDelay,
+      mouseLeaveDelay,
       trigger,
-      tooltipTheme,
+      offset,
+      showArrow,
+      disabled,
       data
     } = this.props;
 
-    const tooltipObj = {
-      title: escapeHtml(filter(title, data)),
-      content: escapeHtml(filter(tooltip, data))
+    const tooltipObj: TooltipObject = {
+      title: filter(title, data),
+      content: filter(content || tooltip, data),
+      style: buildStyle(tooltipStyle, data),
+      placement,
+      trigger,
+      rootClose,
+      container,
+      tooltipTheme,
+      tooltipClassName,
+      mouseEnterDelay,
+      mouseLeaveDelay,
+      offset,
+      showArrow,
+      disabled
     };
 
     return (
-      <TooltipWrapperComp
-        classPrefix={ns}
-        classnames={cx}
-        style={buildStyle(tooltipStyle, data)}
-        placement={placement}
-        tooltip={tooltipObj}
-        trigger={trigger}
-        rootClose={rootClose}
-        delay={delay}
-        container={container}
-        tooltipClassName={cx(tooltipClassName, {
-          'Tooltip--dark': tooltipTheme === 'dark'
-        })}
-      >
+      <TooltipWrapperComp classPrefix={ns} classnames={cx} tooltip={tooltipObj}>
         {this.renderBody()}
       </TooltipWrapperComp>
     );