amis 1.6.5-beta.4 → 1.8.0-beta.1

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,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/InputTable.tsx

@@ -1082,7 +1082,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       prefixRow,
       formInited,
       perPage,
-      classnames: cx
+      classnames: cx,
+      rowClassName,
+      rowClassNameExpr
     } = this.props;
 
     if (formInited === false) {
@@ -1131,7 +1133,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
             expandConfig,
             canAccessSuperData,
             reUseRow: false,
-            offset
+            offset,
+            rowClassName,
+            rowClassNameExpr
           }
         )}
         {(addable && showAddBtn !== false) || showPager ? (

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/Page.tsx

@@ -853,7 +853,7 @@ export class PageRenderer extends Page {
     throwErrors: boolean = false,
     delegate?: IScopedContext
   ) {
-    const scoped = this.context as IScopedContext;
+    const scoped = delegate || (this.context as IScopedContext);
 
     if (action.actionType === 'reload') {
       action.target && scoped.reload(action.target, ctx);
@@ -877,7 +877,6 @@ export class PageRenderer extends Page {
         action.reload &&
         ~['url', 'link', 'jump'].indexOf(action.actionType!)
       ) {
-        const scoped = delegate || (this.context as IScopedContext);
         scoped.reload(action.reload, ctx);
       }
     }

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/Progress.tsx

@@ -59,7 +59,7 @@ export interface ProgressSchema extends BaseSchema {
   animate?: boolean;
 
   /**
-   * 圆形进度条线的宽度
+   * 进度条线的宽度
    */
   strokeWidth?: number;
   /**
@@ -95,7 +95,7 @@ export class ProgressField extends React.Component<ProgressProps, object> {
   @autobind
   format(value: number) {
     const {valueTpl, render, data} = this.props;
-    return render(`progress-value`, valueTpl + '', {
+    return render(`progress-value`, valueTpl || '${value}%', {
       data: createObject(data, {value})
     });
   }

package/src/renderers/Table/TableRow.tsx

@@ -195,7 +195,7 @@ export class TableRow extends React.Component<TableRowProps> {
             'is-checked': item.checked,
             'is-modified': item.modified,
             'is-moved': item.moved,
-            'is-expanded': item.expanded,
+            'is-expanded': item.expanded && item.expandable,
             'is-expandable': item.expandable,
             [`Table-tr--hasItemAction`]: itemAction,
             [`Table-tr--odd`]: itemIndex % 2 === 0,

package/src/renderers/Tabs.tsx

@@ -89,9 +89,9 @@ export interface TabSchema extends Omit<BaseSchema, 'type'> {
    */
   horizontal?: FormSchemaHorizontal;
   /**
-   * 是否可关闭，优先级高于 tabs 的 closeable
+   * 是否可关闭，优先级高于 tabs 的 closable
    */
-  closeable?: boolean;
+  closable?: boolean;
   /**
    * 是否禁用
    */
@@ -186,6 +186,14 @@ export interface TabsSchema extends BaseSchema {
    * 是否导航支持内容溢出滚动。属性废弃，为了兼容暂且保留
    */
   scrollable?: boolean;
+  /**
+   * 编辑器模式，侧边的位置
+   */
+  sidePosition?: 'left' | 'right';
+  /**
+   * 自定义增加按钮文案
+   */
+  addBtnText?: string;
 }
 
 export interface TabsProps
@@ -335,7 +343,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;
@@ -643,7 +651,9 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       draggable,
       showTip,
       showTipClassName,
-      editable
+      editable,
+      sidePosition,
+      addBtnText
     } = this.props;
 
     const mode = tabsMode || dMode;
@@ -747,6 +757,8 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         showTipClassName={showTipClassName}
         editable={editable}
         onEdit={this.handleEdit}
+        sidePosition={sidePosition}
+        addBtnText={addBtnText}
       >
         {children}
       </CTabs>