amis 1.10.1-beta.0 → 1.10.2

package/src/renderers/Table-v2/index.tsx

@@ -119,7 +119,7 @@ export interface ColumnSchema {
    * 列样式
    */
   className?: string;
-  
+
   /**
    * 表头单元格样式
    */
@@ -186,6 +186,10 @@ export interface RowSelectionSchema {
 }
 
 export interface ExpandableSchema {
+  /**
+   * 对应渲染器类型
+   */
+  type: string;
   /**
    * 对应数据源的key值
    */
@@ -248,11 +252,6 @@ export interface TableSchemaV2 extends BaseSchema {
    */
   expandable?: ExpandableSchema;
 
-  /**
-   * 表格行可展开内容配置
-   */
-  expandableBody?: Array<SchemaObject>;
-
   /**
    * 粘性头部
    */
@@ -331,16 +330,7 @@ export interface TableV2Props extends RendererProps {
   togglable: boolean;
 }
 
-@Renderer({
-  type: 'table-v2',
-  storeType: TableStoreV2.name,
-  name: 'table-v2',
-  isolateScope: true
-})
-export default class TableRenderer extends React.Component<
-  TableV2Props,
-  object
-> {
+export default class TableV2 extends React.Component<TableV2Props, object> {
   static contextType = ScopedContext;
 
   renderedToolbars: Array<string> = [];
@@ -362,7 +352,7 @@ export default class TableRenderer extends React.Component<
     const {store, columnsTogglable, columns} = props;
 
     store.update({columnsTogglable, columns});
-    TableRenderer.syncRows(store, props, undefined) && this.syncSelected();
+    TableV2.syncRows(store, props, undefined) && this.syncSelected();
   }
 
   componentWillUnmount() {
@@ -485,7 +475,7 @@ export default class TableRenderer extends React.Component<
         (props.data !== prevProps.data ||
           (typeof props.source === 'string' && isPureVariable(props.source))))
     ) {
-      TableRenderer.syncRows(store, props, prevProps) && this.syncSelected();
+      TableV2.syncRows(store, props, prevProps) && this.syncSelected();
     }
 
     if (!isEqual(prevProps.columns, props.columns)) {
@@ -600,9 +590,10 @@ export default class TableRenderer extends React.Component<
             <div
               key={col}
               className={cx('Table-head-cell-wrapper', {
-              [`${column.className}`]: !!column.className,
-              [`${column.titleClassName}`]: !!column.titleClassName
-            })}>
+                [`${column.className}`]: !!column.className,
+                [`${column.titleClassName}`]: !!column.titleClassName
+              })}
+            >
               {content}
               {remark}
               {children}
@@ -624,7 +615,7 @@ export default class TableRenderer extends React.Component<
               colIndex: number
             ) => {
               const props: RenderProps = {};
-              const item = store.getRowByIndex(rowIndex);
+              const item = store.getRowByIndex(rowIndex) || {};
               const obj = {
                 children: this.renderCellSchema(column, {
                   data: item.locals,
@@ -709,7 +700,9 @@ export default class TableRenderer extends React.Component<
         if (column.classNameExpr) {
           clone.className = (record: any, rowIndex: number) => {
             const className = filter(column.classNameExpr, {record, rowIndex});
-            return `${className}${column.className ? ` ${column.className}` : ''}`;
+            return `${className}${
+              column.className ? ` ${column.className}` : ''
+            }`;
           };
         }
 
@@ -967,7 +960,9 @@ export default class TableRenderer extends React.Component<
         isActived: store.hasColumnHidden(),
         columns: store.columnsData,
         onColumnToggle: this.handleColumnToggle,
-        children
+        children,
+        tooltipContainer:
+          env && env.getModalContainer ? env.getModalContainer : undefined
       }
     );
   }
@@ -1058,10 +1053,7 @@ export default class TableRenderer extends React.Component<
   }
 
   @autobind
-  async handleFilter(payload: {
-    filterName: string,
-    filterValue: string
-  }) {
+  async handleFilter(payload: {filterName: string; filterValue: string}) {
     const {dispatchEvent, data, onFilter} = this.props;
     const rendererEvent = await dispatchEvent(
       'columnFilter',
@@ -1076,7 +1068,11 @@ export default class TableRenderer extends React.Component<
   }
 
   @autobind
-  async handleRowClick(event: React.ChangeEvent<any>, rowItem: any, rowIndex?: number) {
+  async handleRowClick(
+    event: React.ChangeEvent<any>,
+    rowItem: any,
+    rowIndex?: number
+  ) {
     const {dispatchEvent, data, onRow} = this.props;
 
     const rendererEvent = await dispatchEvent(
@@ -1094,7 +1090,11 @@ export default class TableRenderer extends React.Component<
   }
 
   @autobind
-  async handleOrderChange(oldIndex: number, newIndex: number, levels: Array<string>) {
+  async handleOrderChange(
+    oldIndex: number,
+    newIndex: number,
+    levels: Array<string>
+  ) {
     const {store} = this.props;
     const rowItem = store.getRowByIndex(oldIndex, levels);
 
@@ -1121,10 +1121,7 @@ export default class TableRenderer extends React.Component<
       return;
     }
 
-    onSaveOrder(
-      movedItems,
-      items
-    );
+    onSaveOrder(movedItems, items);
   }
 
   @autobind
@@ -1151,7 +1148,10 @@ export default class TableRenderer extends React.Component<
         const dataSource = store.getData(data);
         const selected: Array<any> = [];
         dataSource.items.forEach((item: any, rowIndex: number) => {
-          const flag = evalExpression(args?.selectedRowKeysExpr, {record: item, rowIndex});
+          const flag = evalExpression(args?.selectedRowKeysExpr, {
+            record: item,
+            rowIndex
+          });
           if (flag) {
             selected.push(item[keyField]);
           }
@@ -1171,7 +1171,6 @@ export default class TableRenderer extends React.Component<
       rowSelection,
       columns,
       expandable,
-      expandableBody,
       footSummary,
       headSummary,
       loading,
@@ -1199,9 +1198,9 @@ export default class TableRenderer extends React.Component<
         delete expandableConfig.expandableOn;
       }
 
-      if (expandableBody && expandableBody.length > 0) {
+      if (expandable && expandable.type) {
         expandableConfig.expandedRowRender = (record: any, rowIndex: number) =>
-          this.renderSchema('expandableBody', expandableBody, {data: record});
+          this.renderSchema('expandableBody', {...expandable}, {data: record});
       }
 
       if (expandable.expandedRowClassNameExpr) {
@@ -1287,8 +1286,8 @@ export default class TableRenderer extends React.Component<
     let itemActionsConfig = undefined;
     if (itemActions) {
       const finalActions = Array.isArray(itemActions)
-      ? itemActions.filter(action => !action.hiddenOnHover)
-      : [];
+        ? itemActions.filter(action => !action.hiddenOnHover)
+        : [];
 
       if (!finalActions.length) {
         return null;
@@ -1346,41 +1345,34 @@ export default class TableRenderer extends React.Component<
   }
 
   renderHeading() {
-    let {
-      store,
-      classnames: cx,
-      headingClassName,
-      translate: __
-    } = this.props;
+    let {store, classnames: cx, headingClassName, translate: __} = this.props;
 
     if (store.moved) {
       return (
         <div className={cx('Table-heading', headingClassName)} key="heading">
-          {
-            store.moved ? (
-              <span>
-                {__('Table.moved', {
-                  moved: store.moved
-                })}
-                <button
-                  type="button"
-                  className={cx('Button Button--xs Button--success m-l-sm')}
-                  onClick={this.handleSaveOrder}
-                >
-                  <Icon icon="check" className="icon m-r-xs" />
-                  {__('Form.submit')}
-                </button>
-                <button
-                  type="button"
-                  className={cx('Button Button--xs Button--danger m-l-sm')}
-                  onClick={this.reset}
-                >
-                  <Icon icon="close" className="icon m-r-xs" />
-                  {__('Table.discard')}
-                </button>
-              </span>
-            ) : null
-          }
+          {store.moved ? (
+            <span>
+              {__('Table.moved', {
+                moved: store.moved
+              })}
+              <button
+                type="button"
+                className={cx('Button Button--xs Button--success m-l-sm')}
+                onClick={this.handleSaveOrder}
+              >
+                <Icon icon="check" className="icon m-r-xs" />
+                {__('Form.submit')}
+              </button>
+              <button
+                type="button"
+                className={cx('Button Button--xs Button--danger m-l-sm')}
+                onClick={this.reset}
+              >
+                <Icon icon="close" className="icon m-r-xs" />
+                {__('Table.discard')}
+              </button>
+            </span>
+          ) : null}
         </div>
       );
     }
@@ -1392,7 +1384,7 @@ export default class TableRenderer extends React.Component<
     const {classnames: cx} = this.props;
 
     this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了
-    
+
     const heading = this.renderHeading();
 
     return (
@@ -1404,3 +1396,31 @@ export default class TableRenderer extends React.Component<
     );
   }
 }
+
+@Renderer({
+  type: 'table-v2',
+  storeType: TableStoreV2.name,
+  name: 'table-v2',
+  isolateScope: true
+})
+export class TableRenderer extends TableV2 {
+  receive(values: any, subPath?: string) {
+    const scoped = this.context as IScopedContext;
+    const parents = scoped?.parent?.getComponents();
+
+    /**
+     * 因为Table在scope上注册，导致getComponentByName查询组件时会优先找到Table，和CRUD联动的动作都会失效
+     * 这里先做兼容处理，把动作交给上层的CRUD处理
+     */
+    if (Array.isArray(parents) && parents.length) {
+      // CRUD的name会透传给Table，这样可以保证找到CRUD
+      const crud = parents.find(cmpt => cmpt?.props?.name === this.props?.name);
+
+      return crud?.receive?.(values, subPath);
+    }
+
+    if (subPath) {
+      return scoped.send(subPath, values);
+    }
+  }
+}

package/src/store/crud.ts

@@ -494,6 +494,16 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
       self.unSelectedItems.replace(items);
     };
 
+    const updateSelectData = (selected: Array<any>, unSelected: Array<any>) => {
+      self.selectedItems.replace(selected);
+      self.unSelectedItems.replace(unSelected);
+      // 同步到data中，使filter等部分也能拿到
+      self.reInitData({
+        selectedItems: selected,
+        unSelectedItems: unSelected
+      });
+    };
+
     const setInnerModalOpened = (value: boolean) => {
       self.hasInnerModalOpen = value;
     };
@@ -515,7 +525,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
         ...self.pristine,
         items: rowsData,
         count: 0,
-        total: 0
+        total: rowsData.length
       };
 
       self.items.replace(rowsData);
@@ -555,7 +565,19 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
       });
     };
 
+    const getData = (superData: any): any => {
+      return createObject(superData, {
+        total: self.total,
+        page: self.page,
+        items: self.items.concat(),
+        selectedItems: self.selectedItems.concat(),
+        unSelectedItems: self.unSelectedItems.concat()
+      });
+    };
+
     return {
+      getData,
+      updateSelectData,
       setPristineQuery,
       updateQuery,
       fetchInitData,

package/src/store/form.ts

@@ -9,6 +9,7 @@ import {
   Instance
 } from 'mobx-state-tree';
 import debounce from 'lodash/debounce';
+import find from 'lodash/find';
 import {ServiceStore} from './service';
 import {FormItemStore, IFormItemStore, SFormItemStore} from './formItem';
 import {Api, ApiObject, fetchOptions, Payload} from '../types';
@@ -326,7 +327,6 @@ export const FormStore = ServiceStore.named('FormStore')
         }
 
         if (!json.ok) {
-
           if (json.status === 422 && json.errors) {
             setFormItemErrors(json.errors);
 
@@ -359,22 +359,23 @@ export const FormStore = ServiceStore.named('FormStore')
           );
           if (!ret?.dispatcher?.prevented) {
             self.msg &&
-            getEnv(self).notify(
-              'success',
-              self.msg,
-              json.msgTimeout !== undefined
-                ? {
-                    closeButton: true,
-                    timeout: json.msgTimeout
-                  }
-                : undefined
-            );
+              getEnv(self).notify(
+                'success',
+                self.msg,
+                json.msgTimeout !== undefined
+                  ? {
+                      closeButton: true,
+                      timeout: json.msgTimeout
+                    }
+                  : undefined
+              );
           }
           return json.data;
         }
       } catch (e) {
         self.markSaving(false);
-        let ret = options && options.onFailed && options.onFailed(e.response || {});
+        let ret =
+          options && options.onFailed && options.onFailed(e.response || {});
         if (ret?.then) {
           ret = yield ret;
         }
@@ -486,7 +487,7 @@ export const FormStore = ServiceStore.named('FormStore')
           if (dispatcher?.then) {
             dispatcher = yield dispatcher;
           }
-          if (!dispatcher?.prevented){
+          if (!dispatcher?.prevented) {
             msg && env.notify('error', msg);
           }
           throw new Error(msg);
@@ -548,20 +549,26 @@ export const FormStore = ServiceStore.named('FormStore')
       return self.valid;
     });
 
-    const validateFields: (fields: Array<string>) => Promise<boolean> = flow(
-      function* validateFields(fields: Array<string>) {
-        const items = self.items.concat();
-        let result: Array<boolean> = [];
-        for (let i = 0, len = items.length; i < len; i++) {
-          let item = items[i] as IFormItemStore;
+    const validateFields: (
+      fields: Array<string | {name: string; rules: {[propName: string]: any}}>
+    ) => Promise<boolean> = flow(function* validateFields(
+      fields: Array<string | {name: string; rules: {[propName: string]: any}}>
+    ) {
+      const items = self.items.concat();
+      const normalizedfields = fields.map(field =>
+        typeof field === 'string' ? {name: field, rules: {}} : field
+      );
+      let result: Array<boolean> = [];
+      for (let i = 0, len = items.length; i < len; i++) {
+        let item = items[i] as IFormItemStore;
+        const field = find(normalizedfields, field => field.name === item.name);
 
-          if (~fields.indexOf(item.name)) {
-            result.push(yield item.validate(self.data));
-          }
+        if (field) {
+          result.push(yield item.validate(self.data, undefined, field.rules));
         }
-        return result.every(item => item);
       }
-    );
+      return result.every(item => item);
+    });
 
     function clearErrors() {
       const items = self.items.concat();

package/src/store/formItem.ts

@@ -326,70 +326,83 @@ export const FormItemStore = StoreNode.named('FormItemStore')
     }
 
     let validateCancel: Function | null = null;
-    const validate: (data: Object, hook?: any) => Promise<boolean> = flow(
-      function* validate(data: Object, hook?: any) {
-        if (self.validating && !isEffectiveApi(self.validateApi, data)) {
-          return self.valid;
-        }
-
-        self.validating = true;
-        clearError();
-        if (hook) {
-          yield hook();
-        }
+    const validate: (
+      data: Object,
+      hook?: any,
+      /**
+       * customRules主要是为了支持action.require的验证方式
+       * 这样可以基于不同的action实现不同的校验规则
+       */
+      customRules?: {[propName: string]: any}
+    ) => Promise<boolean> = flow(function* validate(
+      data: Object,
+      hook?: any,
+      customRules?: {[propName: string]: any}
+    ) {
+      if (self.validating && !isEffectiveApi(self.validateApi, data)) {
+        return self.valid;
+      }
 
-        addError(
-          doValidate(self.tmpValue, data, self.rules, self.messages, self.__)
-        );
+      self.validating = true;
+      clearError();
+      if (hook) {
+        yield hook();
+      }
 
-        if (!self.errors.length && isEffectiveApi(self.validateApi, data)) {
-          if (validateCancel) {
-            validateCancel();
-            validateCancel = null;
-          }
+      addError(
+        doValidate(
+          self.tmpValue,
+          data,
+          customRules ? str2rules(customRules) : self.rules,
+          self.messages,
+          self.__
+        )
+      );
 
-          const json: Payload = yield getEnv(self).fetcher(
-            self.validateApi,
-            /** 如果配置validateApi，需要将用户最新输入同步到数据域内 */
-            createObject(data, {[self.name]: self.tmpValue}),
-            {
-              cancelExecutor: (executor: Function) =>
-                (validateCancel = executor)
-            }
-          );
+      if (!self.errors.length && isEffectiveApi(self.validateApi, data)) {
+        if (validateCancel) {
+          validateCancel();
           validateCancel = null;
+        }
 
-          if (!json.ok && json.status === 422 && json.errors) {
-            addError(
-              String(
-                json.errors || json.msg || `表单项「${self.name}」校验失败`
-              )
-            );
+        const json: Payload = yield getEnv(self).fetcher(
+          self.validateApi,
+          /** 如果配置validateApi，需要将用户最新输入同步到数据域内 */
+          createObject(data, {[self.name]: self.tmpValue}),
+          {
+            cancelExecutor: (executor: Function) => (validateCancel = executor)
           }
+        );
+        validateCancel = null;
+
+        if (!json.ok && json.status === 422 && json.errors) {
+          addError(
+            String(json.errors || json.msg || `表单项「${self.name}」校验失败`)
+          );
         }
+      }
 
-        self.validated = true;
+      self.validated = true;
 
-        if (self.unique && self.form?.parentStore?.storeType === 'ComboStore') {
-          const combo = self.form.parentStore as IComboStore;
-          const group = combo.uniques.get(self.name) as IUniqueGroup;
+      if (self.unique && self.form?.parentStore?.storeType === 'ComboStore') {
+        const combo = self.form.parentStore as IComboStore;
+        const group = combo.uniques.get(self.name) as IUniqueGroup;
 
-          if (
-            group.items.some(
-              item =>
-                item !== self &&
-                self.tmpValue !== undefined &&
-                item.value === self.tmpValue
-            )
-          ) {
-            addError(self.__('Form.unique'));
-          }
+        if (
+          group.items.some(
+            item =>
+              item !== self &&
+              self.tmpValue !== undefined &&
+              item.value === self.tmpValue
+          )
+        ) {
+          addError(self.__('Form.unique'));
         }
-
-        self.validating = false;
-        return self.valid;
       }
-    );
+
+      self.validating = false;
+      return self.valid;
+    });
 
     function setError(msg: string | Array<string>, tag: string = 'builtin') {
       clearError();

package/src/store/list.ts

@@ -233,6 +233,14 @@ export const ListStore = iRendererStore
       }
     }
 
+    function clearAll() {
+      self.selectedItems.clear();
+    }
+
+    function selectAll() {
+      self.selectedItems.replace(self.checkableItems);
+    }
+
     function toggle(item: IItem) {
       if (!item.checkable) {
         return;
@@ -289,6 +297,8 @@ export const ListStore = iRendererStore
       initItems,
       updateSelected,
       toggleAll,
+      clearAll,
+      selectAll,
       toggle,
       clear,
       setOrderByInfo,

package/src/types.ts

@@ -114,7 +114,8 @@ export interface Action extends Button {
     | 'step-submit'
     | 'selectAll'
     | 'changeTabKey'
-    | 'click';
+    | 'click'
+    | 'stopAutoRefresh';
   api?: Api;
   asyncApi?: Api;
   payload?: any;

package/src/utils/icon.tsx

@@ -3,6 +3,7 @@
  */
 
 import React from 'react';
+import {getIcon, Icon} from '../components/icons';
 import {ClassNamesFn} from '../theme';
 
 /**
@@ -17,10 +18,18 @@ export const generateIcon = (
   className?: string,
   classNameProp?: string
 ) => {
+  if (!icon) {
+    return null;
+  }
+
   if (React.isValidElement(icon)) {
     return icon;
   }
 
+  if (getIcon(icon)) {
+    return <Icon icon={icon} className={cx(className, icon, classNameProp)} />;
+  }
+
   const isURLIcon = icon?.indexOf('.') !== -1;
 
   return icon ? (