@fonixtree/magic-design 0.1.76 → 0.1.78

package/lib/core/Renderer/index.js

@@ -58,38 +58,36 @@ var Renderer = function Renderer(props) {
       outputType = props.outputType,
       noSetWindow = props.noSetWindow;
 
+  var _a = (0, _react.useState)([]),
+      floors = _a[0],
+      setFloors = _a[1];
+
   if (!noSetWindow) {
     setDesignConfig(props);
   }
 
   window.magicDesignPageData = pageData;
-  var pageBackground = window.magicDesign.pageBackground; // 根据楼层展示设备进行过滤
-
-  var filterCompFloor = function filterCompFloor() {
-    var source = [];
+  var pageBackground = window.magicDesign.pageBackground;
+  (0, _react.useEffect)(function () {
+    console.log('----pageData change', pageData);
+    var filterData = [];
 
     if (pageData && pageData.childNodes && pageData.childNodes.length) {
-      source = pageData.childNodes.filter(function (node) {
+      filterData = pageData.childNodes.filter(function (node) {
         return (0, _coreUtil.isActiveFloor)(node.activeTerminal);
       });
-    }
+    } // 首页组建分批渲染按5个一组
 
-    return source;
-  };
 
+    setFloors(filterData.slice(0, 5));
+    setTimeout(function () {
+      setFloors(filterData.slice(0, 10));
+      setTimeout(function () {
+        setFloors(filterData);
+      }, 200);
+    }, 200);
+  }, [pageData]);
   (0, _react.useEffect)(function () {
-    // const data = await fishFetch('/h5/ga/mediaid', {}, 'GET');
-    (0, _commonUtil.importAsync)('https://www.googletagmanager.com/gtag/js?id=G-7B9GSSLVX3', 'js').then(function () {
-      window.dataLayer = window.dataLayer || [];
-
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-
-      gtag('js', new Date());
-      gtag('config', 'G-7B9GSSLVX3');
-      window.gtag = gtag;
-    });
     setTimeout(function () {
       var _a;
 
@@ -103,10 +101,11 @@ var Renderer = function Renderer(props) {
     className: "render_wrap",
     magic_design: "",
     style: {
+      height: '100%',
       background: pageBackground,
       overflow: 'auto'
     }
-  }, filterCompFloor().map(function (nodeData, moduleIndex) {
+  }, floors.length > 0 && floors.map(function (nodeData, moduleIndex) {
     var Clazz = _componentTypes.componentMap[nodeData.type];
 
     if (!Clazz) {

package/lib/decorator/index.js

@@ -9,12 +9,25 @@ Object.defineProperty(exports, "compositeDecorator", {
     return _compositeDecorator["default"];
   }
 });
+Object.defineProperty(exports, "lazy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazy;
+  }
+});
+Object.defineProperty(exports, "lazyDestroy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazyDestroy;
+  }
+});
 Object.defineProperty(exports, "metaDecorator", {
   enumerable: true,
   get: function get() {
     return _metaDecorator["default"];
   }
 });
+exports.shouldUpdate = shouldUpdate;
 Object.defineProperty(exports, "updateConfigDecorator", {
   enumerable: true,
   get: function get() {
@@ -28,4 +41,28 @@ var _metaDecorator = _interopRequireDefault(require("./metaDecorator"));
 
 var _updateConfigDecorator = _interopRequireDefault(require("./updateConfigDecorator"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _lazyLoadDecorator = require("./lazyLoadDecorator");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+
+/** props 和 state 改变时才会render */
+function shouldUpdate() {
+  return function (target, name, descriptor) {
+    var fn = descriptor.value;
+
+    descriptor.value = function (nextProps, nextState) {
+      var nowPropsJson = JSON.stringify(nextProps);
+      var nowStateJson = JSON.stringify(nextState);
+      var should1 = nowPropsJson != this.preProps;
+      var should2 = nowStateJson != this.preState;
+      this.preProps = nowPropsJson;
+      this.preState = nowStateJson;
+      var result = should1 || should2;
+      return result && fn.apply(this, {
+        nextProps: nextProps
+      });
+    };
+  };
+}

package/lib/decorator/lazyLoadDecorator.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazy = lazy;
+exports.lazyDestroy = void 0;
+
+/**
+ * 组件懒加载
+ * @param refName 所需懒加载的组件ref名
+ * @returns
+ */
+function lazy(refName) {
+  return function (target, name, descriptor) {
+    var fn = descriptor.value;
+
+    descriptor.value = function () {
+      var _this = this;
+
+      var rest = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        rest[_i] = arguments[_i];
+      }
+
+      this.intersectionObserver = new IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting) {
+          if (!_this.state.lazyShow) {
+            _this.setState({
+              lazyShow: true
+            });
+          }
+        }
+      }, {
+        root: null,
+        // threshold: 0.8,
+        rootMargin: '0px 0px 100px 0px'
+      });
+      this.intersectionObserver.observe(this[refName].current);
+      /** 监听状态变化 */
+
+      this._intersectionObserverDestroy = function () {
+        _this.intersectionObserver.disconnect(_this[refName].current);
+      };
+
+      fn.apply(this, rest);
+    };
+  };
+}
+/**
+ * 销毁lazy监听
+ */
+
+
+var lazyDestroy = function lazyDestroy(target, name, descriptor) {
+  var fn = descriptor.value;
+
+  descriptor.value = function () {
+    var rest = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      rest[_i] = arguments[_i];
+    }
+
+    if (this._intersectionObserverDestroy) {
+      this._intersectionObserverDestroy();
+    } // this._intersectionObserverDestroy && this._intersectionObserverDestroy();
+
+
+    fn.apply(this, rest);
+  };
+};
+
+exports.lazyDestroy = lazyDestroy;

package/lib/locale/en/en.json

@@ -1,4 +1,9 @@
 {
+  "ADDRESS": "Address",
+  "LOCATION_LOGO": "Location Logo",
+  "MESSAGE_ICON": "Message icon",
+  "CART_ICON": "Cart icon",
+  "RECOMMENDED_SIZE": "Recommended Size",
   "BOLD": "Bold",
   "SEMIBOLD": "Semibold",
   "DARK": "Dark",
@@ -49,7 +54,7 @@
   "ADD_CLICKABLE_AREA": "Add Clickable Area",
   "ADD_AREA": "Add Area",
   "CLICKABLE_AREA": "Clickable Area",
-  "VOUCHER_SUCCESS": "Voucher received successfully!",
+  "VOUCHER_SUCCESS": "Coupon received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
   "SAVE": "Save",

package/lib/locale/es/es.json

@@ -1,4 +1,9 @@
 {
+  "ADDRESS": "Address",
+  "LOCATION_LOGO": "Location Logo",
+  "MESSAGE_ICON": "Message icon",
+  "CART_ICON": "Cart icon",
+  "RECOMMENDED_SIZE": "Recommended Size",
   "BOLD": "Bold",
   "SEMIBOLD": "Semibold",
   "DARK": "Dark",
@@ -49,7 +54,7 @@
   "ADD_CLICKABLE_AREA": "Add Clickable Area",
   "ADD_AREA": "Add Area",
   "CLICKABLE_AREA": "Clickable Area",
-  "VOUCHER_SUCCESS": "Voucher received successfully!",
+  "VOUCHER_SUCCESS": "Coupon received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
   "SAVE": "Guardar",

package/lib/locale/id/id.json

@@ -1,4 +1,9 @@
 {
+  "ADDRESS": "Address",
+  "LOCATION_LOGO": "Location Logo",
+  "MESSAGE_ICON": "Message icon",
+  "CART_ICON": "Cart icon",
+  "RECOMMENDED_SIZE": "Recommended Size",
   "BOLD": "Bold",
   "SEMIBOLD": "Semibold",
   "DARK": "Dark",
@@ -49,7 +54,7 @@
   "ADD_CLICKABLE_AREA": "Add Clickable Area",
   "ADD_AREA": "Add Area",
   "CLICKABLE_AREA": "Clickable Area",
-  "VOUCHER_SUCCESS": "Voucher received successfully!",
+  "VOUCHER_SUCCESS": "Coupon received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
   "SAVE": "Save",

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

@@ -93,6 +93,10 @@ function (_super) {
     return _this;
   }
 
+  Button.prototype.shouldComponentUpdate = function () {
+    return true;
+  };
+
   Button.prototype.render = function () {
     var _this = this;
 
@@ -168,6 +172,9 @@ function (_super) {
     className: '',
     readonly: false
   };
+
+  __decorate([(0, _decorator.shouldUpdate)()], Button.prototype, "shouldComponentUpdate", null);
+
   Button = __decorate([_decorator.metaDecorator], Button);
   return Button;
 }(_react.Component);

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

@@ -21,6 +21,8 @@ var _commonUtil = require("../../../utils/commonUtil");
 
 var _decorator = require("../../../decorator");
 
+var _ImageLazy = _interopRequireDefault(require("../../../common/ImageLazy"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -165,7 +167,8 @@ function (_super) {
     var _c = this.props,
         data = _c.data,
         isBackground = _c.isBackground,
-        hoverState = _c.hoverState;
+        hoverState = _c.hoverState,
+        notNeedLazy = _c.notNeedLazy;
     var hoverImgSrc = this.state.hoverImgSrc; // const { hoverSrc } = this.state;
     // console.log('--metaImage ', this.props);
 
@@ -190,7 +193,7 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, notNeedLazy ? /*#__PURE__*/_react["default"].createElement("img", {
       ref: this.imgRef,
       onLoad: function onLoad() {
         var scale = _this.imgRef.current.clientWidth / 600;
@@ -203,6 +206,18 @@ function (_super) {
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: (0, _commonUtil.pxToRem)(this.getStyle())
+    }) : /*#__PURE__*/_react["default"].createElement(_ImageLazy["default"], {
+      onLoadFunc: function onLoadFunc(clientWidth) {
+        var scale = clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
+      onMouseEnter: this.mouseEnterImg,
+      onMouseLeave: this.mouseLeaveImg,
+      src: srcImg,
+      style: (0, _commonUtil.pxToRem)(this.getStyle())
     }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
@@ -230,7 +245,8 @@ function (_super) {
     isBackground: false,
     hoverState: false,
     limitWidthHeight: false,
-    scale: 1
+    scale: 1,
+    notNeedLazy: false
   };
   Image = __decorate([_decorator.metaDecorator], Image);
   return Image;

package/lib/meta-comp/components/Text/formats/fontFamily.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontFamilyStyle = exports.FontFamilyAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var FontFamilyAttributor =
+/** @class */
+function (_super) {
+  __extends(FontFamilyAttributor, _super);
+
+  function FontFamilyAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return FontFamilyAttributor;
+}(Parchment.Attributor.Style);
+
+exports.FontFamilyAttributor = FontFamilyAttributor;
+var FontFamilyStyle = new FontFamilyAttributor('font-family', 'font-family', {
+  scope: Parchment.Scope.INLINE
+});
+exports.FontFamilyStyle = FontFamilyStyle;
+
+_quill["default"].register('formats/font-family', FontFamilyStyle, true);

package/lib/meta-comp/components/Text/formats/fontStyle.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontStyleAttributor = exports.FontStyle = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var FontStyleAttributor =
+/** @class */
+function (_super) {
+  __extends(FontStyleAttributor, _super);
+
+  function FontStyleAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return FontStyleAttributor;
+}(Parchment.Attributor.Style);
+
+exports.FontStyleAttributor = FontStyleAttributor;
+var FontStyle = new FontStyleAttributor('font-style', 'font-style', {
+  scope: Parchment.Scope.INLINE
+});
+exports.FontStyle = FontStyle;
+
+_quill["default"].register('formats/font-style', FontStyle, true);

package/lib/meta-comp/components/Text/formats/fontWeight.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontWeightStyle = exports.FontWeightAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var FontWeightAttributor =
+/** @class */
+function (_super) {
+  __extends(FontWeightAttributor, _super);
+
+  function FontWeightAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return FontWeightAttributor;
+}(Parchment.Attributor.Style);
+
+exports.FontWeightAttributor = FontWeightAttributor;
+var FontWeightStyle = new FontWeightAttributor('font-weight', 'font-weight', {
+  scope: Parchment.Scope.INLINE
+});
+exports.FontWeightStyle = FontWeightStyle;
+
+_quill["default"].register('formats/font-weight', FontWeightStyle, true);

package/lib/meta-comp/components/Text/formats/listStyleTypeStyle.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListStyleTypeStyle = exports.ListStyleTypeAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var ListStyleTypeAttributor =
+/** @class */
+function (_super) {
+  __extends(ListStyleTypeAttributor, _super);
+
+  function ListStyleTypeAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return ListStyleTypeAttributor;
+}(Parchment.Attributor.Style);
+
+exports.ListStyleTypeAttributor = ListStyleTypeAttributor;
+var ListStyleTypeStyle = new ListStyleTypeAttributor('list-style-type', 'list-style-type', {
+  scope: Parchment.Scope.BLOCK
+});
+exports.ListStyleTypeStyle = ListStyleTypeStyle;
+
+_quill["default"].register('formats/list-style-type', ListStyleTypeStyle, true);

package/lib/meta-comp/components/Text/formats/textDecorationColor.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextDecorationColorStyle = exports.TextDecorationColorAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var TextDecorationColorAttributor =
+/** @class */
+function (_super) {
+  __extends(TextDecorationColorAttributor, _super);
+
+  function TextDecorationColorAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return TextDecorationColorAttributor;
+}(Parchment.Attributor.Style);
+
+exports.TextDecorationColorAttributor = TextDecorationColorAttributor;
+var TextDecorationColorStyle = new TextDecorationColorAttributor('text-decoration-color', 'text-decoration-color', {
+  scope: Parchment.Scope.INLINE
+});
+exports.TextDecorationColorStyle = TextDecorationColorStyle;
+
+_quill["default"].register('formats/text-decoration-color', TextDecorationColorStyle, true);

package/lib/meta-comp/components/Text/formats/textDecorationStyle.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextDecorationStyleStyle = exports.TextDecorationStyleAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var TextDecorationStyleAttributor =
+/** @class */
+function (_super) {
+  __extends(TextDecorationStyleAttributor, _super);
+
+  function TextDecorationStyleAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return TextDecorationStyleAttributor;
+}(Parchment.Attributor.Style);
+
+exports.TextDecorationStyleAttributor = TextDecorationStyleAttributor;
+var TextDecorationStyleStyle = new TextDecorationStyleAttributor('text-decoration-style', 'text-decoration-style', {
+  scope: Parchment.Scope.INLINE
+});
+exports.TextDecorationStyleStyle = TextDecorationStyleStyle;
+
+_quill["default"].register('formats/text-decoration-style', TextDecorationStyleStyle, true);