amis 1.6.5-beta.3 → 1.8.0-beta.0

package/src/renderers/Form/Combo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
+import cloneDeep from 'lodash/cloneDeep';
 import {
   FormItem,
   FormControlProps,
@@ -9,6 +10,7 @@ import {
 import {Schema, 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,
@@ -255,6 +257,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 +295,8 @@ export default class ComboControl extends React.Component<ComboProps> {
     | 'tabsMode'
     | 'tabsStyle'
     | 'placeholder'
+    | 'itemClassName'
+    | 'itemsWrapperClassName'
   > = {
     minLength: 0,
     maxLength: 0,
@@ -307,7 +313,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 +342,9 @@ export default class ComboControl extends React.Component<ComboProps> {
     'items',
     'conditions',
     'messages',
-    'formStore'
+    'formStore',
+    'itemClassName',
+    'itemsWrapperClassName'
   ];
 
   subForms: Array<any> = [];
@@ -469,9 +479,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 +497,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 || ''
@@ -505,7 +535,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       deleteConfirmText,
       data,
       env,
-      translate: __
+      translate: __,
+      dispatchEvent
     } = this.props;
 
     if (disabled) {
@@ -515,6 +546,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')
@@ -866,8 +910,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);
   }
@@ -1138,7 +1193,9 @@ export default class ComboControl extends React.Component<ComboProps> {
       lazyLoad,
       changeImmediately,
       placeholder,
-      translate: __
+      translate: __,
+      itemClassName,
+      itemsWrapperClassName
     } = this.props;
 
     let items = this.props.items;
@@ -1165,7 +1222,7 @@ 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;
@@ -1176,21 +1233,20 @@ export default class ComboControl extends React.Component<ComboProps> {
                   evalExpression(itemRemovableOn, value) !== false)
               ) {
                 delBtn = (
-                  <a
-                    onClick={this.removeItem.bind(this, index)}
+                  <Button
                     key="remove"
-                    className={cx(
-                      `Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`
-                    )}
-                    data-tooltip={__('delete')}
-                    data-position="bottom"
+                    className={cx('Combo-delBtn')}
+                    disabled={!store.removable}
+                    tooltip={__('delete')}
+                    tooltipPlacement="bottom"
+                    onClick={this.removeItem.bind(this, index)}
                   >
                     {deleteIcon ? (
                       <i className={deleteIcon} />
                     ) : (
                       <Icon icon="status-close" className="icon" />
                     )}
-                  </a>
+                  </Button>
                 );
               }
 
@@ -1214,7 +1270,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 +1371,16 @@ export default class ComboControl extends React.Component<ComboProps> {
                   }
                 )
               ) : (
-                <button
-                  type="button"
+                <Button
+                  level="default"
+                  className={cx(`Combo-addBtn`, addButtonClassName)}
+                  block
+                  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 +1409,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       disabled,
       typeSwitchable,
       nullable,
-      translate: __
+      translate: __,
+      itemClassName
     } = this.props;
 
     let items = this.props.items;
@@ -1373,7 +1431,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

@@ -299,7 +299,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 +321,11 @@ export class CityPicker extends React.Component<
     } else {
       onChange({
         code,
+        provinceCode,
         province,
+        cityCode,
         city,
+        districtCode,
         district,
         street
       });

package/src/renderers/Form/InputColor.tsx

@@ -88,6 +88,8 @@ export default class ColorControl extends React.PureComponent<
             popOverContainer={
               mobileUI && env && env.getModalContainer
                 ? env.getModalContainer
+                : mobileUI
+                ? undefined
                 : rest.popOverContainer
             }
             value={value || ''}

package/src/renderers/Form/InputDate.tsx

@@ -472,6 +472,8 @@ export default class DateControl extends React.PureComponent<
           popOverContainer={
             mobileUI && env && env.getModalContainer
               ? env.getModalContainer
+              : mobileUI
+              ? undefined
               : rest.popOverContainer
           }
           timeFormat={timeFormat}

package/src/renderers/Form/InputDateRange.tsx

@@ -215,6 +215,8 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
           popOverContainer={
             mobileUI && env && env.getModalContainer
               ? env.getModalContainer
+              : mobileUI
+              ? undefined
               : rest.popOverContainer
           }
           data={data}

package/src/renderers/Form/InputExcel.tsx

@@ -2,7 +2,7 @@ import React, {Suspense} from 'react';
 import Dropzone from 'react-dropzone';
 import {FileRejection} from 'react-dropzone';
 import {Icon} from '../../components/icons';
-import {autobind} from '../../utils/helper';
+import {autobind, createObject} from '../../utils/helper';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 
 /**
@@ -47,6 +47,8 @@ export interface ExcelControlState {
   filename: string;
 }
 
+export type InputExcelRendererEvent = 'change';
+export type InputExcelRendererAction = 'clear';
 export default class ExcelControl extends React.PureComponent<
   ExcelProps,
   ExcelControlState
@@ -66,7 +68,7 @@ export default class ExcelControl extends React.PureComponent<
 
   @autobind
   handleDrop(files: File[]) {
-    const {allSheets, onChange} = this.props;
+    const {allSheets, onChange, dispatchEvent, data} = this.props;
     const excel = files[0];
     const reader = new FileReader();
     reader.readAsArrayBuffer(excel);
@@ -76,25 +78,38 @@ export default class ExcelControl extends React.PureComponent<
           this.ExcelJS = ExcelJS;
           const workbook = new ExcelJS.Workbook();
           await workbook.xlsx.load(reader.result);
+          let sheetsResult: any[] = [];
           if (allSheets) {
-            const sheetsResult: any[] = [];
             workbook.eachSheet((worksheet: any) => {
               sheetsResult.push({
                 sheetName: worksheet.name,
                 data: this.readWorksheet(worksheet)
               });
-              onChange(sheetsResult);
             });
           } else {
             const worksheet = workbook.worksheets[0];
-            onChange(this.readWorksheet(worksheet));
+            sheetsResult = this.readWorksheet(worksheet);
           }
+          const dispatcher = await this.dispatchEvent('change', sheetsResult);
+          if (dispatcher?.prevented) {
+            return;
+          }
+          onChange(sheetsResult);
           this.setState({filename: files[0].name});
         });
       }
     };
   }
 
+  async dispatchEvent(eventName: string, eventData?: Record<string, any>) {
+    const {dispatchEvent, data} = this.props;
+    return await dispatchEvent(
+      eventName,
+      createObject(data, {
+        value: eventData
+      })
+    );
+  }
   /**
    * 读取单个 sheet 的内容
    */
@@ -145,6 +160,13 @@ export default class ExcelControl extends React.PureComponent<
     }
   }
 
+  doAction(action: any, data: object, throwErrors: boolean) {
+    const {onChange} = this.props;
+    if (action.actionType === 'clear') {
+      onChange('');
+    }
+  }
+
   render() {
     const {
       className,