amis 1.8.0-beta.1 → 1.8.0-beta.13

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}

package/src/renderers/Form/TreeSelect.tsx

@@ -18,9 +18,10 @@ import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
 import Spinner from '../../components/Spinner';
 import ResultBox from '../../components/ResultBox';
-import {autobind, getTreeAncestors, isMobile} from '../../utils/helper';
+import {autobind, getTreeAncestors, isMobile, createObject} from '../../utils/helper';
 import {findDOMNode} from 'react-dom';
 import {normalizeOptions} from '../../components/Select';
+import {Action} from '../../types';
 
 /**
  * Tree 下拉选择框。
@@ -64,6 +65,11 @@ export interface TreeSelectControlSchema extends FormOptionsControl {
    */
   onlyChildren?: boolean;
 
+  /**
+   * 单选时，只运行选择叶子节点
+   */
+  onlyLeaf?: boolean;
+
   /**
    * 顶级节点是否可以创建子节点
    */
@@ -121,6 +127,8 @@ export default class TreeSelectControl extends React.Component<
     pathSeparator: '/'
   };
 
+  treeRef: any
+
   container: React.RefObject<HTMLDivElement> = React.createRef();
 
   input: React.RefObject<any> = React.createRef();
@@ -185,16 +193,20 @@ export default class TreeSelectControl extends React.Component<
     );
   }
 
-  handleFocus() {
+  handleFocus(e: any) {
+    const {dispatchEvent} = this.props;
     this.setState({
       isFocused: true
     });
+    dispatchEvent('focus', e);
   }
 
-  handleBlur() {
+  handleBlur(e: any) {
+    const {dispatchEvent} = this.props;
     this.setState({
       isFocused: false
     });
+    dispatchEvent('blur', e);
   }
 
   handleKeyPress(e: React.KeyboardEvent) {
@@ -257,19 +269,19 @@ export default class TreeSelectControl extends React.Component<
   }
 
   handleChange(value: any) {
-    const {onChange, multiple} = this.props;
+    const {multiple} = this.props;
 
     if (!multiple) {
       this.close();
     }
 
     multiple || !this.state.inputValue
-      ? onChange(value)
+      ? this.resultChangeEvent(value)
       : this.setState(
           {
             inputValue: ''
           },
-          () => onChange(value)
+          () => this.resultChangeEvent(value)
         );
   }
 
@@ -410,14 +422,13 @@ export default class TreeSelectControl extends React.Component<
       extractValue,
       delimiter,
       valueField,
-      onChange,
       multiple
     } = this.props;
 
     let newValue: any = Array.isArray(value) ? value.concat() : [];
 
     if (!multiple && !newValue.length) {
-      onChange('');
+      this.resultChangeEvent('');
       return;
     }
 
@@ -428,8 +439,27 @@ export default class TreeSelectControl extends React.Component<
     if (joinValues) {
       newValue = newValue.join(delimiter || ',');
     }
+    this.resultChangeEvent(newValue);
+  }
 
-    onChange(newValue);
+  doAction(action: Action, data: any, throwErrors: boolean) {
+    if (action.actionType && ['clear', 'reset'].includes(action.actionType)) {
+      this.clearValue();
+    }
+  }
+
+  @autobind
+  async resultChangeEvent(value: any) {
+    const {onChange, dispatchEvent, data} = this.props;
+
+    const rendererEvent = await dispatchEvent('change', createObject(data, {
+      value
+    }));
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+    onChange && onChange(value);
   }
 
   @autobind
@@ -449,6 +479,11 @@ export default class TreeSelectControl extends React.Component<
     }`;
   }
 
+  @autobind
+  domRef(ref: any) {
+    this.treeRef = ref;
+  }
+
   renderOuter() {
     const {
       value,
@@ -472,6 +507,7 @@ export default class TreeSelectControl extends React.Component<
       showRadio,
       popOverContainer,
       onlyChildren,
+      onlyLeaf,
       classPrefix: ns,
       optionsPlaceholder,
       searchable,
@@ -506,7 +542,9 @@ export default class TreeSelectControl extends React.Component<
     return (
       <TreeSelector
         classPrefix={ns}
+        onRef={this.domRef}
         onlyChildren={onlyChildren}
+        onlyLeaf={onlyLeaf}
         labelField={labelField}
         valueField={valueField}
         disabled={disabled}

package/src/renderers/Form/index.tsx

@@ -20,7 +20,8 @@ import {
   getVariable,
   isObjectShallowModified,
   qsparse,
-  repeatCount
+  repeatCount,
+  createObject
 } from '../../utils/helper';
 import debouce from 'lodash/debounce';
 import flatten from 'lodash/flatten';
@@ -61,6 +62,7 @@ export interface FormSchemaHorizontal {
   left?: number;
   right?: number;
   leftFixed?: boolean | number | 'xs' | 'sm' | 'md' | 'lg';
+  justify?: boolean; // 两端对齐
 }
 
 /**
@@ -624,7 +626,7 @@ export default class Form extends React.Component<FormProps, object> {
   }
 
   async onInit() {
-    const {onInit, store, persistData, submitOnInit} = this.props;
+    const {onInit, store, persistData, submitOnInit, dispatchEvent} = this.props;
     if (!isAlive(store)) {
       return;
     }
@@ -656,8 +658,11 @@ export default class Form extends React.Component<FormProps, object> {
 
     persistData && store.getLocalPersistData();
 
-    onInit && onInit(data, this.props);
-
+    // 派发init事件，参数为初始化数据
+    const dispatcher = dispatchEvent('inited', createObject(this.props.data, {formData: data}));
+    if (!dispatcher?.prevented) {
+      onInit && onInit(data, this.props);
+    }
     submitOnInit &&
       this.handleAction(
         undefined,
@@ -746,10 +751,17 @@ export default class Form extends React.Component<FormProps, object> {
   }
 
   validate(forceValidate?: boolean): Promise<boolean> {
-    const {store} = this.props;
+    const {store, dispatchEvent, data} = this.props;
 
     this.flush();
-    return store.validate(this.hooks['validate'] || [], forceValidate);
+    return store.validate(this.hooks['validate'] || [], forceValidate).then((result: boolean) => {
+      if (result) {
+        dispatchEvent('validateSucc', data);
+      } else {
+        dispatchEvent('validateFail', data);
+      }
+      return result;
+    });
   }
 
   clearErrors() {
@@ -771,13 +783,16 @@ export default class Form extends React.Component<FormProps, object> {
   }
 
   submit(fn?: (values: object) => Promise<any>): Promise<any> {
-    const {store, messages, translate: __} = this.props;
+    const {store, messages, translate: __, dispatchEvent, data} = this.props;
     this.flush();
-
+    const validateErrCb = () => {
+      dispatchEvent('validateFail', data);
+    };
     return store.submit(
       fn,
       this.hooks['validate'] || [],
-      __(messages && messages.validateFailed)
+      __(messages && messages.validateFailed),
+      validateErrCb,
     );
   }
 
@@ -827,13 +842,10 @@ export default class Form extends React.Component<FormProps, object> {
     changePristine = false
   ) {
     const {store, formLazyChange} = this.props;
-
     if (typeof name !== 'string') {
       return;
     }
-
     store.changeValue(name, value, changePristine);
-
     if (!changePristine) {
       (formLazyChange === false ? this.emitChange : this.lazyEmitChange)(
         submit
@@ -844,19 +856,24 @@ export default class Form extends React.Component<FormProps, object> {
       store.setLocalPersistData();
     }
   }
+  formItemDispatchEvent(dispatchEvent: any) {
+    return (type: string, data: any) => {
+      dispatchEvent(type, data);
+    }
+  }
 
   emitChange(submit: boolean) {
-    const {onChange, store, submitOnChange} = this.props;
+    const {onChange, store, submitOnChange, dispatchEvent, data} = this.props;
 
     if (!isAlive(store)) {
       return;
     }
-
-    onChange &&
-      onChange(store.data, difference(store.data, store.pristine), this.props);
+    const dispatcher = dispatchEvent('change', createObject(data, {formData: store.data}));
+    if (!dispatcher?.prevented) {
+      onChange && onChange(store.data, difference(store.data, store.pristine), this.props);
+    }
 
     store.clearRestError();
-
     (submit || (submitOnChange && store.inited)) &&
       this.handleAction(
         undefined,
@@ -933,6 +950,7 @@ export default class Form extends React.Component<FormProps, object> {
       onChange,
       clearPersistDataAfterSubmit,
       trimValues,
+      dispatchEvent,
       translate: __
     } = this.props;
 
@@ -947,12 +965,13 @@ export default class Form extends React.Component<FormProps, object> {
     if (data === this.props.data) {
       data = store.data;
     }
-
     if (Array.isArray(action.required) && action.required.length) {
       return store.validateFields(action.required).then(result => {
         if (!result) {
+          dispatchEvent('validateError', this.props.data);
           env.notify('error', __('Form.validateFailed'));
         } else {
+          dispatchEvent('validateSucc', this.props.data);
           this.handleAction(
             e,
             {...action, required: undefined},
@@ -963,7 +982,6 @@ export default class Form extends React.Component<FormProps, object> {
         }
       });
     }
-
     if (
       action.type === 'submit' ||
       action.actionType === 'submit' ||
@@ -983,6 +1001,8 @@ export default class Form extends React.Component<FormProps, object> {
         if (onSubmit && onSubmit(values, action) === false) {
           return Promise.resolve(false);
         }
+        // 走到这里代表校验成功了
+        dispatchEvent('validateSucc', this.props.data);
 
         if (target) {
           this.submitToTarget(target, values);
@@ -1004,20 +1024,24 @@ export default class Form extends React.Component<FormProps, object> {
             .saveRemote(action.api || (api as Api), values, {
               successMessage: saveSuccess,
               errorMessage: saveFailed,
-              onSuccess: () => {
+              onSuccess: (result: Payload) => {
+                // result为提交接口返回的内容
+                dispatchEvent('submitSucc', createObject(this.props.data, {result}));
                 if (
                   !isEffectiveApi(finnalAsyncApi, store.data) ||
                   store.data[finishedField || 'finished']
                 ) {
                   return;
                 }
-
                 return until(
                   () => store.checkRemote(finnalAsyncApi as Api, store.data),
                   (ret: any) => ret && ret[finishedField || 'finished'],
                   cancel => (this.asyncCancel = cancel),
                   checkInterval
                 );
+              },
+              onFailed: (result: Payload) => {
+                dispatchEvent('submitFail', createObject(this.props.data, {error: result}));
               }
             })
             .then(async response => {
@@ -1086,6 +1110,9 @@ export default class Form extends React.Component<FormProps, object> {
     } else if (action.actionType === 'clear') {
       store.setCurrentAction(action);
       store.clear(onReset);
+    } else if (action.actionType === 'validate') {
+      store.setCurrentAction(action);
+      this.validate(true);
     } else if (action.actionType === 'dialog') {
       store.setCurrentAction(action);
       store.openDialog(data);
@@ -1141,7 +1168,6 @@ export default class Form extends React.Component<FormProps, object> {
       if (action.target) {
         this.reloadTarget(action.target, data);
       } else {
-        // 刷自己
         this.receive(data);
       }
       // action.target && this.reloadTarget(action.target, data);
@@ -1395,7 +1421,8 @@ export default class Form extends React.Component<FormProps, object> {
       controlWidth,
       resolveDefinitions,
       lazyChange,
-      formLazyChange
+      formLazyChange,
+      dispatchEvent
     } = props;
 
     const subProps = {
@@ -1410,7 +1437,7 @@ export default class Form extends React.Component<FormProps, object> {
       formHorizontal: horizontal,
       controlWidth,
       disabled: disabled || (control as Schema).disabled || form.loading,
-      btnDisabled: form.loading || form.validating,
+      btnDisabled: disabled || form.loading || form.validating,
       onAction: this.handleAction,
       onQuery: this.handleQuery,
       onChange: this.handleChange,
@@ -1418,6 +1445,7 @@ export default class Form extends React.Component<FormProps, object> {
       addHook: this.addHook,
       removeHook: this.removeHook,
       renderFormItems: this.renderFormItems,
+      formItemDispatchEvent: this.formItemDispatchEvent(dispatchEvent),
       formPristine: form.pristine
       // value: (control as any)?.name
       //   ? getVariable(form.data, (control as any)?.name, canAccessSuperData)
@@ -1674,7 +1702,6 @@ export class FormRenderer extends Form {
     // if (this.props.disabled) {
     //   return;
     // }
-
     if (action.target && action.actionType !== 'reload') {
       const scoped = this.context as IScopedContext;
 
@@ -1792,4 +1819,8 @@ export class FormRenderer extends Form {
 
     return super.receive(values);
   }
+
+  setData(values: object) {
+    return super.setValues(values);
+  }
 }

package/src/renderers/Form/wrapControl.tsx

@@ -11,7 +11,8 @@ import {
   guid,
   isEmpty,
   autobind,
-  getVariable
+  getVariable,
+  createObject
 } from '../../utils/helper';
 import {IIRendererStore, IRendererStore} from '../../store';
 import {ScopedContext, IScopedContext} from '../../Scoped';
@@ -63,6 +64,7 @@ export interface ControlOutterProps extends RendererProps {
     submit?: boolean,
     changePristine?: boolean
   ) => void;
+  formItemDispatchEvent: (type: string, data: any) => void;
 }
 
 export interface ControlProps {
@@ -353,7 +355,7 @@ export function wrapControl<
               this.model.clearValueOnHidden &&
                 this.model.form?.deleteValueByName(this.model.name);
 
-              rootStore.removeStore(this.model);
+              isAlive(rootStore) && rootStore.removeStore(this.model);
             }
             delete this.model;
           }
@@ -410,9 +412,9 @@ export function wrapControl<
             }
           }
 
-          validate() {
-            const {formStore: form, data} = this.props;
-
+          async validate() {
+            const {formStore: form, data, formItemDispatchEvent} = this.props;
+            let result;
             if (this.model) {
               if (
                 this.model.unique &&
@@ -423,12 +425,21 @@ export function wrapControl<
                 const group = combo.uniques.get(
                   this.model.name
                 ) as IUniqueGroup;
-                group.items.forEach(item => item.validate(data));
+                const validPromises = group.items.map(item => item.validate(data));
+                result = await Promise.all(validPromises);
+              } else {
+                const validPromises = form?.getItemsByName(this.model.name)
+                  .map(item => item.validate(data));
+                if (validPromises && validPromises.length) {
+                  result = await Promise.all(validPromises);
+                }
+              }
+            }
+            if (result && result.length){
+              if (result.indexOf(false) > -1) {
+                formItemDispatchEvent('formItemValidateError', data);
               } else {
-                this.model.validate(data, this.hook);
-                form
-                  ?.getItemsByName(this.model.name)
-                  .forEach(item => item !== this.model && item.validate(data));
+                formItemDispatchEvent('formItemValidateSucc', data);
               }
             }
           }
@@ -539,8 +550,8 @@ export function wrapControl<
 
             if (
               // 如果配置了 minLength 或者 maxLength 就切成及时验证
-              this.model.rules.minLength ||
-              this.model.rules.maxLength ||
+              // this.model.rules.minLength ||
+              // this.model.rules.maxLength ||
               validateOnChange === true ||
               (validateOnChange !== false && (formSubmited || validated))
             ) {