amis-editor 5.2.5-beta.3 → 5.2.5-beta.6

package/esm/renderer/FeatureControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.5-beta.3
+ * amis-editor v5.2.5-beta.6
  * Copyright 2018-2023 @fex
  */
 
@@ -21,265 +21,203 @@ 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
-      });
+  FeatureControl.getDerivedStateFromProps = function (nextProps, preState) {
+    return FeatureControl.initState(nextProps.data, nextProps.features, preState.inUseFeat, preState.unUseFeat);
+  };
+  FeatureControl.initState = function (data, features, lastInUseFeat, lastUnUseFeat) {
+    var inUseFeat = [];
+    var unUseFeat = [];
+    if (!Array.isArray(features)) {
+      features = features(data);
     }
-  });
-  Object.defineProperty(FeatureControl.prototype, "handleAdd", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (item) {
+    features.forEach(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();
+      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);
       }
-      this.drag = ref;
+    });
+    return {
+      inUseFeat: inUseFeat,
+      unUseFeat: unUseFeat
+    };
+  };
+  FeatureControl.prototype.handleRemove = 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
+    });
+  };
+  FeatureControl.prototype.handleAdd = 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);
+  };
+  FeatureControl.prototype.dragRef = 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);
-          });
+  FeatureControl.prototype.initDragging = 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);
+  FeatureControl.prototype.destroyDragging = function () {
+    this.sortable && this.sortable.destroy();
+  };
+  FeatureControl.prototype.renderItem = 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);
         }
-      }, React__default.createElement(Icon, {
-        icon: "delete-btn",
-        className: "icon"
-      })));
+      });
+    } else {
+      content = React__default.createElement("div", {
+        className: cx("".concat(klass, "Item-label"))
+      }, item.label);
     }
-  });
-  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 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);
       }
-      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
-        })
-      });
+    }, React__default.createElement(Icon, {
+      icon: "delete-btn",
+      className: "icon"
+    })));
+  };
+  FeatureControl.prototype.renderAction = 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());
-    }
-  });
+  FeatureControl.prototype.render = 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);

package/esm/renderer/FlexSettingControl.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file icon按钮组
+ */
+import React from 'react';
+import { FormControlProps } from 'amis';
+interface PlainObject {
+    [propsName: string]: any;
+}
+interface FlexSettingControlProps extends FormControlProps {
+    onChange: (value: PlainObject) => void;
+    value?: PlainObject;
+}
+export default class FlexSettingControl extends React.Component<FlexSettingControlProps> {
+    constructor(props: any);
+    setField(field: string): (val: string) => void;
+    render(): JSX.Element;
+}
+export declare class FlexSettingControlRenderer extends FlexSettingControl {
+}
+export {};

package/esm/renderer/FlexSettingControl.js

@@ -0,0 +1,152 @@
+/**
+ * amis-editor v5.2.5-beta.6
+ * Copyright 2018-2023 @fex
+ */
+
+import { __extends, __assign, __rest, __decorate } from 'tslib';
+import React__default from 'react';
+import { FormItem } from 'amis';
+import ButtonGroupControl from './ButtonGroupControl.js';
+import { i18n } from 'i18n-runtime';
+
+var getFlexItem = function (props) {
+  var value = props.value,
+    direction = props.direction,
+    justify = props.justify,
+    alignItems = props.alignItems;
+  var curDirection = (value === null || value === void 0 ? void 0 : value.flexDirection) || direction;
+  var isColumn = curDirection === 'column' || curDirection === 'column-reverse';
+  // 主轴排列方向
+  var directionItemOptions = [{
+    label: '水平方向',
+    value: 'row',
+    icon: 'drow'
+  }, {
+    label: '垂直方向',
+    value: 'column',
+    icon: 'dcolumn'
+  }, {
+    label: i18n("ae07817b441091793c8af39256908373"),
+    value: 'row-reverse',
+    icon: 'drowReverse',
+    iconClassName: 'scaleX-180'
+  }, {
+    label: i18n("618515fd68ecfc4a5b58462f0cb9666b"),
+    value: 'column-reverse',
+    icon: 'dcolumnReverse',
+    iconClassName: 'scaleX-180'
+  }];
+  // 交叉轴排列方式
+  var alignItemsOptions = [{
+    label: isColumn ? i18n("413f48cc71f71083ce532a86e3efdc21") : i18n("2a6ad292447e6354ca39ee7f40d2fcc8"),
+    value: 'flex-start',
+    icon: 'aFlexStart'
+    // iconClassName: isColumn ? 'scaleX-90' : '',
+  }, {
+    label: isColumn ? '水平居中' : '垂直居中',
+    value: 'center',
+    icon: 'aCenter'
+  }, {
+    label: isColumn ? i18n("fd8e9572cc6bf87653c4d8f8b8dd0db9") : i18n("d68c21b6b65e7a2e361762b65b8a5032"),
+    value: 'flex-end',
+    icon: 'aFlexEnd'
+    // iconClassName: isColumn ? 'scaleX-90' : '',
+  }, {
+    label: i18n("ed97c73866617b40a7b1215867e0f489"),
+    value: 'baseline',
+    icon: 'aBaseline'
+  }, {
+    label: isColumn ? '水平铺开' : i18n("cbac406a3f51abad691702015b0784ba"),
+    value: 'stretch',
+    icon: 'aStretch',
+    iconClassName: isColumn ? 'scaleX-90' : ''
+  }];
+  // 主轴排列方式
+  var justifyItemsOptions = [{
+    label: isColumn ? i18n("2a6ad292447e6354ca39ee7f40d2fcc8") : i18n("413f48cc71f71083ce532a86e3efdc21"),
+    value: 'flex-start',
+    icon: 'jFlexStart'
+    // iconClassName: isColumn ? 'scaleX-90' : '',
+  }, {
+    label: isColumn ? '垂直居中' : '水平居中',
+    value: 'center',
+    icon: 'jCenter'
+  }, {
+    label: isColumn ? i18n("d68c21b6b65e7a2e361762b65b8a5032") : i18n("fd8e9572cc6bf87653c4d8f8b8dd0db9"),
+    value: 'flex-end',
+    icon: 'jFlexEnd'
+    // iconClassName: isColumn ? 'scaleX-90' : '',
+  }, {
+    label: i18n("da1b972efb29f850b50e219ad4d98ba5"),
+    value: 'space-between',
+    icon: 'jSpaceBetween'
+  }, {
+    label: '间隔分布',
+    value: 'space-around',
+    icon: 'jSpaceAround'
+  }];
+  var flexItems = [{
+    field: 'flexDirection',
+    options: directionItemOptions,
+    default: direction || 'row'
+  }, {
+    field: 'justifyContent',
+    options: justifyItemsOptions,
+    default: justify || 'flex-start'
+  }, {
+    field: 'alignItems',
+    options: alignItemsOptions,
+    default: alignItems || 'stretch'
+  }];
+  return flexItems;
+};
+var FlexSettingControl = /** @class */function (_super) {
+  __extends(FlexSettingControl, _super);
+  function FlexSettingControl(props) {
+    return _super.call(this, props) || this;
+  }
+  FlexSettingControl.prototype.setField = function (field) {
+    var _a = this.props,
+      value = _a.value,
+      onChange = _a.onChange;
+    return function (val) {
+      var _a;
+      onChange(__assign(__assign({}, value), (_a = {}, _a[field] = val, _a)));
+    };
+  };
+  FlexSettingControl.prototype.render = function () {
+    var _this = this;
+    var _a = this.props,
+      value = _a.value,
+      label = _a.label,
+      rest = __rest(_a, ["value", "label"]);
+    var flexItems = getFlexItem(this.props);
+    return React__default.createElement("div", {
+      className: "ap-Flex"
+    }, !label && React__default.createElement("div", {
+      className: "ap-Flex-label"
+    }, "\u5F39\u6027\u5E03\u5C40\u8BBE\u7F6E"), flexItems.map(function (item) {
+      return React__default.createElement("div", {
+        className: "ap-Flex-item ap-Flex-".concat(item.field),
+        key: item.field
+      }, React__default.createElement(ButtonGroupControl, __assign({}, rest, {
+        options: item.options,
+        value: (value === null || value === void 0 ? void 0 : value[item.field]) || item.default,
+        onChange: _this.setField(item.field)
+      })));
+    }));
+  };
+  return FlexSettingControl;
+}(React__default.Component);
+/** @class */(function (_super) {
+  __extends(FlexSettingControlRenderer, _super);
+  function FlexSettingControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  FlexSettingControlRenderer = __decorate([FormItem({
+    type: 'flex-setting'
+  })], FlexSettingControlRenderer);
+  return FlexSettingControlRenderer;
+})(FlexSettingControl);
+
+export { FlexSettingControl as default };