amis 1.9.1-beta.11 → 1.9.1-beta.12

package/src/renderers/Table/TableContent.tsx

@@ -7,8 +7,7 @@ import {LocaleProps} from '../../locale';
 import {observer} from 'mobx-react';
 import {ActionSchema} from '../Action';
 import ItemActionsWrapper from './ItemActionsWrapper';
-import {SchemaTpl, SchemaIcon} from '../../Schema';
-import {generateIcon} from '../../utils/icon';
+import {SchemaTpl} from '../../Schema';
 import {Icon} from '../../components/icons';
 import {OnEventProps} from '../../utils/renderer-event';
 
@@ -26,7 +25,6 @@ export interface TableContentProps extends LocaleProps {
   }>;
   rows: Array<IRow>;
   placeholder?: string | SchemaTpl;
-  emptyIcon?: SchemaIcon;
   render: (region: string, node: SchemaNode, props?: any) => JSX.Element;
   onMouseMove: (event: React.MouseEvent) => void;
   onScroll: (event: React.UIEvent) => void;
@@ -61,7 +59,8 @@ export interface TableContentProps extends LocaleProps {
   itemActions?: Array<Action>;
   store: ITableStore;
   dispatchEvent?: Function;
-  onEvent?: OnEventProps
+  onEvent?: OnEventProps;
+  loading?: boolean;
 }
 
 @observer
@@ -131,22 +130,14 @@ export class TableContent extends React.Component<TableContentProps> {
       itemAction,
       affixRow,
       store,
-      emptyIcon,
       dispatchEvent,
-      onEvent
+      onEvent,
+      loading
     } = this.props;
 
     const tableClassName = cx('Table-table', this.props.tableClassName);
     const hideHeader = columns.every(column => !column.label);
 
-    let iconElement = null;
-    if (emptyIcon) {
-      iconElement =
-        typeof emptyIcon === 'string'
-          ? generateIcon(cx, emptyIcon, 'Icon')
-          : render('icon', emptyIcon);
-    }
-
     return (
       <div
         onMouseMove={onMouseMove}
@@ -185,26 +176,23 @@ export class TableContent extends React.Component<TableContentProps> {
           {!rows.length ? (
             <tbody>
               <tr className={cx('Table-placeholder')}>
-                <td colSpan={columns.length}>
-                  {iconElement ? (
-                    React.cloneElement(iconElement, {
-                      className: cx(
-                        iconElement?.props?.className ?? '',
-                        'Table-placeholder-empty-icon',
-                        'icon'
-                      )
-                    })
-                  ) : (
-                    <Icon
-                      icon="desk-empty"
-                      className={cx('Table-placeholder-empty-icon', 'icon')}
-                    />
-                  )}
-                  {render(
-                    'placeholder',
-                    translate(placeholder || 'placeholder.noData')
-                  )}
-                </td>
+                {
+                  !loading ? (
+                    <td colSpan={columns.length}>
+                      {
+                        typeof placeholder === 'string' ? (
+                          <>
+                            <Icon
+                              icon="desk-empty"
+                              className={cx('Table-placeholder-empty-icon', 'icon')}
+                            />
+                            {translate(placeholder || 'placeholder.noData')}
+                          </>
+                        ) : render('placeholder', translate(placeholder || 'placeholder.noData'))
+                      }
+                    </td>
+                  ) : null
+                }
               </tr>
             </tbody>
           ) : (

package/src/renderers/Table/index.tsx

@@ -223,11 +223,6 @@ export interface TableSchema extends BaseSchema {
    */
   placeholder?: string | SchemaTpl;
 
-  /**
-   * 无数据展示 icon
-   */
-  emptyIcon?: string | SchemaIcon;
-
   /**
    * 是否显示底部
    */
@@ -365,6 +360,7 @@ export interface TableProps extends RendererProps {
   canAccessSuperData?: boolean;
   reUseRow?: boolean;
   itemBadge?: BadgeSchema;
+  loading?: boolean;
 }
 
 export type ExportExcelToolbar = SchemaNode & {
@@ -2638,9 +2634,9 @@ export default class Table extends React.Component<TableProps, object> {
       prefixRowClassName,
       autoFillHeight,
       itemActions,
-      emptyIcon,
       dispatchEvent,
-      onEvent
+      onEvent,
+      loading
     } = this.props;
 
     // 理论上来说 store.rows 应该也行啊
@@ -2663,7 +2659,6 @@ export default class Table extends React.Component<TableProps, object> {
         columnsGroup={store.columnGroup}
         rows={store.rows}
         placeholder={placeholder}
-        emptyIcon={emptyIcon}
         render={render}
         onMouseMove={this.handleMouseMove}
         onScroll={this.handleOutterScroll}
@@ -2688,6 +2683,7 @@ export default class Table extends React.Component<TableProps, object> {
         translate={translate}
         dispatchEvent={dispatchEvent}
         onEvent={onEvent}
+        loading={loading}
       />
     );
   }

package/src/store/table.ts

@@ -506,20 +506,27 @@ export const TableStore = iRendererStore
         groups[0].label = columns[1].groupName;
       }
 
+      // 用户是否启用了 groupName
+      const hasGroupName = columns.some(column => column.groupName);
+
       for (let i = 1; i < len; i++) {
         let prev = groups[groups.length - 1];
         const current = columns[i];
 
-        if (
+        const groupNameIsSame =
           current.groupName === prev.label ||
           resolveVariableAndFilter(current.groupName, self.data) ===
-            resolveVariableAndFilter(prev.label, self.data)
+            resolveVariableAndFilter(prev.label, self.data);
+
+        if (
+          groupNameIsSame &&
+          ((hasGroupName && current.groupName) || !hasGroupName)
         ) {
           prev.colSpan++;
           prev.has.push(current);
         } else {
           groups.push({
-            label: current.groupName || ' ', // 如果中间没有配置groupName，那么样式会错乱，这里加一个空白字符，当做一个占位表头
+            label: current.groupName || current.label || ' ', // 如果中间没有配置groupName，那么样式会错乱，这里设置列的label配置，lable也没有则设置一个空字符串
             colSpan: 1,
             rowSpan: 1,
             index: current.index,

package/src/types.ts

@@ -85,6 +85,7 @@ export interface Action extends Button {
     | 'copy'
     | 'reload'
     | 'ajax'
+    | 'saveAs'
     | 'dialog'
     | 'drawer'
     | 'jump'

package/src/utils/formula.ts

@@ -0,0 +1,240 @@
+import isObjectByLodash from 'lodash/isObject';
+import isString from 'lodash/isString';
+import isBoolean from 'lodash/isBoolean';
+import {
+  getVariable,
+  isPureVariable,
+  resolveVariable,
+  resolveVariableAndFilter,
+  evaluate
+} from 'amis-formula';
+
+import {filter} from './tpl';
+import {getFilters} from './tpl-builtin';
+import {collectVariables} from './grammar';
+
+/**
+ * formulaExec 运算器：根据当前字符串类型执行对应运算，也可按指定执行模式执行运算
+ *
+ * 运算模式（execMode）支持以下取值:
+ * 1. tpl: 按模板字符串执行（JavaScript 模板引擎），比如：Hello ${amisUser.email}、<h1>Hello</h1>, <span>${amisUser.email}</span>；
+ *    备注: 在模板中可以自由访问变量，详细请见：https://www.lodashjs.com/docs/lodash.template；
+ * 2. formula: 按新版公式表达式执行，用于执行 ${ xxx } 格式的表达式；
+ *    支持从window、localStorage、sessionStorage获取数据，比如：${num1 + 2}、${ls:env}、${window:document}、${window:document.URL}、${amisUser.email}；
+ *    详细请见：https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/data-mapping#namespace
+ * 3. evalFormula: 按新版公式表达式执行，用于执行 ${ xxx } 和 非${ xxx } 格式的表达式（evalMode 为 true，不用 ${} 包裹也可以执行），功能同 formula 运算模式；
+ * 4. js: 按Javascript执行，表达式中可以通过data.xxx来获取指定数据，并且支持简单运算；
+ *    比如：data.num1 + 2、this.num1 + 2、num1 + 2；（备注：三个表达式是等价的，这里的 this 就是 data。）
+ * 5. var: 以此字符串作为key值从当前数据域data中获取数值；性能最高（运行期间不会生成ast和表达式运算）；
+ * 6. true 或者 false: 当execMode设置为true时，不用 ${} 包裹也可以执行表达式；
+ * 7. collect: 用于从表达式中获取所有变量；
+ * 
+ * 备注1: 用户也可以使用 registerFormulaExec 注册一个自定义运算器；
+ * 备注2: 模板字符串 和 Javascript 模板引擎 不可以交叉使用；
+ * 备注3: amis 现有的 evalFormula 方法，可执行 ${} 格式类表达式，但不支持 filter 过滤器，所以这里用 resolveValueByName 实现；
+ * 备注4: 后续可考虑将 amis现有的运算器都放这里管理，充当统一的运算器入口。
+ */
+
+// 缓存，用于提升性能
+const FORMULA_EVAL_CACHE: {[key: string]: Function} = {};
+
+/**
+ * 用于存储当前可用运算器，默认支持 tpl、formula、js、var 四种类型运算器
+ * 备注：在这里统一参数。
+ */
+export const FormulaExec: {
+  [key: string]: Function;
+} = {
+  tpl: (expression: string, data?: object) => {
+    const curData = data || {};
+    return filter(expression, curData);
+  },
+  formula: (expression: string, data?: object) => {
+    // 邮箱格式直接返回，后续需要在 amis-formula 中处理
+    if (
+      /^\$\{([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})\}$/.test(
+        expression
+      )
+    ) {
+      return expression.substring(2, expression.length - 1); // 剔除前后特殊字符
+    }
+    const curData = data || {};
+    let result = undefined;
+    try {
+      // 执行 ${} 格式类表达式，且支持 filter 过滤器。（备注: isPureVariable 可用于判断是否有 过滤器。）
+      result = resolveVariableAndFilter(expression, curData, '| raw');
+    } catch (e) {
+      console.warn(
+        '[formula]表达式执行异常，当前表达式: ',
+        expression,
+        '，当前上下文数据: ',
+        data
+      );
+      return expression;
+    }
+    // 备注: 此处不用 result ?? expression 是为了避免 没有对应结果时直接显示 expression: ${xxx}
+    return result;
+  },
+  evalFormula: (expression: string, data?: object) => {
+    const curData = data || {};
+    let result = undefined;
+    try {
+      result = evaluate(expression, curData, {
+        evalMode: true, // evalMode 为 true 时，不用 ${} 包裹也可以执行，
+        allowFilter: false
+      });
+    } catch (e) {
+      console.warn(
+        '[evalFormula]表达式执行异常，当前表达式: ',
+        expression,
+        '，当前上下文数据: ',
+        data
+      );
+      return expression;
+    }
+    return result ?? expression;
+  },
+  js: (expression: string, data?: object) => {
+    let debug = false;
+    const idx = expression.indexOf('debugger');
+    if (~idx) {
+      debug = true;
+      expression = expression.replace(/debugger;?/, '');
+    }
+
+    let fn;
+    if (expression in FORMULA_EVAL_CACHE) {
+      fn = FORMULA_EVAL_CACHE[expression];
+    } else {
+      fn = new Function(
+        'data',
+        'utils',
+        `with(data) {${debug ? 'debugger;' : ''}return (${expression});}`
+      );
+      FORMULA_EVAL_CACHE[expression] = fn;
+    }
+
+    data = data || {};
+
+    let curResult = undefined;
+    try {
+      curResult = fn.call(data, data, getFilters());
+    } catch (e) {
+      console.warn(
+        '[formula:js]表达式执行异常，当前表达式: ',
+        expression,
+        '，当前上下文数据: ',
+        data
+      );
+      return expression;
+    }
+    return curResult;
+  },
+  var: (expression: string, data?: object) => {
+    const curData = data || {};
+    const result = getVariable(curData, expression); // 不支持过滤器
+    return result ?? expression;
+  },
+  collect: (expression: any) => {
+    let variables: Array<string> = [];
+    if (isObjectByLodash(expression) || isString(expression)) {
+      // 仅对 Object类型 和 String类型 进行变量提取
+      variables = collectVariables(expression);
+    } else {
+      variables = [];
+    }
+    return variables;
+  }
+};
+
+// 根据表达式类型自动匹配指定运算器，也可以通过设置 execMode 直接指定运算器
+export function formulaExec(
+  value: any,
+  data: any,
+  execMode?: string | boolean
+) {
+  if (!value) {
+    return '';
+  }
+  let OpenFormulaExecEvalMode = false;
+  let curExecMode = '';
+  if (isBoolean(execMode)) {
+    // OpenFormulaExecEvalMode 设置为 true 后，非 ${ xxx } 格式也使用表达式运算器
+    OpenFormulaExecEvalMode = execMode;
+  } else if (isString(execMode)) {
+    // 指定 execMode 可以直接选用对应的运算器
+    curExecMode = execMode;
+  }
+  if (!isString(value)) {
+    // 非字符串类型，直接返回，比如：boolean、number类型、Object、Array类型
+    return value;
+  } else if (curExecMode && FormulaExec[curExecMode]) {
+    return FormulaExec[curExecMode];
+  }
+
+  const curValue = value.trim(); // 剔除前后空格
+
+  // OpenFormulaExecEvalMode 为 true 时，非 ${ xxx } 格式也会尝试使用表达式运算器
+  if (OpenFormulaExecEvalMode && /^[0-9a-zA-z_]+$/.test(curValue)) {
+    // 普通字符串类型（非表达式），先试一下从上下文中获取数据
+    const curValueTemp = FormulaExec['var'](curValue, data);
+    // 备注: 其他特殊格式，比如邮箱、日期
+    return curValueTemp ?? curValue;
+  } else if (curValue.startsWith('${') && curValue.endsWith('}')) {
+    // ${ xxx } 格式 使用 formula 运算器
+    return FormulaExec['formula'](curValue, data);
+  } else if (isExpression(test)) {
+    // 表达式格式使用 formula 运算器
+    return FormulaExec['formula'](curValue, data);
+  } else if (/(\${).+(\})/.test(curValue)) {
+    // 包含 ${ xxx } 则使用 tpl 运算器
+    return FormulaExec['tpl'](curValue, data); // 可识别 <% %> 语法
+  } else if (OpenFormulaExecEvalMode) {
+    // 支持 ${} 和 非 ${} 表达式
+    return FormulaExec['evalFormula'](curValue, data);
+  } else {
+    return curValue;
+  }
+}
+
+// 用于注册自定义 formulaExec 运算器
+export function registerFormulaExec(execMode: string, formulaExec: Function) {
+  if (FormulaExec[execMode]) {
+    console.error(
+      `registerFormulaExec: 运算器注册失败，存在同名运算器（$(execMode)）。`
+    );
+  } else {
+    FormulaExec[execMode] = formulaExec;
+  }
+}
+
+// 用于判断是否优先使用value。
+export function isExpression(expression: any): boolean {
+  if (!isString(expression)) {
+    // 非字符串类型，比如：Object、Array类型、boolean、number类型
+    return false;
+  }
+  // 备注: "\\${xxx}"不作为表达式，至少含一个${xxx}才算是表达式
+  return /(?<!\\)(\${).+(\})/.test(expression);
+}
+
+// 用于判断是否需要执行表达式:
+export function isNeedFormula(
+  expression: any,
+  prevData: {[propName: string]: any},
+  curData: {[propName: string]: any}
+): boolean {
+  const variables = FormulaExec.collect(expression);
+  return variables.some(
+    (variable: string) =>
+      FormulaExec.var(variable, prevData) !== FormulaExec.var(variable, curData)
+  );
+}
+
+// 将 \${xx} 替换成 ${xx}
+export function replaceExpression(expression: any): any {
+  if (expression && isString(expression) && /(\\)(\${).+(\})/.test(expression)) {
+    return expression.replace(/\\\$\{/g, '${');
+  }
+  return expression;
+}

package/src/utils/grammar.ts

@@ -0,0 +1,53 @@
+/**
+ * @file 公式语法解析
+ */
+
+import {parse} from 'amis-formula';
+
+function traverseAst(ast: any, iterator: (ast: any) => void) {
+  if (!ast || !ast.type) {
+    return;
+  }
+
+  iterator(ast);
+
+  Object.keys(ast).forEach(key => {
+    const value = ast[key];
+
+    if (Array.isArray(value)) {
+      value.forEach(child => traverseAst(child, iterator));
+    } else {
+      traverseAst(value, iterator);
+    }
+  });
+}
+
+// 缓存，用于提升性能
+const COLLECT_EXPRESSION_CACHE: {[key: string]: Array<string>} = {};
+
+// 提取表达式中有哪些变量
+export function collectVariables(strOrAst: string | Object, execMode?: boolean): Array<string> {
+  const variables: Array<string> = [];
+
+  if (typeof strOrAst === 'string' && COLLECT_EXPRESSION_CACHE[strOrAst]) {
+    return COLLECT_EXPRESSION_CACHE[strOrAst];
+  }
+  const ast =
+    typeof strOrAst === 'string'
+      ? parse(strOrAst, {
+          evalMode: execMode ?? false
+        })
+      : strOrAst;
+
+  traverseAst(ast, (item: any) => {
+    if (item.type === 'variable') {
+      variables.push(item.name);
+    }
+  });
+
+  if (typeof strOrAst === 'string') {
+    COLLECT_EXPRESSION_CACHE[strOrAst] = variables;
+  }
+
+  return variables;
+}

package/src/utils/helper.ts

@@ -20,7 +20,7 @@ import {
   keyToPath,
   isPureVariable,
   resolveVariable,
-  resolveVariableAndFilter
+  resolveVariableAndFilter,
 } from 'amis-formula';
 import {isObservable} from 'mobx';
 
@@ -1424,6 +1424,7 @@ export function getScrollbarWidth() {
   return scrollbarWidth;
 }
 
+// 后续改用 FormulaExec['formula']
 function resolveValueByName(data: any, name?: string) {
   return isPureVariable(name)
     ? resolveVariableAndFilter(name, data)

package/src/utils/tpl.ts

@@ -71,6 +71,7 @@ export function evalExpression(expression: string, data?: object): boolean {
       return evalFormula(expression, data);
     }
 
+    // 后续改用 FormulaExec['js']
     let debug = false;
     const idx = expression.indexOf('debugger');
     if (~idx) {
@@ -149,6 +150,7 @@ export function evalJS(js: string, data: object): any {
 }
 
 [registerBulitin, registerLodash].forEach(fn => {
+  if (!fn) return;
   const info = fn();
 
   registerTplEnginer(info.name, {