amis 1.9.1-beta.0 → 1.9.1-beta.4

package/src/renderers/Form/InputDate.tsx

@@ -8,7 +8,9 @@ import {
 } from '../../utils/tpl-builtin';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
-import DatePicker, {DatePicker as BaseDatePicker} from '../../components/DatePicker';
+import DatePicker, {
+  DatePicker as BaseDatePicker
+} from '../../components/DatePicker';
 import {SchemaObject} from '../../Schema';
 import {createObject, anyChanged, isMobile, autobind} from '../../utils/helper';
 import {Action} from '../../types';
@@ -134,7 +136,7 @@ export interface DateTimeControlSchema extends InputDateBaseControlSchema {
   maxDate?: string;
 
   /**
-   * 不记得了
+   * 时间输入范围限制
    */
   timeConstraints?: any;
 }
@@ -169,7 +171,7 @@ export interface TimeControlSchema extends InputDateBaseControlSchema {
   timeFormat?: string;
 
   /**
-   * 不记得了
+   * 时间输入范围限制
    */
   timeConstraints?: any;
 }
@@ -445,7 +447,10 @@ export default class DateControl extends React.PureComponent<
   @autobind
   async handleChange(nextValue: any) {
     const {dispatchEvent, data} = this.props;
-    const dispatcher = dispatchEvent('change', createObject(data, {value: nextValue}));
+    const dispatcher = dispatchEvent(
+      'change',
+      createObject(data, {value: nextValue})
+    );
     if (dispatcher?.prevented) {
       return;
     }

package/src/renderers/Form/JSONSchema.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {FormItem, FormControlProps, FormBaseControl} from './Item';
+import {autobind, isObjectShallowModified} from '../../utils/helper';
+import InputJSONSchema from '../../components/json-schema/index';
+import {
+  isPureVariable,
+  resolveVariableAndFilter
+} from '../../utils/tpl-builtin';
+import {isApiOutdated, isEffectiveApi} from '../../utils/api';
+import {withRemoteConfig} from '../../components/WithRemoteConfig';
+
+/**
+ * JSON Schema
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/json-schema
+ */
+export interface JSONSchemaControlSchema extends FormBaseControl {
+  /**
+   * 指定为 JSON Schema
+   */
+  type: 'json-schema';
+
+  /**
+   * json-schema 详情，支持关联上下文数据
+   */
+  schema?: any;
+}
+
+export interface JSONSchemaProps
+  extends FormControlProps,
+    Omit<
+      JSONSchemaControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {}
+
+const EnhancedInputJSONSchema = withRemoteConfig({
+  sourceField: 'schema',
+  injectedPropsFilter: (injectedProps, props) => {
+    return {
+      schema: injectedProps.config,
+      loading: injectedProps.loading
+    };
+  }
+})(InputJSONSchema as any);
+export default class JSONSchemaControl extends React.PureComponent<JSONSchemaProps> {
+  render() {
+    const {...rest} = this.props;
+
+    return <EnhancedInputJSONSchema {...rest} />;
+  }
+}
+
+@FormItem({
+  type: 'json-schema',
+  strictMode: false
+})
+export class JSONSchemaRenderer extends JSONSchemaControl {}

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

@@ -15,7 +15,10 @@ import {
   getTree,
   isEmpty,
   getTreeAncestors,
-  normalizeNodePath
+  normalizeNodePath,
+  mapTree,
+  getTreeDepth,
+  flattenTree
 } from '../../utils/helper';
 import {reaction} from 'mobx';
 import {
@@ -637,16 +640,19 @@ export function registerOptionsControl(config: OptionsConfig) {
       } = this.props;
       let newValue: string | Array<Option> | Option = '';
       if (multiple) {
-        newValue = valueArray;
+        /** 兼容tree数据结构 */
+        newValue =
+          getTreeDepth(valueArray) > 1 ? flattenTree(valueArray) : valueArray;
 
         if (joinValues) {
           newValue = (newValue as Array<any>)
             .map(item => item[valueField || 'value'])
+            .filter(item => item != null) /** tree的父节点可能没有value值 */
             .join(delimiter);
         } else if (extractValue) {
-          newValue = (newValue as Array<any>).map(
-            item => item[valueField || 'value']
-          );
+          newValue = (newValue as Array<any>)
+            .map(item => item[valueField || 'value'])
+            .filter(item => item != null);
         }
       } else {
         newValue = valueArray[0] || resetValue;
@@ -660,14 +666,18 @@ export function registerOptionsControl(config: OptionsConfig) {
 
     @autobind
     async handleToggleAll() {
-      const {value, onChange, formItem} = this.props;
+      const {value, onChange, formItem, valueField} = this.props;
 
       if (!formItem) {
         return;
       }
       const selectedOptions = formItem.getSelectedOptions(value);
+      /** 打平并过滤掉valueField不存在的case，保证全选时对比length一致 */
+      const filteredOptions = flattenTree(
+        formItem.filteredOptions.concat()
+      ).filter(item => item != null && item[valueField || 'value'] != null);
       let valueArray =
-        selectedOptions.length === formItem.filteredOptions.length
+        selectedOptions.length === filteredOptions.length
           ? []
           : formItem.filteredOptions.concat();
       const newValue = this.formatValueArray(valueArray);

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