amis 1.9.1-beta.1 → 1.9.1-beta.3

package/src/renderers/Form/JSONSchemaEditor.tsx

@@ -22,7 +22,7 @@ export interface JSONSchemaEditorControlSchema extends FormBaseControl {
       type:
         | 'string'
         | 'number'
-        | 'interger'
+        | 'integer'
         | 'object'
         | 'array'
         | 'boolean'
@@ -79,39 +79,21 @@ export default class JSONSchemaEditorControl extends React.PureComponent<JSONSch
     enableAdvancedSetting: false
   };
 
-  // todo 完善这块配置
-  settings: any = {
-    common: [
-      {
-        type: 'input-text',
-        name: 'title',
-        label: this.props.translate('JSONSchema.title')
-      },
-
-      {
-        type: 'textarea',
-        name: 'description',
-        label: this.props.translate('JSONSchema.description')
-      }
-    ]
-  };
-
   @autobind
-  renderModalProps({value, onChange}: any) {
+  renderModalProps(value: any, onChange: (value: any) => void) {
     const {render, advancedSettings} = this.props;
+    const fields = advancedSettings?.[value?.type] || [];
     return render(
       `modal`,
       {
         type: 'form',
         wrapWithPanel: false,
-        body: [
-          ...(this.settings[value?.type] || this.settings.common),
-          ...(advancedSettings?.[value?.type] || [])
-        ]
+        body: fields,
+        submitOnChange: true
       },
       {
         data: value,
-        onChange: (value: any) => onChange(value)
+        onSubmit: (value: any) => onChange(value)
       }
     );
   }
@@ -122,9 +104,8 @@ export default class JSONSchemaEditorControl extends React.PureComponent<JSONSch
     return (
       <JSONSchemaEditor
         {...rest}
-        renderModalProps={
-          enableAdvancedSetting ? this.renderModalProps : undefined
-        }
+        enableAdvancedSetting={enableAdvancedSetting}
+        renderModalProps={this.renderModalProps}
       />
     );
   }

package/src/renderers/Form/Textarea.tsx

@@ -86,60 +86,22 @@ export default class TextAreaControl extends React.Component<
     clearable: false
   };
 
-  state = {
-    focused: false
-  };
-
-  input?: HTMLInputElement;
-  inputRef = (ref: any) => (this.input = findDOMNode(ref) as HTMLInputElement);
+  inputRef = React.createRef<any>();
 
   doAction(action: ListenerAction, args: any) {
     const actionType = action?.actionType as string;
+    const onChange = this.props.onChange;
 
     if (!!~['clear', 'reset'].indexOf(actionType)) {
-      this.handleClear();
+      onChange?.(this.props.resetValue);
+      this.focus();
     } else if (actionType === 'focus') {
       this.focus();
     }
   }
 
-  valueToString(value: any) {
-    return typeof value === 'undefined' || value === null
-      ? ''
-      : typeof value === 'string'
-      ? value
-      : JSON.stringify(value);
-  }
-
   focus() {
-    if (!this.input) {
-      return;
-    }
-
-    this.setState(
-      {
-        focused: true
-      },
-      () => {
-        if (!this.input) {
-          return;
-        }
-
-        this.input.focus();
-
-        // 光标放到最后
-        const len = this.input.value.length;
-        len && this.input.setSelectionRange(len, len);
-      }
-    );
-  }
-
-  @autobind
-  handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
-    const {onChange} = this.props;
-    let value = e.currentTarget.value;
-
-    onChange?.(value);
+    this.inputRef.current?.focus();
   }
 
   @autobind
@@ -176,83 +138,11 @@ export default class TextAreaControl extends React.Component<
     );
   }
 
-  @autobind
-  async handleClear() {
-    const {onChange, resetValue} = this.props;
-
-    onChange?.(resetValue);
-    this.focus();
-  }
-
   render() {
-    const {
-      className,
-      classPrefix: ns,
-      value,
-      type,
-      placeholder,
-      disabled,
-      minRows,
-      maxRows,
-      readOnly,
-      name,
-      borderMode,
-      classnames: cx,
-      maxLength,
-      showCounter,
-      clearable
-    } = this.props;
-    const counter = showCounter ? this.valueToString(value).length : 0;
+    const {...rest} = this.props;
 
     return (
-      <div
-        className={cx(
-          `TextareaControl`,
-          {
-            [`TextareaControl--border${ucFirst(borderMode)}`]: borderMode,
-            'is-focused': this.state.focused,
-            'is-disabled': disabled
-          },
-          className
-        )}
-      >
-        <Textarea
-          className={cx(`TextareaControl-input`)}
-          autoComplete="off"
-          ref={this.inputRef}
-          name={name}
-          disabled={disabled}
-          value={this.valueToString(value)}
-          placeholder={placeholder}
-          autoCorrect="off"
-          spellCheck="false"
-          readOnly={readOnly}
-          minRows={minRows || undefined}
-          maxRows={maxRows || undefined}
-          onChange={this.handleChange}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-        />
-
-        {clearable && !disabled && value ? (
-          <a onClick={this.handleClear} className={cx('TextareaControl-clear')}>
-            <Icon icon="input-clear" className="icon" />
-          </a>
-        ) : null}
-
-        {showCounter ? (
-          <span
-            className={cx('TextareaControl-counter', {
-              'is-empty': counter === 0,
-              'is-clearable': clearable && !disabled && value
-            })}
-          >
-            {`${counter}${
-              typeof maxLength === 'number' && maxLength ? `/${maxLength}` : ''
-            }`}
-          </span>
-        ) : null}
-      </div>
+      <Textarea {...rest} onFocus={this.handleFocus} onBlur={this.handleBlur} />
     );
   }
 }

package/src/renderers/Form/UserSelect.tsx

@@ -0,0 +1,263 @@
+import React from 'react';
+import cx from 'classnames';
+import {
+  OptionsControl,
+  OptionsControlProps,
+  Option,
+  FormOptionsControl
+} from './Options';
+import UserSelect from '../../components/UserSelect';
+import UserTabSelect from '../../components/UserTabSelect';
+import {isEffectiveApi} from '../../utils/api';
+import find from 'lodash/find';
+import {createObject, autobind} from '../../utils/helper';
+import {PlainObject} from '../../types';
+
+/**
+ * UserSelect 移动端人员选择。
+ */
+export interface UserSelectControlSchema extends FormOptionsControl {
+  type: 'users-select';
+}
+
+export interface UserSelectProps extends OptionsControlProps {
+  /**
+   * 部门可选
+   */
+  isDep?: boolean;
+  /**
+   * 人员可选
+   */
+  isRef?: boolean;
+  /**
+   *
+   */
+  showNav?: boolean;
+  /**
+   * 导航头标题
+   */
+  navTitle?: string;
+  /**
+   * 选项卡模式
+   */
+  tabMode?: boolean;
+  tabOptions?: Array<any>;
+  /**
+   * 搜索字段
+   */
+  searchTerm?: string;
+  /**
+   * 搜索携带的额外参数
+   */
+  searchParam?: PlainObject;
+}
+
+export default class UserSelectControl extends React.Component<
+  UserSelectProps,
+  any
+> {
+  static defaultProps: Partial<UserSelectProps> = {
+    showNav: true
+  };
+  input?: HTMLInputElement;
+  unHook: Function;
+  lazyloadRemote: Function;
+
+  constructor(props: UserSelectProps) {
+    super(props);
+  }
+
+  componentWillUnmount() {
+    this.unHook && this.unHook();
+  }
+
+  @autobind
+  async onSearch(input: string, cancelExecutor: Function, param?: PlainObject) {
+    let {searchApi, setLoading, env} = this.props;
+    searchApi = param?.searchApi || searchApi;
+    let searchTerm = param?.searchTerm || this.props.searchTerm || 'term';
+    let searchObj = param?.searchParam || this.props.searchParam || {};
+
+    const ctx = {
+      [searchTerm]: input,
+      ...searchObj
+    };
+
+    if (!isEffectiveApi(searchApi, ctx)) {
+      return Promise.resolve([]);
+    }
+
+    setLoading(true);
+    try {
+      const ret = await env.fetcher(searchApi, ctx, {
+        cancelExecutor,
+        autoAppend: true
+      });
+      let options = (ret.data && (ret.data as any).options) || ret.data || [];
+
+      return options;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  @autobind
+  async deferLoad(data?: Object, isRef?: boolean, param?: PlainObject) {
+    let {env, deferApi, setLoading, formInited, addHook} = this.props;
+
+    deferApi = param?.deferApi || deferApi;
+
+    if (!env || !env.fetcher) {
+      throw new Error('fetcher is required');
+    }
+
+    const ctx = createObject(data, {});
+
+    if (!isEffectiveApi(deferApi, ctx)) {
+      return Promise.resolve([]);
+    }
+
+    try {
+      const ret = await env.fetcher(deferApi, ctx);
+
+      let options = (ret.data && (ret.data as any).options) || ret.data || [];
+
+      if (isRef) {
+        options.forEach((option: Option) => {
+          option.isRef = true;
+        });
+      }
+      return options;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  @autobind
+  async changeValue(value: Option | Array<Option> | string | void) {
+    const {
+      joinValues,
+      extractValue,
+      delimiter,
+      multiple,
+      valueField,
+      onChange,
+      options,
+      setOptions,
+      data,
+      dispatchEvent
+    } = this.props;
+    let newValue: string | Option | Array<Option> | void = value;
+    let additonalOptions: Array<any> = [];
+    (Array.isArray(value) ? value : value ? [value] : []).forEach(
+      (option: any) => {
+        let resolved = find(
+          options,
+          (item: any) =>
+            item[valueField || 'value'] == option[valueField || 'value']
+        );
+        resolved || additonalOptions.push(option);
+      }
+    );
+
+    if (joinValues) {
+      if (multiple) {
+        newValue = Array.isArray(value)
+          ? (value
+              .map(item => item[valueField || 'value'])
+              .join(delimiter) as string)
+          : value
+          ? (value as Option)[valueField || 'value']
+          : '';
+      } else {
+        newValue = newValue ? (newValue as Option)[valueField || 'value'] : '';
+      }
+    } else if (extractValue) {
+      if (multiple) {
+        newValue = Array.isArray(value)
+          ? value.map(item => item[valueField || 'value'])
+          : value
+          ? [(value as Option)[valueField || 'value']]
+          : [];
+      } else {
+        newValue = newValue ? (newValue as Option)[valueField || 'value'] : '';
+      }
+    }
+
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value: newValue,
+        options
+      })
+    );
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange(newValue);
+  }
+
+  render() {
+    let {
+      showNav,
+      navTitle,
+      searchable,
+      options,
+      className,
+      selectedOptions,
+      tabOptions,
+      multi,
+      multiple,
+      isDep,
+      isRef,
+      placeholder,
+      searchPlaceholder,
+      tabMode,
+      data
+    } = this.props;
+    tabOptions?.forEach((item: any) => {
+      item.deferLoad = this.deferLoad;
+      item.onChange = this.changeValue;
+      item.onSearch = this.onSearch;
+    });
+
+    return (
+      <div className={cx(`UserSelectControl`, className)}>
+        {tabMode ? (
+          <UserTabSelect
+            selection={selectedOptions}
+            tabOptions={tabOptions}
+            multiple={multiple}
+            onChange={this.changeValue}
+            onSearch={this.onSearch}
+            deferLoad={this.deferLoad}
+            data={data}
+          />
+        ) : (
+          <UserSelect
+            showNav={showNav}
+            navTitle={navTitle}
+            selection={selectedOptions}
+            options={options}
+            multi={multi}
+            multiple={multiple}
+            searchable={searchable}
+            placeholder={placeholder}
+            searchPlaceholder={searchPlaceholder}
+            deferLoad={this.deferLoad}
+            onChange={this.changeValue}
+            onSearch={this.onSearch}
+            isDep={isDep}
+            isRef={isRef}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+@OptionsControl({
+  type: 'users-select'
+})
+export class UserSelectControlRenderer extends UserSelectControl {}

package/src/renderers/Form/index.tsx

@@ -663,7 +663,7 @@ export default class Form extends React.Component<FormProps, object> {
     }
 
     // 派发init事件，参数为初始化数据
-    const dispatcher = dispatchEvent(
+    const dispatcher = await dispatchEvent(
       'inited',
       createObject(this.props.data, data)
     );
@@ -767,7 +767,7 @@ export default class Form extends React.Component<FormProps, object> {
         if (result) {
           dispatchEvent('validateSucc', data);
         } else {
-          dispatchEvent('validateFail', data);
+          dispatchEvent('validateError', data);
         }
         return result;
       });
@@ -794,9 +794,7 @@ export default class Form extends React.Component<FormProps, object> {
   submit(fn?: (values: object) => Promise<any>): Promise<any> {
     const {store, messages, translate: __, dispatchEvent, data} = this.props;
     this.flush();
-    const validateErrCb = () => {
-      dispatchEvent('validateFail', data);
-    };
+    const validateErrCb = () => dispatchEvent('validateError', data);
     return store.submit(
       fn,
       this.hooks['validate'] || [],
@@ -871,13 +869,13 @@ export default class Form extends React.Component<FormProps, object> {
     };
   }
 
-  emitChange(submit: boolean) {
+  async emitChange(submit: boolean) {
     const {onChange, store, submitOnChange, dispatchEvent, data} = this.props;
 
     if (!isAlive(store)) {
       return;
     }
-    const dispatcher = dispatchEvent('change', createObject(data, store.data));
+    const dispatcher = await dispatchEvent('change', createObject(data, store.data));
     if (!dispatcher?.prevented) {
       onChange &&
         onChange(
@@ -980,10 +978,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(result => {
+      return store.validateFields(action.required).then(async result => {
         if (!result) {
-          dispatchEvent('validateError', this.props.data);
-          env.notify('error', __('Form.validateFailed'));
+          const dispatcher = await dispatchEvent('validateError', this.props.data);
+          if (!dispatcher?.prevented) {
+            env.notify('error', __('Form.validateFailed'));
+          }
         } else {
           dispatchEvent('validateSucc', this.props.data);
           this.handleAction(
@@ -1039,9 +1039,9 @@ export default class Form extends React.Component<FormProps, object> {
             .saveRemote(action.api || (api as Api), values, {
               successMessage: saveSuccess,
               errorMessage: saveFailed,
-              onSuccess: (result: Payload) => {
+              onSuccess: async (result: Payload) => {
                 // result为提交接口返回的内容
-                dispatchEvent(
+                const dispatcher = await dispatchEvent(
                   'submitSucc',
                   createObject(this.props.data, {result})
                 );
@@ -1049,20 +1049,30 @@ export default class Form extends React.Component<FormProps, object> {
                   !isEffectiveApi(finnalAsyncApi, store.data) ||
                   store.data[finishedField || 'finished']
                 ) {
-                  return;
+                  return {
+                    cbResult: null,
+                    dispatcher
+                  };
                 }
-                return until(
+                const cbResult = until(
                   () => store.checkRemote(finnalAsyncApi as Api, store.data),
                   (ret: any) => ret && ret[finishedField || 'finished'],
                   cancel => (this.asyncCancel = cancel),
                   checkInterval
-                );
+                )
+                return {
+                  cbResult,
+                  dispatcher
+                };
               },
-              onFailed: (result: Payload) => {
-                dispatchEvent(
+              onFailed: async (result: Payload) => {
+                const dispatcher = await dispatchEvent(
                   'submitFail',
                   createObject(this.props.data, {error: result})
                 );
+                return {
+                  dispatcher
+                };
               }
             })
             .then(async response => {
@@ -1183,7 +1193,7 @@ export default class Form extends React.Component<FormProps, object> {
         })
         .catch(e => {
           onFailed && onFailed(e, store.errors);
-          if (throwErrors) {
+          if (throwErrors || action.countDown) {
             throw e;
           }
         });