amis-editor 5.2.5 → 5.4.0

package/esm/renderer/TplFormulaControl.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @file 长文本公式输入框
+ */
+import React from 'react';
+import type { VariableItem, CodeMirror } from 'amis-ui';
+import { FormControlProps } from 'amis-core';
+import { FormulaPlugin } from './textarea-formula/plugin';
+import { CustomFormulaPickerProps } from './textarea-formula/FormulaPicker';
+export interface TplFormulaControlProps extends FormControlProps {
+    /**
+     * 用于提示的变量集合，默认为空
+     */
+    variables?: Array<VariableItem> | Function;
+    /**
+     * 配合 variables 使用
+     * 当 props.variables 存在时， 是否再从 amis数据域中取变量集合，默认 false;
+     */
+    requiredDataPropsVariables?: boolean;
+    /**
+     * 变量展现模式，可选值：'tabs' ｜ 'tree'
+     */
+    variableMode?: 'tree' | 'tabs';
+    /**
+     * 自定义fx面板
+     */
+    customFormulaPicker?: React.FC<CustomFormulaPickerProps>;
+    /**
+     * 是否可清除
+     */
+    clearable?: boolean;
+    /**
+     * 弹窗顶部标题，默认为 "表达式"
+     */
+    header: string;
+}
+interface TplFormulaControlState {
+    value: string;
+    variables: Array<VariableItem>;
+    formulaPickerOpen: boolean;
+    formulaPickerValue: string;
+    expressionBrace?: Array<CodeMirror.Position>;
+    tooltipStyle: {
+        [key: string]: string;
+    };
+}
+export declare class TplFormulaControl extends React.Component<TplFormulaControlProps, TplFormulaControlState> {
+    static defaultProps: Partial<TplFormulaControlProps>;
+    wrapRef: React.RefObject<HTMLDivElement>;
+    tooltipRef: React.RefObject<HTMLDivElement>;
+    editorPlugin: FormulaPlugin;
+    unReaction: any;
+    appLocale: string;
+    appCorpusData: any;
+    constructor(props: TplFormulaControlProps);
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: TplFormulaControlProps): Promise<void>;
+    componentWillUnmount(): void;
+    onExpressionClick(expression: string, brace?: Array<CodeMirror.Position>): void;
+    onExpressionMouseEnter(e: MouseEvent, expression: string, brace?: Array<CodeMirror.Position>): void;
+    hiddenToolTip(): void;
+    handleKeyDown(e: any): void;
+    closeFormulaPicker(): void;
+    handleConfirm(value: any): void;
+    handleOnChange(value: any): void;
+    checkOpenFormulaPicker(value: string): void;
+    handleClear(): void;
+    handleFormulaClick(): void;
+    editorFactory(dom: HTMLElement, cm: any): any;
+    handleEditorMounted(cm: any, editor: any): void;
+    editorAutoMark(): void;
+    render(): JSX.Element;
+}
+export default class TplFormulaControlRenderer extends TplFormulaControl {
+}
+export {};

package/esm/renderer/TplFormulaControl.js

@@ -0,0 +1,391 @@
+/**
+ * amis-editor v5.4.0
+ * Copyright 2018-2023 @fex
+ */
+
+import { __extends, __awaiter, __generator, __assign, __rest, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import cx from 'classnames';
+import { reaction } from 'mobx';
+import { FormulaEditor, CodeMirrorEditor } from 'amis-ui';
+import { Icon, Button, TooltipWrapper, FormItem } from 'amis';
+import { autobind } from 'amis-core';
+import { editorFactory, FormulaPlugin } from './textarea-formula/plugin.js';
+import { getVariables } from './textarea-formula/utils.js';
+import { renderFormulaValue } from './FormulaControl.js';
+import FormulaPicker from './textarea-formula/FormulaPicker.js';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 长文本公式输入框
+ */
+var preInputLocation = {
+  start: 0,
+  end: 0
+};
+var TplFormulaControl = /** @class */function (_super) {
+  __extends(TplFormulaControl, _super);
+  function TplFormulaControl(props) {
+    var _this = _super.call(this, props) || this;
+    _this.wrapRef = React__default.createRef();
+    _this.tooltipRef = React__default.createRef();
+    _this.state = {
+      value: '',
+      variables: [],
+      formulaPickerOpen: false,
+      formulaPickerValue: '',
+      tooltipStyle: {
+        display: 'none'
+      }
+    };
+    return _this;
+  }
+  TplFormulaControl.prototype.componentDidMount = function () {
+    return __awaiter(this, void 0, void 0, function () {
+      var editorStore, variablesArr;
+      var _this = this;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            editorStore = window.editorStore;
+            this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
+            this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
+            this.unReaction = reaction(function () {
+              return editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocaleState;
+            }, function () {
+              return __awaiter(_this, void 0, void 0, function () {
+                var variablesArr;
+                return __generator(this, function (_a) {
+                  switch (_a.label) {
+                    case 0:
+                      this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
+                      this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
+                      return [4 /*yield*/, getVariables(this)];
+                    case 1:
+                      variablesArr = _a.sent();
+                      this.setState({
+                        variables: variablesArr
+                      });
+                      return [2 /*return*/];
+                  }
+                });
+              });
+            });
+
+            return [4 /*yield*/, getVariables(this)];
+          case 1:
+            variablesArr = _a.sent();
+            this.setState({
+              variables: variablesArr
+            });
+            if (this.tooltipRef.current) {
+              this.tooltipRef.current.addEventListener('mouseleave', this.hiddenToolTip);
+            }
+            if (this.wrapRef.current) {
+              this.wrapRef.current.addEventListener('keydown', this.handleKeyDown, true);
+            }
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+
+  TplFormulaControl.prototype.componentDidUpdate = 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*/];
+        }
+      });
+    });
+  };
+
+  TplFormulaControl.prototype.componentWillUnmount = function () {
+    var _a, _b;
+    if (this.tooltipRef.current) {
+      this.tooltipRef.current.removeEventListener('mouseleave', this.hiddenToolTip);
+    }
+    if (this.wrapRef.current) {
+      this.wrapRef.current.removeEventListener('keydown', this.handleKeyDown);
+    }
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_b = this.unReaction) === null || _b === void 0 ? void 0 : _b.call(this);
+  };
+  TplFormulaControl.prototype.onExpressionClick = function (expression, brace) {
+    this.setState({
+      formulaPickerValue: expression,
+      formulaPickerOpen: true,
+      expressionBrace: brace
+    });
+  };
+  TplFormulaControl.prototype.onExpressionMouseEnter = function (e, expression, brace) {
+    var _a;
+    var wrapperRect = (_a = this.wrapRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var expressionRect = e.target.getBoundingClientRect();
+    if (!wrapperRect) {
+      return;
+    }
+    var left = expressionRect.left - wrapperRect.left;
+    this.setState({
+      tooltipStyle: {
+        left: "".concat(left, "px"),
+        width: "".concat(expressionRect.width, "px")
+      },
+      formulaPickerValue: expression,
+      expressionBrace: brace
+    });
+  };
+  TplFormulaControl.prototype.hiddenToolTip = function () {
+    this.setState({
+      tooltipStyle: {
+        display: 'none'
+      }
+    });
+  };
+  TplFormulaControl.prototype.handleKeyDown = function (e) {
+    // 组件禁止回车折行，否则会导致内容超过一行
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  TplFormulaControl.prototype.closeFormulaPicker = function () {
+    this.setState({
+      formulaPickerOpen: false
+    });
+  };
+  TplFormulaControl.prototype.handleConfirm = function (value) {
+    var _a;
+    var expressionBrace = this.state.expressionBrace;
+    // 去除可能包裹的最外层的${}
+    value = value.replace(/^\$\{(.*)\}$/, function (match, p1) {
+      return p1;
+    });
+    value = value ? "${".concat(value, "}") : value;
+    value = value.replace(/\r\n|\r|\n/g, ' ');
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent(value, 'expression', expressionBrace);
+    this.setState({
+      formulaPickerOpen: false,
+      expressionBrace: undefined
+    });
+  };
+  TplFormulaControl.prototype.handleOnChange = function (value) {
+    var _a, _b;
+    this.checkOpenFormulaPicker(value);
+    (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+  };
+  // 检测用户输入'${}'自动打开表达式弹窗
+  TplFormulaControl.prototype.checkOpenFormulaPicker = function (value) {
+    var _a;
+    var preLength = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    // 删除了文本，无需检测
+    if (value.length < preLength || value === this.props.value) {
+      return;
+    }
+    var left = 0;
+    var right = 0;
+    var length = value.length;
+    while (left < preLength && value.charAt(left) === this.props.value.charAt(left)) {
+      left++;
+    }
+    while (right < preLength && value.charAt(length - 1 - right) === this.props.value.charAt(preLength - 1 - right)) {
+      right++;
+    }
+    if ((preInputLocation === null || preInputLocation === void 0 ? void 0 : preInputLocation.end) !== left) {
+      preInputLocation = null;
+    }
+    var start = preInputLocation ? preInputLocation.start : left;
+    var end = left === length - right ? left + 1 : length - right;
+    var inputText = value.substring(start, end);
+    if (/\$|\{|\}$/.test(inputText)) {
+      if (/\$\{\}/.test(inputText)) {
+        var newValue = value.slice(0, start) + inputText.replace('${}', '') + value.slice(end);
+        this.props.onChange(newValue);
+        var corsur = this.editorPlugin.getCorsur();
+        this.setState({
+          formulaPickerOpen: true,
+          formulaPickerValue: '',
+          expressionBrace: [{
+            line: corsur === null || corsur === void 0 ? void 0 : corsur.line,
+            ch: end - 3
+          }, {
+            line: corsur === null || corsur === void 0 ? void 0 : corsur.line,
+            ch: end
+          }]
+        });
+        preInputLocation = null;
+      } else {
+        preInputLocation = __assign(__assign({
+          start: left
+        }, preInputLocation), {
+          end: end
+        });
+      }
+    } else {
+      preInputLocation = null;
+    }
+  };
+  TplFormulaControl.prototype.handleClear = function () {
+    var _a;
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.setValue('');
+  };
+  TplFormulaControl.prototype.handleFormulaClick = function () {
+    this.setState({
+      formulaPickerOpen: true,
+      formulaPickerValue: '',
+      expressionBrace: undefined
+    });
+  };
+  TplFormulaControl.prototype.editorFactory = function (dom, cm) {
+    return editorFactory(dom, cm, this.props.value, {
+      lineWrapping: false,
+      cursorHeight: 0.85
+    });
+  };
+  TplFormulaControl.prototype.handleEditorMounted = function (cm, editor) {
+    var _this = this;
+    var variables = this.props.variables || this.state.variables;
+    this.editorPlugin = new FormulaPlugin(editor, {
+      getProps: function () {
+        return __assign(__assign({}, _this.props), {
+          variables: variables
+        });
+      },
+      onExpressionClick: this.onExpressionClick,
+      onExpressionMouseEnter: this.onExpressionMouseEnter,
+      showPopover: false,
+      showClearIcon: true
+    });
+  };
+  TplFormulaControl.prototype.editorAutoMark = function () {
+    var _a;
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.autoMark();
+  };
+  TplFormulaControl.prototype.render = function () {
+    var _this = this;
+    var _a = this.props,
+      className = _a.className,
+      header = _a.header;
+      _a.label;
+      var placeholder = _a.placeholder,
+      customFormulaPicker = _a.customFormulaPicker,
+      clearable = _a.clearable,
+      rest = __rest(_a, ["className", "header", "label", "placeholder", "customFormulaPicker", "clearable"]);
+    var _b = this.state,
+      formulaPickerOpen = _b.formulaPickerOpen,
+      formulaPickerValue = _b.formulaPickerValue,
+      variables = _b.variables,
+      tooltipStyle = _b.tooltipStyle;
+    var FormulaPickerCmp = customFormulaPicker !== null && customFormulaPicker !== void 0 ? customFormulaPicker : FormulaPicker;
+    var highlightValue = FormulaEditor.highlightValue(formulaPickerValue, variables) || {
+      html: formulaPickerValue
+    };
+    return React__default.createElement("div", {
+      className: cx('ae-TplFormulaControl', className, {
+        clearable: clearable
+      }),
+      ref: this.wrapRef
+    }, React__default.createElement("div", {
+      className: cx('ae-TplResultBox')
+    }, React__default.createElement(CodeMirrorEditor, {
+      className: "ae-TplResultBox-editor",
+      value: this.props.value,
+      onChange: this.handleOnChange,
+      editorFactory: this.editorFactory,
+      editorDidMount: this.handleEditorMounted,
+      onBlur: this.editorAutoMark
+    }), !this.props.value && React__default.createElement("div", {
+      className: "ae-TplFormulaControl-placeholder"
+    }, placeholder), clearable && this.props.value && React__default.createElement(Icon, {
+      icon: "input-clear",
+      className: "input-clear-icon",
+      iconContent: "InputText-clear",
+      onClick: this.handleClear
+    })), React__default.createElement(Button, {
+      className: "ae-TplFormulaControl-button",
+      size: "sm",
+      tooltip: {
+        enterable: false,
+        content: i18n("303efd5ba79e639001b4328cd266dddc"),
+        tooltipTheme: 'dark',
+        placement: 'left',
+        mouseLeaveDelay: 0
+      },
+      onClick: this.handleFormulaClick
+    }, React__default.createElement(Icon, {
+      icon: "input-add-fx",
+      className: cx('ae-TplFormulaControl-icon', 'icon')
+    })), React__default.createElement(TooltipWrapper, {
+      trigger: "hover",
+      placement: "top",
+      style: {
+        fontSize: '12px'
+      },
+      tooltip: {
+        tooltipTheme: 'dark',
+        children: function () {
+          return renderFormulaValue(highlightValue);
+        }
+      }
+    }, React__default.createElement("div", {
+      className: "ae-TplFormulaControl-tooltip",
+      style: tooltipStyle,
+      ref: this.tooltipRef,
+      onClick: function () {
+        _this.setState({
+          formulaPickerOpen: true
+        });
+      }
+    })), formulaPickerOpen ? React__default.createElement(FormulaPickerCmp, __assign({}, this.props, {
+      value: formulaPickerValue,
+      initable: true,
+      header: header,
+      variables: variables,
+      variableMode: rest.variableMode,
+      evalMode: true,
+      onClose: this.closeFormulaPicker,
+      onConfirm: this.handleConfirm
+    })) : null);
+  };
+  TplFormulaControl.defaultProps = {
+    variableMode: 'tabs',
+    requiredDataPropsVariables: false,
+    placeholder: i18n("02cc4f8f5a9aefbc03c778f7a5c989c7")
+  };
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String, Array]), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "onExpressionClick", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [MouseEvent, String, Array]), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "onExpressionMouseEnter", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "hiddenToolTip", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleKeyDown", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "closeFormulaPicker", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleConfirm", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleOnChange", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleClear", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleFormulaClick", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [HTMLElement, Object]), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "editorFactory", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Object]), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleEditorMounted", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TplFormulaControl.prototype, "editorAutoMark", null);
+  return TplFormulaControl;
+}(React__default.Component);
+/** @class */(function (_super) {
+  __extends(TplFormulaControlRenderer, _super);
+  function TplFormulaControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  TplFormulaControlRenderer = __decorate([FormItem({
+    type: 'ae-tplFormulaControl'
+  })], TplFormulaControlRenderer);
+  return TplFormulaControlRenderer;
+})(TplFormulaControl);
+
+export { TplFormulaControl };

package/esm/renderer/TransferTableControl.d.ts

@@ -2,17 +2,18 @@
  * @file Transfer的表格对应选项
  */
 import React from 'react';
-import { SchemaApi } from 'amis/lib/Schema';
+import type { SchemaApi } from 'amis';
 import type { FormControlProps } from 'amis-core';
 import type { Option } from 'amis';
 interface OptionControlProps extends FormControlProps {
     className?: string;
 }
+type SourceType = 'custom' | 'api' | 'form' | 'variable';
 interface OptionControlState {
     api: SchemaApi;
     labelField: string;
     valueField: string;
-    source: 'custom' | 'api' | 'form';
+    source: SourceType;
 }
 export default class TransferTableOption extends React.Component<OptionControlProps, {}> {
     addColumns(): {
@@ -110,7 +111,7 @@ declare const TransferTableControl: {
         /**
          * 切换选项类型
          */
-        handleSourceChange(source: 'custom' | 'api' | 'form'): void;
+        handleSourceChange(source: SourceType): void;
         handleAPIChange(source: SchemaApi): void;
         handleLableFieldChange(labelField: string): void;
         handleValueFieldChange(valueField: string): void;
@@ -169,7 +170,7 @@ declare const TransferTableControl: {
             };
         };
         renderHeader(): JSX.Element;
-        renderApiPanel(): JSX.Element | null;
+        renderApiPanel(): any;
         render(): JSX.Element;
         context: unknown;
         setState<K extends keyof OptionControlState>(state: OptionControlState | ((prevState: Readonly<OptionControlState>, props: Readonly<OptionControlProps>) => OptionControlState | Pick<OptionControlState, K> | null) | Pick<OptionControlState, K> | null, callback?: (() => void) | undefined): void;