amis 1.10.0 → 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/InputFormula.tsx

@@ -152,7 +152,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
   validate() {
     const {translate: __, value} = this.props;
 
-    if (this.ref?.validate) {
+    if (this.ref?.validate && value) {
       const res = this.ref.validate(value);
       if (res !== true) {
         return __('FormulaEditor.invalidData', {err: res});

package/src/renderers/Form/InputImage.tsx

@@ -703,7 +703,7 @@ export default class ImageControl extends React.Component<
           locked: false
         },
         () => {
-          this.onChange(!!this.resolve);
+          this.onChange(!!this.resolve, false);
 
           if (this.resolve) {
             this.resolve(
@@ -773,7 +773,7 @@ export default class ImageControl extends React.Component<
     });
   }
 
-  async onChange(changeImmediately?: boolean) {
+  async onChange(changeImmediately?: boolean, changeEvent: boolean = true) {
     const {
       multiple,
       onChange,
@@ -807,9 +807,11 @@ export default class ImageControl extends React.Component<
         : newValue;
     }
 
-    const dispatcher = await this.dispatchEvent('change');
-    if (dispatcher?.prevented) {
-      return;
+    if (changeEvent) {
+      const dispatcher = await this.dispatchEvent('change');
+      if (dispatcher?.prevented) {
+        return;
+      }
     }
 
     onChange((this.emitValue = newValue || ''), undefined, changeImmediately);

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