amis 1.7.0 → 1.8.0-beta.13

package/src/renderers/Form/Combo.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
-import {
-  FormItem,
-  FormControlProps,
-  FormBaseControl,
-  FormControlSchemaAlias
-} from './Item';
-import {Schema, Action, Api} from '../../types';
+import cloneDeep from 'lodash/cloneDeep';
+import {FormItem, FormControlProps, FormBaseControl} from './Item';
+import {Action, Api} from '../../types';
 import {ComboStore, IComboStore} from '../../store/combo';
 import {default as CTabs, Tab} from '../../components/Tabs';
+import Button from '../../components/Button';
 
 import {
   guid,
@@ -24,7 +21,7 @@ import {evalExpression, filter} from '../../utils/tpl';
 import find from 'lodash/find';
 import Select from '../../components/Select';
 import {dataMapping, resolveVariable} from '../../utils/tpl-builtin';
-import {isEffectiveApi} from '../../utils/api';
+import {isEffectiveApi, str2AsyncFunction} from '../../utils/api';
 import {Alert2} from '../../components';
 import memoize from 'lodash/memoize';
 import {Icon} from '../../components/icons';
@@ -32,8 +29,6 @@ import {isAlive} from 'mobx-state-tree';
 import {
   SchemaApi,
   SchemaClassName,
-  SchemaCollection,
-  SchemaIcon,
   SchemaObject,
   SchemaTpl
 } from '../../Schema';
@@ -255,6 +250,8 @@ export interface ComboControlSchema extends FormBaseControl {
   };
 }
 
+export type ComboRendererEvent = 'add' | 'delete' | 'tabsChange';
+
 function pickVars(vars: any, fields: Array<string>) {
   return fields.reduce((data: any, key: string) => {
     data[key] = resolveVariable(key, vars);
@@ -291,6 +288,8 @@ export default class ComboControl extends React.Component<ComboProps> {
     | 'tabsMode'
     | 'tabsStyle'
     | 'placeholder'
+    | 'itemClassName'
+    | 'itemsWrapperClassName'
   > = {
     minLength: 0,
     maxLength: 0,
@@ -307,7 +306,9 @@ export default class ComboControl extends React.Component<ComboProps> {
     deleteIcon: '',
     tabsMode: false,
     tabsStyle: '',
-    placeholder: 'placeholder.empty'
+    placeholder: 'placeholder.empty',
+    itemClassName: '',
+    itemsWrapperClassName: ''
   };
   static propsList: Array<string> = [
     'minLength',
@@ -334,7 +335,9 @@ export default class ComboControl extends React.Component<ComboProps> {
     'items',
     'conditions',
     'messages',
-    'formStore'
+    'formStore',
+    'itemClassName',
+    'itemsWrapperClassName'
   ];
 
   subForms: Array<any> = [];
@@ -359,7 +362,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.handleFormInit = this.handleFormInit.bind(this);
     this.handleAction = this.handleAction.bind(this);
     this.addItem = this.addItem.bind(this);
-    this.removeItem = this.removeItem.bind(this);
+    this.deleteItem = this.deleteItem.bind(this);
     this.dragTipRef = this.dragTipRef.bind(this);
     this.flush = this.flush.bind(this);
     this.handleComboTypeChange = this.handleComboTypeChange.bind(this);
@@ -469,9 +472,17 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.props.onChange(value, submitOnChange, true);
   }
 
-  addItem() {
-    const {flat, joinValues, delimiter, scaffold, disabled, submitOnChange} =
-      this.props;
+  async addItem() {
+    const {
+      flat,
+      joinValues,
+      delimiter,
+      scaffold,
+      disabled,
+      submitOnChange,
+      data,
+      dispatchEvent
+    } = this.props;
 
     if (disabled) {
       return;
@@ -479,6 +490,18 @@ export default class ComboControl extends React.Component<ComboProps> {
 
     let value = this.getValueAsArray();
 
+    const rendererEvent = await dispatchEvent(
+      'add',
+      createObject(data, {
+        value:
+          flat && joinValues ? value.join(delimiter || ',') : cloneDeep(value)
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
     value.push(
       flat
         ? scaffold || ''
@@ -495,7 +518,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.props.onChange(value, submitOnChange, true);
   }
 
-  async removeItem(key: number) {
+  async deleteItem(key: number) {
     const {
       flat,
       joinValues,
@@ -505,7 +528,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       deleteConfirmText,
       data,
       env,
-      translate: __
+      translate: __,
+      dispatchEvent
     } = this.props;
 
     if (disabled) {
@@ -515,6 +539,19 @@ export default class ComboControl extends React.Component<ComboProps> {
     let value = this.getValueAsArray();
     const ctx = createObject(data, value[key]);
 
+    const rendererEvent = await dispatchEvent(
+      'delete',
+      createObject(data, {
+        key,
+        value:
+          flat && joinValues ? value.join(delimiter || ',') : cloneDeep(value)
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
     if (isEffectiveApi(deleteApi, ctx)) {
       const confirmed = await env.confirm(
         deleteConfirmText ? filter(deleteConfirmText, ctx) : __('deleteConfirm')
@@ -598,7 +635,8 @@ export default class ComboControl extends React.Component<ComboProps> {
 
     if (
       syncDefaultValue === false ||
-      this.subFormDefaultValues.length !== this.subForms.length
+      this.subFormDefaultValues.length !==
+        this.subForms.filter(item => item !== undefined).length
     ) {
       return;
     }
@@ -654,7 +692,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     const {onAction} = this.props;
 
     if (action.actionType === 'delete') {
-      action.index !== void 0 && this.removeItem(action.index);
+      action.index !== void 0 && this.deleteItem(action.index);
       return;
     }
 
@@ -866,8 +904,19 @@ export default class ComboControl extends React.Component<ComboProps> {
   }
 
   @autobind
-  handleTabSelect(key: number) {
-    const {store} = this.props;
+  async handleTabSelect(key: number) {
+    const {store, data, dispatchEvent} = this.props;
+
+    const rendererEvent = await dispatchEvent(
+      'tabsChange',
+      createObject(data, {
+        key
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
 
     store.setActiveKey(key);
   }
@@ -998,8 +1047,8 @@ export default class ComboControl extends React.Component<ComboProps> {
           ) {
             toolbar = (
               <div
-                onClick={this.removeItem.bind(this, index)}
-                key="remove"
+                onClick={this.deleteItem.bind(this, index)}
+                key="delete"
                 className={cx(
                   `Combo-tab-delBtn ${!store.removable ? 'is-disabled' : ''}`
                 )}
@@ -1105,6 +1154,99 @@ export default class ComboControl extends React.Component<ComboProps> {
     );
   }
 
+  renderDelBtn(value: any, index: number) {
+    const {
+      classPrefix: ns,
+      classnames: cx,
+      render,
+      store,
+      deleteIcon,
+      translate: __,
+      itemRemovableOn,
+      disabled,
+      removable,
+      deleteBtn
+    } = this.props;
+
+    const finnalRemovable =
+      store.removable !== false && // minLength ?
+      !disabled && // 控件自身是否禁用
+      removable !== false; // 是否可以删除
+
+    if (
+      !(
+        finnalRemovable && // 表达式判断单条是否可删除
+        (!itemRemovableOn || evalExpression(itemRemovableOn, value) !== false)
+      )
+    ) {
+      // 不符合删除条件，则不渲染删除按钮
+      return null;
+    }
+
+    // deleteBtn是对象，则根据自定义配置渲染按钮
+    if (isObject(deleteBtn)) {
+      return render('delete-btn', {
+        ...deleteBtn,
+        type: 'button',
+        className: cx(
+          'Combo-delController',
+          deleteBtn ? deleteBtn.classname : ''
+        ),
+        onClick: (e: any) => {
+          if (!deleteBtn.onClick) {
+            this.deleteItem(index);
+            return;
+          }
+
+          let originClickHandler = deleteBtn.onClick;
+          if (typeof originClickHandler === 'string') {
+            originClickHandler = str2AsyncFunction(
+              deleteBtn.onClick,
+              'e',
+              'index',
+              'props'
+            );
+          }
+          const result = originClickHandler(e, index, this.props);
+          if (result && result.then) {
+            result.then(() => {
+              this.deleteItem(index);
+            });
+          } else {
+            this.deleteItem(index);
+          }
+        }
+      });
+    }
+
+    // deleteBtn是string，则渲染按钮文本
+    if (typeof deleteBtn === 'string') {
+      return render('delete-btn', {
+        type: 'button',
+        className: cx('Combo-delController'),
+        label: deleteBtn,
+        onClick: this.deleteItem.bind(this, index)
+      });
+    }
+
+    // 如果上述按钮不满足，则渲染默认按钮
+    return (
+      <a
+        onClick={this.deleteItem.bind(this, index)}
+        key="delete"
+        className={cx(`Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`)}
+        data-tooltip={__('delete')}
+        data-position="bottom"
+      >
+        {deleteIcon ? (
+          <i className={deleteIcon} />
+        ) : (
+          <Icon icon="status-close" className="icon" />
+        )}
+      </a>
+    );
+  }
+
   renderMultipe() {
     if (this.props.tabsMode) {
       return this.renderTabsMode();
@@ -1127,18 +1269,18 @@ export default class ComboControl extends React.Component<ComboProps> {
       addable,
       removable,
       typeSwitchable,
-      itemRemovableOn,
       delimiter,
       canAccessSuperData,
       addIcon,
       dragIcon,
-      deleteIcon,
       noBorder,
       conditions,
       lazyLoad,
       changeImmediately,
       placeholder,
-      translate: __
+      translate: __,
+      itemClassName,
+      itemsWrapperClassName
     } = this.props;
 
     let items = this.props.items;
@@ -1148,11 +1290,6 @@ export default class ComboControl extends React.Component<ComboProps> {
       value = value.split(delimiter || ',');
     }
 
-    const finnalRemovable =
-      store.removable !== false && // minLength ?
-      !disabled && // 控件自身是否禁用
-      removable !== false; // 是否可以删除
-
     return (
       <div
         className={cx(
@@ -1165,34 +1302,10 @@ export default class ComboControl extends React.Component<ComboProps> {
             : ''
         )}
       >
-        <div className={cx(`Combo-items`)}>
+        <div className={cx(`Combo-items`, itemsWrapperClassName)}>
           {Array.isArray(value) && value.length ? (
             value.map((value, index, thelist) => {
-              let delBtn: any = null;
-
-              if (
-                finnalRemovable && // 表达式判断单条是否可删除
-                (!itemRemovableOn ||
-                  evalExpression(itemRemovableOn, value) !== false)
-              ) {
-                delBtn = (
-                  <a
-                    onClick={this.removeItem.bind(this, index)}
-                    key="remove"
-                    className={cx(
-                      `Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`
-                    )}
-                    data-tooltip={__('delete')}
-                    data-position="bottom"
-                  >
-                    {deleteIcon ? (
-                      <i className={deleteIcon} />
-                    ) : (
-                      <Icon icon="status-close" className="icon" />
-                    )}
-                  </a>
-                );
-              }
+              let delBtn: any = this.renderDelBtn(value, index);
 
               const data = this.formatValue(value, index);
               let condition: ComboCondition | null = null;
@@ -1214,7 +1327,7 @@ export default class ComboControl extends React.Component<ComboProps> {
 
               return (
                 <div
-                  className={cx(`Combo-item`)}
+                  className={cx(`Combo-item`, itemClassName)}
                   key={this.keys[index] || (this.keys[index] = guid())}
                 >
                   {!disabled && draggable && thelist.length > 1 ? (
@@ -1315,15 +1428,14 @@ export default class ComboControl extends React.Component<ComboProps> {
                   }
                 )
               ) : (
-                <button
-                  type="button"
+                <Button
+                  className={cx(`Combo-addBtn`, addButtonClassName)}
+                  tooltip={__('Combo.add')}
                   onClick={this.addItem}
-                  className={cx(`Button Combo-addBtn`, addButtonClassName)}
-                  data-tooltip={__('Combo.add')}
                 >
                   {addIcon ? <Icon icon="plus" className="icon" /> : null}
                   <span>{__(addButtonText || 'Combo.add')}</span>
-                </button>
+                </Button>
               )
             ) : null}
             {draggable ? (
@@ -1352,7 +1464,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       disabled,
       typeSwitchable,
       nullable,
-      translate: __
+      translate: __,
+      itemClassName
     } = this.props;
 
     let items = this.props.items;
@@ -1373,7 +1486,7 @@ export default class ComboControl extends React.Component<ComboProps> {
           disabled ? 'is-disabled' : ''
         )}
       >
-        <div className={cx(`Combo-item`)}>
+        <div className={cx(`Combo-item`, itemClassName)}>
           {condition && typeSwitchable !== false ? (
             <div className={cx('Combo-itemTag')}>
               <label>{__('Combo.type')}</label>

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';
 
@@ -299,7 +300,16 @@ export class CityPicker extends React.Component<
     const {onChange, allowStreet, joinValues, extractValue, delimiter} =
       this.props;
 
-    const {code, province, city, district, street} = this.state;
+    const {
+      code,
+      province,
+      city,
+      district,
+      street,
+      provinceCode,
+      cityCode,
+      districtCode
+    } = this.state;
 
     if (typeof extractValue === 'undefined' ? joinValues : extractValue) {
       code
@@ -312,8 +322,11 @@ export class CityPicker extends React.Component<
     } else {
       onChange({
         code,
+        provinceCode,
         province,
+        cityCode,
         city,
+        districtCode,
         district,
         street
       });
@@ -420,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,
@@ -441,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}
@@ -454,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}