amis 1.6.5-beta.4 → 1.7.0

package/src/components/PopUp.tsx

@@ -113,11 +113,12 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
                   {!showConfirm && showClose ? (
                     <div className={cx(`${ns}PopUp-closeWrap`)}>
                       {header}
-                      <Icon
-                        icon="close"
-                        className={cx('icon', `${ns}PopUp-close`)}
-                        onClick={onHide}
-                      />
+                      <span className={cx(`PopUp-closeBox`)} onClick={onHide}>
+                        <Icon
+                          icon="close"
+                          className={cx('icon', `${ns}PopUp-close`)}
+                        />
+                      </span>
                     </div>
                   ) : null}
                   {showConfirm && (

package/src/components/Range.tsx

@@ -19,13 +19,19 @@ import {
   MultipleValue,
   Value,
   FormatValue,
-  MarksType,
   RangeItemProps
 } from '../renderers/Form/InputRange';
 import {stripNumber} from '../utils/tpl-builtin';
 import {findDOMNode} from 'react-dom';
 import {Icon} from './icons';
 
+type MarksType = {
+  [index: number | string]: Record<
+    number,
+    React.ReactNode | {style?: React.CSSProperties; label?: string}
+  >;
+};
+
 interface HandleItemState {
   isDrag: boolean;
   labelActive: boolean;

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,

package/src/renderers/Form/InputFile.tsx

@@ -5,7 +5,7 @@ import isPlainObject from 'lodash/isPlainObject';
 // @ts-ignore
 import mapLimit from 'async/mapLimit';
 import ImageControl from './InputImage';
-import {Payload, ApiObject, ApiString} from '../../types';
+import {Payload, ApiObject, ApiString, Action} from '../../types';
 import {filter} from '../../utils/tpl';
 import Alert from '../../components/Alert2';
 import {qsstringify, createObject, guid, isEmpty} from '../../utils/helper';
@@ -281,6 +281,8 @@ export function getNameFromUrl(url: string) {
 
   return url;
 }
+export type InputFileRendererEvent = 'change' | 'success' | 'fail' | 'remove';
+export type InputFileRendererAction = 'clear';
 
 export default class FileControl extends React.Component<FileProps, FileState> {
   static defaultProps: Partial<FileProps> = {
@@ -1223,6 +1225,16 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     );
   }
 
+  // 动作
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {onChange} = this.props;
+    if (action.actionType === 'clear') {
+      this.setState({files: []}, () => {
+        onChange('');
+      });
+    }
+  }
+
   render() {
     const {
       btnLabel,

package/src/renderers/Form/InputImage.tsx

@@ -6,7 +6,7 @@ import DropZone from 'react-dropzone';
 import {FileRejection} from 'react-dropzone';
 import 'blueimp-canvastoblob';
 import find from 'lodash/find';
-import {Payload} from '../../types';
+import {Payload, Action} from '../../types';
 import {buildApi} from '../../utils/api';
 import {
   createObject,
@@ -244,7 +244,7 @@ export interface ImageControlSchema extends FormBaseControl {
   /**
    * 初始化时是否把其他字段同步到表单内部。
    */
-  initAutoFill?: boolean
+  initAutoFill?: boolean;
 
   /**
    * 默认占位图图片地址
@@ -314,6 +314,9 @@ export interface FileX extends File {
   [propName: string]: any;
 }
 
+export type InputImageRendererEvent = 'change' | 'success' | 'fail' | 'remove';
+export type InputImageRendererAction = 'clear';
+
 export default class ImageControl extends React.Component<
   ImageProps,
   ImageState
@@ -501,8 +504,8 @@ export default class ImageControl extends React.Component<
         this.syncAutoFill
       );
     } else if (prevProps.value !== props.value && !this.initAutoFill) {
-      this.initAutoFill = true
-      this.syncAutoFill()
+      this.initAutoFill = true;
+      this.syncAutoFill();
     }
 
     if (prevProps.crop !== props.crop) {
@@ -1245,10 +1248,19 @@ export default class ImageControl extends React.Component<
 
   async dispatchEvent(e: string, data?: Record<string, any>) {
     const {dispatchEvent} = this.props;
-    data = data ? data : this.state.files;
+    data = data ? data : this.files;
     return dispatchEvent(e, createObject(this.props.data, {file: data}));
   }
 
+  // 动作
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {onChange} = this.props;
+    if (action.actionType === 'clear') {
+      this.files = [];
+      onChange('');
+    }
+  }
+
   render() {
     const {
       className,
@@ -1382,10 +1394,21 @@ export default class ImageControl extends React.Component<
                             file.state === 'error' ? (
                               <div className={cx('Image--thumb')}>
                                 <div className={cx('Image-thumbWrap')}>
-                                  <div className={cx('Image-thumb', 'ImageControl-filename')}>
+                                  <div
+                                    className={cx(
+                                      'Image-thumb',
+                                      'ImageControl-filename'
+                                    )}
+                                  >
                                     <Icon icon="image" className="icon" />
-                                    <span title={file.name || getNameFromUrl(file.value || file.url)}>
-                                      {file.name || getNameFromUrl(file.value || file.url)}
+                                    <span
+                                      title={
+                                        file.name ||
+                                        getNameFromUrl(file.value || file.url)
+                                      }
+                                    >
+                                      {file.name ||
+                                        getNameFromUrl(file.value || file.url)}
                                     </span>
                                   </div>
 
@@ -1393,10 +1416,7 @@ export default class ImageControl extends React.Component<
                                     <a
                                       data-tooltip={__('File.repick')}
                                       data-position="bottom"
-                                      onClick={this.handleRetry.bind(
-                                        this,
-                                        key
-                                      )}
+                                      onClick={this.handleRetry.bind(this, key)}
                                     >
                                       <Icon icon="refresh" className="icon" />
                                     </a>

package/src/renderers/Form/InputRange.tsx

@@ -2,14 +2,17 @@ import React, {CSSProperties, ReactNode} from 'react';
 import isNumber from 'lodash/isNumber';
 import isObject from 'lodash/isObject';
 import isEqual from 'lodash/isEqual';
+import forEach from 'lodash/forEach';
 
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import InputRange from '../../components/Range';
 import NumberInput from '../../components/NumberInput';
 import {Icon} from '../../components/icons';
 import {stripNumber} from '../../utils/tpl-builtin';
-import {autobind} from '../../utils/helper';
+import {autobind, createObject} from '../../utils/helper';
 import {filter} from '../../utils/tpl';
+import {SchemaObject} from '../../Schema';
+import {Action} from '../../types';
 
 /**
  * Range
@@ -19,6 +22,12 @@ import {filter} from '../../utils/tpl';
 export type Value = string | MultipleValue | number | [number, number];
 export type FormatValue = MultipleValue | number;
 export type TooltipPosType = 'auto' | 'top' | 'right' | 'bottom' | 'left';
+export type InputTextRendererEvent =
+  | 'change'
+  | 'afterChange'
+  | 'blur'
+  | 'focus';
+export type InputTextRendererAction = 'clear';
 export interface RangeControlSchema extends FormBaseControl {
   type: 'input-range';
 
@@ -60,7 +69,7 @@ export interface RangeControlSchema extends FormBaseControl {
   /**
    * 刻度
    */
-  // marks?: MarksType;
+  marks?: MarksType;
 
   /**
    * 是否展示标签
@@ -98,13 +107,15 @@ export interface RangeControlSchema extends FormBaseControl {
   disabled?: boolean;
 }
 
-export type MarksType = {
-  [index: number | string]: Record<
-    number,
-    {style?: React.CSSProperties; label?: string} | any
-  >;
+type MarksType = {
+  [index: number | string]: MarksValue;
 };
 
+type MarksValue = Record<
+  number,
+  SchemaObject | {style?: React.CSSProperties; label?: string}
+>;
+
 export interface RangeProps extends FormControlProps {
   /**
    * 滑块值
@@ -138,11 +149,8 @@ export interface RangeProps extends FormControlProps {
 
   /**
    * 刻度
-   *
-   * todo 这里面存在 React.Compnonent 复杂定义，不能转成 json schema
-   * 需要简化类型定义，json 中是不能定义复杂类型的，如 function
    */
-  // marks?: MarksType;
+  marks?: MarksType;
 
   /**
    * 是否展示标签
@@ -362,6 +370,24 @@ export class Input extends React.Component<RangeItemProps, any> {
     }
   }
 
+  /**
+   * 失焦事件
+   */
+  @autobind
+  onBlur() {
+    const {data, dispatchEvent} = this.props;
+    dispatchEvent('blur', data);
+  }
+
+  /**
+   * 聚焦事件
+   */
+  @autobind
+  onFocus() {
+    const {data, dispatchEvent} = this.props;
+    dispatchEvent('focus', data);
+  }
+
   render() {
     const {
       classnames: cx,
@@ -388,6 +414,8 @@ export class Input extends React.Component<RangeItemProps, any> {
           min={this.checkNum(min)}
           onChange={this.onChange}
           disabled={disabled}
+          onBlur={this.onBlur}
+          onFocus={this.onFocus}
         />
       </div>
     );
@@ -455,6 +483,12 @@ export default class RangeControl extends React.PureComponent<
     }
   }
 
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    if (action.actionType === 'clear') {
+      this.clearValue();
+    }
+  }
+
   @autobind
   clearValue() {
     const {multiple, min, max} = this.props;
@@ -481,21 +515,23 @@ export default class RangeControl extends React.PureComponent<
    * @param value
    */
   @autobind
-  updateValue(value: FormatValue) {
+  async updateValue(value: FormatValue) {
     this.setState({value: this.getValue(value)});
-    const {multiple, joinValues, delimiter, onChange} = this.props;
-    onChange(
-      multiple
-        ? joinValues
-          ? [(value as MultipleValue).min, (value as MultipleValue).max].join(
-              delimiter || ','
-            )
-          : {
-              min: (value as MultipleValue).min,
-              max: (value as MultipleValue).max
-            }
-        : value
+    const {onChange, data, dispatchEvent} = this.props;
+    const result = this.getFormatValue(value);
+
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value: result
+      })
     );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange && onChange(result);
   }
 
   /**
@@ -504,20 +540,27 @@ export default class RangeControl extends React.PureComponent<
   @autobind
   onAfterChange() {
     const {value} = this.state;
-    const {multiple, joinValues, delimiter, onAfterChange} = this.props;
-    onAfterChange &&
-      onAfterChange(
-        multiple
-          ? joinValues
-            ? [(value as MultipleValue).min, (value as MultipleValue).max].join(
-                delimiter || ','
-              )
-            : {
-                min: (value as MultipleValue).min,
-                max: (value as MultipleValue).max
-              }
-          : value
-      );
+    const {onAfterChange, dispatchEvent, data} = this.props;
+    const result = this.getFormatValue(value);
+    onAfterChange && onAfterChange(result);
+  }
+
+  /**
+   * 获取导出格式数据
+   */
+  @autobind
+  getFormatValue(value: FormatValue) {
+    const {multiple, joinValues, delimiter} = this.props;
+    return multiple
+      ? joinValues
+        ? [(value as MultipleValue).min, (value as MultipleValue).max].join(
+            delimiter || ','
+          )
+        : {
+            min: (value as MultipleValue).min,
+            max: (value as MultipleValue).max
+          }
+      : value;
   }
 
   render() {
@@ -539,7 +582,10 @@ export default class RangeControl extends React.PureComponent<
       disabled,
       clearable,
       min,
-      max
+      max,
+      render,
+      marks,
+      region
     } = props;
 
     // 指定parts -> 重新计算步长
@@ -548,6 +594,19 @@ export default class RangeControl extends React.PureComponent<
       props.showSteps = true;
     }
 
+    // 处理自定义json配置
+    let renderMarks:
+      | MarksType
+      | {[index: number | string]: ReactNode}
+      | undefined = marks ? {...marks} : marks;
+    marks &&
+      forEach(marks, (item, key) => {
+        if (isObject(item) && (item as SchemaObject).type) {
+          renderMarks &&
+            (renderMarks[key] = render(region, item as SchemaObject));
+        }
+      });
+
     return (
       <div
         className={cx(
@@ -558,7 +617,7 @@ export default class RangeControl extends React.PureComponent<
         )}
       >
         {showInput && multiple && <Input {...props} type="min" />}
-        <InputRange {...props} />
+        <InputRange {...props} marks={renderMarks} />
         {showInput && <Input {...props} type="max" />}
         {clearable && !disabled && showInput ? (
           <a

package/src/renderers/Form/Select.tsx

@@ -390,6 +390,8 @@ export default class SelectControl extends React.Component<SelectProps, any> {
             popOverContainer={
               mobileUI && env && env.getModalContainer
                 ? env.getModalContainer
+                : mobileUI
+                ? undefined
                 : rest.popOverContainer
             }
             borderMode={borderMode}

package/src/renderers/Form/Switch.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import Switch from '../../components/Switch';
-import {createObject, autobind} from '../../utils/helper';
+import {createObject, autobind, isObject} from '../../utils/helper';
+import {generateIcon} from "../../utils/icon";
+import {IconSchema} from "../Icon";
 
 /**
  * Switch
  * 文档：https://baidu.gitee.io/amis/docs/components/form/switch
  */
+
+
 export interface SwitchControlSchema extends FormBaseControl {
   /**
    * 指定为多行文本输入框
@@ -16,12 +20,12 @@ export interface SwitchControlSchema extends FormBaseControl {
   /**
    * 勾选值
    */
-  trueValue?: any;
+  trueValue?: boolean | string | number;
 
   /**
    * 未勾选值
    */
-  falseValue?: any;
+  falseValue?: boolean | string | number;
 
   /**
    * 选项说明
@@ -29,14 +33,14 @@ export interface SwitchControlSchema extends FormBaseControl {
   option?: string;
 
   /**
-   * 开启时显示的文本
+   * 开启时显示的内容
    */
-  onText?: string;
+  onText?: string | IconSchema;
 
   /**
-   * 关闭时显示的文本
+   * 关闭时显示的内容
    */
-  offText?: string;
+  offText?: string | IconSchema;
 }
 
 export interface SwitchProps extends FormControlProps {
@@ -83,6 +87,9 @@ export default class SwitchControl extends React.Component<SwitchProps, any> {
       optionAtLeft
     } = this.props;
 
+    const on = isObject(onText) ? generateIcon(cx, onText.icon, 'Switch-icon') : onText;
+    const off = isObject(offText) ? generateIcon(cx, offText.icon, 'Switch-icon') :offText;
+
     return (
       <div className={cx(`SwitchControl`, className)}>
         {optionAtLeft ? (
@@ -94,8 +101,8 @@ export default class SwitchControl extends React.Component<SwitchProps, any> {
           value={value}
           trueValue={trueValue}
           falseValue={falseValue}
-          onText={onText}
-          offText={offText}
+          onText={on}
+          offText={off}
           disabled={disabled}
           onChange={this.handleChange}
         />

package/src/renderers/Log.tsx

@@ -134,7 +134,8 @@ export class Log extends React.Component<LogProps, LogState> {
     const res = await fetch(api.url, {
       method: api.method?.toLocaleUpperCase() || 'GET',
       headers: (api.headers as Record<string, string>) || undefined,
-      body: api.data ? JSON.stringify(api.data) : undefined
+      body: api.data ? JSON.stringify(api.data) : undefined,
+      credentials: 'include'
     });
     if (res.status === 200) {
       const body = res.body;

package/src/renderers/PopOver.tsx

@@ -207,7 +207,7 @@ export const HocPopOver =
         if (popOver === true) {
           schema = {
             type: 'panel',
-            body: '${name}'
+            body: `\${${name}}`
           };
         } else if (
           popOver &&

package/src/renderers/Tabs.tsx

@@ -335,7 +335,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       localTabs = newLocalTabs;
     }
 
-    if (props.location && props.location.hash !== preProps.location.hash) {
+    if (props.location && preProps.location && props.location.hash !== preProps.location.hash) {
       const hash = props.location.hash.substring(1);
       if (!hash) {
         return;