amis 1.8.0-beta.5 → 1.8.0-beta.9

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;
+
   /**
    * 不设置时，当表单提交过后表单项每次修改都会触发重新验证，
    * 如果设置了，则由此配置项来决定要不要每次修改都触发验证。

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/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/wrapControl.tsx

@@ -539,8 +539,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))
             ) {