amis 1.4.2-beta.6 → 1.5.0

package/src/renderers/Table/index.tsx

@@ -9,6 +9,7 @@ import './ColumnToggler';
 import Checkbox from '../../components/Checkbox';
 import Button from '../../components/Button';
 import {TableStore, ITableStore, IColumn, IRow} from '../../store/table';
+import {saveAs} from 'file-saver';
 import {
   anyChanged,
   getScrollParent,
@@ -19,7 +20,8 @@ import {
   getVariable,
   removeHTMLTag,
   eachTree,
-  isObject
+  isObject,
+  createObject
 } from '../../utils/helper';
 import {
   isPureVariable,
@@ -53,9 +55,10 @@ import {TableBody} from './TableBody';
 import {TplSchema} from '../Tpl';
 import {MappingSchema} from '../Mapping';
 import {isAlive, getSnapshot} from 'mobx-state-tree';
-import ItemActionsWrapper from './ItemActionsWrapper';
 import ColumnToggler from './ColumnToggler';
 import {BadgeSchema} from '../../components/Badge';
+import offset from '../../utils/offset';
+import {getStyleNumber} from '../../utils/dom';
 
 /**
  * 表格列，不指定类型时默认为文本类型。
@@ -422,7 +425,8 @@ export default class Table extends React.Component<TableProps, object> {
     'headerToolbarClassName',
     'toolbarClassName',
     'footerToolbarClassName',
-    'itemBadge'
+    'itemBadge',
+    'autoFillHeight'
   ];
   static defaultProps: Partial<TableProps> = {
     className: '',
@@ -497,6 +501,7 @@ export default class Table extends React.Component<TableProps, object> {
     this.subFormRef = this.subFormRef.bind(this);
     this.handleColumnToggle = this.handleColumnToggle.bind(this);
     this.renderAutoFilterForm = this.renderAutoFilterForm.bind(this);
+    this.updateAutoFillHeight = this.updateAutoFillHeight.bind(this);
 
     const {
       store,
@@ -607,6 +612,68 @@ export default class Table extends React.Component<TableProps, object> {
     this.affixDetect();
     parent.addEventListener('scroll', this.affixDetect);
     window.addEventListener('resize', this.affixDetect);
+    this.updateAutoFillHeight();
+    window.addEventListener('resize', this.updateAutoFillHeight);
+  }
+
+  /**
+   * 自动设置表格高度占满界面剩余区域
+   * 用 css 实现有点麻烦，要改很多结构，所以先用 dom hack 了，避免对之前的功能有影响
+   */
+  updateAutoFillHeight() {
+    const {autoFillHeight, footerToolbar, classPrefix: ns} = this.props;
+    if (!autoFillHeight) {
+      return;
+    }
+    const table = findDOMNode(this) as HTMLElement;
+    const tableContent = table.querySelector(
+      `.${ns}Table-content`
+    ) as HTMLElement;
+    const tableContentWrap = table.querySelector(
+      `.${ns}Table-contentWrap`
+    ) as HTMLElement;
+    const footToolbar = table.querySelector(
+      `.${ns}Table-footToolbar`
+    ) as HTMLElement;
+    if (!tableContent) {
+      return;
+    }
+
+    // 计算 table-content 在 dom 中的位置
+    const tableContentTop = offset(tableContent).top;
+    const viewportHeight = window.innerHeight;
+    // 有时候会拿不到 footToolbar？
+    const footToolbarHeight = footToolbar ? offset(footToolbar).height : 0;
+    // 有时候会拿不到 footToolbar，等一下在执行
+    if (!footToolbarHeight && footerToolbar && footerToolbar.length) {
+      setTimeout(() => {
+        this.updateAutoFillHeight();
+      }, 100);
+      return;
+    }
+    const tableContentWrapMarginButtom = getStyleNumber(
+      tableContentWrap,
+      'margin-bottom'
+    );
+
+    // 循环计算父级节点的 pddding，这里不考虑父级节点还可能会有其它兄弟节点的情况了
+    let allParentPaddingButtom = 0;
+    let parentNode = tableContent.parentElement;
+    while (parentNode) {
+      const paddingButtom = getStyleNumber(parentNode, 'padding-bottom');
+      const borderBottom = getStyleNumber(parentNode, 'border-bottom-width');
+      allParentPaddingButtom =
+        allParentPaddingButtom + paddingButtom + borderBottom;
+      parentNode = parentNode.parentElement;
+    }
+
+    tableContent.style.height = `${
+      viewportHeight -
+      tableContentTop -
+      tableContentWrapMarginButtom -
+      footToolbarHeight -
+      allParentPaddingButtom
+    }px`;
   }
 
   componentDidUpdate(prevProps: TableProps) {
@@ -692,6 +759,7 @@ export default class Table extends React.Component<TableProps, object> {
     const parent = this.parentNode;
     parent && parent.removeEventListener('scroll', this.affixDetect);
     window.removeEventListener('resize', this.affixDetect);
+    window.removeEventListener('resize', this.updateAutoFillHeight);
     (this.updateTableInfoLazy as any).cancel();
     this.unSensor && this.unSensor();
 
@@ -881,7 +949,7 @@ export default class Table extends React.Component<TableProps, object> {
   }
 
   affixDetect() {
-    if (!this.props.affixHeader || !this.table) {
+    if (!this.props.affixHeader || !this.table || this.props.autoFillHeight) {
       return;
     }
 
@@ -1373,7 +1441,7 @@ export default class Table extends React.Component<TableProps, object> {
   handleColumnToggle(columns: Array<IColumn>) {
     const {store} = this.props;
 
-    store.update({columns});
+    store.updateColumns(columns);
   }
 
   renderAutoFilterForm(): React.ReactNode {
@@ -2087,7 +2155,6 @@ export default class Table extends React.Component<TableProps, object> {
     } = this.props;
     const __ = rest.translate;
     const env = rest.env;
-
     const render = this.props.render;
 
     if (!store.columnsTogglable) {
@@ -2381,7 +2448,10 @@ export default class Table extends React.Component<TableProps, object> {
                 } else {
                   if ((column as TplSchema).tpl) {
                     sheetRow.getCell(columIndex).value = removeHTMLTag(
-                      filter((column as TplSchema).tpl, row.data)
+                      filter(
+                        (column as TplSchema).tpl,
+                        createObject(data, row.data)
+                      )
                     );
                   } else {
                     sheetRow.getCell(columIndex).value = value;
@@ -2584,39 +2654,6 @@ export default class Table extends React.Component<TableProps, object> {
       : footerNode || toolbarNode || null;
   }
 
-  renderItemActions() {
-    const {itemActions, render, store, classnames: cx} = this.props;
-    const finalActions = Array.isArray(itemActions)
-      ? itemActions.filter(action => !action.hiddenOnHover)
-      : [];
-
-    if (!finalActions.length) {
-      return null;
-    }
-
-    return (
-      <ItemActionsWrapper store={store} classnames={cx}>
-        <div className={cx('Table-itemActions')}>
-          {finalActions.map((action, index) =>
-            render(
-              `itemAction/${index}`,
-              {
-                ...(action as any),
-                isMenuItem: true
-              },
-              {
-                key: index,
-                item: store.hoverRow,
-                data: store.hoverRow!.locals,
-                rowIndex: store.hoverRow!.index
-              }
-            )
-          )}
-        </div>
-      </ItemActionsWrapper>
-    );
-  }
-
   renderTableContent() {
     const {
       classnames: cx,
@@ -2631,8 +2668,11 @@ export default class Table extends React.Component<TableProps, object> {
       prefixRow,
       locale,
       affixRow,
+      tableContentClassName,
       translate,
-      itemAction
+      itemAction,
+      autoFillHeight,
+      itemActions
     } = this.props;
 
     // 理论上来说 store.rows 应该也行啊
@@ -2643,9 +2683,13 @@ export default class Table extends React.Component<TableProps, object> {
       <TableContent
         tableClassName={cx(
           store.combineNum > 0 ? 'Table-table--withCombine' : '',
+          {'Table-table--checkOnItemClick': checkOnItemClick},
           tableClassName
         )}
+        className={tableContentClassName}
+        itemActions={itemActions}
         itemAction={itemAction}
+        store={store}
         classnames={cx}
         columns={store.filteredColumns}
         columnsGroup={store.columnGroup}
@@ -2681,6 +2725,7 @@ export default class Table extends React.Component<TableProps, object> {
       store,
       classnames: cx,
       affixColumns,
+      autoFillHeight,
       autoGenerateFilter
     } = this.props;
 
@@ -2697,7 +2742,8 @@ export default class Table extends React.Component<TableProps, object> {
     return (
       <div
         className={cx('Table', className, {
-          'Table--unsaved': !!store.modified || !!store.moved
+          'Table--unsaved': !!store.modified || !!store.moved,
+          'Table--autoFillHeight': autoFillHeight
         })}
       >
         {autoGenerateFilter ? this.renderAutoFilterForm() : null}
@@ -2734,7 +2780,6 @@ export default class Table extends React.Component<TableProps, object> {
               : null}
           </div>
           {this.renderTableContent()}
-          {store.hoverRow ? this.renderItemActions() : null}
         </div>
         {this.renderAffixHeader(tableClassName)}
         {footer}

package/src/renderers/Tabs.tsx

@@ -374,7 +374,15 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
   @autobind
   handleSelect(key: any) {
-    const {env, onSelect} = this.props;
+    const {env, onSelect, id} = this.props;
+
+    env.tracker?.({
+      eventType: 'tabChange',
+      eventData: {
+        id,
+        key
+      }
+    });
 
     // 是 hash，需要更新到地址栏
     if (typeof key === 'string' && env) {

package/src/renderers/WebComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaCollection} from '../Schema';
-import {resolveVariable} from '../utils/tpl-builtin';
+import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 import mapValues from 'lodash/mapValues';
 
 /**
@@ -43,7 +43,7 @@ export default class WebComponent extends React.Component<RendererProps> {
 
     const propsValues = mapValues(props, s => {
       if (typeof s === 'string') {
-        return resolveVariable(s, data) || s;
+        return resolveVariableAndFilter(s, data, '| raw') || s;
       } else {
         return s;
       }

package/src/store/form.ts

@@ -588,14 +588,9 @@ export const FormStore = ServiceStore.named('FormStore')
       self.persistData = value;
     }
 
-    const setLocalPersistData = debounce(
-      () => localStorage.setItem(self.persistKey, JSON.stringify(self.data)),
-      250,
-      {
-        trailing: true,
-        leading: false
-      }
-    );
+    const setLocalPersistData = () => {
+      localStorage.setItem(self.persistKey, JSON.stringify(self.data));
+    };
 
     function getLocalPersistData() {
       let data = localStorage.getItem(self.persistKey);
@@ -639,7 +634,6 @@ export const FormStore = ServiceStore.named('FormStore')
       clearRestError,
       beforeDestroy() {
         syncOptions.cancel();
-        setLocalPersistData.cancel();
       }
     };
   });

package/src/store/formItem.ts

@@ -617,12 +617,104 @@ export const FormItemStore = StoreNode.named('FormItemStore')
       return json;
     });
 
+    const tryDeferLoadLeftOptions: (
+      option: any,
+      api: Api,
+      data?: object,
+      config?: fetchOptions
+    ) => Promise<Payload | null> = flow(function* (
+      option: any,
+      api: string,
+      data: object,
+      config?: fetchOptions
+    ) {
+      if (
+        self.options.length != 1 ||
+        !Array.isArray(self.options[0].leftOptions)
+      ) {
+        return;
+      }
+
+      let leftOptions = self.options[0].leftOptions as any;
+
+      const indexes = findTreeIndex(leftOptions, item => item === option);
+      if (!indexes) {
+        return;
+      }
+
+      setOptions(
+        [
+          {
+            ...self.options[0],
+            leftOptions: spliceTree(leftOptions, indexes, 1, {
+              ...option,
+              loading: true
+            })
+          }
+        ],
+        undefined,
+        data
+      );
+
+      let json = yield fetchOptions(
+        api,
+        data,
+        {
+          ...config,
+          silent: true
+        },
+        false
+      );
+      if (!json) {
+        setOptions(
+          [
+            {
+              ...self.options[0],
+              leftOptions: spliceTree(leftOptions, indexes, 1, {
+                ...option,
+                loading: false,
+                error: true
+              })
+            }
+          ],
+          undefined,
+          data
+        );
+        return;
+      }
+
+      let options: Array<IOption> =
+        json.data?.options ||
+        json.data.items ||
+        json.data.rows ||
+        json.data ||
+        [];
+
+      setOptions(
+        [
+          {
+            ...self.options[0],
+            leftOptions: spliceTree(leftOptions, indexes, 1, {
+              ...option,
+              loading: false,
+              loaded: true,
+              children: options
+            })
+          }
+        ],
+        undefined,
+        data
+      );
+
+      return json;
+    });
+
     const deferLoadOptions: (
       option: any,
       api: Api,
       data?: object,
       config?: fetchOptions
-    ) => Promise<Payload | null> = flow(function* getInitData(
+    ) => Promise<Payload | null> = flow(function* (
       option: any,
       api: string,
       data: object,
@@ -630,7 +722,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
     ) {
       const indexes = findTreeIndex(self.options, item => item === option);
       if (!indexes) {
-        return;
+        return yield tryDeferLoadLeftOptions(option, api, data, config);
       }
 
       setOptions(

package/src/store/table.ts

@@ -429,7 +429,7 @@ export const TableStore = iRendererStore
     }
 
     function getUnSelectedRows() {
-      return self.rows.filter(item => !item.checked);
+      return flattenTree<IRow>(self.rows).filter((item: IRow) => !item.checked);
     }
 
     function getData(superData: any): any {
@@ -523,15 +523,6 @@ export const TableStore = iRendererStore
       );
     }
 
-    function getActivedSearchableColumns() {
-      return self.columns.filter(
-        column =>
-          column.searchable &&
-          isObject(column.searchable) &&
-          column.enableSearch
-      );
-    }
-
     return {
       get columnsData() {
         return getColumnsExceptBuiltinTypes();
@@ -613,7 +604,9 @@ export const TableStore = iRendererStore
       },
 
       get checkableRows() {
-        return self.rows.filter(item => item.checkable);
+        return flattenTree<IRow>(self.rows).filter(
+          (item: IRow) => item.checkable
+        );
       },
 
       get expandableRows() {
@@ -765,6 +758,51 @@ export const TableStore = iRendererStore
       }
     }
 
+    function updateColumns(columns: Array<SColumn>) {
+      if (columns && Array.isArray(columns)) {
+        columns = columns.filter(column => column).concat();
+
+        if (!columns.length) {
+          columns.push({
+            type: 'text',
+            label: '空'
+          });
+        }
+
+        columns.unshift({
+          type: '__expandme',
+          toggable: false,
+          className: 'Table-expandCell'
+        });
+
+        columns.unshift({
+          type: '__checkme',
+          fixed: 'left',
+          toggable: false,
+          className: 'Table-checkCell'
+        });
+
+        columns.unshift({
+          type: '__dragme',
+          toggable: false,
+          className: 'Table-dragCell'
+        });
+
+        columns = columns.map((item, index) => ({
+          ...item,
+          index,
+          rawIndex: index - 3,
+          type: item.type || 'plain',
+          pristine: item.pristine || item,
+          toggled: item.toggled !== false,
+          breakpoint: item.breakpoint,
+          isPrimary: index === 3
+        }));
+
+        self.columns.replace(columns as any);
+      }
+    }
+
     function combineCell(arr: Array<SRow>, keys: Array<string>): Array<SRow> {
       if (!keys.length || !arr.length) {
         return arr;
@@ -987,9 +1025,10 @@ export const TableStore = iRendererStore
 
     function updateSelected(selected: Array<any>, valueField?: string) {
       self.selectedRows.clear();
-      self.rows.forEach(item => {
+
+      eachTree(self.rows, item => {
         if (~selected.indexOf(item.pristine)) {
-          self.selectedRows.push(item);
+          self.selectedRows.push(item.id);
         } else if (
           find(
             selected,
@@ -998,9 +1037,10 @@ export const TableStore = iRendererStore
               a[valueField || 'value'] == item.pristine[valueField || 'value']
           )
         ) {
-          self.selectedRows.push(item);
+          self.selectedRows.push(item.id);
         }
       });
+
       updateCheckDisable();
     }
 
@@ -1228,6 +1268,7 @@ export const TableStore = iRendererStore
 
     return {
       update,
+      updateColumns,
       initRows,
       updateSelected,
       toggleAll,

package/src/types.ts

@@ -1,3 +1,4 @@
+import type {ActionSchema} from './renderers/Action';
 import {SchemaApiObject} from './Schema';
 
 export interface ApiObject extends SchemaApiObject {
@@ -30,7 +31,7 @@ export interface fetcherResult {
 }
 
 export interface fetchOptions {
-  method?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+  method?: 'get' | 'post' | 'put' | 'patch' | 'delete' | 'jsonp';
   successMessage?: string;
   errorMessage?: string;
   autoAppend?: boolean;
@@ -157,3 +158,59 @@ export interface JSONSchema {
 // export type ExtractProps<
 //   TComponentOrTProps
 // > = TComponentOrTProps extends React.ComponentType<infer P> ? P : never;
+
+/**
+ * 事件跟踪的定义
+ */
+export interface EventTrack {
+  /**
+   * 事件类型，目前有以下几种
+   *
+   * api: 所有 fetcher 前调用
+   * url: 打开外部链接，组件有可能是 action 也有可能是 link
+   * link: 打开内部链接
+   * dialog: action 的弹框
+   * drawer: action 的抽出式弹框
+   * copy: action 里的复制
+   * reload: action 里的 reload
+   * email: action 里的 email
+   * prev: action 里的 prev
+   * next: action 里的 next
+   * cancel: action 里的 cancel
+   * close: action 里的 close
+   * submit: 有可能是 action 里的 submit，也有可能是表单提交
+   * confirm: action 里的 confirm
+   * add: action 里的 add
+   * reset: action 里的 reset
+   * reset-and-submit: action 里的 reset-and-submit
+   * formItemChange: 表单项内容变化
+   * formError: 表单验证失败
+   * formSubmit: 表单成功提交，在表单验证成功之后才会触发，这个可能会和 api 重合
+   * tabChange: tab 切换
+   * netError: api 报错
+   */
+  eventType:
+    | 'api'
+    | 'url'
+    | 'link'
+    | 'dialog'
+    | 'drawer'
+    | 'copy'
+    | 'reload'
+    | 'email'
+    | 'prev'
+    | 'next'
+    | 'cancel'
+    | 'close'
+    | 'submit'
+    | 'confirm'
+    | 'reset'
+    | 'reset-and-submit'
+    | 'formItemChange'
+    | 'tabChange';
+
+  /**
+   * 事件数据
+   */
+  eventData: ActionSchema | Api;
+}