amis 1.7.0 → 1.8.0-beta.13

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))
             ) {