amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/lib/renderer/FormulaControl.js

@@ -0,0 +1,324 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var debounce = require('lodash/debounce');
+var uniqBy = require('lodash/uniqBy');
+var isNumber = require('lodash/isNumber');
+var isBoolean = require('lodash/isBoolean');
+var isPlainObject = require('lodash/isPlainObject');
+var isArray = require('lodash/isArray');
+var isString = require('lodash/isString');
+var isEqual = require('lodash/isEqual');
+var omit = require('lodash/omit');
+var cx = require('classnames');
+var amis = require('amis');
+var Editor = require('amis-ui/lib/components/formula/Editor');
+var AMisCodeEditor = require('amis-editor-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
+var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
+var isBoolean__default = /*#__PURE__*/_interopDefaultLegacy(isBoolean);
+var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
+var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
+var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+/**
+ * @file 表达式控件
+ */
+var FormulaControl = /** @class */ (function (_super) {
+    tslib.__extends(FormulaControl, _super);
+    function FormulaControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleSimpleInputChange = debounce__default["default"](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, _this.replaceExpression(value));
+        }, 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: false
+        };
+        return _this;
+    }
+    FormulaControl.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+        // 优先使用props中的变量数据
+        if (!this.props.variables) {
+            // 从amis数据域中取变量数据
+            this.resolveVariablesFromScope().then(function (variables) {
+                if (!_this.isUnmount && !isEqual__default["default"](variables, _this.state.variables)) {
+                    _this.setState({
+                        variables: variables
+                    });
+                }
+            });
+        }
+    };
+    FormulaControl.prototype.componentWillUnmount = function () {
+        this.isUnmount = true;
+    };
+    // 组件默认值设置交互中未使用
+    FormulaControl.prototype.normalizeVariables = function (variables) {
+        var _a, _b, _c;
+        if (!variables) {
+            return [];
+        }
+        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__default["default"](tslib.__spreadArray(tslib.__spreadArray(tslib.__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__default["default"](expression) && amis.isExpression(expression)) {
+            return expression.replace(/(^|[^\\])\$\{/g, '\\${');
+        }
+        return expression;
+    };
+    // 根据 name 值 判断当前表达式是否 存在循环引用问题
+    FormulaControl.prototype.isLoopExpression = function (expression, selfName) {
+        if (!expression || !selfName || !isString__default["default"](expression)) {
+            return false;
+        }
+        var variables = amis.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__default["default"](value)) ||
+            (expectType === 'boolean' && isBoolean__default["default"](value)) ||
+            (expectType === 'object' && isPlainObject__default["default"](value)) ||
+            (expectType === 'array' && isArray__default["default"](value))) {
+            return true;
+        }
+        else if (isString__default["default"](value)) {
+            if (amis.isExpression(value)) {
+                // 根据公式运算结果判断类型
+                var formulaValue = amis.FormulaExec.formula(value, curData);
+                if ((expectType === 'number' && isNumber__default["default"](formulaValue)) ||
+                    (expectType === 'boolean' && isBoolean__default["default"](formulaValue)) ||
+                    (expectType === 'object' && isPlainObject__default["default"](formulaValue)) ||
+                    (expectType === 'array' && isArray__default["default"](formulaValue)) ||
+                    (expectType === 'string' && isString__default["default"](formulaValue))) {
+                    return true;
+                }
+            }
+            else if (expectType === 'string') {
+                // 非公式字符串
+                return true;
+            }
+        }
+        return false;
+    };
+    FormulaControl.prototype.resolveVariablesFromScope = function () {
+        var _a;
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var _b, node, manager, dataPropsAsOptions;
+            return tslib.__generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _b = 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();
+                        return [2 /*return*/, dataPropsAsOptions || []];
+                }
+            });
+        });
+    };
+    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, _b, _c;
+        var data = this.props.data;
+        var curRendererSchema = null;
+        if (rendererSchema) {
+            curRendererSchema = Object.assign({}, rendererSchema, data, {
+                type: (_a = rendererSchema.type) !== null && _a !== void 0 ? _a : data.type,
+                value: (_c = (_b = this.props.value) !== null && _b !== void 0 ? _b : rendererSchema.value) !== null && _c !== void 0 ? _c : data.value,
+            });
+            // 默认要剔除的字段
+            var deleteProps = [
+                'label',
+                'id',
+                '$$id',
+                'className',
+                'style',
+                'readOnly',
+                'horizontal',
+                'size'
+            ];
+            // 当前组件要剔除的字段
+            if (this.props.needDeleteProps) {
+                deleteProps.push.apply(deleteProps, this.props.needDeleteProps);
+            }
+            curRendererSchema = omit__default["default"](curRendererSchema, deleteProps);
+            // 避免没有清空icon
+            if (curRendererSchema.clearable !== undefined && !curRendererSchema.clearable) {
+                curRendererSchema.clearable = true;
+            }
+        }
+        return curRendererSchema;
+    };
+    FormulaControl.prototype.renderFormulaValue = function (item) {
+        var html = { __html: item.html };
+        return React__default["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, rest = tslib.__rest(_c, ["className", "label", "value", "header", "variables", "placeholder", "simple", "evalMode", "rendererSchema", "rendererWrapper", "manager"]);
+        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 = amis.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 = amis.isExpression(value)
+            ? Editor.FormulaEditor.highlightValue(value, this.state.variables, evalMode !== null && evalMode !== void 0 ? evalMode : this.state.evalMode)
+            : value;
+        return (React__default["default"].createElement("div", { className: cx__default["default"]('ae-editor-FormulaControl', isError ? 'is-has-tooltip' : '', className) },
+            !simple && !rendererSchema && !isExpr && (React__default["default"].createElement(amis.InputBox, { className: "ae-editor-FormulaControl-input", value: value, clearable: true, placeholder: placeholder, onChange: this.handleSimpleInputChange })),
+            !simple && rendererSchema && !isExpr && (React__default["default"].createElement("div", { className: cx__default["default"]('ae-editor-FormulaControl-custom-renderer', rendererWrapper ? 'border-wrapper' : '') }, amis.render(this.filterCustomRendererProps(rendererSchema), {
+                onChange: this.handleSimpleInputChange,
+                manager: manager
+            }, tslib.__assign({}, ((manager === null || manager === void 0 ? void 0 : manager.env) || {}))))),
+            !simple && isExpr && (React__default["default"].createElement(amis.ResultBox, { className: cx__default["default"]('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["default"].createElement(amis.PickerContainer, { showTitle: false, bodyRender: function (_a) {
+                    var _b;
+                    _a.onClose; var value = _a.value, onChange = _a.onChange;
+                    return (React__default["default"].createElement(Editor.FormulaEditor, tslib.__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__default["default"](value) ? value : undefined, onChange: onChange, selfVariableName: selfName })));
+                }, value: value, onConfirm: this.handleConfirm, size: "md" }, function (_a) {
+                var _b;
+                var onClick = _a.onClick; _a.isOpened;
+                return (React__default["default"].createElement(amis.Button, { size: "sm", tooltip: '点击配置表达式', tooltipPlacement: "left", onClick: onClick },
+                    React__default["default"].createElement(amis.Icon, { icon: "function", className: cx__default["default"]('ae-editor-FormulaControl-icon', 'icon', (_b = {},
+                            _b['is-filled'] = !!value,
+                            _b)) })));
+            }),
+            isExpr && !isError && (React__default["default"].createElement("div", { className: "desc-msg info-msg", title: value }, value)),
+            isError && (React__default["default"].createElement("div", { className: "desc-msg error-msg" }, isLoop ? '当前表达式异常（存在循环引用）' : '数值类型不匹配'))));
+    };
+    FormulaControl.defaultProps = {
+        simple: false
+    };
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", Object)
+    ], FormulaControl.prototype, "replaceExpression", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, String]),
+        tslib.__metadata("design:returntype", Boolean)
+    ], FormulaControl.prototype, "isLoopExpression", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", Boolean)
+    ], FormulaControl.prototype, "isExpectType", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaControl.prototype, "handleConfirm", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaControl.prototype, "filterCustomRendererProps", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaControl.prototype, "renderFormulaValue", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaControl.prototype, "getContextData", null);
+    return FormulaControl;
+}(React__default["default"].Component));
+/** @class */ ((function (_super) {
+    tslib.__extends(FormulaControlRenderer, _super);
+    function FormulaControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FormulaControlRenderer = tslib.__decorate([
+        amis.FormItem({
+            type: 'ae-formulaControl'
+        })
+    ], FormulaControlRenderer);
+    return FormulaControlRenderer;
+})(FormulaControl));
+
+exports["default"] = FormulaControl;

package/{dist/component/Control → lib/renderer}/OptionControl.d.ts

@@ -6,6 +6,7 @@ import Sortable from 'sortablejs';
 import type { Option } from 'amis';
 import type { FormControlProps } from 'amis-core';
 import type { OptionValue } from 'amis-core';
+import { SchemaApi } from 'amis/lib/Schema';
 export declare type valueType = 'text' | 'boolean' | 'number';
 export interface PopoverForm {
     optionLabel: string;
@@ -20,21 +21,18 @@ export interface OptionControlProps extends FormControlProps {
 }
 export interface OptionControlState {
     options: Array<OptionControlItem>;
-    popOverData: any;
-    popOverCtx?: {
-        mode: 'add' | 'edit';
-        index?: number;
-    };
+    api: SchemaApi;
+    labelField: string;
+    valueField: string;
     source: 'custom' | 'api' | 'form';
-    sourceOptions: Array<Option>;
 }
-export declare class OptionControl extends React.Component<OptionControlProps, OptionControlState> {
+export default class OptionControl extends React.Component<OptionControlProps, OptionControlState> {
     sortable?: Sortable;
     drag?: HTMLElement | null;
     target: HTMLElement | null;
+    $comp: string;
     internalProps: string[];
     constructor(props: OptionControlProps);
-    componentDidUpdate(prevProps: OptionControlProps): void;
     /**
      * 获取当前选项值的类型
      */
@@ -48,19 +46,9 @@ export declare class OptionControl extends React.Component<OptionControlProps, O
      */
     transformOptionValue(value: any): string;
     transformOptions(props: OptionControlProps): {
+        label: string | undefined;
+        value: any;
         checked: boolean;
-        label?: string | undefined;
-        scopeLabel?: string | undefined;
-        value?: any;
-        disabled?: boolean | undefined;
-        children?: import("amis").Options | undefined;
-        visible?: boolean | undefined;
-        hidden?: boolean | undefined;
-        description?: string | undefined;
-        defer?: boolean | undefined;
-        deferApi?: string | import("amis").BaseApiObject | undefined;
-        loading?: boolean | undefined;
-        loaded?: boolean | undefined;
     }[];
     /**
      * 处理当前组件的默认值
@@ -69,7 +57,7 @@ export declare class OptionControl extends React.Component<OptionControlProps, O
     /**
      * 更新options字段的统一出口
      */
-    onChangeOptions(): void;
+    onChange(): void;
     targetRef(ref: any): void;
     dragRef(ref: any): void;
     initDragging(): void;
@@ -78,14 +66,11 @@ export declare class OptionControl extends React.Component<OptionControlProps, O
     /**
      * 切换选项类型
      */
-    handleSourceChange(option: {
-        label: string;
-        value: 'custom' | 'api' | 'form';
-    }): void;
+    handleSourceChange(source: 'custom' | 'api' | 'form'): void;
     /**
      * 删除选项
      */
-    handleDelete(index: number, e: React.UIEvent<any>): void;
+    handleDelete(index: number): void;
     /**
      * 设置默认选项
      */
@@ -93,22 +78,19 @@ export declare class OptionControl extends React.Component<OptionControlProps, O
     /**
      * 编辑选项
      */
-    handleEdit(index: number, e: React.UIEvent<any>): void;
-    handleEditLabel(index: number, e: React.FocusEvent<HTMLInputElement>): void;
+    toggleEdit(index: number): void;
+    handleEditLabel(index: number, value: string): void;
     handleAdd(): void;
-    handlePopoverSubmit(values: PopoverForm, action: any): void;
-    closePopoverEdit(): boolean;
+    handleValueTypeChange(index: number, type: valueType): void;
+    handleValueChange(index: number, value: string): void;
     handleBatchAdd(values: {
         batchOption: string;
     }, action: any): void;
     renderHeader(): JSX.Element;
     renderOption(props: any): JSX.Element;
-    renderPopover(): JSX.Element;
     buildBatchAddSchema(): {
         type: string;
         actionType: string;
-        level: string;
-        size: string;
         label: string;
         dialog: {
             title: string;
@@ -119,7 +101,10 @@ export declare class OptionControl extends React.Component<OptionControlProps, O
             body: ({
                 type: string;
                 level: string;
-                body: string;
+                body: {
+                    type: string;
+                    tpl: string;
+                }[];
                 showIcon: boolean;
                 className: string;
                 wrapWithPanel?: undefined;
@@ -157,6 +142,10 @@ export declare class OptionControl extends React.Component<OptionControlProps, O
             })[];
         };
     };
+    handleAPIChange(source: SchemaApi): void;
+    handleLableFieldChange(labelField: string): void;
+    handleValueFieldChange(valueField: string): void;
+    renderApiPanel(): JSX.Element | null;
     render(): JSX.Element;
 }
 export declare class OptionControlRenderer extends OptionControl {