amis 1.3.4 → 1.4.0

package/src/renderers/Form/InputNumber.tsx

@@ -4,7 +4,8 @@ import cx from 'classnames';
 import {filter} from '../../utils/tpl';
 import NumberInput from '../../components/NumberInput';
 import {FormOptionsControl} from './Options';
-
+import Select, {normalizeOptions, Option} from '../../components/Select';
+import {PlainObject} from '../../types';
 /**
  * 数字输入框
  * 文档：https://baidu.gitee.io/amis/docs/components/form/number
@@ -48,14 +49,20 @@ export interface NumberControlSchema extends FormBaseControl {
    * 后缀
    */
   suffix?: string;
+
+  /**
+   * 单位列表
+   */
+  unitOptions?: string | Array<Option> | string[] | PlainObject;
+
   /**
    * 是否千分分隔
    */
   kilobitSeparator?: boolean;
   /**
-  * 只读
-  */
-  readOnly?: boolean
+   * 只读
+   */
+  readOnly?: boolean;
 }
 
 export interface NumberProps extends FormControlProps {
@@ -67,8 +74,8 @@ export interface NumberProps extends FormControlProps {
   /**
    * 边框模式，全边框，还是半边框，或者没边框。
    */
-   borderMode?: 'full' | 'half' | 'none';
-   /**
+  borderMode?: 'full' | 'half' | 'none';
+  /**
    * 前缀
    */
   prefix?: string;
@@ -83,10 +90,19 @@ export interface NumberProps extends FormControlProps {
   /**
    * 只读
    */
-  readOnly?: boolean
+  readOnly?: boolean;
+}
+
+interface NumberState {
+  // 数字单位，将会影响输出
+  unit?: string;
+  unitOptions?: Option[];
 }
 
-export default class NumberControl extends React.Component<NumberProps, any> {
+export default class NumberControl extends React.Component<
+  NumberProps,
+  NumberState
+> {
   static defaultProps: Partial<NumberProps> = {
     step: 1,
     resetValue: ''
@@ -94,17 +110,51 @@ export default class NumberControl extends React.Component<NumberProps, any> {
 
   constructor(props: NumberProps) {
     super(props);
-
     this.handleChange = this.handleChange.bind(this);
+    this.handleChangeUnit = this.handleChangeUnit.bind(this);
+    const unit = this.getUnit();
+    const unitOptions = normalizeOptions(props.unitOptions);
+    this.state = {unit, unitOptions};
+  }
+
+  // 解析出单位
+  getUnit() {
+    const props = this.props;
+    if (props.unitOptions && props.unitOptions.length) {
+      const optionValues = normalizeOptions(props.unitOptions).map(
+        option => option.value
+      );
+      // 如果有值就解析出来作为单位
+      if (props.value && typeof props.value === 'string') {
+        let unit = optionValues[0];
+        // 先找长的字符，这样如果有 ab 和 b 两种后缀相同的也能识别
+        optionValues.sort((a, b) => b.length - a.length);
+        for (const optionValue of optionValues) {
+          if (props.value.endsWith(optionValue)) {
+            unit = optionValue;
+            break;
+          }
+        }
+        return unit;
+      } else {
+        // 没有值就使用第一个单位
+        return optionValues[0];
+      }
+    }
+    return undefined;
   }
 
   handleChange(inputValue: any) {
-    const {classPrefix: ns, onChange, resetValue} = this.props;
+    const {classPrefix: ns, onChange, resetValue, unitOptions} = this.props;
 
     if (inputValue && typeof inputValue !== 'number') {
       return;
     }
 
+    if (inputValue !== null && unitOptions && this.state.unit) {
+      inputValue = inputValue + this.state.unit;
+    }
+
     onChange(inputValue === null ? resetValue ?? null : inputValue);
   }
 
@@ -116,6 +166,28 @@ export default class NumberControl extends React.Component<NumberProps, any> {
     return value;
   }
 
+  // 单位选项的变更
+  handleChangeUnit(option: Option) {
+    let value = this.props.value;
+    const prevUnitValue = this.state.unit;
+    this.setState({unit: option.value}, () => {
+      if (value) {
+        value = value.replace(prevUnitValue, '');
+        this.props.onChange(value + this.state.unit);
+      }
+    });
+  }
+
+  componentDidUpdate(prevProps: NumberProps) {
+    if (this.props.value !== prevProps.value) {
+      const unit = this.getUnit();
+      this.setState({unit: unit});
+    }
+    if (this.props.unitOptions !== prevProps.unitOptions) {
+      this.setState({unitOptions: normalizeOptions(this.props.unitOptions)});
+    }
+  }
+
   render(): JSX.Element {
     const {
       className,
@@ -132,6 +204,7 @@ export default class NumberControl extends React.Component<NumberProps, any> {
       suffix,
       prefix,
       kilobitSeparator,
+      unitOptions,
       readOnly
     } = this.props;
 
@@ -141,29 +214,43 @@ export default class NumberControl extends React.Component<NumberProps, any> {
     if (typeof finalPrecision === 'number') {
       precisionProps.precision = finalPrecision;
     }
+
+    const unit = this.state?.unit;
     // 数据格式化
     const formatter = (value: string | number) => {
       // 增加千分分隔
       if (kilobitSeparator && value) {
         value = (value + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       }
-      return (prefix ? prefix : '')
-       + value
-       + (suffix ? suffix : '');
-    }
+      return (prefix ? prefix : '') + value + (suffix ? suffix : '');
+    };
     // 将数字还原
     const parser = (value: string) => {
       if (value) {
         prefix && (value = value.replace(prefix, ''));
         suffix && (value = value.replace(suffix, ''));
-        kilobitSeparator &&  (value = value.replace(/,/g, ''));
+        kilobitSeparator && (value = value.replace(/,/g, ''));
       }
       return value;
-    }
+    };
+
+    const finalValue =
+      unit && value && typeof value === 'string'
+        ? value.replace(unit, '')
+        : value;
+
     return (
-      <div className={cx(`${ns}NumberControl`, className)}>
+      <div
+        className={cx(
+          `${ns}NumberControl`,
+          {
+            [`${ns}NumberControl--withUnit`]: unitOptions
+          },
+          className
+        )}
+      >
         <NumberInput
-          value={value}
+          value={finalValue}
           step={step}
           max={this.filterNum(max)}
           min={this.filterNum(min)}
@@ -177,6 +264,14 @@ export default class NumberControl extends React.Component<NumberProps, any> {
           borderMode={borderMode}
           readOnly={readOnly}
         />
+        {unitOptions ? (
+          <Select
+            value={unit}
+            clearable={false}
+            options={this.state.unitOptions || []}
+            onChange={this.handleChangeUnit}
+          />
+        ) : null}
       </div>
     );
   }

package/src/renderers/Form/InputRange.tsx

@@ -7,6 +7,7 @@ import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import InputRange from '../../components/Range';
 import {Icon} from '../../components/icons';
 import {FormOptionsControl} from './Options';
+import {stripNumber} from '../../utils/tpl-builtin';
 
 /**
  * Range
@@ -205,7 +206,7 @@ export default class RangeControl extends React.PureComponent<
 
   handleChange(value: any) {
     this.setState({
-      value: value,
+      value: stripNumber(value),
       minValue: value.min,
       maxValue: value.max
     });
@@ -253,6 +254,8 @@ export default class RangeControl extends React.PureComponent<
             min: value.min,
             max: value.max
           };
+    } else {
+      endValue = stripNumber(value);
     }
     const {onChange} = this.props;
     this.setState(
@@ -268,7 +271,7 @@ export default class RangeControl extends React.PureComponent<
 
     return typeof step !== 'number' || step >= 1 || step < 0
       ? 0
-      : step.toString().split('.')[1].length;
+      : step.toString().split('.')[1]?.length;
   }
 
   getValue(value: any, type?: string) {

package/src/renderers/Form/InputTable.tsx

@@ -30,6 +30,26 @@ export interface TableControlSchema
    */
   addable?: boolean;
 
+  /**
+   * 可复制新增
+   */
+  copyable?: boolean;
+
+  /**
+   * 复制按钮文字
+   */
+  copyBtnLabel?: string;
+
+  /**
+   * 复制按钮图标
+   */
+  copyBtnIcon?: string;
+
+  /**
+   * 是否显示复制按钮
+   */
+  copyAddBtn?: boolean;
+
   /**
    * 是否可以拖拽排序
    */
@@ -41,12 +61,12 @@ export interface TableControlSchema
   addApi?: SchemaApi;
 
   /**
-   * 新增按钮
+   * 新增按钮文字
    */
   addBtnLabel?: string;
 
   /**
-   * 新增图标
+   * 新增按钮图标
    */
   addBtnIcon?: string;
 
@@ -73,12 +93,12 @@ export interface TableControlSchema
   /**
    * 更新按钮名称
    */
-  updateBtnLabel?: string;
+  editBtnLabel?: string;
 
   /**
    * 更新按钮图标
    */
-  updateBtnIcon?: string;
+  editBtnIcon?: string;
 
   /**
    * 确认按钮文字
@@ -172,7 +192,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     placeholder: '空',
     scaffold: {},
     addBtnIcon: 'plus',
-    updateBtnIcon: 'pencil',
+    copyBtnIcon: 'copy',
+    editBtnIcon: 'pencil',
     deleteBtnIcon: 'minus',
     confirmBtnIcon: 'check',
     cancelBtnIcon: 'close',
@@ -188,6 +209,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     'showAddBtn',
     'addable',
     'removable',
+    'copyable',
     'editable',
     'addApi',
     'updateApi',
@@ -423,6 +445,26 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     return onAction && onAction(action, ctx, ...rest);
   }
 
+  copyItem(index: number) {
+    const {needConfirm} = this.props;
+    const items = this.state.items.concat();
+
+    items.splice(index + 1, 0, items[index]);
+    index = Math.min(index + 1, items.length - 1);
+    this.setState(
+      {
+        items
+      },
+      () => {
+        if (needConfirm === false) {
+          this.emitValue();
+        } else {
+          this.startEdit(index, true);
+        }
+      }
+    );
+  }
+
   addItem(index: number) {
     const {needConfirm, scaffold, columns} = this.props;
     const items = this.state.items.concat();
@@ -653,6 +695,38 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       });
     }
 
+    if (props.copyable && props.showCopyBtn !== false) {
+      btns.push({
+        children: ({
+          key,
+          rowIndex,
+          offset
+        }: {
+          key: any;
+          rowIndex: number;
+          offset: number;
+        }) =>
+          ~this.state.editIndex && needConfirm !== false ? null : (
+            <Button
+              classPrefix={ns}
+              size="sm"
+              key={key}
+              level="link"
+              tooltip={__('Table.copyRow')}
+              tooltipContainer={
+                env && env.getModalContainer ? env.getModalContainer : undefined
+              }
+              onClick={this.copyItem.bind(this, rowIndex + offset, undefined)}
+            >
+              {props.copyBtnLabel ? <span>{props.copyBtnLabel}</span> : null}
+              {props.copyBtnIcon ? (
+                <Icon icon={props.copyBtnIcon} className="icon" />
+              ) : null}
+            </Button>
+          )
+      });
+    }
+
     if (props.needConfirm === false) {
       columns = columns.map(column => {
         const quickEdit = column.quickEdit;
@@ -716,11 +790,16 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                 }
                 onClick={() => this.startEdit(rowIndex + offset)}
               >
-                {props.updateBtnLabel ? (
-                  <span>{props.updateBtnLabel}</span>
+                {props.updateBtnLabel || props.editBtnLabel ? (
+                  <span>{props.updateBtnLabel || props.editBtnLabel}</span>
                 ) : null}
-                {props.updateBtnIcon ? (
-                  <Icon icon={props.updateBtnIcon} className="icon" />
+                {/* 兼容之前的写法 */}
+                {typeof props.updateBtnIcon !== 'undefined' ? (
+                  props.updateBtnIcon ? (
+                    <Icon icon={props.updateBtnIcon} className="icon" />
+                  ) : null
+                ) : props.editBtnIcon ? (
+                  <Icon icon={props.editBtnIcon} className="icon" />
                 ) : null}
               </Button>
             )

package/src/renderers/Form/NestedSelect.tsx

@@ -602,7 +602,7 @@ export default class NestedSelectControl extends React.Component<
     return (
       <Overlay
         target={this.getTarget}
-        container={popOverContainer || findDOMNode(this)?.parentElement}
+        container={popOverContainer || (() => findDOMNode(this))}
         placement={'auto'}
         show
       >

package/src/renderers/Form/Options.tsx

@@ -272,6 +272,7 @@ export function registerOptionsControl(config: OptionsConfig) {
 
     reaction?: () => void;
     input: any;
+    mounted = false;
 
     constructor(props: OptionsProps) {
       super(props);
@@ -303,7 +304,7 @@ export function registerOptionsControl(config: OptionsConfig) {
 
         this.reaction = reaction(
           () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
-          () => this.forceUpdate()
+          () => this.mounted && this.forceUpdate()
         );
         // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
         if (
@@ -340,6 +341,7 @@ export function registerOptionsControl(config: OptionsConfig) {
     }
 
     componentDidMount() {
+      this.mounted = true;
       this.normalizeValue();
 
       if (this.props.value) {

package/src/renderers/Form/index.tsx

@@ -1514,23 +1514,8 @@ export default class Form extends React.Component<FormProps, object> {
       formStore
     } = this.props;
 
-    // trace(true);
-    // console.log('Form');
-
     let body: JSX.Element = this.renderBody();
 
-    // props有formStore 说明是嵌套表单 || 不允许在表单的按钮组中再直接套表单
-    if (formStore) {
-      body = (
-        <>
-          <Alert level="warning" showCloseButton>
-            <p>{__('Form.nestedError')}</p>
-          </Alert>
-          {body}
-        </>
-      );
-    }
-
     if (wrapWithPanel) {
       body = render(
         'body',

package/src/renderers/Form/wrapControl.tsx

@@ -506,8 +506,8 @@ export function wrapControl<
 
             if (
               // 如果配置了 minLength 或者 maxLength 就切成及时验证
-              // (typeof maxLength && maxLength) ||
-              // (typeof minLength && minLength) ||
+              (typeof maxLength && maxLength) ||
+              (typeof minLength && minLength) ||
               validateOnChange === true ||
               (validateOnChange !== false && (formSubmited || validated))
             ) {

package/src/renderers/Json.tsx

@@ -97,6 +97,15 @@ export class JSONField extends React.Component<JSONProps, object> {
       }
     }
 
+    let jsonThemeValue = jsonTheme;
+    if (isPureVariable(jsonTheme)) {
+      jsonThemeValue = resolveVariableAndFilter(
+        jsonTheme,
+        this.props.data,
+        '| raw'
+      );
+    }
+
     // JsonView 只支持对象，所以不是对象格式需要转成对象格式。
     if (data && ~['string', 'number'].indexOf(typeof data)) {
       data = {
@@ -112,7 +121,7 @@ export class JSONField extends React.Component<JSONProps, object> {
           <JsonView
             name={false}
             src={data}
-            theme={(jsonTheme as any) ?? 'rjv-default'}
+            theme={(jsonThemeValue as any) ?? 'rjv-default'}
             shouldCollapse={this.shouldExpandNode}
             enableClipboard={false}
             iconStyle="square"

package/src/renderers/List.tsx

@@ -15,7 +15,8 @@ import {
   difference,
   isVisible,
   isDisabled,
-  noop
+  noop,
+  isClickOnInput
 } from '../utils/helper';
 import {
   isPureVariable,
@@ -215,6 +216,11 @@ export interface ListSchema extends BaseSchema {
    * 大小
    */
   size?: 'sm' | 'base';
+
+  /**
+   * 点击列表项的行为
+   */
+  itemAction?: ActionSchema;
 }
 
 export interface Column {
@@ -919,6 +925,7 @@ export default class List extends React.Component<ListProps, object> {
       onAction,
       hideCheckToggler,
       checkOnItemClick,
+      itemAction,
       affixHeader,
       classnames: cx,
       size,
@@ -969,6 +976,7 @@ export default class List extends React.Component<ListProps, object> {
                   itemIndex: item.index,
                   hideCheckToggler,
                   checkOnItemClick,
+                  itemAction,
                   selected: item.checked,
                   onCheck: this.handleCheck,
                   dragging: store.dragging,
@@ -1018,6 +1026,7 @@ export interface ListItemProps
   itemIndex?: number;
   checkable?: boolean;
   checkOnItemClick?: boolean;
+  itemAction?: ActionSchema;
 }
 export class ListItem extends React.Component<ListItemProps> {
   static defaultProps: Partial<ListItemProps> = {
@@ -1025,7 +1034,11 @@ export class ListItem extends React.Component<ListItemProps> {
     titleClassName: 'h5'
   };
 
-  static propsList: Array<string> = ['avatarClassName', 'titleClassName'];
+  static propsList: Array<string> = [
+    'avatarClassName',
+    'titleClassName',
+    'itemAction'
+  ];
 
   constructor(props: ListItemProps) {
     super(props);
@@ -1037,20 +1050,15 @@ export class ListItem extends React.Component<ListItemProps> {
   }
 
   handleClick(e: React.MouseEvent<HTMLDivElement>) {
-    const target: HTMLElement = e.target as HTMLElement;
-    const ns = this.props.classPrefix;
-    let formItem;
-
-    if (
-      !e.currentTarget.contains(target) ||
-      ~['INPUT', 'TEXTAREA'].indexOf(target.tagName) ||
-      ((formItem = target.closest(`button, a, .${ns}Form-item`)) &&
-        e.currentTarget.contains(formItem))
-    ) {
+    if (isClickOnInput(e)) {
+      return;
+    }
+    const {itemAction, onAction, item} = this.props;
+    if (itemAction) {
+      onAction && onAction(e, itemAction, item?.data);
       return;
     }
 
-    const item = this.props.item;
     this.props.onCheck && this.props.onCheck(item);
   }
 
@@ -1160,10 +1168,7 @@ export class ListItem extends React.Component<ListItemProps> {
                     ))}
                 </div>
             );
-        } else */ if (
-      typeof node === 'string' ||
-      typeof node === 'number'
-    ) {
+        } else */ if (typeof node === 'string' || typeof node === 'number') {
       return render(region, node, {key}) as JSX.Element;
     }
 
@@ -1261,7 +1266,8 @@ export class ListItem extends React.Component<ListItemProps> {
       render,
       checkable,
       classnames: cx,
-      actionsPosition
+      actionsPosition,
+      itemAction
     } = this.props;
 
     const avatar = filter(avatarTpl, data);
@@ -1271,9 +1277,16 @@ export class ListItem extends React.Component<ListItemProps> {
 
     return (
       <div
-        onClick={checkOnItemClick && checkable ? this.handleClick : undefined}
+        onClick={
+          (checkOnItemClick && checkable) || itemAction
+            ? this.handleClick
+            : undefined
+        }
         className={cx(
           `ListItem ListItem--actions-at-${actionsPosition || 'right'}`,
+          {
+            'ListItem--hasItemAction': itemAction
+          },
           className
         )}
       >

package/src/renderers/Page.tsx

@@ -29,6 +29,8 @@ import {
 } from '../Schema';
 import {SchemaRemark} from './Remark';
 import {onAction} from 'mobx-state-tree';
+import mapValues from 'lodash/mapValues';
+import {resolveVariable} from '../utils/tpl-builtin';
 
 /**
  * 样式属性名及值
@@ -175,6 +177,13 @@ export interface PageSchema extends BaseSchema {
    * 如果配置了，以配置为主。
    */
   regions?: Array<'aside' | 'body' | 'toolbar' | 'header'>;
+
+  /**
+   * 自定义样式
+   */
+  style?: {
+    [propName: string]: any;
+  };
 }
 
 export interface PageProps
@@ -362,6 +371,8 @@ export default class Page extends React.Component<PageProps> {
       JSON.stringify(props.cssVars) !== JSON.stringify(prevProps.cssVars)
     ) {
       this.updateVarStyle();
+    } else if (props.defaultData !== prevProps.defaultData) {
+      store.reInitData(props.defaultData);
     }
   }
 
@@ -645,6 +656,8 @@ export default class Page extends React.Component<PageProps> {
       showErrorMsg,
       initApi,
       regions,
+      style,
+      data,
       translate: __
     } = this.props;
 
@@ -659,10 +672,16 @@ export default class Page extends React.Component<PageProps> {
       ? ~regions.indexOf('aside')
       : aside && (!Array.isArray(aside) || aside.length);
 
+    let styleVar =
+      typeof style === 'string'
+        ? resolveVariable(style, data) || {}
+        : mapValues(style, s => resolveVariable(s, data) || s);
+
     return (
       <div
         className={cx(`Page`, hasAside ? `Page--withSidebar` : '', className)}
         onClick={this.handleClick}
+        style={styleVar}
       >
         {hasAside ? (
           <div className={cx(`Page-aside`, asideClassName)}>