amis-editor 5.2.0 → 5.2.1-beta.15

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

@@ -0,0 +1,64 @@
+/**
+ * @file 控制功能开关的控件，这里的功能指需要加子组件来支持的功能
+ */
+import React from 'react';
+import { FormControlProps } from 'amis';
+import Sortable from 'sortablejs';
+export type FeatureOption = {
+    label: string;
+    value: any;
+    remove?: (data: any) => void;
+    /** 提供该字段表示删除后还可以再新增回来 */
+    add?: (data: any) => void;
+    isActive?: (data: any) => boolean;
+};
+interface FeatureControlProps extends FormControlProps {
+    className?: string;
+    removable?: boolean;
+    addable?: boolean;
+    addText?: string;
+    sortable?: boolean;
+    features: Array<FeatureOption> | ((schema: any) => Array<FeatureOption>);
+    goFeatureComp?: (item: FeatureOption) => string;
+    onSort?: (value: FeatureOption[]) => void;
+}
+interface FeatureControlState {
+    /**
+     * 当前启用的功能
+     */
+    inUseFeat: FeatureOption[];
+    /**
+     * 未启用的功能
+     */
+    unUseFeat: FeatureOption[];
+}
+export default class FeatureControl extends React.Component<FeatureControlProps, FeatureControlState> {
+    constructor(props: FeatureControlProps);
+    static getDerivedStateFromProps(nextProps: FeatureControlProps, preState: FeatureControlState): {
+        inUseFeat: FeatureOption[];
+        unUseFeat: FeatureOption[];
+    };
+    static initState(data: any, features: FeatureOption[] | ((schema: any) => Array<FeatureOption>), lastInUseFeat?: FeatureOption[], lastUnUseFeat?: FeatureOption[]): {
+        inUseFeat: FeatureOption[];
+        unUseFeat: FeatureOption[];
+    };
+    handleRemove(item: FeatureOption, index: number): void;
+    handleAdd(item: any): void;
+    sortable?: Sortable;
+    drag?: HTMLElement | null;
+    dragRef(ref: any): void;
+    /**
+     * 初始化拖动
+     */
+    initDragging(): void;
+    /**
+     * 拖动的销毁
+     */
+    destroyDragging(): void;
+    renderItem(item: FeatureOption, index: number): JSX.Element;
+    renderAction(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare class FeatureControlRenderer extends FeatureControl {
+}
+export {};

package/esm/renderer/FeatureControl.js

@@ -0,0 +1,299 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { findDOMNode } from 'react-dom';
+import cx from 'classnames';
+import { Icon, Button, autobind, FormItem } from 'amis';
+import { remove, clone } from 'lodash';
+import { GoConfigControl } from './GoConfigControl.js';
+import Sortable from 'sortablejs';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 控制功能开关的控件，这里的功能指需要加子组件来支持的功能
+ */
+var klass = 'ae-FeatureControl';
+var FeatureControl = /** @class */function (_super) {
+  __extends(FeatureControl, _super);
+  function FeatureControl(props) {
+    var _this = _super.call(this, props) || this;
+    Object.defineProperty(_this, "sortable", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(_this, "drag", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    _this.state = FeatureControl.initState(props.data, props.features);
+    return _this;
+  }
+  Object.defineProperty(FeatureControl, "getDerivedStateFromProps", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (nextProps, preState) {
+      return FeatureControl.initState(nextProps.data, nextProps.features, preState.inUseFeat, preState.unUseFeat);
+    }
+  });
+  Object.defineProperty(FeatureControl, "initState", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (data, features, lastInUseFeat, lastUnUseFeat) {
+      var inUseFeat = [];
+      var unUseFeat = [];
+      if (!Array.isArray(features)) {
+        features = features(data);
+      }
+      features.forEach(function (item) {
+        var _a;
+        if (item.isActive == null || ((_a = item.isActive) === null || _a === void 0 ? void 0 : _a.call(item, data))) {
+          inUseFeat.push(item);
+        } else if (item.add) {
+          unUseFeat.push(item);
+        }
+      });
+      return {
+        inUseFeat: inUseFeat,
+        unUseFeat: unUseFeat
+      };
+    }
+  });
+  Object.defineProperty(FeatureControl.prototype, "handleRemove", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (item, index) {
+      var _a;
+      var _b = this.props,
+        removeFeature = _b.removeFeature,
+        data = _b.data,
+        onBulkChange = _b.onBulkChange;
+      var _c = this.state,
+        inUseFeat = _c.inUseFeat,
+        unUseFeat = _c.unUseFeat;
+      (_a = item.remove) === null || _a === void 0 ? void 0 : _a.call(item, data);
+      removeFeature === null || removeFeature === void 0 ? void 0 : removeFeature(item, data);
+      onBulkChange === null || onBulkChange === void 0 ? void 0 : onBulkChange(data);
+      remove(inUseFeat, item);
+      item.add && unUseFeat.push(item);
+      this.setState({
+        inUseFeat: inUseFeat,
+        unUseFeat: unUseFeat
+      });
+    }
+  });
+  Object.defineProperty(FeatureControl.prototype, "handleAdd", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (item) {
+      var _a;
+      var _b = this.props,
+        addFeature = _b.addFeature,
+        data = _b.data,
+        onBulkChange = _b.onBulkChange;
+      var _c = this.state,
+        inUseFeat = _c.inUseFeat,
+        unUseFeat = _c.unUseFeat;
+      inUseFeat.push(item);
+      remove(unUseFeat, item);
+      var schema = clone(data);
+      (_a = item.add) === null || _a === void 0 ? void 0 : _a.call(item, schema);
+      addFeature === null || addFeature === void 0 ? void 0 : addFeature(item, schema);
+      onBulkChange === null || onBulkChange === void 0 ? void 0 : onBulkChange(schema);
+    }
+  });
+  Object.defineProperty(FeatureControl.prototype, "dragRef", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (ref) {
+      var sortable = this.props.sortable;
+      if (!sortable) {
+        return;
+      }
+      if (!this.drag && ref) {
+        this.initDragging();
+      } else if (this.drag && !ref) {
+        this.destroyDragging();
+      }
+      this.drag = ref;
+    }
+  });
+  /**
+   * 初始化拖动
+   */
+  Object.defineProperty(FeatureControl.prototype, "initDragging", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var dom = findDOMNode(this);
+      this.sortable = new Sortable(dom.querySelector(".".concat(klass, "-features")), {
+        group: 'FeatureControlGroup',
+        animation: 150,
+        handle: ".".concat(klass, "Item-dragBar"),
+        ghostClass: "".concat(klass, "Item-dragging"),
+        onEnd: function (e) {
+          // 没有移动
+          if (e.newIndex === e.oldIndex) {
+            return;
+          }
+          // 换回来
+          var parent = e.to;
+          if (e.newIndex < e.oldIndex && e.oldIndex < parent.childNodes.length - 1) {
+            parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
+          } else if (e.oldIndex < parent.childNodes.length - 1) {
+            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+          } else {
+            parent.appendChild(e.item);
+          }
+          var value = _this.state.inUseFeat.concat();
+          value[e.oldIndex] = value.splice(e.newIndex, 1, value[e.oldIndex])[0];
+          _this.setState({
+            inUseFeat: value
+          }, function () {
+            var _a, _b;
+            (_b = (_a = _this.props).onSort) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+          });
+        }
+      });
+    }
+  });
+  /**
+   * 拖动的销毁
+   */
+  Object.defineProperty(FeatureControl.prototype, "destroyDragging", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.sortable && this.sortable.destroy();
+    }
+  });
+  Object.defineProperty(FeatureControl.prototype, "renderItem", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (item, index) {
+      var _this = this;
+      var _a = this.props,
+        sortable = _a.sortable,
+        goFeatureComp = _a.goFeatureComp;
+        _a.node;
+        var manager = _a.manager;
+      var content = null;
+      if (goFeatureComp) {
+        content =
+        // @ts-ignore
+        React__default.createElement(GoConfigControl, {
+          className: cx("".concat(klass, "Item-go")),
+          label: item.label,
+          manager: manager,
+          compId: function () {
+            return goFeatureComp(item);
+          }
+        });
+      } else {
+        content = React__default.createElement("div", {
+          className: cx("".concat(klass, "Item-label"))
+        }, item.label);
+      }
+      return React__default.createElement("li", {
+        className: klass + 'Item',
+        key: index
+      }, sortable && React__default.createElement("a", {
+        className: klass + 'Item-dragBar'
+      }, React__default.createElement(Icon, {
+        icon: "drag-bar",
+        className: "icon"
+      })), content, React__default.createElement(Button, {
+        className: klass + 'Item-action',
+        onClick: function () {
+          return _this.handleRemove(item, index);
+        }
+      }, React__default.createElement(Icon, {
+        icon: "delete-btn",
+        className: "icon"
+      })));
+    }
+  });
+  Object.defineProperty(FeatureControl.prototype, "renderAction", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var _a = this.props,
+        addable = _a.addable,
+        addText = _a.addText,
+        render = _a.render;
+      if (!addable) {
+        return null;
+      }
+      return render('action', {
+        type: 'dropdown-button',
+        closeOnClick: true,
+        label: i18n("b58c7549c0246c55b9cac96383200338") || addText,
+        className: "".concat(klass, "-action"),
+        btnClassName: "".concat(klass, "-action--btn"),
+        menuClassName: "".concat(klass, "-action--menus"),
+        buttons: this.state.unUseFeat.map(function (item) {
+          return {
+            label: item.label,
+            onClick: function () {
+              return _this.handleAdd(item);
+            }
+          };
+        }, {
+          popOverContainer: null // amis 渲染挂载节点会使用 this.target
+        })
+      });
+    }
+  });
+
+  Object.defineProperty(FeatureControl.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var className = this.props.className;
+      return React__default.createElement("div", {
+        className: cx('ae-FeatureControl', className)
+      }, React__default.createElement("ul", {
+        className: cx('ae-FeatureControl-features'),
+        ref: this.dragRef
+      }, this.state.inUseFeat.map(function (item, index) {
+        return _this.renderItem(item, index);
+      })), this.renderAction());
+    }
+  });
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Number]), __metadata("design:returntype", void 0)], FeatureControl.prototype, "handleRemove", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FeatureControl.prototype, "handleAdd", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FeatureControl.prototype, "dragRef", null);
+  return FeatureControl;
+}(React__default.Component);
+/** @class */(function (_super) {
+  __extends(FeatureControlRenderer, _super);
+  function FeatureControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  FeatureControlRenderer = __decorate([FormItem({
+    type: 'ae-feature-control'
+  })], FeatureControlRenderer);
+  return FeatureControlRenderer;
+})(FeatureControl);
+
+export { FeatureControl as default };