amis 1.7.0 → 1.8.0-beta.13

package/src/renderers/Form/InputFormula.tsx

@@ -55,6 +55,11 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    */
   inputMode?: 'button' | 'input-button';
 
+  /**
+   * 外层input是否允许输入，否需要点击fx在弹窗中输入
+   */
+  allowInput?: boolean;
+
   /**
    * 按钮图标
    */
@@ -139,6 +144,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       className,
       classPrefix: ns,
       classnames: cx,
+      allowInput = true,
       borderMode,
       placeholder,
       inputMode,
@@ -156,6 +162,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
         className={className}
         value={value}
         disabled={disabled}
+        allowInput={allowInput}
         onChange={onChange}
         evalMode={evalMode}
         variables={variables}

package/src/renderers/Form/InputImage.tsx

@@ -31,6 +31,7 @@ import {
 import {filter} from '../../utils/tpl';
 import isPlainObject from 'lodash/isPlainObject';
 import merge from 'lodash/merge';
+import omit from 'lodash/omit';
 
 /**
  * Image 图片上传控件
@@ -817,13 +818,16 @@ export default class ImageControl extends React.Component<
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange, data} = this.props;
-    if (!isEmpty(autoFill) && onBulkChange && this.initAutoFill) {
+    const {autoFill, multiple, onBulkChange, data, name} = this.props;
+    // 排除自身的字段，否则会无限更新state
+    const excludeSelfAutoFill = omit(autoFill, name || '');
+
+    if (!isEmpty(excludeSelfAutoFill) && onBulkChange && this.initAutoFill) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
       const toSync = dataMapping(
-        autoFill,
+        excludeSelfAutoFill,
         multiple
           ? {
               items: files
@@ -1077,7 +1081,11 @@ export default class ImageControl extends React.Component<
         };
         obj.value = obj.value || obj.url;
 
-        const dispatcher = await this.dispatchEvent('success', obj);
+        const dispatcher = await this.dispatchEvent('success', {
+          ...file,
+          value: obj.value,
+          state: 'uploaded'
+        });
         if (dispatcher?.prevented) {
           return;
         }
@@ -1248,8 +1256,16 @@ export default class ImageControl extends React.Component<
 
   async dispatchEvent(e: string, data?: Record<string, any>) {
     const {dispatchEvent} = this.props;
-    data = data ? data : this.files;
-    return dispatchEvent(e, createObject(this.props.data, {file: data}));
+    const getEventData = (item: Record<string, any>) => ({
+      name: item.path || item.name,
+      value: item.value,
+      state: item.state,
+      error: item.error
+    });
+    const value = data
+      ? getEventData(data)
+      : this.files.map(item => getEventData(item));
+    return dispatchEvent(e, createObject(this.props.data, {file: value}));
   }
 
   // 动作

package/src/renderers/Form/InputMonthRange.tsx

@@ -170,8 +170,14 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
   // 动作
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
+
     if (action.actionType === 'clear') {
-      onChange(resetValue ?? '');
+      onChange('');
+      return;
+    }
+
+    if (action.actionType === 'reset' && resetValue) {
+      onChange(resetValue);
     }
   }
 

package/src/renderers/Form/InputRange.tsx

@@ -22,12 +22,8 @@ import {Action} from '../../types';
 export type Value = string | MultipleValue | number | [number, number];
 export type FormatValue = MultipleValue | number;
 export type TooltipPosType = 'auto' | 'top' | 'right' | 'bottom' | 'left';
-export type InputTextRendererEvent =
-  | 'change'
-  | 'afterChange'
-  | 'blur'
-  | 'focus';
-export type InputTextRendererAction = 'clear';
+export type InputRangeRendererEvent = 'change' | 'blur' | 'focus';
+export type InputRangeRendererAction = 'clear';
 export interface RangeControlSchema extends FormBaseControl {
   type: 'input-range';
 
@@ -275,7 +271,7 @@ export function formatValue(
       max: max === undefined || max > props.max ? props.max : max
     };
   }
-  return +value ?? props.min;
+  return +value < props.min ? props.min : Math.min(+value, props.max);
 }
 
 /**
@@ -288,11 +284,13 @@ export class Input extends React.Component<RangeItemProps, any> {
    */
   @autobind
   onChange(value: number) {
-    const {multiple, value: originValue, type} = this.props;
+    const {multiple, value: originValue, type, min} = this.props;
     const _value = this.getValue(value, type);
 
     this.props.updateValue(
-      multiple ? {...(originValue as MultipleValue), [type]: _value} : value
+      multiple
+        ? {...(originValue as MultipleValue), [type]: _value}
+        : value ?? min
     );
   }
 
@@ -338,7 +336,8 @@ export class Input extends React.Component<RangeItemProps, any> {
    */
   getValue(value: string | number, type?: string) {
     const {max, min, step, value: stateValue} = this.props as RangeItemProps;
-
+    // value为null、undefined时，取对应的min/max
+    value = value ?? (type === 'min' ? min : max);
     // 校正value为step的倍数
     let _value = Math.round(parseFloat(value + '') / step) * step;
     // 同步value与步长小数位数
@@ -461,21 +460,26 @@ export default class RangeControl extends React.PureComponent<
   }
 
   componentDidUpdate(prevProps: RangeProps) {
-    const {value} = prevProps;
+    const {value, min, max} = prevProps;
     const {
       value: nextPropsValue,
       multiple,
       delimiter,
-      min,
-      max,
+      min: nextPropsMin,
+      max: nextPropsMax,
       onChange
     } = this.props;
-    if (value !== nextPropsValue) {
+
+    if (
+      value !== nextPropsValue ||
+      min !== nextPropsMin ||
+      max !== nextPropsMax
+    ) {
       const value = formatValue(nextPropsValue, {
         multiple,
         delimiter,
-        min,
-        max
+        min: nextPropsMin,
+        max: nextPropsMax
       });
       this.setState({
         value: this.getValue(value)
@@ -588,12 +592,6 @@ export default class RangeControl extends React.PureComponent<
       region
     } = props;
 
-    // 指定parts -> 重新计算步长
-    if (parts > 1) {
-      props.step = (props.max - props.min) / props.parts;
-      props.showSteps = true;
-    }
-
     // 处理自定义json配置
     let renderMarks:
       | MarksType

package/src/renderers/Form/InputTable.tsx

@@ -1082,7 +1082,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       prefixRow,
       formInited,
       perPage,
-      classnames: cx
+      classnames: cx,
+      rowClassName,
+      rowClassNameExpr
     } = this.props;
 
     if (formInited === false) {
@@ -1131,7 +1133,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
             expandConfig,
             canAccessSuperData,
             reUseRow: false,
-            offset
+            offset,
+            rowClassName,
+            rowClassNameExpr
           }
         )}
         {(addable && showAddBtn !== false) || showPager ? (

package/src/renderers/Form/InputText.tsx

@@ -93,7 +93,6 @@ export type InputTextRendererEvent =
   | 'focus'
   | 'click'
   | 'change'
-  | 'clear'
   | 'enter';
 
 export interface TextProps extends OptionsControlProps {
@@ -179,7 +178,7 @@ export default class TextControl extends React.PureComponent<
             term: ''
           })
         );
-      } else {
+      } else if (addHook) {
         this.unHook = addHook(async (data: any) => {
           await formItem.loadOptions(
             autoComplete,
@@ -239,7 +238,6 @@ export default class TextControl extends React.PureComponent<
     len && this.input.setSelectionRange(len, len);
   }
 
-  @bindRendererEvent<TextProps, InputTextRendererEvent>('clear')
   clearValue() {
     const {onChange, resetValue} = this.props;
 
@@ -546,6 +544,8 @@ export default class TextControl extends React.PureComponent<
       multiple,
       creatable,
       borderMode,
+      showCounter,
+      maxLength,
       translate: __
     } = this.props;
     let type = this.props.type?.replace(/^(?:native|input)\-/, '');
@@ -664,6 +664,16 @@ export default class TextControl extends React.PureComponent<
                 </a>
               ) : null}
 
+              {showCounter ? (
+                <span className={cx('TextControl-counter')}>
+                  {`${this.valueToString(value)?.length}${
+                    typeof maxLength === 'number' && maxLength
+                      ? `/${maxLength}`
+                      : ''
+                  }`}
+                </span>
+              ) : null}
+
               {loading ? (
                 <Spinner
                   show
@@ -832,8 +842,8 @@ export default class TextControl extends React.PureComponent<
         </div>
       ) : (
         <div className={cx(`${ns}TextControl-addOn`, addOn.className)}>
-          {addOn.label ? filter(addOn.label, data) : null}
           {iconElement}
+          {addOn.label ? filter(addOn.label, data) : null}
         </div>
       )
     ) : null;

package/src/renderers/Form/InputTree.tsx

@@ -8,6 +8,8 @@ import {
 } from './Options';
 import {Spinner} from '../../components';
 import {SchemaApi} from '../../Schema';
+import {autobind, createObject} from '../../utils/helper';
+import {Action} from '../../types';
 
 /**
  * Tree 下拉选择框。
@@ -98,12 +100,48 @@ export default class TreeControl extends React.Component<TreeProps> {
     enableNodePath: false,
     pathSeparator: '/'
   };
+  treeRef: any
 
   reload() {
     const reload = this.props.reloadOptions;
     reload && reload();
   }
 
+  doAction(action: Action, data: any, throwErrors: boolean) {
+    const {resetValue, onChange, options} = this.props;
+    if (action.actionType && ['clear', 'reset'].includes(action.actionType)) {
+      onChange && onChange(resetValue ?? '');
+    }
+    if (action.actionType === 'expand') {
+      this.treeRef.syncUnFolded(this.props, action.openLevel);
+    }
+    if (action.actionType === 'collapse') {
+      this.treeRef.syncUnFolded(this.props, 0);
+    }
+  }
+
+
+
+  @autobind
+  async handleChange(value: any) {
+    const {onChange, dispatchEvent, data} = this.props;
+
+    const rendererEvent = await dispatchEvent('change', createObject(data, {
+      value
+    }));
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange && onChange(value);
+  }
+
+  @autobind
+  domRef(ref: any) {
+    this.treeRef = ref;
+  }
+
   render() {
     const {
       className,
@@ -112,7 +150,6 @@ export default class TreeControl extends React.Component<TreeProps> {
       value,
       enableNodePath,
       pathSeparator = '/',
-      onChange,
       disabled,
       joinValues,
       extractValue,
@@ -162,11 +199,12 @@ export default class TreeControl extends React.Component<TreeProps> {
         {loading ? null : (
           <TreeSelector
             classPrefix={ns}
+            onRef={this.domRef}
             labelField={labelField}
             valueField={valueField}
             iconField={iconField}
             disabled={disabled}
-            onChange={onChange}
+            onChange={this.handleChange}
             joinValues={joinValues}
             extractValue={extractValue}
             delimiter={delimiter}

package/src/renderers/Form/Item.tsx

@@ -25,6 +25,7 @@ import {
   BaseSchema,
   SchemaApi,
   SchemaClassName,
+  SchemaExpression,
   SchemaObject,
   SchemaType
 } from '../../Schema';
@@ -87,6 +88,11 @@ export interface FormBaseControl
    */
   readOnly?: boolean;
 
+  /**
+   * 只读条件
+   */
+  readOnlyOn?: SchemaExpression;
+
   /**
    * 不设置时，当表单提交过后表单项每次修改都会触发重新验证，
    * 如果设置了，则由此配置项来决定要不要每次修改都触发验证。
@@ -552,6 +558,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
             `Form-item Form-item--horizontal`,
             className,
             {
+              'Form-item--horizontal-justify': horizontal.justify,
               [`is-error`]: model && !model.valid,
               [`is-required`]: required
             },

package/src/renderers/Form/NestedSelect.tsx

@@ -61,6 +61,11 @@ export interface NestedSelectControlSchema extends FormOptionsControl {
    */
   onlyChildren?: boolean;
 
+  /**
+   * 单选时只允许选择叶子节点
+   */
+  onlyLeaf?: boolean;
+
   /**
    * 是否隐藏选择框中已选中节点的祖先节点的文本信息
    */
@@ -91,6 +96,7 @@ export default class NestedSelectControl extends React.Component<
     cascade: false,
     withChildren: false,
     onlyChildren: false,
+    onlyLeaf: false,
     searchPromptText: 'Select.searchPromptText',
     noResultsText: 'noResult',
     checkAll: true,
@@ -241,7 +247,7 @@ export default class NestedSelectControl extends React.Component<
                         );
                       })
                     : label}
-                  {!isEnd && '>'}
+                  {!isEnd && ' > '}
                 </span>
               );
             })
@@ -252,7 +258,7 @@ export default class NestedSelectControl extends React.Component<
 
   @autobind
   async handleOptionClick(option: Option) {
-    const {multiple, onChange, joinValues, extractValue, valueField} =
+    const {multiple, onChange, joinValues, extractValue, valueField, onlyLeaf} =
       this.props;
 
     if (multiple) {
@@ -265,10 +271,21 @@ export default class NestedSelectControl extends React.Component<
       ? option[valueField || 'value']
       : option;
 
+    if (value === undefined) {
+      return;
+    }
+
+    if (onlyLeaf && option.children) {
+      return;
+    }
+
     const isPrevented = await this.dispatchEvent('change', {
       value
     });
     isPrevented || onChange(value);
+
+    isPrevented || this.handleResultClear();
+
     !multiple && this.close();
   }
 
@@ -383,6 +400,8 @@ export default class NestedSelectControl extends React.Component<
       value: newValue
     });
     isPrevented || onChange(newValue);
+
+    isPrevented || this.handleResultClear();
   }
 
   allChecked(options: Options): boolean {
@@ -421,7 +440,7 @@ export default class NestedSelectControl extends React.Component<
       });
 
       const isPrevented = await this.dispatchEvent('focus', e);
-      isPrevented || onFocus && onFocus(e);
+      isPrevented || (onFocus && onFocus(e));
     }
   }
 
@@ -434,7 +453,7 @@ export default class NestedSelectControl extends React.Component<
     });
 
     const isPrevented = await this.dispatchEvent('blur', e);
-    isPrevented || onBlur && onBlur(e);
+    isPrevented || (onBlur && onBlur(e));
   }
 
   @autobind

package/src/renderers/Form/Options.tsx

@@ -454,10 +454,10 @@ export function registerOptionsControl(config: OptionsConfig) {
       this.toDispose = [];
     }
 
-    async dispatchChangeEvent(eventData: any = '') {
+    async dispatchOptionEvent(eventName: string, eventData: any = '') {
       const {dispatchEvent, options, data} = this.props;
       const rendererEvent = await dispatchEvent(
-        'change',
+        eventName,
         createObject(data, {
           value: eventData,
           options,
@@ -599,7 +599,7 @@ export function registerOptionsControl(config: OptionsConfig) {
         value
       );
 
-      const isPrevented = await this.dispatchChangeEvent(newValue);
+      const isPrevented = await this.dispatchOptionEvent('change', newValue);
       isPrevented || (onChange && onChange(newValue, submitOnChange, changeImmediately));
     }
 
@@ -667,7 +667,7 @@ export function registerOptionsControl(config: OptionsConfig) {
           ? []
           : formItem.filteredOptions.concat();
       const newValue = this.formatValueArray(valueArray);
-      const isPrevented = await this.dispatchChangeEvent(newValue);
+      const isPrevented = await this.dispatchOptionEvent('change', newValue);
       isPrevented || (onChange && onChange(newValue));
     }
 
@@ -767,7 +767,7 @@ export function registerOptionsControl(config: OptionsConfig) {
     }
 
     @autobind
-    deferLoad(option: Option) {
+    async deferLoad(option: Option) {
       const {deferApi, source, env, formItem, data} = this.props;
       const api = option.deferApi || deferApi || source;
 
@@ -779,7 +779,9 @@ export function registerOptionsControl(config: OptionsConfig) {
         return;
       }
 
-      formItem?.deferLoadOptions(option, api, createObject(data, option));
+      const json = await formItem?.deferLoadOptions(option, api, createObject(data, option));
+      // 触发事件通知,加载完成
+      this.dispatchOptionEvent('loadFinished',json);
     }
 
     @autobind
@@ -992,10 +994,15 @@ export function registerOptionsControl(config: OptionsConfig) {
           [valueField || 'value']: result[labelField || 'label']
         };
       }
+      // 触发事件通知
+      const isPrevented = await this.dispatchOptionEvent('add', {...result, idx});
+      if (isPrevented) {
+        return;
+      }
 
       // 如果是懒加载的，只懒加载当前节点。
       if (parent?.defer) {
-        this.deferLoad(parent);
+        await this.deferLoad(parent);
       } else if (source && addApi) {
         // 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了
         // 不能不判断 addApi 就刷新，因为有些场景就是临时添加的。
@@ -1095,6 +1102,12 @@ export function registerOptionsControl(config: OptionsConfig) {
         return;
       }
 
+      // 触发事件通知
+      const isPrevented = await this.dispatchOptionEvent('edit', result);
+      if (isPrevented) {
+        return;
+      }
+
       if (source && editApi) {
         this.reload();
       } else {
@@ -1141,6 +1154,12 @@ export function registerOptionsControl(config: OptionsConfig) {
         return;
       }
 
+      // 触发事件通知
+      const isPrevented = await this.dispatchOptionEvent('delete', ctx);
+      if (isPrevented) {
+        return;
+      }
+
       // 通过 deleteApi 删除。
       try {
         if (!deleteApi) {

package/src/renderers/Form/Select.tsx

@@ -228,7 +228,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       'change',
       createObject(data, {
         value: newValue,
-        options,
+        options
       })
     );
     if (rendererEvent?.prevented) {
@@ -409,8 +409,10 @@ export default class SelectControl extends React.Component<SelectProps, any> {
             onBlur={(e: any) => this.dispatchEvent('blur', e)}
             onFocus={(e: any) => this.dispatchEvent('focus', e)}
             onAdd={() => this.dispatchEvent('add')}
-            onEdit={(item: any) => this.dispatchEvent('edit', item)}
-            onDelete={(item: any) => this.dispatchEvent('delete', item)}
+            onEdit={(item: any) => this.dispatchEvent('edit', {value: item})}
+            onDelete={(item: any) =>
+              this.dispatchEvent('delete', {value: item})
+            }
             loading={loading}
             noResultsText={noResultsText}
             renderMenu={menuTpl ? this.renderMenu : undefined}

package/src/renderers/Form/Textarea.tsx

@@ -211,12 +211,14 @@ export default class TextAreaControl extends React.Component<
           `TextareaControl`,
           {
             [`TextareaControl--border${ucFirst(borderMode)}`]: borderMode,
-            'is-focused': this.state.focused
+            'is-focused': this.state.focused,
+            'is-disabled': disabled
           },
           className
         )}
       >
         <Textarea
+          className={cx(`TextareaControl-input`)}
           autoComplete="off"
           ref={this.inputRef}
           name={name}