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

package/src/renderers/Form/InputCity.tsx

@@ -4,7 +4,8 @@ import {ClassNamesFn, themeable, ThemeProps} from '../../theme';
 import Spinner from '../../components/Spinner';
 import Select from '../../components/Select';
 import CityArea from '../../components/CityArea';
-import {autobind, isMobile} from '../../utils/helper';
+import {autobind, isMobile, createObject} from '../../utils/helper';
+import {Action} from '../../types';
 import {Option} from './Options';
 import {localeable, LocaleProps} from '../../locale';
 
@@ -432,10 +433,38 @@ export interface LocationControlProps extends FormControlProps {
   allowStreet?: boolean;
 }
 export class LocationControl extends React.Component<LocationControlProps> {
+
+  @autobind
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    const actionType = action?.actionType as string;
+
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
+      onChange(resetValue ?? '');
+    }
+  }
+
+  @autobind
+  async handleChange(value: number | string) {
+    const {dispatchEvent, data, onChange} = this.props;
+
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+    
+    onChange(value);
+  }
+
   render() {
     const {
       value,
-      onChange,
       allowCity,
       allowDistrict,
       extractValue,
@@ -453,7 +482,7 @@ export class LocationControl extends React.Component<LocationControlProps> {
         popOverContainer={
           env && env.getModalContainer ? env.getModalContainer : undefined
         }
-        onChange={onChange}
+        onChange={this.handleChange}
         allowCity={allowCity}
         allowDistrict={allowDistrict}
         extractValue={extractValue}
@@ -466,7 +495,7 @@ export class LocationControl extends React.Component<LocationControlProps> {
       <ThemedCity
         searchable={searchable}
         value={value}
-        onChange={onChange}
+        onChange={this.handleChange}
         allowCity={allowCity}
         allowDistrict={allowDistrict}
         extractValue={extractValue}

package/src/renderers/Form/InputDate.tsx

@@ -423,8 +423,14 @@ export default class DateControl extends React.PureComponent<
   // 动作
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
+
     if (action.actionType === 'clear') {
-      onChange(resetValue ?? '');
+      onChange('');
+      return;
+    }
+
+    if (action.actionType === 'reset' && resetValue) {
+      onChange(resetValue);
     }
   }
 
@@ -457,15 +463,23 @@ export default class DateControl extends React.PureComponent<
       useMobileUI,
       ...rest
     } = this.props;
+    const mobileUI = useMobileUI && isMobile();
 
     if (type === 'time' && timeFormat) {
       format = timeFormat;
     }
 
-    const mobileUI = useMobileUI && isMobile();
-
     return (
-      <div className={cx(`DateControl`, className)}>
+      <div
+        className={cx(
+          `DateControl`,
+          {
+            'is-date': /date$/.test(type),
+            'is-datetime': /datetime$/.test(type)
+          },
+          className
+        )}
+      >
         <DatePicker
           {...rest}
           useMobileUI={useMobileUI}

package/src/renderers/Form/InputDateRange.tsx

@@ -7,9 +7,11 @@ import includes from 'lodash/includes';
 import DateRangePicker, {
   DateRangePicker as BaseDateRangePicker
 } from '../../components/DateRangePicker';
-import { isMobile, createObject, autobind } from '../../utils/helper';
+import {isMobile, createObject, autobind} from '../../utils/helper';
 import {Action} from '../../types';
 
+import type {ShortCuts} from '../../components/DatePicker';
+
 /**
  * DateRange 日期范围控件
  * 文档：https://baidu.gitee.io/amis/docs/components/form/date-range
@@ -75,6 +77,11 @@ export interface DateRangeControlSchema extends FormBaseControl {
    * 开启后变成非弹出模式，即内联模式。
    */
   embed?: boolean;
+
+  /**
+   * 日期范围快捷键
+   */
+  ranges?: string | Array<ShortCuts>;
 }
 
 export interface DateRangeProps
@@ -173,8 +180,14 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
   // 动作
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
+
     if (action.actionType === 'clear') {
-      onChange(resetValue ?? '');
+      onChange('');
+      return;
+    }
+
+    if (action.actionType === 'reset' && resetValue) {
+      onChange(resetValue);
     }
   }
 
@@ -206,8 +219,19 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
       ...rest
     } = this.props;
     const mobileUI = useMobileUI && isMobile();
+    const comptType = this.props?.type;
+
     return (
-      <div className={cx(`${ns}DateRangeControl`, className)}>
+      <div
+        className={cx(
+          `${ns}DateRangeControl`,
+          {
+            'is-date': /date-/.test(comptType),
+            'is-datetime': /datetime-/.test(comptType)
+          },
+          className
+        )}
+      >
         <DateRangePicker
           {...rest}
           useMobileUI={useMobileUI}

package/src/renderers/Form/InputFile.tsx

@@ -28,6 +28,7 @@ import {
   SchemaUrlPath
 } from '../../Schema';
 import merge from 'lodash/merge';
+import omit from 'lodash/omit';
 
 /**
  * File 文件上传控件
@@ -817,7 +818,11 @@ export default class FileControl extends React.Component<FileProps, FileState> {
         let value =
           (ret.data as any).value || (ret.data as any).url || ret.data;
 
-        const dispatcher = await this.dispatchEvent('success', file);
+        const dispatcher = await this.dispatchEvent('success', {
+          ...file,
+          value,
+          state: 'uploaded'
+        });
         if (dispatcher?.prevented) {
           return;
         }
@@ -913,13 +918,16 @@ export default class FileControl extends React.Component<FileProps, FileState> {
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange, data} = this.props;
-    if (!isEmpty(autoFill) && onBulkChange) {
+    const {autoFill, multiple, onBulkChange, data, name} = this.props;
+    // 排除自身的字段，否则会无限更新state
+    const excludeSelfAutoFill = omit(autoFill, name || '');
+
+    if (!isEmpty(excludeSelfAutoFill) && onBulkChange) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
       const toSync = dataMapping(
-        autoFill,
+        excludeSelfAutoFill,
         multiple
           ? {
               items: files
@@ -1216,11 +1224,19 @@ export default class FileControl extends React.Component<FileProps, FileState> {
 
   async dispatchEvent(e: string, data?: Record<string, any>) {
     const {dispatchEvent} = this.props;
-    data = data || this.state.files;
+    const getEventData = (item: Record<string, any>) => ({
+      name: item.path || item.name,
+      value: item.value,
+      state: item.state,
+      error: item.error
+    });
+    const value = data
+      ? getEventData(data)
+      : this.state.files.map(item => getEventData(item));
     return dispatchEvent(
       e,
       createObject(this.props.data, {
-        file: data
+        file: value
       })
     );
   }
@@ -1312,7 +1328,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
             >
               <input disabled={disabled} {...getInputProps()} />
 
-              {drag ? (
+              {drag || isDragActive ? (
                 <div
                   className={cx('FileControl-acceptTip')}
                   onClick={this.handleSelect}

package/src/renderers/Form/InputImage.tsx

@@ -31,6 +31,7 @@ import {
 import {filter} from '../../utils/tpl';
 import isPlainObject from 'lodash/isPlainObject';
 import merge from 'lodash/merge';
+import omit from 'lodash/omit';
 
 /**
  * Image 图片上传控件
@@ -817,13 +818,16 @@ export default class ImageControl extends React.Component<
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange, data} = this.props;
-    if (!isEmpty(autoFill) && onBulkChange && this.initAutoFill) {
+    const {autoFill, multiple, onBulkChange, data, name} = this.props;
+    // 排除自身的字段，否则会无限更新state
+    const excludeSelfAutoFill = omit(autoFill, name || '');
+
+    if (!isEmpty(excludeSelfAutoFill) && onBulkChange && this.initAutoFill) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
       const toSync = dataMapping(
-        autoFill,
+        excludeSelfAutoFill,
         multiple
           ? {
               items: files
@@ -1077,7 +1081,11 @@ export default class ImageControl extends React.Component<
         };
         obj.value = obj.value || obj.url;
 
-        const dispatcher = await this.dispatchEvent('success', obj);
+        const dispatcher = await this.dispatchEvent('success', {
+          ...file,
+          value: obj.value,
+          state: 'uploaded'
+        });
         if (dispatcher?.prevented) {
           return;
         }
@@ -1248,8 +1256,16 @@ export default class ImageControl extends React.Component<
 
   async dispatchEvent(e: string, data?: Record<string, any>) {
     const {dispatchEvent} = this.props;
-    data = data ? data : this.files;
-    return dispatchEvent(e, createObject(this.props.data, {file: data}));
+    const getEventData = (item: Record<string, any>) => ({
+      name: item.path || item.name,
+      value: item.value,
+      state: item.state,
+      error: item.error
+    });
+    const value = data
+      ? getEventData(data)
+      : this.files.map(item => getEventData(item));
+    return dispatchEvent(e, createObject(this.props.data, {file: value}));
   }
 
   // 动作

package/src/renderers/Form/InputMonthRange.tsx

@@ -170,8 +170,14 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
   // 动作
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
+
     if (action.actionType === 'clear') {
-      onChange(resetValue ?? '');
+      onChange('');
+      return;
+    }
+
+    if (action.actionType === 'reset' && resetValue) {
+      onChange(resetValue);
     }
   }
 

package/src/renderers/Form/InputRange.tsx

@@ -271,7 +271,7 @@ export function formatValue(
       max: max === undefined || max > props.max ? props.max : max
     };
   }
-  return +value ?? props.min;
+  return +value < props.min ? props.min : Math.min(+value, props.max);
 }
 
 /**
@@ -284,11 +284,13 @@ export class Input extends React.Component<RangeItemProps, any> {
    */
   @autobind
   onChange(value: number) {
-    const {multiple, value: originValue, type} = this.props;
+    const {multiple, value: originValue, type, min} = this.props;
     const _value = this.getValue(value, type);
 
     this.props.updateValue(
-      multiple ? {...(originValue as MultipleValue), [type]: _value} : value
+      multiple
+        ? {...(originValue as MultipleValue), [type]: _value}
+        : value ?? min
     );
   }
 
@@ -334,7 +336,8 @@ export class Input extends React.Component<RangeItemProps, any> {
    */
   getValue(value: string | number, type?: string) {
     const {max, min, step, value: stateValue} = this.props as RangeItemProps;
-
+    // value为null、undefined时，取对应的min/max
+    value = value ?? (type === 'min' ? min : max);
     // 校正value为step的倍数
     let _value = Math.round(parseFloat(value + '') / step) * step;
     // 同步value与步长小数位数
@@ -457,21 +460,26 @@ export default class RangeControl extends React.PureComponent<
   }
 
   componentDidUpdate(prevProps: RangeProps) {
-    const {value} = prevProps;
+    const {value, min, max} = prevProps;
     const {
       value: nextPropsValue,
       multiple,
       delimiter,
-      min,
-      max,
+      min: nextPropsMin,
+      max: nextPropsMax,
       onChange
     } = this.props;
-    if (value !== nextPropsValue) {
+
+    if (
+      value !== nextPropsValue ||
+      min !== nextPropsMin ||
+      max !== nextPropsMax
+    ) {
       const value = formatValue(nextPropsValue, {
         multiple,
         delimiter,
-        min,
-        max
+        min: nextPropsMin,
+        max: nextPropsMax
       });
       this.setState({
         value: this.getValue(value)
@@ -584,12 +592,6 @@ export default class RangeControl extends React.PureComponent<
       region
     } = props;
 
-    // 指定parts -> 重新计算步长
-    if (parts > 1) {
-      props.step = (props.max - props.min) / props.parts;
-      props.showSteps = true;
-    }
-
     // 处理自定义json配置
     let renderMarks:
       | MarksType

package/src/renderers/Form/InputText.tsx

@@ -93,7 +93,6 @@ export type InputTextRendererEvent =
   | 'focus'
   | 'click'
   | 'change'
-  | 'clear'
   | 'enter';
 
 export interface TextProps extends OptionsControlProps {
@@ -179,7 +178,7 @@ export default class TextControl extends React.PureComponent<
             term: ''
           })
         );
-      } else {
+      } else if (addHook) {
         this.unHook = addHook(async (data: any) => {
           await formItem.loadOptions(
             autoComplete,
@@ -239,7 +238,6 @@ export default class TextControl extends React.PureComponent<
     len && this.input.setSelectionRange(len, len);
   }
 
-  @bindRendererEvent<TextProps, InputTextRendererEvent>('clear')
   clearValue() {
     const {onChange, resetValue} = this.props;
 
@@ -546,6 +544,8 @@ export default class TextControl extends React.PureComponent<
       multiple,
       creatable,
       borderMode,
+      showCounter,
+      maxLength,
       translate: __
     } = this.props;
     let type = this.props.type?.replace(/^(?:native|input)\-/, '');
@@ -664,6 +664,16 @@ export default class TextControl extends React.PureComponent<
                 </a>
               ) : null}
 
+              {showCounter ? (
+                <span className={cx('TextControl-counter')}>
+                  {`${this.valueToString(value)?.length}${
+                    typeof maxLength === 'number' && maxLength
+                      ? `/${maxLength}`
+                      : ''
+                  }`}
+                </span>
+              ) : null}
+
               {loading ? (
                 <Spinner
                   show
@@ -832,8 +842,8 @@ export default class TextControl extends React.PureComponent<
         </div>
       ) : (
         <div className={cx(`${ns}TextControl-addOn`, addOn.className)}>
-          {addOn.label ? filter(addOn.label, data) : null}
           {iconElement}
+          {addOn.label ? filter(addOn.label, data) : null}
         </div>
       )
     ) : null;

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;
+
   /**
    * 不设置时，当表单提交过后表单项每次修改都会触发重新验证，
    * 如果设置了，则由此配置项来决定要不要每次修改都触发验证。
@@ -552,6 +558,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
             `Form-item Form-item--horizontal`,
             className,
             {
+              'Form-item--horizontal-justify': horizontal.justify,
               [`is-error`]: model && !model.valid,
               [`is-required`]: required
             },

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