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

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,8 @@ 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 InputRangeRendererEvent = 'change' | 'blur' | 'focus';
+export type InputRangeRendererAction = 'clear';
 export interface RangeControlSchema extends FormBaseControl {
   type: 'input-range';
 
@@ -60,7 +65,7 @@ export interface RangeControlSchema extends FormBaseControl {
   /**
    * 刻度
    */
-  // marks?: MarksType;
+  marks?: MarksType;
 
   /**
    * 是否展示标签
@@ -98,13 +103,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 +145,8 @@ export interface RangeProps extends FormControlProps {
 
   /**
    * 刻度
-   *
-   * todo 这里面存在 React.Compnonent 复杂定义，不能转成 json schema
-   * 需要简化类型定义，json 中是不能定义复杂类型的，如 function
    */
-  // marks?: MarksType;
+  marks?: MarksType;
 
   /**
    * 是否展示标签
@@ -362,6 +366,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 +410,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 +479,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 +511,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 +536,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 +578,10 @@ export default class RangeControl extends React.PureComponent<
       disabled,
       clearable,
       min,
-      max
+      max,
+      render,
+      marks,
+      region
     } = props;
 
     // 指定parts -> 重新计算步长
@@ -548,6 +590,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 +613,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/InputSubForm.tsx

@@ -524,6 +524,7 @@ export default class SubFormControl extends React.PureComponent<
 
 @FormItem({
   type: 'input-sub-form',
-  sizeMutable: false
+  sizeMutable: false,
+  strictMode: false
 })
 export class SubFormControlRenderer extends SubFormControl {}

package/src/renderers/Form/InputTag.tsx

@@ -83,7 +83,9 @@ export default class TagControl extends React.PureComponent<
 
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
-    if (action.actionType === 'clear') {
+    const actionType = action?.actionType as string;
+
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
       onChange(resetValue ?? '');
     }
   }

package/src/renderers/Form/MatrixCheckboxes.tsx

@@ -149,7 +149,9 @@ export default class MatrixCheckbox extends React.Component<
 
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
-    if (action.actionType === 'clear') {
+    const actionType = action?.actionType as string;
+
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
       onChange(resetValue ?? '');
     }
   }

package/src/renderers/Form/NestedSelect.tsx

@@ -12,7 +12,8 @@ import {
   getTreeAncestors,
   getTreeParent,
   ucFirst,
-  isMobile
+  isMobile,
+  createObject
 } from '../../utils/helper';
 import {
   FormOptionsControl,
@@ -27,6 +28,7 @@ import union from 'lodash/union';
 import compact from 'lodash/compact';
 import {RootClose} from '../../utils/RootClose';
 import Cascader from '../../components/Cascader';
+import {Action} from '../../types';
 
 /**
  * Nested Select
@@ -117,6 +119,28 @@ export default class NestedSelectControl extends React.Component<
     }
   }
 
+  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 dispatchEvent(eventName: string, eventData: any = {}) {
+    const {dispatchEvent, data} = this.props;
+    const rendererEvent = await dispatchEvent(
+      eventName,
+      createObject(data, {
+        ...eventData
+      })
+    );
+    // 返回阻塞标识
+    return !!rendererEvent?.prevented;
+  }
+
   @autobind
   handleOutClick(e: React.MouseEvent<any>) {
     const {options} = this.props;
@@ -140,7 +164,7 @@ export default class NestedSelectControl extends React.Component<
     });
   }
 
-  removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
+  async removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
     let {
       onChange,
       selectedOptions,
@@ -165,7 +189,10 @@ export default class NestedSelectControl extends React.Component<
       );
     }
 
-    onChange(value);
+    const isPrevented = await this.dispatchEvent('change', {
+      value
+    });
+    isPrevented || onChange(value);
   }
 
   @autobind
@@ -224,7 +251,7 @@ export default class NestedSelectControl extends React.Component<
   }
 
   @autobind
-  handleOptionClick(option: Option) {
+  async handleOptionClick(option: Option) {
     const {multiple, onChange, joinValues, extractValue, valueField} =
       this.props;
 
@@ -232,18 +259,21 @@ export default class NestedSelectControl extends React.Component<
       return;
     }
 
-    onChange(
-      joinValues
-        ? option[valueField || 'value']
-        : extractValue
-        ? option[valueField || 'value']
-        : option
-    );
+    const value = joinValues
+      ? option[valueField || 'value']
+      : extractValue
+      ? option[valueField || 'value']
+      : option;
+
+    const isPrevented = await this.dispatchEvent('change', {
+      value
+    });
+    isPrevented || onChange(value);
     !multiple && this.close();
   }
 
   @autobind
-  handleCheck(option: Option | Options, index?: number) {
+  async handleCheck(option: Option | Options, index?: number) {
     const {
       onChange,
       selectedOptions,
@@ -343,13 +373,16 @@ export default class NestedSelectControl extends React.Component<
       }
     }
 
-    onChange(
-      joinValues
-        ? value.map(item => item[valueField as string]).join(delimiter)
-        : extractValue
-        ? value.map(item => item[valueField as string])
-        : value
-    );
+    const newValue = joinValues
+      ? value.map(item => item[valueField as string]).join(delimiter)
+      : extractValue
+      ? value.map(item => item[valueField as string])
+      : value;
+
+    const isPrevented = await this.dispatchEvent('change', {
+      value: newValue
+    });
+    isPrevented || onChange(newValue);
   }
 
   allChecked(options: Options): boolean {
@@ -379,19 +412,29 @@ export default class NestedSelectControl extends React.Component<
   }
 
   @autobind
-  onFocus(e: any) {
-    this.props.disabled ||
-      this.state.isOpened ||
+  async onFocus(e: any) {
+    const {onFocus, disabled} = this.props;
+
+    if (!disabled && !this.state.isOpened) {
       this.setState({
         isFocused: true
       });
+
+      const isPrevented = await this.dispatchEvent('focus', e);
+      isPrevented || onFocus && onFocus(e);
+    }
   }
 
   @autobind
-  onBlur(e: any) {
+  async onBlur(e: any) {
+    const {onBlur} = this.props;
+
     this.setState({
       isFocused: false
     });
+
+    const isPrevented = await this.dispatchEvent('blur', e);
+    isPrevented || onBlur && onBlur(e);
   }
 
   @autobind
@@ -451,7 +494,7 @@ export default class NestedSelectControl extends React.Component<
   }
 
   @autobind
-  handleResultChange(value: Array<Option>) {
+  async handleResultChange(value: Array<Option>) {
     const {
       joinValues,
       extractValue,
@@ -464,7 +507,10 @@ export default class NestedSelectControl extends React.Component<
     let newValue: any = Array.isArray(value) ? value.concat() : [];
 
     if (!multiple && !newValue.length) {
-      onChange('');
+      const isPrevented = await this.dispatchEvent('change', {
+        value: ''
+      });
+      isPrevented || onChange('');
       return;
     }
 
@@ -476,7 +522,10 @@ export default class NestedSelectControl extends React.Component<
       newValue = newValue.join(delimiter || ',');
     }
 
-    onChange(newValue);
+    const isPrevented = await this.dispatchEvent('change', {
+      value: newValue
+    });
+    isPrevented || onChange(newValue);
   }
 
   renderOptions() {

package/src/renderers/Form/Options.tsx

@@ -469,7 +469,9 @@ export function registerOptionsControl(config: OptionsConfig) {
 
     doAction(action: Action, data: object, throwErrors: boolean) {
       const {resetValue, onChange} = this.props;
-      if (action.actionType === 'clear') {
+      const actionType = action?.actionType as string;
+
+      if (!!~['clear', 'reset'].indexOf(actionType)) {
         onChange(resetValue ?? '');
       }
     }

package/src/renderers/Form/Radios.tsx

@@ -39,7 +39,9 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
 
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
-    if (action.actionType === 'clear') {
+    const actionType = action?.actionType as string;
+
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
       onChange(resetValue ?? '');
     }
   }

package/src/renderers/Form/Select.tsx

@@ -336,8 +336,10 @@ export default class SelectControl extends React.Component<SelectProps, any> {
   }
 
   doAction(action: Action, data: object, throwErrors: boolean): any {
-    const {simpleValue, resetValue} = this.props;
-    if (action.actionType === 'clear') {
+    const {resetValue} = this.props;
+    const actionType = action?.actionType as string;
+
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
       this.changeValue(resetValue ?? '');
     }
   }
@@ -388,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 &&