@fonixtree/magic-design 0.0.102 → 0.0.104

package/es/decorator/metaDecorator.js

@@ -41,6 +41,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -69,7 +85,7 @@ function metaDecorator(WrappedComponent) {
       }; // 元组件点击事件
 
       _this.onMetaClick = function (event) {
-        var _a, _b, _c;
+        var _a, _b;
 
         if (window.magicDesign.mode === 'renderer') {
           return;
@@ -90,7 +106,7 @@ function metaDecorator(WrappedComponent) {
         }
 
         _mobx.store.setState({
-          clickedMeta: (_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.id,
+          clickedMeta: metaId,
           clickedGroup: parentId,
           clickedFloor: floorId
         });
@@ -133,7 +149,7 @@ function metaDecorator(WrappedComponent) {
         return false;
       };
 
-      _this.getStyle = function () {
+      _this.getInteractStyle = function () {
         var _a = _this.state,
             hoveredMeta = _a.hoveredMeta,
             clickedMeta = _a.clickedMeta;
@@ -142,7 +158,8 @@ function metaDecorator(WrappedComponent) {
         var isClick = (data === null || data === void 0 ? void 0 : data.id) === clickedMeta;
         var style = {
           boxSizing: 'border-box',
-          height: '100%'
+          height: '100%',
+          border: 'none'
         };
 
         if (window.magicDesign.mode === 'renderer') {
@@ -153,6 +170,22 @@ function metaDecorator(WrappedComponent) {
         }
 
         return style;
+      }; // text元组件在选中或悬浮时 需要实时展示其宽度
+
+
+      _this.getStyle = function () {
+        var _a = _this.props,
+            style = _a.style,
+            rest = __rest(_a, ["style"]);
+
+        var newStyle = __assign({}, style);
+
+        if (rest.data.type === 'TEXT') {
+          var width = window.magicDesign.device === 'pc' ? rest.data.content.pcWidth : rest.data.content.width;
+          newStyle.width = (Math.min(width, 100) || 100) + "%";
+        }
+
+        return newStyle;
       };
 
       return _this;
@@ -176,13 +209,13 @@ function metaDecorator(WrappedComponent) {
     Wrapper.prototype.render = function () {
       var _a = this.props,
           className = _a.className,
-          style = _a.style,
-          rest = __rest(_a, ["className", "style"]);
+          rest = __rest(_a, ["className"]);
+
+      var hoverStyle = this.getInteractStyle(); // console.log(rest);
 
-      var hoverStyle = this.getStyle();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
-        style: style
+        style: this.getStyle()
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "meta_wrap",
         onClick: this.onMetaClick,

package/es/decorator/updateConfigDecorator.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = updateConfigDecorator;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+/**
+ *  更新组件一级配置面板的装修器
+ */
+
+
+function updateConfigDecorator(WrappedComponent) {
+  var Wrapper =
+  /** @class */
+  function (_super) {
+    __extends(Wrapper, _super);
+
+    function Wrapper() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+
+      _this.update = function () {
+        _this.setState({});
+      };
+
+      return _this;
+    }
+
+    Wrapper.prototype.componentDidMount = function () {
+      window.document.addEventListener(_constants.eventType.UPDATE_FIRST_CONFIG, this.update);
+    };
+
+    Wrapper.prototype.componentWillUnmount = function () {
+      window.document.removeEventListener(_constants.eventType.UPDATE_FIRST_CONFIG, this.update);
+    };
+
+    Wrapper.prototype.render = function () {
+      return /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props);
+    };
+
+    return Wrapper;
+  }(_react["default"].Component);
+
+  return Wrapper;
+}

package/es/locale/en/en.json

@@ -1,4 +1,23 @@
 {
+  "IMAGES": "Images",
+  "PUBLISH_TIME": "Publish Time",
+  "CONFIRM": "Confirm",
+  "PUBLISH_LATER": "Publish Later",
+  "PUBLISH_NOW": "Publish Now",
+  "SEARCH_BOX": "Search Box",
+  "PLEASE_INPUT_KEYWORDS": "Please input keywords",
+  "SHOPPING_CART": "Shopping Cart",
+  "ADD_BUTTON": "Add Button",
+  "BUTTON_TAG": "Button Tag",
+  "ADD_TAG": "Add Tag",
+  "LAST_CATEGORY": "Last Category",
+  "SECONDARY_CATEGORY": "Secondary Category",
+  "FIRST_CATEGORY": "First Category",
+  "ALL_CATEGORY": "All Category",
+  "HOME": "Home",
+  "ADD_CLICKABLE_AREA": "Add Clickable Area",
+  "ADD_AREA": "Add Area",
+  "CLICKABLE_AREA": "Clickable Area",
   "VOUCHER_SUCCESS": "Voucher received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
@@ -18,8 +37,8 @@
   "BACKGROUND": "Background",
   "PLACEHOLDER": "Placeholder",
   "FONT_STYLE": "Font Style",
-  "FONT_FAMILY": "font Family",
-  "FONT_WEIGHT": "font Weight",
+  "FONT_FAMILY": "Font Family",
+  "FONT_WEIGHT": "Font Weight",
   "FONT_SIZE": "Font Size",
   "LINE_SPACING": "Line Spacing",
   "LINE_COLOR": "Line Color",
@@ -85,7 +104,6 @@
   "INPUT_FIELD": "Input Field",
   "CONFIRMATION": "Confirmation",
   "IMAGE_TAG": "Image Tag",
-  "BUTTON_TAG": "Button Tag",
   "SECONDARY_BUTTON_TAG": "Secondary Button Tag",
   "TITLE": "Title",
   "HOVER": "Hover",

package/es/locale/es/es.json

@@ -1,4 +1,23 @@
 {
+  "IMAGES": "Images",
+  "PUBLISH_TIME": "Publish Time",
+  "CONFIRM": "Confirm",
+  "PUBLISH_LATER": "Publish Later",
+  "PUBLISH_NOW": "Publish Now",
+  "SEARCH_BOX": "Search Box",
+  "PLEASE_INPUT_KEYWORDS": "Please input keywords",
+  "SHOPPING_CART": "Shopping Cart",
+  "ADD_BUTTON": "Add Button",
+  "BUTTON_TAG": "Etiqueta de botón",
+  "ADD_TAG": "Add Tag",
+  "LAST_CATEGORY": "Last Category",
+  "SECONDARY_CATEGORY": "Secondary Category",
+  "FIRST_CATEGORY": "First Category",
+  "ALL_CATEGORY": "All Category",
+  "HOME": "Home",
+  "ADD_CLICKABLE_AREA": "Add Clickable Area",
+  "ADD_AREA": "Add Area",
+  "CLICKABLE_AREA": "Clickable Area",
   "VOUCHER_SUCCESS": "Voucher received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
@@ -85,7 +104,6 @@
   "INPUT_FIELD": "Campo de entrada",
   "CONFIRMATION": "Confirmación",
   "IMAGE_TAG": "Etiqueta de imagen",
-  "BUTTON_TAG": "Etiqueta de botón",
   "SECONDARY_BUTTON_TAG": "Etiqueta de botón secundario",
   "TITLE": "Título",
   "HOVER": "Hover",

package/es/locale/id/id.json

@@ -1,4 +1,23 @@
 {
+  "IMAGES": "Images",
+  "PUBLISH_TIME": "Publish Time",
+  "CONFIRM": "Confirm",
+  "PUBLISH_LATER": "Publish Later",
+  "PUBLISH_NOW": "Publish Now",
+  "SEARCH_BOX": "Search Box",
+  "PLEASE_INPUT_KEYWORDS": "Please input keywords",
+  "SHOPPING_CART": "Shopping Cart",
+  "ADD_BUTTON": "Add Button",
+  "BUTTON_TAG": "Button Tag",
+  "ADD_TAG": "Add Tag",
+  "LAST_CATEGORY": "Last Category",
+  "SECONDARY_CATEGORY": "Secondary Category",
+  "FIRST_CATEGORY": "First Category",
+  "ALL_CATEGORY": "All Category",
+  "HOME": "Home",
+  "ADD_CLICKABLE_AREA": "Add Clickable Area",
+  "ADD_AREA": "Add Area",
+  "CLICKABLE_AREA": "Clickable Area",
   "VOUCHER_SUCCESS": "Voucher received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
@@ -18,8 +37,8 @@
   "BACKGROUND": "Background",
   "PLACEHOLDER": "Placeholder",
   "FONT_STYLE": "Font Style",
-  "FONT_FAMILY": "font Family",
-  "FONT_WEIGHT": "font Weight",
+  "FONT_FAMILY": "Font Family",
+  "FONT_WEIGHT": "Font Weight",
   "FONT_SIZE": "Font Size",
   "LINE_SPACING": "Line Spacing",
   "LINE_COLOR": "Line Color",
@@ -85,7 +104,6 @@
   "INPUT_FIELD": "Input Field",
   "CONFIRMATION": "Confirmation",
   "IMAGE_TAG": "Image Tag",
-  "BUTTON_TAG": "Button Tag",
   "SECONDARY_BUTTON_TAG": "Secondary Button Tag",
   "TITLE": "Title",
   "HOVER": "Hover",

package/es/meta-comp/components/Button/editable.js

@@ -0,0 +1,114 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./editable.less");
+
+var _coreUtil = require("../../../utils/coreUtil");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+/**
+ *  编辑button名称，被动触发元组件的hover事件时会刷新组件，导致contenteditable的光标位置初始化
+ */
+
+
+var editable =
+/** @class */
+function (_super) {
+  __extends(editable, _super);
+
+  function editable() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.preData = '';
+    _this.preDevice = '';
+    return _this;
+  }
+
+  editable.prototype.shouldComponentUpdate = function (nextProps) {
+    var should1 = JSON.stringify(nextProps.data) != this.preData;
+    var should2 = window.magicDesign.device != this.preDevice;
+    var result = should1 || should2;
+    return result;
+  };
+
+  editable.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        data = _a.data,
+        readonly = _a.readonly;
+    this.preData = JSON.stringify(data);
+    this.preDevice = window.magicDesign.device;
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: "item",
+      contentEditable: (0, _coreUtil.isDesignMode)() && !readonly,
+      onInput: function onInput(e) {
+        var text = e.target.textContent;
+        data.text = text;
+        /** 主动更新历史数据避免render */
+
+        _this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
+          text: text
+        }));
+      },
+      suppressContentEditableWarning: true
+    }, data.text);
+  };
+
+  return editable;
+}(_react.Component);
+
+var _default = editable;
+exports["default"] = _default;

package/es/meta-comp/components/Button/editable.less

@@ -0,0 +1,6 @@
+.item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/es/meta-comp/components/Button/index.js

@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _businessUtil = require("../../../utils/businessUtil");
+var _editable = _interopRequireDefault(require("./editable"));
 
 var _coreUtil = require("../../../utils/coreUtil");
 
@@ -88,19 +88,9 @@ function (_super) {
     _this.state = {
       hover: false
     };
-    /** 备份历史数据 比对不一致时渲染 */
-
-    _this.preData = '';
     return _this;
   }
 
-  Button.prototype.shouldComponentUpdate = function (nextProps) {
-    var should1 = JSON.stringify(nextProps.data) != this.preData;
-    var should2 = window.magicDesign.device != this.preDevice;
-    var result = should1 || should2;
-    return result;
-  };
-
   Button.prototype.render = function () {
     var _this = this;
 
@@ -108,8 +98,7 @@ function (_super) {
 
     var _b = this.props,
         data = _b.data,
-        className = _b.className,
-        readonly = _b.readonly;
+        className = _b.className;
     var hover = this.state.hover;
     this.preData = JSON.stringify(data);
     this.preDevice = window.magicDesign.device;
@@ -122,6 +111,14 @@ function (_super) {
       fontSize: window.magicDesign.device == 'pc' ? data.buttonText.pcFontSize : data.buttonText.fontSize
     });
 
+    if (data.spacing) {
+      if (window.magicDesign.device == 'pc') {
+        style = __assign(__assign({}, style), data.spacing.pc);
+      } else {
+        style = __assign(__assign({}, style), data.spacing.mobile);
+      }
+    }
+
     var iconUrl = data.buttonIcon.iconUrl;
     var iconLayout = data.buttonIcon.layout;
 
@@ -137,22 +134,6 @@ function (_super) {
       iconLayout = data.hover.buttonIcon.layout;
     }
 
-    var btnText = /*#__PURE__*/_react["default"].createElement("span", {
-      className: "item",
-      contentEditable: (0, _coreUtil.isDesignMode)() && !readonly,
-      onInput: function onInput(e) {
-        var text = e.target.textContent;
-        data.text = text;
-        /** 主动更新历史数据避免render */
-
-        _this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
-          text: text
-        }));
-      },
-      suppressContentEditableWarning: true
-    }, data.text);
-
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-button', className),
       onClick: function onClick() {
@@ -168,16 +149,16 @@ function (_super) {
           hover: false
         });
       },
-      style: __assign(__assign({}, style), wrapStyle)
+      style: __assign({}, style)
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('btnContent', {
         horizontal: iconLayout === 'left' || iconLayout === 'right'
       })
-    }, (iconLayout === 'right' || iconLayout === 'bottom') && btnText, iconUrl && /*#__PURE__*/_react["default"].createElement("img", {
+    }, (iconLayout === 'right' || iconLayout === 'bottom') && /*#__PURE__*/_react["default"].createElement(_editable["default"], this.props), iconUrl && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: "item",
+      className: "icon",
       src: iconUrl
-    }), (iconLayout === 'left' || iconLayout === 'top') && btnText));
+    }), (iconLayout === 'left' || iconLayout === 'top') && /*#__PURE__*/_react["default"].createElement(_editable["default"], this.props)));
   };
 
   Button.defaultProps = {

package/es/meta-comp/components/Button/index.less

@@ -2,8 +2,9 @@
   transition: all 0.25s;
 
   .btnContent {
+    width: 100%;
     cursor: pointer;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
@@ -14,7 +15,7 @@
 
     img {
       height: 20px;
-      margin-right: 5px;
+      margin: 0 5px;
     }
   }
 }

package/es/meta-comp/components/Image/index.js

@@ -11,6 +11,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
+var _h5DefImg = _interopRequireDefault(require("./image/h5DefImg.png"));
+
+var _pcDefImg = _interopRequireDefault(require("./image/pcDefImg.png"));
+
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _decorator = require("../../../decorator");
@@ -63,9 +67,11 @@ function (_super) {
   function Image() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
+    _this.imgRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       // 当仅作为一个图片时，鼠标移上去，hover状态
-      hoverImgSrc: false
+      hoverImgSrc: false,
+      scale: 1
     };
 
     _this.getStyle = function () {
@@ -74,6 +80,7 @@ function (_super) {
           hoverState = _a.hoverState,
           maxHeight = _a.maxHeight,
           maxWidth = _a.maxWidth,
+          minHeight = _a.minHeight,
           minWidth = _a.minWidth,
           limitWidthHeight = _a.limitWidthHeight,
           scale = _a.scale;
@@ -82,17 +89,21 @@ function (_super) {
 
       if (data.hover.open && data.hover.backgroundType === 'enlarge' && (hoverState || hoverImgSrc)) {
         // return { transform: `scale(${data.hover.magnification})` };
-        obj.transform = "scale(" + data.hover.magnification / 2 + ")";
+        obj.transform = "scale(" + data.hover.magnification + ")";
       }
 
       if (maxHeight) {
         obj.maxHeight = maxHeight;
       }
 
-      if (maxWidth) {
+      if (maxWidth || maxWidth === 0) {
         obj.maxWidth = maxWidth;
       }
 
+      if (minHeight) {
+        obj.minHeight = minHeight;
+      }
+
       if (minWidth) {
         obj.minWidth = minWidth;
       }
@@ -144,6 +155,8 @@ function (_super) {
   }
 
   Image.prototype.render = function () {
+    var _this = this;
+
     var _a, _b;
 
     var _c = this.props,
@@ -161,11 +174,13 @@ function (_super) {
 
     if (window.magicDesign.isShop && (srcImg === null || srcImg === void 0 ? void 0 : srcImg.includes('ecommerce/static'))) {
       srcImg = srcImg.replace('ecommerce/static', 'static');
-    } // if (!srcImg) {
-    //   srcImg = defaultImg;
-    // }
+    }
 
+    if (!srcImg) {
+      srcImg = (0, _coreUtil.isPc)() ? _pcDefImg["default"] : _h5DefImg["default"];
+    }
 
+    var areas = data.content.openHotArea && ((0, _coreUtil.isPc)() ? data.content.pcAreas : data.content.h5Areas);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-image', {
         backgroundImg: isBackground
@@ -173,12 +188,36 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+      ref: this.imgRef,
+      onLoad: function onLoad() {
+        var scale = _this.imgRef.current.clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
       onMouseEnter: this.mouseEnterImg,
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: this.getStyle()
-    }));
+    }), areas && areas.length > 0 && areas.map(function (v, i) {
+      var aStyle = {
+        position: 'absolute',
+        top: parseInt(v.y * _this.state.scale),
+        left: parseInt(v.x * _this.state.scale),
+        width: parseInt(v.width * _this.state.scale),
+        height: parseInt(v.height * _this.state.scale)
+      };
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        key: i,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          (0, _coreUtil.clickUrl)(v.inputVal);
+        },
+        style: aStyle
+      });
+    })));
   };
 
   Image.defaultProps = {