amis-editor 5.2.0-beta.2 → 5.2.1-beta.15

package/esm/renderer/ExpressionFormulaControl.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @file 表达式输入框组件
+ */
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import type { VariableItem } from 'amis-ui/lib/components/formula/Editor';
+interface ExpressionFormulaControlProps extends FormControlProps {
+    /**
+     * 用于提示的变量集合，默认为空
+     */
+    variables?: Array<VariableItem> | Function;
+    /**
+     * 配合 variables 使用
+     * 当 props.variables 存在时， 是否再从 amis数据域中取变量集合，默认 false
+     */
+    requiredDataPropsVariables?: boolean;
+    /**
+     * 变量展现模式，可选值：'tabs' ｜ 'tree'
+     */
+    variableMode?: 'tabs' | 'tree';
+    /**
+     * 表达式最外层是否使用 ${} 来包裹，默认 false
+     */
+    evalMode: boolean;
+}
+interface ExpressionFormulaControlState {
+    variables: Array<VariableItem>;
+    formulaPickerValue: string;
+}
+export default class ExpressionFormulaControl extends React.Component<ExpressionFormulaControlProps, ExpressionFormulaControlState> {
+    static defaultProps: Partial<ExpressionFormulaControlProps>;
+    isUnmount: boolean;
+    constructor(props: ExpressionFormulaControlProps);
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: ExpressionFormulaControlProps): Promise<void>;
+    componentWillUnmount(): void;
+    initFormulaPickerValue(value: string): void;
+    renderFormulaValue(item: any): JSX.Element;
+    handleConfirm(value?: string): void;
+    handleClearExpression(e: React.MouseEvent<HTMLElement>): void;
+    render(): JSX.Element;
+}
+export declare class ExpressionFormulaControlRenderer extends ExpressionFormulaControl {
+}
+export {};

package/esm/renderer/ExpressionFormulaControl.js

@@ -0,0 +1,245 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __awaiter, __generator, __rest, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { autobind } from 'amis-core';
+import cx from 'classnames';
+import { PickerContainer, Button, Icon, FormItem } from 'amis';
+import { FormulaEditor } from 'amis-ui/lib/components/formula/Editor';
+import { getVariables } from './textarea-formula/utils.js';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 表达式输入框组件
+ */
+var ExpressionFormulaControl = /** @class */function (_super) {
+  __extends(ExpressionFormulaControl, _super);
+  function ExpressionFormulaControl(props) {
+    var _this = _super.call(this, props) || this;
+    Object.defineProperty(_this, "isUnmount", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    _this.state = {
+      variables: [],
+      formulaPickerValue: ''
+    };
+    return _this;
+  }
+  Object.defineProperty(ExpressionFormulaControl.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:
+              this.initFormulaPickerValue(this.props.value);
+              return [4 /*yield*/, getVariables(this)];
+            case 1:
+              variablesArr = _a.sent();
+              this.setState({
+                variables: variablesArr
+              });
+              return [2 /*return*/];
+          }
+        });
+      });
+    }
+  });
+
+  Object.defineProperty(ExpressionFormulaControl.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:
+              if (prevProps.value !== this.props.value) {
+                this.initFormulaPickerValue(this.props.value);
+              }
+              return [2 /*return*/];
+          }
+        });
+      });
+    }
+  });
+
+  Object.defineProperty(ExpressionFormulaControl.prototype, "componentWillUnmount", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.isUnmount = true;
+    }
+  });
+  Object.defineProperty(ExpressionFormulaControl.prototype, "initFormulaPickerValue", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (value) {
+      var formulaPickerValue = (value === null || value === void 0 ? void 0 : value.replace(/^\$\{(.*)\}$/, function (match, p1) {
+        return p1;
+      })) || '';
+      this.setState({
+        formulaPickerValue: formulaPickerValue
+      });
+    }
+  });
+  Object.defineProperty(ExpressionFormulaControl.prototype, "renderFormulaValue", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (item) {
+      var html = {
+        __html: item.html
+      };
+      // bca-disable-next-line
+      return React__default.createElement("span", {
+        dangerouslySetInnerHTML: html
+      });
+    }
+  });
+  Object.defineProperty(ExpressionFormulaControl.prototype, "handleConfirm", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (value) {
+      var _a, _b;
+      if (value === void 0) {
+        value = '';
+      }
+      if (this.props.evalMode) {
+        value = value.replace(/^\$\{(.*)\}$/, function (match, p1) {
+          return p1;
+        });
+        value = value ? "${".concat(value, "}") : '';
+      }
+      (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+    }
+  });
+  Object.defineProperty(ExpressionFormulaControl.prototype, "handleClearExpression", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (e) {
+      var _a, _b;
+      e.stopPropagation();
+      e.preventDefault();
+      (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, '');
+    }
+  });
+  Object.defineProperty(ExpressionFormulaControl.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var _a, _b;
+      var _c = this.props,
+        value = _c.value,
+        className = _c.className,
+        variableMode = _c.variableMode,
+        header = _c.header,
+        rest = __rest(_c, ["value", "className", "variableMode", "header"]);
+      var _d = this.state,
+        formulaPickerValue = _d.formulaPickerValue,
+        variables = _d.variables;
+      var highlightValue = FormulaEditor.highlightValue(formulaPickerValue, variables) || {
+        html: formulaPickerValue
+      };
+      // 自身字段
+      var selfName = (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name;
+      return React__default.createElement("div", {
+        className: cx('ae-ExpressionFormulaControl', className)
+      }, React__default.createElement(PickerContainer, {
+        showTitle: false,
+        bodyRender: function (_a) {
+          _a.value;
+            var onChange = _a.onChange;
+          return React__default.createElement(FormulaEditor, __assign({}, rest, {
+            evalMode: true,
+            variableMode: variableMode,
+            variables: variables,
+            header: header || i18n("a9400c408441f1f7f6d6954deb05ae9a"),
+            value: formulaPickerValue,
+            onChange: onChange,
+            selfVariableName: selfName
+          }));
+        },
+        value: formulaPickerValue,
+        onConfirm: this.handleConfirm,
+        size: "md"
+      }, function (_a) {
+        var onClick = _a.onClick;
+        return formulaPickerValue ? React__default.createElement(Button, {
+          className: "btn-configured",
+          tooltip: {
+            placement: 'top',
+            tooltipTheme: 'dark',
+            mouseLeaveDelay: 20,
+            content: value,
+            tooltipClassName: 'btn-configured-tooltip',
+            children: function () {
+              return _this.renderFormulaValue(highlightValue);
+            }
+          },
+          onClick: onClick
+        }, "\u5DF2\u914D\u7F6E\u8868\u8FBE\u5F0F", React__default.createElement(Icon, {
+          icon: "input-clear",
+          className: "icon",
+          onClick: _this.handleClearExpression
+        })) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Button, {
+          className: "btn-set-expression",
+          onClick: onClick
+        }, "\u70B9\u51FB\u7F16\u5199\u8868\u8FBE\u5F0F"));
+      }));
+    }
+  });
+  Object.defineProperty(ExpressionFormulaControl, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+      variableMode: 'tabs',
+      requiredDataPropsVariables: false,
+      evalMode: false
+    }
+  });
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], ExpressionFormulaControl.prototype, "initFormulaPickerValue", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], ExpressionFormulaControl.prototype, "renderFormulaValue", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], ExpressionFormulaControl.prototype, "handleConfirm", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], ExpressionFormulaControl.prototype, "handleClearExpression", null);
+  return ExpressionFormulaControl;
+}(React__default.Component);
+/** @class */(function (_super) {
+  __extends(ExpressionFormulaControlRenderer, _super);
+  function ExpressionFormulaControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  ExpressionFormulaControlRenderer = __decorate([FormItem({
+    type: 'ae-expressionFormulaControl'
+  })], ExpressionFormulaControlRenderer);
+  return ExpressionFormulaControlRenderer;
+})(ExpressionFormulaControl);
+
+export { ExpressionFormulaControl as default };

package/esm/renderer/FeatureControl.d.ts

@@ -4,7 +4,7 @@
 import React from 'react';
 import { FormControlProps } from 'amis';
 import Sortable from 'sortablejs';
-export declare type FeatureOption = {
+export type FeatureOption = {
     label: string;
     value: any;
     remove?: (data: any) => void;