amis-editor 5.2.0-beta.1 → 5.2.0-beta.2

package/esm/renderer/FormulaControl.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @file 表达式控件
+ */
+/// <reference types="lodash" />
+import React from 'react';
+import type { VariableItem, FuncGroup } from 'amis-ui/lib/components/formula/Editor';
+import { FormControlProps } from 'amis-core';
+import type { BaseEventContext } from 'amis-editor-core';
+import { EditorManager } from 'amis-editor-core';
+export interface FormulaControlProps extends FormControlProps {
+    /**
+     * evalMode 即直接就是表达式，否则
+     * 需要 ${这里面才是表达式}
+     * 默认为 true，即默认不会将表达式用 ${} 包裹
+     */
+    evalMode?: boolean;
+    manager?: EditorManager;
+    /**
+     * 用于提示的变量集合，默认为空
+     */
+    variables?: Array<VariableItem>;
+    /**
+     * 变量展现模式，可选值：'tabs' ｜ 'tree'
+     */
+    variableMode?: 'tabs' | 'tree';
+    /**
+     * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+     * 如果有扩充，则需要传。
+     */
+    functions: Array<FuncGroup>;
+    /**
+     * 顶部标题，默认为表达式
+     */
+    header: string;
+    /**
+     * 编辑器上下文数据，用于获取字段所在Form的其他字段
+     */
+    context: BaseEventContext;
+    /**
+     * simple 简易模式
+     * 备注: 为 true 时，仅显示 公式编辑器 icon 按钮
+     */
+    simple?: boolean;
+    /**
+     * 自定义渲染器:
+     * 备注: 可用于设置指定组件类型编辑默认值
+     */
+    rendererSchema?: any;
+    /**
+     * 自定义渲染器 是否需要浅色边框包裹，默认不包裹
+     */
+    rendererWrapper?: boolean;
+    /**
+     * 是否需要剔除属性
+     */
+    needDeleteProps?: Array<string>;
+    /**
+     * 期望的value类型，可用于校验公式运算结果类型是否匹配
+     * 备注1: 当前支持识别的类型有 int、boolean、date、object、array、string；
+     * 备注2: 开关组件可以设置 true 和 false 对应的值，如果设置了就不是普通的 boolean 类型；
+     * 备注3: 默认都是字符串类型；
+     */
+    valueType?: string;
+    /**
+     * 不在表单项上触发时，传入想要获取变量的 表单props 获取对应变量
+     */
+    formProps?: any;
+    /**
+     * 是否使用外部的Form数据
+     */
+    useExternalFormData?: boolean;
+}
+interface FormulaControlState {
+    /** 变量数据 */
+    variables: any;
+    variableMode?: 'tree' | 'tabs';
+    evalMode?: boolean;
+}
+export default class FormulaControl extends React.Component<FormulaControlProps, FormulaControlState> {
+    static defaultProps: Partial<FormulaControlProps>;
+    isUnmount: boolean;
+    constructor(props: FormulaControlProps);
+    componentDidUpdate(prevProps: FormulaControlProps): void;
+    componentWillUnmount(): void;
+    normalizeVariables(variables: any): any[];
+    /**
+     * 将 ${xx}（非 \${xx}）替换成 \${xx}
+     * 备注: 手动编辑时，自动处理掉 ${xx}，避免识别成 公式表达式
+     */
+    replaceExpression(expression: any): any;
+    isLoopExpression(expression: any, selfName: string): boolean;
+    isExpectType(value: any): boolean;
+    resolveVariablesFromScope(): Promise<any>;
+    handleConfirm(value: any): void;
+    handleSimpleInputChange: import("lodash").DebouncedFunc<(value: any) => void>;
+    handleInputChange: (value: any) => void;
+    filterCustomRendererProps(rendererSchema: any): any;
+    renderFormulaValue(item: any): JSX.Element;
+    getContextData(): any;
+    render(): JSX.Element;
+}
+export declare class FormulaControlRenderer extends FormulaControl {
+}
+export {};

package/esm/renderer/FormulaControl.js

@@ -0,0 +1,437 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __spreadArray, __awaiter, __generator, __assign, __rest, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import debounce from 'lodash/debounce';
+import uniqBy from 'lodash/uniqBy';
+import isNumber from 'lodash/isNumber';
+import isBoolean from 'lodash/isBoolean';
+import isPlainObject from 'lodash/isPlainObject';
+import isArray from 'lodash/isArray';
+import isString from 'lodash/isString';
+import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
+import cx from 'classnames';
+import { isExpression, FormulaExec, InputBox, ResultBox, PickerContainer, Button, Icon, FormItem } from 'amis';
+import { FormulaEditor } from 'amis-ui/lib/components/formula/Editor';
+import { autobind } from 'amis-editor-core';
+import { dataMapping } from 'amis-core';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 表达式控件
+ */
+
+var FormulaControl =
+/** @class */
+function (_super) {
+  __extends(FormulaControl, _super);
+
+  function FormulaControl(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.handleSimpleInputChange = debounce(function (value) {
+      var _a, _b;
+
+      var curValue = _this.replaceExpression(value);
+
+      (_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, curValue);
+    }, 250, {
+      trailing: true,
+      leading: false
+    });
+
+    _this.handleInputChange = function (value) {
+      var _a, _b;
+
+      (_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+    };
+
+    _this.state = {
+      variables: _this.normalizeVariables(props.variables),
+      variableMode: 'tabs',
+      evalMode: true
+    };
+    return _this;
+  }
+
+  FormulaControl.prototype.componentDidUpdate = function (prevProps) {
+    var _this = this; // 优先使用props中的变量数据
+
+
+    if (!this.props.variables) {
+      // 从amis数据域中取变量数据
+      this.resolveVariablesFromScope().then(function (variables) {
+        if (Array.isArray(variables)) {
+          var vars = variables.filter(function (item) {
+            var _a;
+
+            return (_a = item.children) === null || _a === void 0 ? void 0 : _a.length;
+          });
+
+          if (!_this.isUnmount && !isEqual(vars, _this.state.variables)) {
+            _this.setState({
+              variables: vars
+            });
+          }
+        }
+      });
+    }
+
+    if (this.props.data !== prevProps.data) {
+      this.setState({
+        variables: dataMapping(this.props.variables, this.props.data)
+      });
+    }
+  };
+
+  FormulaControl.prototype.componentWillUnmount = function () {
+    this.isUnmount = true;
+  }; // 组件默认值设置交互中未使用
+
+
+  FormulaControl.prototype.normalizeVariables = function (variables) {
+    var _a, _b, _c;
+
+    if (!variables) {
+      return [];
+    }
+
+    if (variables && variables.some(function (item) {
+      return isExpression(item.children);
+    })) {
+      variables = dataMapping(variables, this.props.data);
+    }
+
+    var _d = this.props,
+        context = _d.context,
+        evalMode = _d.evalMode; // 自身字段
+
+    var field = (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name;
+    var ancestorField = (_c = context === null || context === void 0 ? void 0 : context.node) === null || _c === void 0 ? void 0 : _c.ancestorField;
+    return uniqBy(__spreadArray(__spreadArray(__spreadArray([], Array.isArray(variables) ? variables : [], true), ancestorField ? ancestorField.map(function (item) {
+      return {
+        label: item,
+        value: evalMode ? "this.".concat(item) : item
+      };
+    }) : [], true), field ? [{
+      label: field,
+      value: "this.".concat(field)
+    }] : [], true), 'value');
+  };
+  /**
+   * 将 ${xx}（非 \${xx}）替换成 \${xx}
+   * 备注: 手动编辑时，自动处理掉 ${xx}，避免识别成 公式表达式
+   */
+
+
+  FormulaControl.prototype.replaceExpression = function (expression) {
+    if (expression && isString(expression) && isExpression(expression)) {
+      return expression.replace(/(^|[^\\])\$\{/g, '\\${');
+    }
+
+    return expression;
+  }; // 根据 name 值 判断当前表达式是否 存在循环引用问题
+
+
+  FormulaControl.prototype.isLoopExpression = function (expression, selfName) {
+    if (!expression || !selfName || !isString(expression)) {
+      return false;
+    }
+
+    var variables = FormulaExec.collect(expression);
+    return variables.some(function (variable) {
+      return variable === selfName;
+    });
+  }; // 判断是否是期望类型
+
+
+  FormulaControl.prototype.isExpectType = function (value) {
+    if (value === null || value === undefined) {
+      return true; // 数值为空不进行类型识别
+    }
+
+    var expectType = this.props.valueType;
+
+    if (expectType === null || expectType === undefined) {
+      return true; // expectType为空，则不进行类型识别
+    } // 当前数据域
+
+
+    var curData = this.getContextData();
+
+    if (expectType === 'number' && isNumber(value) || expectType === 'boolean' && isBoolean(value) || expectType === 'object' && isPlainObject(value) || expectType === 'array' && isArray(value)) {
+      return true;
+    } else if (isString(value)) {
+      if (isExpression(value)) {
+        // 根据公式运算结果判断类型
+        var formulaValue = FormulaExec.formula(value, curData);
+
+        if (expectType === 'number' && isNumber(formulaValue) || expectType === 'boolean' && isBoolean(formulaValue) || expectType === 'object' && isPlainObject(formulaValue) || expectType === 'array' && isArray(formulaValue) || expectType === 'string' && isString(formulaValue)) {
+          return true;
+        }
+      } else if (expectType === 'string') {
+        // 非公式字符串
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  FormulaControl.prototype.resolveVariablesFromScope = function () {
+    var _a;
+
+    return __awaiter(this, void 0, void 0, function () {
+      var _b, node, manager, dataPropsAsOptions;
+
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            _b = this.props.formProps || this.props, node = _b.node, manager = _b.manager;
+            return [4
+            /*yield*/
+            , manager === null || manager === void 0 ? void 0 : manager.getContextSchemas(node)];
+
+          case 1:
+            _c.sent();
+
+            dataPropsAsOptions = (_a = manager === null || manager === void 0 ? void 0 : manager.dataSchema) === null || _a === void 0 ? void 0 : _a.getDataPropsAsOptions();
+
+            if (dataPropsAsOptions) {
+              return [2
+              /*return*/
+              , dataPropsAsOptions.map(function (item) {
+                return __assign({
+                  selectMode: 'tree'
+                }, item);
+              })];
+            }
+
+            return [2
+            /*return*/
+            , []];
+        }
+      });
+    });
+  };
+
+  FormulaControl.prototype.handleConfirm = function (value) {
+    var _a, _b;
+
+    (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+  }; // 剔除掉一些用不上的属性
+
+
+  FormulaControl.prototype.filterCustomRendererProps = function (rendererSchema) {
+    var _a;
+
+    var _b = this.props,
+        data = _b.data,
+        name = _b.name;
+    var curRendererSchema = null;
+
+    if (rendererSchema) {
+      curRendererSchema = Object.assign({}, rendererSchema, data, {
+        type: (_a = rendererSchema.type) !== null && _a !== void 0 ? _a : data.type
+      }); // 默认要剔除的字段
+
+      var deleteProps = ['label', 'id', '$$id', 'className', 'style', 'readOnly', 'horizontal', 'size', 'remark', 'labelRemark', 'hidden', 'hiddenOn', 'visible', 'visibleOn', 'disabled', 'disabledOn', 'required', 'requiredOn', 'className', 'labelClassName', 'labelAlign', 'inputClassName', 'description', 'autoUpdate', 'prefix', 'suffix', 'unitOptions', 'keyboard', 'kilobitSeparator', 'value']; // 当前组件要剔除的字段
+
+      if (this.props.needDeleteProps) {
+        deleteProps.push.apply(deleteProps, this.props.needDeleteProps);
+      }
+
+      if (name && name === 'min') {
+        // 避免min影响自身默认值设置
+        deleteProps.push('min');
+      }
+
+      if (name && name === 'max') {
+        // 避免max影响自身默认值设置
+        deleteProps.push('max');
+      }
+
+      curRendererSchema = omit(curRendererSchema, deleteProps); // 避免没有清空icon
+
+      if (curRendererSchema.clearable !== undefined && !curRendererSchema.clearable) {
+        curRendererSchema.clearable = true;
+      } // 设置统一的占位提示
+
+
+      if (curRendererSchema.type === 'select') {
+        curRendererSchema.placeholder = i18n("51d8a85a3c59453eed398eb8f5d35585");
+        curRendererSchema.inputClassName = 'ae-editor-FormulaControl-select-style';
+      } else {
+        curRendererSchema.placeholder = i18n("cb73fbd12620c6ff4d7e5d1047c3be4d");
+      } // 设置popOverContainer
+
+
+      curRendererSchema.popOverContainer = window.document.body;
+    }
+
+    return curRendererSchema;
+  };
+
+  FormulaControl.prototype.renderFormulaValue = function (item) {
+    var html = {
+      __html: item.html
+    }; // bca-disable-next-line
+
+    return React__default.createElement("span", {
+      dangerouslySetInnerHTML: html
+    });
+  };
+
+  FormulaControl.prototype.getContextData = function () {
+    var _a, _b, _c, _d; // 当前数据域
+
+
+    return ((_c = (_b = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.__super) === null || _b === void 0 ? void 0 : _b.__props__) === null || _c === void 0 ? void 0 : _c.data) || ((_d = this.props.manager) === null || _d === void 0 ? void 0 : _d.amisStore) || {};
+  };
+
+  FormulaControl.prototype.render = function () {
+    var _this = this;
+
+    var _a, _b;
+
+    var _c = this.props,
+        className = _c.className,
+        label = _c.label,
+        value = _c.value,
+        header = _c.header;
+        _c.variables;
+        var placeholder = _c.placeholder,
+        simple = _c.simple,
+        evalMode = _c.evalMode,
+        rendererSchema = _c.rendererSchema,
+        rendererWrapper = _c.rendererWrapper,
+        manager = _c.manager,
+        _d = _c.useExternalFormData,
+        useExternalFormData = _d === void 0 ? false : _d,
+        render = _c.render,
+        rest = __rest(_c, ["className", "label", "value", "header", "variables", "placeholder", "simple", "evalMode", "rendererSchema", "rendererWrapper", "manager", "useExternalFormData", "render"]);
+
+    var labelText = typeof label === 'string' ? label : ''; // 自身字段
+
+    var selfName = (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name; // 判断是否含有公式表达式
+
+    var isExpr = isExpression(value); // 判断当前是否有循环引用，备注：非精准识别，待优化
+
+    var isLoop = false;
+
+    if (isExpr && (rendererSchema === null || rendererSchema === void 0 ? void 0 : rendererSchema.name)) {
+      isLoop = (rendererSchema === null || rendererSchema === void 0 ? void 0 : rendererSchema.name) ? this.isLoopExpression(value, rendererSchema === null || rendererSchema === void 0 ? void 0 : rendererSchema.name) : false;
+    } // 判断是否含有公式表达式
+
+
+    var isTypeError = !this.isExpectType(value);
+    var isError = isLoop || isTypeError;
+    var highlightValue = isExpression(value) ? FormulaEditor.highlightValue(value, this.state.variables, evalMode !== null && evalMode !== void 0 ? evalMode : this.state.evalMode) : value;
+    return React__default.createElement("div", {
+      className: cx('ae-editor-FormulaControl', isError ? 'is-has-tooltip' : '', className)
+    }, !simple && !rendererSchema && !isExpr && React__default.createElement(InputBox, {
+      className: "ae-editor-FormulaControl-input",
+      value: value,
+      clearable: true,
+      placeholder: placeholder,
+      onChange: this.handleSimpleInputChange
+    }), !simple && rendererSchema && !isExpr && React__default.createElement("div", {
+      className: cx('ae-editor-FormulaControl-custom-renderer', rendererWrapper ? 'border-wrapper' : '')
+    }, render('inner', this.filterCustomRendererProps(rendererSchema), {
+      inputOnly: true,
+      value: value,
+      data: useExternalFormData ? __assign({}, this.props.data) : {},
+      onChange: this.handleSimpleInputChange,
+      manager: manager
+    })), !simple && isExpr && React__default.createElement(ResultBox, {
+      className: cx('ae-editor-FormulaControl-ResultBox', isError ? 'is-error' : ''),
+      allowInput: false,
+      clearable: true,
+      value: value,
+      result: highlightValue,
+      itemRender: this.renderFormulaValue,
+      onChange: this.handleInputChange,
+      onResultChange: function () {
+        _this.handleInputChange(undefined);
+      }
+    }), React__default.createElement(PickerContainer, {
+      showTitle: false,
+      bodyRender: function (_a) {
+        var _b;
+
+        var value = _a.value,
+            onChange = _a.onChange;
+        return React__default.createElement(FormulaEditor, __assign({}, rest, {
+          evalMode: evalMode !== null && evalMode !== void 0 ? evalMode : _this.state.evalMode,
+          variableMode: (_b = rest.variableMode) !== null && _b !== void 0 ? _b : _this.state.variableMode,
+          variables: _this.state.variables,
+          header: header || labelText,
+          value: isString(value) ? value : undefined,
+          onChange: onChange,
+          selfVariableName: selfName
+        }));
+      },
+      value: value,
+      onConfirm: this.handleConfirm,
+      size: "md"
+    }, function (_a) {
+      var _b;
+
+      var onClick = _a.onClick;
+      return React__default.createElement(Button, {
+        size: "sm",
+        tooltip: i18n("303efd5ba79e639001b4328cd266dddc"),
+        tooltipPlacement: "left",
+        onClick: onClick
+      }, React__default.createElement(Icon, {
+        icon: "function",
+        className: cx('ae-editor-FormulaControl-icon', 'icon', (_b = {}, _b['is-filled'] = !!value, _b))
+      }));
+    }), isExpr && !isError && React__default.createElement("div", {
+      className: "desc-msg info-msg",
+      title: value
+    }, value), isError && React__default.createElement("div", {
+      className: "desc-msg error-msg"
+    }, isLoop ? i18n("7d92f998d24da41b58db140b1864f773") : i18n("b5cc1cd60cd694f45142dc52a5bf53fc")));
+  };
+
+  FormulaControl.defaultProps = {
+    simple: false
+  };
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", Object)], FormulaControl.prototype, "replaceExpression", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, String]), __metadata("design:returntype", Boolean)], FormulaControl.prototype, "isLoopExpression", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", Boolean)], FormulaControl.prototype, "isExpectType", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FormulaControl.prototype, "handleConfirm", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FormulaControl.prototype, "filterCustomRendererProps", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FormulaControl.prototype, "renderFormulaValue", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], FormulaControl.prototype, "getContextData", null);
+
+  return FormulaControl;
+}(React__default.Component);
+
+/** @class */
+(function (_super) {
+  __extends(FormulaControlRenderer, _super);
+
+  function FormulaControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  FormulaControlRenderer = __decorate([FormItem({
+    type: 'ae-formulaControl'
+  })], FormulaControlRenderer);
+  return FormulaControlRenderer;
+})(FormulaControl);
+
+export { FormulaControl as default };

package/esm/renderer/GoConfigControl.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file 进行详细配置
+ */
+import React from 'react';
+import { EditorManager } from 'amis-editor-core';
+import { FormControlProps } from 'amis-core';
+export interface GoCongigControlProps extends FormControlProps {
+    label: string;
+    compId: string | ((data: any) => string);
+    manager: EditorManager;
+}
+export declare class GoConfigControl extends React.PureComponent<GoCongigControlProps, any> {
+    onClick(): void;
+    render(): JSX.Element;
+}
+export declare class GoConfigControlRenderer extends GoConfigControl {
+}

package/esm/renderer/GoConfigControl.js

@@ -0,0 +1,74 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import cx from 'classnames';
+import { toast, Renderer } from 'amis';
+import { autobind } from 'amis-core';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 进行详细配置
+ */
+
+var GoConfigControl =
+/** @class */
+function (_super) {
+  __extends(GoConfigControl, _super);
+
+  function GoConfigControl() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  GoConfigControl.prototype.onClick = function () {
+    var _a = this.props,
+        _b = _a.data,
+        ctx = _b === void 0 ? {} : _b,
+        compId = _a.compId,
+        manager = _a.manager;
+    var id = typeof compId === 'string' ? compId : compId(ctx);
+
+    if (!id) {
+      toast.error(i18n("b51796f5778fdc31bac73769a85f89c7"));
+      return;
+    }
+
+    manager.setActiveId(id);
+  };
+
+  GoConfigControl.prototype.render = function () {
+    var _a = this.props,
+        className = _a.className,
+        label = _a.label;
+        _a.data;
+    return React__default.createElement("div", {
+      className: cx('ae-GoConfig', className),
+      onClick: this.onClick
+    }, label, React__default.createElement("div", {
+      className: cx('ae-GoConfig-trigger')
+    }, "\u53BB\u7F16\u8F91"));
+  };
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], GoConfigControl.prototype, "onClick", null);
+
+  return GoConfigControl;
+}(React__default.PureComponent);
+
+/** @class */
+(function (_super) {
+  __extends(GoConfigControlRenderer, _super);
+
+  function GoConfigControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  GoConfigControlRenderer = __decorate([Renderer({
+    type: 'ae-go-config'
+  })], GoConfigControlRenderer);
+  return GoConfigControlRenderer;
+})(GoConfigControl);
+
+export { GoConfigControl };