amis-editor 5.2.0 → 5.2.1-beta.19

package/esm/renderer/textarea-formula/TextareaFormulaControl.js

@@ -0,0 +1,334 @@
+/**
+ * amis-editor v5.2.1-beta.19
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __awaiter, __generator, __assign, __rest, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import cx from 'classnames';
+import { Icon, FormItem } from 'amis';
+import { autobind } from 'amis-core';
+import CodeMirrorEditor from 'amis-ui/lib/components/CodeMirror';
+import { editorFactory, FormulaPlugin } from './plugin.js';
+import FormulaPicker from './FormulaPicker.js';
+import debounce from 'lodash/debounce';
+import { getVariables } from './utils.js';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 长文本公式输入框
+ */
+var TextareaFormulaControl = /** @class */function (_super) {
+  __extends(TextareaFormulaControl, _super);
+  function TextareaFormulaControl(props) {
+    var _this = _super.call(this, props) || this;
+    Object.defineProperty(_this, "isUnmount", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(_this, "editorPlugin", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(_this, "handleOnChange", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: debounce(function (value) {
+        var _a, _b;
+        (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+      }, 200)
+    });
+    _this.state = {
+      value: '',
+      variables: [],
+      formulaPickerOpen: false,
+      formulaPickerValue: '',
+      isFullscreen: false
+    };
+    return _this;
+  }
+  Object.defineProperty(TextareaFormulaControl.prototype, "componentDidMount", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      return __awaiter(this, void 0, void 0, function () {
+        var variablesArr;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              return [4 /*yield*/, getVariables(this)];
+            case 1:
+              variablesArr = _a.sent();
+              this.setState({
+                variables: variablesArr
+              });
+              return [2 /*return*/];
+          }
+        });
+      });
+    }
+  });
+
+  Object.defineProperty(TextareaFormulaControl.prototype, "componentDidUpdate", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (prevProps) {
+      return __awaiter(this, void 0, void 0, function () {
+        var variablesArr;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (!(this.props.data !== prevProps.data)) return [3 /*break*/, 2];
+              return [4 /*yield*/, getVariables(this)];
+            case 1:
+              variablesArr = _a.sent();
+              this.setState({
+                variables: variablesArr
+              });
+              _a.label = 2;
+            case 2:
+              return [2 /*return*/];
+          }
+        });
+      });
+    }
+  });
+
+  Object.defineProperty(TextareaFormulaControl.prototype, "componentWillUnmount", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.isUnmount = true;
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl.prototype, "onExpressionClick", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (expression, brace) {
+      this.setState({
+        formulaPickerValue: expression,
+        formulaPickerOpen: true,
+        expressionBrace: brace
+      });
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl.prototype, "closeFormulaPicker", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.setState({
+        formulaPickerOpen: false
+      });
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl.prototype, "handleConfirm", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (value) {
+      var _a;
+      var expressionBrace = this.state.expressionBrace;
+      // 去除可能包裹的最外层的${}
+      value = value.replace(/^\$\{(.*)\}$/, function (match, p1) {
+        return p1;
+      });
+      value = value ? "${".concat(value, "}") : value;
+      (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent(value, 'expression', expressionBrace);
+      this.setState({
+        formulaPickerOpen: false,
+        expressionBrace: undefined
+      });
+      this.closeFormulaPicker();
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl.prototype, "editorFactory", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (dom, cm) {
+      var variables = this.props.variables || this.state.variables;
+      return editorFactory(dom, cm, __assign(__assign({}, this.props), {
+        variables: variables
+      }));
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl.prototype, "handleEditorMounted", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (cm, editor) {
+      var _this = this;
+      var variables = this.props.variables || this.state.variables;
+      this.editorPlugin = new FormulaPlugin(editor, cm, function () {
+        return __assign(__assign({}, _this.props), {
+          variables: variables
+        });
+      }, this.onExpressionClick);
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl.prototype, "handleFullscreenModeChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.setState({
+        isFullscreen: !this.state.isFullscreen
+      });
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl.prototype, "handleFormulaClick", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.setState({
+        formulaPickerOpen: true,
+        formulaPickerValue: '',
+        expressionBrace: undefined
+      });
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl.prototype, "editorAutoMark", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a;
+      (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.autoMark();
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var _a = this.props,
+        className = _a.className;
+        _a.header;
+        _a.label;
+        _a.placeholder;
+        var height = _a.height,
+        additionalMenus = _a.additionalMenus,
+        rest = __rest(_a, ["className", "header", "label", "placeholder", "height", "additionalMenus"]);
+      var _b = this.state,
+        value = _b.value,
+        formulaPickerOpen = _b.formulaPickerOpen,
+        formulaPickerValue = _b.formulaPickerValue,
+        isFullscreen = _b.isFullscreen,
+        variables = _b.variables;
+      // 输入框样式
+      var resultBoxStyle = {};
+      if (height) {
+        resultBoxStyle.height = "".concat(height, "px");
+      }
+      return React__default.createElement("div", {
+        className: cx('ae-TextareaFormulaControl', {
+          'is-fullscreen': this.state.isFullscreen
+        }, className)
+      }, React__default.createElement("div", {
+        className: cx('ae-TextareaResultBox'),
+        style: resultBoxStyle
+      }, React__default.createElement(CodeMirrorEditor, {
+        className: "ae-TextareaResultBox-editor",
+        value: value,
+        onChange: this.handleOnChange,
+        editorFactory: this.editorFactory,
+        editorDidMount: this.handleEditorMounted,
+        onBlur: this.editorAutoMark
+      }), React__default.createElement("ul", {
+        className: "ae-TextareaResultBox-footer"
+      }, React__default.createElement("li", {
+        className: "ae-TextareaResultBox-footer-fullscreen"
+      }, React__default.createElement("a", {
+        className: cx('Modal-fullscreen'),
+        "data-tooltip": isFullscreen ? i18n("49041f245018a6d799fee3c6f177c782") : i18n("185926bf986c784d03a9a73102da6542"),
+        "data-position": "top",
+        onClick: this.handleFullscreenModeChange
+      }, React__default.createElement(Icon, {
+        icon: isFullscreen ? 'compress-alt' : 'expand-alt',
+        className: "icon"
+      }))), React__default.createElement("li", {
+        className: "ae-TextareaResultBox-footer-fxIcon"
+      }, React__default.createElement("a", {
+        "data-tooltip": "\u8868\u8FBE\u5F0F",
+        "data-position": "top",
+        onClick: this.handleFormulaClick
+      }, React__default.createElement(Icon, {
+        icon: "function",
+        className: "icon"
+      }))), (additionalMenus === null || additionalMenus === void 0 ? void 0 : additionalMenus.length) && (additionalMenus === null || additionalMenus === void 0 ? void 0 : additionalMenus.map(function (item, i) {
+        return React__default.createElement("li", {
+          key: i,
+          className: (item === null || item === void 0 ? void 0 : item.className) || ''
+        }, item.icon ? React__default.createElement("a", {
+          "data-tooltip": item.label,
+          "data-position": "top",
+          onClick: function () {
+            return item.onClick();
+          }
+        }, React__default.createElement(Icon, {
+          icon: item.icon,
+          className: "icon"
+        })) : React__default.createElement("a", {
+          onClick: function () {
+            return item === null || item === void 0 ? void 0 : item.onClick();
+          }
+        }, item.label));
+      })))), formulaPickerOpen ? React__default.createElement(FormulaPicker, {
+        value: formulaPickerValue,
+        initable: true,
+        variables: variables,
+        variableMode: rest.variableMode,
+        evalMode: true,
+        onClose: function () {
+          return _this.setState({
+            formulaPickerOpen: false
+          });
+        },
+        onConfirm: this.handleConfirm
+      }) : null);
+    }
+  });
+  Object.defineProperty(TextareaFormulaControl, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+      variableMode: 'tabs',
+      requiredDataPropsVariables: false,
+      height: 100
+    }
+  });
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String, Array]), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "onExpressionClick", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "closeFormulaPicker", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleConfirm", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [HTMLElement, Object]), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "editorFactory", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Object]), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleEditorMounted", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleFullscreenModeChange", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleFormulaClick", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "editorAutoMark", null);
+  return TextareaFormulaControl;
+}(React__default.Component);
+/** @class */(function (_super) {
+  __extends(TextareaFormulaControlRenderer, _super);
+  function TextareaFormulaControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  TextareaFormulaControlRenderer = __decorate([FormItem({
+    type: 'ae-textareaFormulaControl'
+  })], TextareaFormulaControlRenderer);
+  return TextareaFormulaControlRenderer;
+})(TextareaFormulaControl);
+
+export { TextareaFormulaControl };

package/esm/renderer/textarea-formula/plugin.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @file 扩展 codemirror
+ */
+import type CodeMirror from 'codemirror';
+import { TextareaFormulaControlProps } from './TextareaFormulaControl';
+export declare function editorFactory(dom: HTMLElement, cm: typeof CodeMirror, props: any): CodeMirror.Editor;
+export declare class FormulaPlugin {
+    readonly editor: CodeMirror.Editor;
+    readonly cm: typeof CodeMirror;
+    readonly getProps: () => TextareaFormulaControlProps;
+    readonly onExpressionClick: (expression: string, brace?: Array<CodeMirror.Position>) => any;
+    constructor(editor: CodeMirror.Editor, cm: typeof CodeMirror, getProps: () => TextareaFormulaControlProps, onExpressionClick: (expression: string, brace?: Array<CodeMirror.Position>) => any);
+    autoMark(): void;
+    getExpressionBrace(expression: string): {
+        line: number;
+        ch: number;
+    }[] | undefined;
+    computedBracesPosition(exp: string): {
+        begin: number;
+        end: number;
+    }[];
+    checkStrIsInBraces([from, to]: number[], braces: {
+        begin: number;
+        end: number;
+    }[]): boolean;
+    insertBraces(originFrom: CodeMirror.Position, originTo: CodeMirror.Position): void;
+    insertContent(value: any, type?: 'expression', brace?: Array<CodeMirror.Position>): void;
+    markExpression(from: CodeMirror.Position, to: CodeMirror.Position, expression?: string, className?: string): void;
+    focus(value: string): void;
+    dispose(): void;
+    validate(): void;
+}

package/esm/renderer/textarea-formula/plugin.js

@@ -0,0 +1,273 @@
+/**
+ * amis-editor v5.2.1-beta.19
+ * Copyright 2018-2022 @fex
+ */
+
+import { FormulaEditor } from 'amis-ui/lib/components/formula/Editor';
+
+/**
+ * @file 扩展 codemirror
+ */
+function editorFactory(dom, cm, props) {
+    return cm(dom, {
+        value: props.value || '',
+        autofocus: false,
+        lineWrapping: true
+    });
+}
+var FormulaPlugin = /** @class */ (function () {
+    function FormulaPlugin(editor, cm, getProps, onExpressionClick) {
+        Object.defineProperty(this, "editor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: editor
+        });
+        Object.defineProperty(this, "cm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: cm
+        });
+        Object.defineProperty(this, "getProps", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: getProps
+        });
+        Object.defineProperty(this, "onExpressionClick", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: onExpressionClick
+        });
+        var value = this.getProps().value;
+        if (value) {
+            this.autoMark();
+            this.focus(value);
+        }
+    }
+    Object.defineProperty(FormulaPlugin.prototype, "autoMark", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var editor = this.editor;
+            var lines = editor.lineCount();
+            for (var line = 0; line < lines; line++) {
+                var content = editor.getLine(line);
+                var braces = this.computedBracesPosition(content);
+                for (var i = 0; i < braces.length; i++) {
+                    // 替换每个公式表达式中的内容
+                    var start = braces[i].begin;
+                    var end = braces[i].end;
+                    var expression = content.slice(start, end);
+                    this.markExpression({
+                        line: line,
+                        ch: start - 2
+                    }, {
+                        line: line,
+                        ch: end + 1
+                    }, expression);
+                }
+            }
+        }
+    });
+    // 找到表达式所在的位置
+    Object.defineProperty(FormulaPlugin.prototype, "getExpressionBrace", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (expression) {
+            var editor = this.editor;
+            var lines = editor.lineCount();
+            for (var line = 0; line < lines; line++) {
+                var content = editor.getLine(line);
+                var braces = this.computedBracesPosition(content);
+                for (var i = 0; i < braces.length; i++) {
+                    // 替换每个公式表达式中的内容
+                    var start = braces[i].begin;
+                    var end = braces[i].end;
+                    if (expression === content.slice(start, end)) {
+                        return [
+                            {
+                                line: line,
+                                ch: start - 2
+                            },
+                            {
+                                line: line,
+                                ch: end + 1
+                            }
+                        ];
+                    }
+                }
+            }
+            return undefined;
+        }
+    });
+    // 计算 `${`、`}` 括号的位置，如 ${a}+${b}, 结果是 [ { from: 0, to: 3 }, { from: 5, to: 8 } ]
+    Object.defineProperty(FormulaPlugin.prototype, "computedBracesPosition", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (exp) {
+            var braces = [];
+            exp === null || exp === void 0 ? void 0 : exp.replace(/\$\{/g, function (val, offset) {
+                if (val) {
+                    var charArr = exp.slice(offset + val.length).split('');
+                    var cache = ['${'];
+                    for (var index = 0; index < charArr.length; index++) {
+                        var char = charArr[index];
+                        if (char === '$' && charArr[index + 1] === '{') {
+                            cache.push('${');
+                        }
+                        else if (char === '}') {
+                            cache.pop();
+                        }
+                        if (cache.length === 0) {
+                            braces.push({ begin: offset + 2, end: index + offset + 2 });
+                            break;
+                        }
+                    }
+                }
+                return '';
+            });
+            return braces;
+        }
+    });
+    // 判断字符串是否在 ${} 中
+    Object.defineProperty(FormulaPlugin.prototype, "checkStrIsInBraces", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (_a, braces) {
+            var from = _a[0], to = _a[1];
+            var isIn = false;
+            if (braces.length) {
+                for (var index = 0; index < braces.length; index++) {
+                    var brace = braces[index];
+                    if (from >= brace.begin && to <= brace.end) {
+                        isIn = true;
+                        break;
+                    }
+                }
+            }
+            return isIn;
+        }
+    });
+    Object.defineProperty(FormulaPlugin.prototype, "insertBraces", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (originFrom, originTo) {
+            var str = this.editor.getValue();
+            var braces = this.computedBracesPosition(str);
+            if (!this.checkStrIsInBraces([originFrom.ch, originTo.ch], braces)) {
+                this.editor.setCursor({
+                    line: originFrom.line,
+                    ch: originFrom.ch
+                });
+                this.editor.replaceSelection('${');
+                this.editor.setCursor({
+                    line: originTo.line,
+                    ch: originTo.ch + 2
+                });
+                this.editor.replaceSelection('}');
+            }
+        }
+    });
+    Object.defineProperty(FormulaPlugin.prototype, "insertContent", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (value, type, brace) {
+            if (brace) {
+                // 替换
+                var from = brace[0], to = brace[1];
+                if (type === 'expression') {
+                    this.editor.replaceRange(value, from, to);
+                    this.autoMark();
+                }
+                else if (typeof value === 'string') {
+                    this.editor.replaceRange(value, from, to);
+                }
+            }
+            else {
+                // 新增
+                if (type === 'expression') {
+                    this.editor.replaceSelection(value);
+                    this.autoMark();
+                }
+                else if (typeof value === 'string') {
+                    this.editor.replaceSelection(value);
+                }
+                this.editor.focus();
+            }
+        }
+    });
+    Object.defineProperty(FormulaPlugin.prototype, "markExpression", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (from, to, expression, className) {
+            var _this = this;
+            if (expression === void 0) { expression = ''; }
+            if (className === void 0) { className = 'cm-expression'; }
+            var wrap = document.createElement('span');
+            wrap.className = className;
+            var text = document.createElement('span');
+            text.className = "".concat(className, "-text");
+            text.innerText = expression;
+            text.setAttribute('data-expression', expression);
+            text.onclick = function () {
+                var brace = _this.getExpressionBrace(expression);
+                _this.onExpressionClick(expression, brace);
+            };
+            var variables = this.getProps().variables;
+            var highlightValue = FormulaEditor.highlightValue(expression, variables) || {
+                html: expression
+            };
+            // 添加popover
+            var popoverEl = document.createElement('div');
+            // bca-disable-next-line
+            popoverEl.innerHTML = highlightValue.html;
+            popoverEl.classList.add('expression-popover');
+            var arrow = document.createElement('div');
+            arrow.classList.add('expression-popover-arrow');
+            popoverEl.appendChild(arrow);
+            wrap.appendChild(text);
+            wrap.appendChild(popoverEl);
+            this.editor.markText(from, to, {
+                atomic: true,
+                replacedWith: wrap
+            });
+        }
+    });
+    // 焦点放在最后
+    Object.defineProperty(FormulaPlugin.prototype, "focus", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (value) {
+            this.editor.setCursor({
+                line: 0,
+                ch: (value === null || value === void 0 ? void 0 : value.length) || 0
+            });
+        }
+    });
+    Object.defineProperty(FormulaPlugin.prototype, "dispose", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () { }
+    });
+    Object.defineProperty(FormulaPlugin.prototype, "validate", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () { }
+    });
+    return FormulaPlugin;
+}());
+
+export { FormulaPlugin, editorFactory };

package/esm/renderer/textarea-formula/utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 从amis数据域中取变量数据
+ * @param node
+ * @param manager
+ * @returns
+ */
+export declare function resolveVariablesFromScope(node: any, manager: any): Promise<any>;
+/**
+ * 整合 props & amis数据域 中的 variables
+ * @param that  为组件的实例 this
+ **/
+export declare function getVariables(that: any): Promise<any[]>;