amis-editor 5.2.0 → 5.2.1-beta.15

package/lib/renderer/textarea-formula/TextareaFormulaControl.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @file 长文本公式输入框
+ */
+/// <reference types="lodash" />
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { FormulaPlugin } from './plugin';
+import CodeMirror from 'codemirror';
+import { VariableItem } from 'amis-ui/lib/components/formula/Editor';
+export interface TextareaFormulaControlProps extends FormControlProps {
+    /**
+     * 输入框的高度， 默认 100 px
+     */
+    height?: number;
+    /**
+     * 用于提示的变量集合，默认为空
+     */
+    variables?: Array<VariableItem> | Function;
+    /**
+     * 配合 variables 使用
+     * 当 props.variables 存在时， 是否再从 amis数据域中取变量集合，默认 false;
+     */
+    requiredDataPropsVariables?: boolean;
+    /**
+     * 变量展现模式，可选值：'tabs' ｜ 'tree'
+     */
+    variableMode?: 'tree' | 'tabs';
+    /**
+     *  附加底部按钮菜单项
+     */
+    additionalMenus?: Array<{
+        label: string;
+        onClick: () => void;
+        icon?: string;
+        className?: string;
+    }>;
+}
+interface TextareaFormulaControlState {
+    value: string;
+    variables: Array<VariableItem>;
+    formulaPickerOpen: boolean;
+    formulaPickerValue: string;
+    expressionBrace?: Array<CodeMirror.Position>;
+    isFullscreen: boolean;
+}
+export declare class TextareaFormulaControl extends React.Component<TextareaFormulaControlProps, TextareaFormulaControlState> {
+    static defaultProps: Partial<TextareaFormulaControlProps>;
+    isUnmount: boolean;
+    editorPlugin?: FormulaPlugin;
+    constructor(props: TextareaFormulaControlProps);
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: TextareaFormulaControlProps): Promise<void>;
+    componentWillUnmount(): void;
+    onExpressionClick(expression: string, brace?: Array<CodeMirror.Position>): void;
+    closeFormulaPicker(): void;
+    handleConfirm(value: any): void;
+    handleOnChange: import("lodash").DebouncedFunc<(value: any) => void>;
+    editorFactory(dom: HTMLElement, cm: any): CodeMirror.Editor;
+    handleEditorMounted(cm: any, editor: any): void;
+    handleFullscreenModeChange(): void;
+    handleFormulaClick(): void;
+    editorAutoMark(): void;
+    render(): JSX.Element;
+}
+export default class TextareaFormulaControlRenderer extends TextareaFormulaControl {
+}
+export {};

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

@@ -0,0 +1,345 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cx = require('classnames');
+var amis = require('amis');
+var amisCore = require('amis-core');
+var CodeMirrorEditor = require('amis-ui/lib/components/CodeMirror');
+var plugin = require('./plugin.js');
+var FormulaPicker = require('./FormulaPicker.js');
+var debounce = require('lodash/debounce');
+var utils = require('./utils.js');
+var i18nRuntime = require('i18n-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var CodeMirrorEditor__default = /*#__PURE__*/_interopDefaultLegacy(CodeMirrorEditor);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+/**
+ * @file 长文本公式输入框
+ */
+var TextareaFormulaControl = /** @class */function (_super) {
+  tslib.__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__default["default"](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 tslib.__awaiter(this, void 0, void 0, function () {
+        var variablesArr;
+        return tslib.__generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              return [4 /*yield*/, utils.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 tslib.__awaiter(this, void 0, void 0, function () {
+        var variablesArr;
+        return tslib.__generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (!(this.props.data !== prevProps.data)) return [3 /*break*/, 2];
+              return [4 /*yield*/, utils.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 plugin.editorFactory(dom, cm, tslib.__assign(tslib.__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 plugin.FormulaPlugin(editor, cm, function () {
+        return tslib.__assign(tslib.__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 = tslib.__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["default"].createElement("div", {
+        className: cx__default["default"]('ae-TextareaFormulaControl', {
+          'is-fullscreen': this.state.isFullscreen
+        }, className)
+      }, React__default["default"].createElement("div", {
+        className: cx__default["default"]('ae-TextareaResultBox'),
+        style: resultBoxStyle
+      }, React__default["default"].createElement(CodeMirrorEditor__default["default"], {
+        className: "ae-TextareaResultBox-editor",
+        value: value,
+        onChange: this.handleOnChange,
+        editorFactory: this.editorFactory,
+        editorDidMount: this.handleEditorMounted,
+        onBlur: this.editorAutoMark
+      }), React__default["default"].createElement("ul", {
+        className: "ae-TextareaResultBox-footer"
+      }, React__default["default"].createElement("li", {
+        className: "ae-TextareaResultBox-footer-fullscreen"
+      }, React__default["default"].createElement("a", {
+        className: cx__default["default"]('Modal-fullscreen'),
+        "data-tooltip": isFullscreen ? i18nRuntime.i18n("49041f245018a6d799fee3c6f177c782") : i18nRuntime.i18n("185926bf986c784d03a9a73102da6542"),
+        "data-position": "top",
+        onClick: this.handleFullscreenModeChange
+      }, React__default["default"].createElement(amis.Icon, {
+        icon: isFullscreen ? 'compress-alt' : 'expand-alt',
+        className: "icon"
+      }))), React__default["default"].createElement("li", {
+        className: "ae-TextareaResultBox-footer-fxIcon"
+      }, React__default["default"].createElement("a", {
+        "data-tooltip": "\u8868\u8FBE\u5F0F",
+        "data-position": "top",
+        onClick: this.handleFormulaClick
+      }, React__default["default"].createElement(amis.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["default"].createElement("li", {
+          key: i,
+          className: (item === null || item === void 0 ? void 0 : item.className) || ''
+        }, item.icon ? React__default["default"].createElement("a", {
+          "data-tooltip": item.label,
+          "data-position": "top",
+          onClick: function () {
+            return item.onClick();
+          }
+        }, React__default["default"].createElement(amis.Icon, {
+          icon: item.icon,
+          className: "icon"
+        })) : React__default["default"].createElement("a", {
+          onClick: function () {
+            return item === null || item === void 0 ? void 0 : item.onClick();
+          }
+        }, item.label));
+      })))), formulaPickerOpen ? React__default["default"].createElement(FormulaPicker["default"], {
+        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
+    }
+  });
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String, Array]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "onExpressionClick", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "closeFormulaPicker", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleConfirm", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [HTMLElement, Object]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "editorFactory", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, Object]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleEditorMounted", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleFullscreenModeChange", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleFormulaClick", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "editorAutoMark", null);
+  return TextareaFormulaControl;
+}(React__default["default"].Component);
+/** @class */(function (_super) {
+  tslib.__extends(TextareaFormulaControlRenderer, _super);
+  function TextareaFormulaControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  TextareaFormulaControlRenderer = tslib.__decorate([amis.FormItem({
+    type: 'ae-textareaFormulaControl'
+  })], TextareaFormulaControlRenderer);
+  return TextareaFormulaControlRenderer;
+})(TextareaFormulaControl);
+
+exports.TextareaFormulaControl = TextareaFormulaControl;

package/lib/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;
+}