amis 1.10.1-beta.0 → 1.10.2

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',
@@ -997,6 +1002,9 @@ export default class Form extends React.Component<FormProps, object> {
           if (!dispatcher?.prevented) {
             env.notify('error', __('Form.validateFailed'));
           }
+
+          /** 抛异常是为了在dialog中catch这个错误，避免弹窗直接关闭 */
+          return Promise.reject(__('Form.validateFailed'));
         } else {
           dispatchEvent('validateSucc', this.props.data);
           this.handleAction(
@@ -1006,6 +1014,7 @@ export default class Form extends React.Component<FormProps, object> {
             throwErrors,
             delegate
           );
+          return;
         }
       });
     }

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;
           }
         );
@@ -2817,6 +2817,22 @@ export class TableRenderer extends Table {
       return scoped.send(subPath, values);
     }
   }
+
+  reload(subPath?: string, query?: any, ctx?: any) {
+    const scoped = this.context as IScopedContext;
+    const parents = scoped?.parent?.getComponents();
+
+    if (Array.isArray(parents) && parents.length) {
+      // CRUD的name会透传给Table，这样可以保证找到CRUD
+      const crud = parents.find(cmpt => cmpt?.props?.name === this.props?.name);
+
+      return crud?.reload?.(subPath, query, ctx);
+    }
+
+    if (subPath) {
+      return scoped.reload(subPath, ctx);
+    }
+  }
 }
 
 export {TableCell};