amis 1.10.1-beta.1 → 1.10.1

package/src/renderers/Card2.tsx

@@ -54,7 +54,7 @@ export interface Card2Props
   /**
    * 选择事件
    */
-  onCheck: (checked: boolean, data: any) => void;
+  onCheck: () => void;
 
   /**
    * 数据
@@ -97,8 +97,7 @@ export default class Card2<T> extends React.Component<Card2Props & T, object> {
 
   @autobind
   handleCheck() {
-    const {item, selected} = this.props;
-    this.props.onCheck && this.props.onCheck(!selected, item);
+    this.props.onCheck && this.props.onCheck();
   }
 
   renderCheckbox(): JSX.Element | null {

package/src/renderers/Cards.tsx

@@ -4,13 +4,14 @@ import {Renderer, RendererProps} from '../factory';
 import {SchemaNode, Schema, Action} from '../types';
 import Button from '../components/Button';
 import {ListStore, IListStore, IItem} from '../store/list';
-import {observer} from 'mobx-react';
 import {
   anyChanged,
   getScrollParent,
   difference,
   ucFirst,
-  noop
+  noop,
+  autobind,
+  createObject
 } from '../utils/helper';
 import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 import Sortable from 'sortablejs';
@@ -404,6 +405,26 @@ export default class Cards extends React.Component<GridProps, object> {
     // store.markHeaderAffix(clip.top < offsetY && (clip.top + clip.height - 40) > offsetY);
   }
 
+  @autobind
+  doAction(action: Action, data: object, throwErrors: boolean = false) {
+    if (action.actionType) {
+      switch (action.actionType as string) {
+        case 'toggleSelectAll':
+          this.handleCheckAll();
+          break;
+        case 'selectAll':
+          this.handleSelectAll();
+          break;
+        case 'clearAll':
+          this.handleClearAll();
+          break;
+        // case 'dragStart':
+        //   this.initDragging();
+        // case 'dragStop':
+      }
+    }
+  }
+
   handleAction(e: React.UIEvent<any>, action: Action, ctx: object) {
     const {onAction} = this.props;
 
@@ -423,14 +444,34 @@ export default class Cards extends React.Component<GridProps, object> {
     this.syncSelected();
   }
 
+  handleSelectAll() {
+    const {store} = this.props;
+
+    store.selectAll();
+    this.syncSelected();
+  }
+
+  handleClearAll() {
+    const {store} = this.props;
+
+    store.clearAll();
+    this.syncSelected();
+  }
+
   syncSelected() {
-    const {store, onSelect} = this.props;
+    const {store, onSelect, dispatchEvent} = this.props;
+    const selectItems = store.selectedItems.map(item => item.data);
+    const unSelectItems = store.unSelectedItems.map(item => item.data);
+
+    dispatchEvent(
+      'selected',
+      createObject(store.data, {
+        selectItems,
+        unSelectItems
+      })
+    );
 
-    onSelect &&
-      onSelect(
-        store.selectedItems.map(item => item.data),
-        store.unSelectedItems.map(item => item.data)
-      );
+    onSelect && onSelect(selectItems, unSelectItems);
   }
 
   handleQuickChange(
@@ -541,6 +582,8 @@ export default class Cards extends React.Component<GridProps, object> {
   }
 
   initDragging() {
+    if (this.sortable) return;
+
     const store = this.props.store;
     const dom = findDOMNode(this) as HTMLElement;
     const ns = this.props.classPrefix;
@@ -868,7 +911,7 @@ export default class Cards extends React.Component<GridProps, object> {
       checkable: item.checkable,
       draggable: item.draggable,
       selected: item.checked,
-      onSelect: item.toggle,
+      onSelect: this.handleCheck,
       dragging: store.dragging,
       data: item.locals,
       onAction: this.handleAction,
@@ -881,7 +924,9 @@ export default class Cards extends React.Component<GridProps, object> {
       cardProps = {
         ...cardProps,
         item: item.locals,
-        onCheck: item.toggle
+        onCheck: () => {
+          this.handleCheck(item);
+        }
       };
     }
 

package/src/renderers/Form/ConditionBuilder.tsx

@@ -4,7 +4,6 @@ import {Funcs, Fields} from '../../components/condition-builder/types';
 import {Config} from '../../components/condition-builder/config';
 import ConditionBuilder from '../../components/condition-builder/index';
 import {SchemaApi, SchemaTokenizeableString} from '../../Schema';
-import FormulaPicker from '../../components/formula/Picker';
 import {
   RemoteOptionsProps,
   withRemoteConfig
@@ -15,6 +14,7 @@ import {
   isPureVariable,
   resolveVariableAndFilter
 } from '../../utils/tpl-builtin';
+import {IconSchema} from '../Icon';
 
 /**
  * 条件组合控件
@@ -26,6 +26,16 @@ export interface ConditionBuilderControlSchema extends FormBaseControl {
    */
   type: 'condition-builder';
 
+  /**
+   * 内嵌模式，默认为 true
+   */
+  embed?: boolean;
+
+  /**
+   * 非内嵌模式时 弹窗触发icon
+   */
+  pickerIcon?: IconSchema;
+
   /**
    * 函数集合
    */
@@ -73,8 +83,14 @@ export default class ConditionBuilderControl extends React.PureComponent<Conditi
       data
     );
   }
+
+  renderPickerIcon() {
+    const {render, pickerIcon} = this.props;
+    return pickerIcon ? render('picker-icon', pickerIcon) : undefined;
+  }
+
   render() {
-    const {className, classnames: cx, ...rest} = this.props;
+    const {className, classnames: cx, pickerIcon, ...rest} = this.props;
 
     // 处理一下formula类型值的变量列表
     let formula = this.props.formula ? {...this.props.formula} : undefined;
@@ -91,6 +107,7 @@ export default class ConditionBuilderControl extends React.PureComponent<Conditi
       <div className={cx(`ConditionBuilderControl`, className)}>
         <ConditionBuilderWithRemoteOptions
           renderEtrValue={this.renderEtrValue}
+          pickerIcon={this.renderPickerIcon()}
           {...rest}
           formula={formula}
         />

package/src/renderers/Form/Item.tsx

@@ -308,6 +308,10 @@ export interface FormItemBasicConfig extends Partial<RendererConfig> {
   storeType?: string;
   validations?: string;
   strictMode?: boolean;
+  /**
+   * schema变化使视图更新的属性白名单
+   */
+  detectProps?: Array<string>;
   shouldComponentUpdate?: (props: any, prevProps: any) => boolean;
   descriptionClassName?: string;
   storeExtendsData?: boolean;
@@ -1268,7 +1272,13 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
             }
 
             // 把可能会影响视图的白名单弄出来，减少重新渲染次数。
-            if (anyChanged(detectProps, this.props, nextProps)) {
+            if (
+              anyChanged(
+                detectProps.concat(config.detectProps || []),
+                this.props,
+                nextProps
+              )
+            ) {
               return true;
             }
 

package/src/renderers/Form/TreeSelect.tsx

@@ -112,7 +112,6 @@ export interface TreeSelectProps extends OptionsControlProps {
 
 export interface TreeSelectState {
   isOpened: boolean;
-  isFocused: boolean;
   inputValue: string;
 }
 
@@ -157,8 +156,7 @@ export default class TreeSelectControl extends React.Component<
 
     this.state = {
       inputValue: '',
-      isOpened: false,
-      isFocused: false
+      isOpened: false
     };
 
     this.open = this.open.bind(this);
@@ -206,22 +204,23 @@ export default class TreeSelectControl extends React.Component<
 
   handleFocus(e: any) {
     const {dispatchEvent, value, data} = this.props;
-    this.setState({
-      isFocused: true
-    });
-    dispatchEvent('focus', createObject(data, {
-      value
-    }));
+
+    dispatchEvent(
+      'focus',
+      createObject(data, {
+        value
+      })
+    );
   }
 
   handleBlur(e: any) {
     const {dispatchEvent, value, data} = this.props;
-    this.setState({
-      isFocused: false
-    });
-    dispatchEvent('blur', createObject(data, {
-      value
-    }));
+    dispatchEvent(
+      'blur',
+      createObject(data, {
+        value
+      })
+    );
   }
 
   handleKeyPress(e: React.KeyboardEvent) {
@@ -645,7 +644,6 @@ export default class TreeSelectControl extends React.Component<
             'TreeSelect--searchable':
               searchable || isEffectiveApi(autoComplete),
             'is-opened': this.state.isOpened,
-            'is-focused': this.state.isFocused,
             'is-disabled': disabled
           })}
           result={

package/src/renderers/Form/index.tsx

@@ -63,7 +63,7 @@ export interface FormSchemaHorizontal {
   right?: number;
   leftFixed?: boolean | number | 'xs' | 'sm' | 'md' | 'lg';
   justify?: boolean; // 两端对齐
-  labelAlign?: 'left' | 'right' // label对齐方式
+  labelAlign?: 'left' | 'right'; // label对齐方式
 }
 
 /**
@@ -988,7 +988,12 @@ export default class Form extends React.Component<FormProps, object> {
       data = store.data;
     }
     if (Array.isArray(action.required) && action.required.length) {
-      return store.validateFields(action.required).then(async result => {
+      const fields = action.required.map(item => ({
+        name: item,
+        rules: {isRequired: true}
+      }));
+
+      return store.validateFields(fields).then(async result => {
         if (!result) {
           const dispatcher = await dispatchEvent(
             'validateError',

package/src/renderers/Icon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {BaseSchema} from '../Schema';
 import {BadgeSchema, withBadge} from '../components/Badge';
+import {getIcon} from '../components/icons';
 
 /**
  * Icon 图表渲染器
@@ -36,6 +37,11 @@ export class Icon extends React.Component<IconProps, object> {
   render() {
     const {icon, vendor, classnames: cx, className} = this.props;
 
+    let CustomIcon = getIcon(icon);
+    if (CustomIcon) {
+      return <CustomIcon className={cx(className, `icon-${icon}`)} />;
+    }
+
     const isURLIcon = icon?.indexOf('.') !== -1;
     let iconPrefix = '';
     if (vendor === 'iconfont') {
@@ -47,6 +53,7 @@ export class Icon extends React.Component<IconProps, object> {
       // 如果vendor为空，则不设置前缀,这样可以支持fontawesome v5、fontawesome v6或者其他框架
       iconPrefix = `${icon}`;
     }
+
     return isURLIcon ? (
       <img className={cx('Icon')} src={icon} />
     ) : (
@@ -60,4 +67,4 @@ export class Icon extends React.Component<IconProps, object> {
 })
 // @ts-ignore 类型没搞定
 @withBadge
-export class TplRenderer extends Icon {}
+export class IconRenderer extends Icon {}

package/src/renderers/Table/index.tsx

@@ -1081,11 +1081,11 @@ export default class Table extends React.Component<TableProps, object> {
     } = (this.heights = {});
 
     heights.header = table
-      .querySelector('thead>tr:last-child')!
-      .getBoundingClientRect().height;
-    heights.header2 = table
-      .querySelector('thead>tr:first-child')!
+      .querySelector('thead')!
       .getBoundingClientRect().height;
+    // heights.header2 = table
+    //   .querySelector('thead>tr:first-child')!
+    //   .getBoundingClientRect().height;
 
     forEach(
       table.querySelectorAll('thead>tr:last-child>th'),
@@ -1132,7 +1132,7 @@ export default class Table extends React.Component<TableProps, object> {
           table.querySelectorAll('thead>tr:first-child>th'),
           (item: HTMLElement) => {
             const width = widths2[item.getAttribute('data-index') as string];
-            item.style.cssText += `width: ${width}px; height: ${heights.header2}px`;
+            item.style.cssText += `width: ${width}px; height: ${heights.header}px`;
             totalWidth2 += width;
           }
         );

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);
+    }
+  }
+}