@fonixtree/magic-design 2.0.35 → 2.0.37

package/lib/assets/less/font.less

@@ -45,4 +45,26 @@
   src: url(../fonts/Montserrat-Bold.ttf);
   font-weight: 700;
   font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trueno';
+  src: url('../fonts/Trueno-Light.otf');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trueno';
+  src: url('../fonts/Trueno-Regular.otf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trueno';
+  src: url(../fonts/TruenoBd.otf);
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
 }

package/lib/composite-comp/bol/components/Wallet/defaultJSON.js

@@ -12,39 +12,40 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(parentId) {
   return {
     id: groupId,
     parentId: parentId,
-    image: {
+    title: {
       parentId: groupId,
       id: (0, _uuid.v4)(),
       open: true,
-      type: 'IMAGE',
+      type: 'TEXT',
+      specialContent: [],
+      text: 'Cashback',
       content: {
-        h5Name: 'Group Name',
-        pcName: 'Group Name',
-        h5ImgSrc: '',
-        pcImgSrc: '',
-        clickUrl: ''
+        sizeType: 'Customize font styles',
+        fontFamily: 'Open Sans',
+        fontWeight: 700,
+        fontSize: 18,
+        color: '#fff',
+        textAlign: 'center'
       },
-      hover: {
+      underline: {
         open: false,
-        backgroundType: 'enlarge',
-        magnification: 1.5,
-        pcImgHoverUrl: '',
-        h5ImgHoverUrl: ''
-      }
+        textDecorationColor: '',
+        textDecorationStyle: 'solid'
+      },
+      vertical: {}
     },
-    title: {
+    amount: {
       parentId: groupId,
       id: (0, _uuid.v4)(),
       open: true,
       type: 'TEXT',
       specialContent: [],
-      text: 'Cashback',
+      text: 'RM1000',
       content: {
         sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
-        fontWeight: 400,
-        fontSize: 14,
-        pcFontSize: 20,
+        fontWeight: 700,
+        fontSize: 38,
         color: '#fff',
         textAlign: 'center'
       },
@@ -55,19 +56,19 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(parentId) {
       },
       vertical: {}
     },
-    amount: {
+    sourceType: 'Cashback',
+    text: {
       parentId: groupId,
       id: (0, _uuid.v4)(),
       open: true,
       type: 'TEXT',
       specialContent: [],
-      text: 'RM1000',
+      text: 'Make money and shop on Cendol!',
       content: {
         sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
-        fontWeight: 700,
-        fontSize: 18,
-        pcFontSize: 42,
+        fontWeight: 400,
+        fontSize: 14,
         color: '#fff',
         textAlign: 'center'
       },
@@ -78,75 +79,75 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(parentId) {
       },
       vertical: {}
     },
-    sourceType: 'Cashback',
-    hover: {
-      open: false,
-      image: {
-        parentId: groupId,
-        id: (0, _uuid.v4)(),
-        open: true,
-        type: 'IMAGE',
-        content: {
-          h5Name: 'Group Name',
-          pcName: 'Group Name',
-          h5ImgSrc: '',
-          pcImgSrc: '',
-          clickUrl: ''
-        },
-        hover: {
-          open: false,
-          backgroundType: 'enlarge',
-          magnification: 1.5,
-          pcImgHoverUrl: '',
-          h5ImgHoverUrl: ''
-        }
+    button: {
+      parentId: groupId,
+      id: (0, _uuid.v4)(),
+      open: true,
+      type: 'BUTTON',
+      text: 'Button',
+      content: {
+        url: '',
+        backgroundColor: '#fff'
       },
-      title: {
-        parentId: groupId,
-        id: (0, _uuid.v4)(),
-        open: true,
-        type: 'TEXT',
-        specialContent: [],
-        text: 'Cashback',
-        content: {
-          sizeType: 'Customize font styles',
-          fontFamily: 'Open Sans',
-          fontWeight: 400,
-          fontSize: 14,
-          pcFontSize: 20,
-          color: '#fff',
-          textAlign: 'center'
-        },
-        underline: {
-          open: false,
-          textDecorationColor: '',
-          textDecorationStyle: 'solid'
-        },
-        vertical: {}
+      buttonText: {
+        sizeType: 'Customize font styles',
+        fontFamily: 'Open Sans',
+        fontWeight: 700,
+        fontSize: 13,
+        fontStyle: 'normal',
+        color: '#F52D85'
       },
-      amount: {
-        parentId: groupId,
-        id: (0, _uuid.v4)(),
+      buttonBorder: {
         open: true,
-        type: 'TEXT',
-        specialContent: [],
-        text: 'RM1000',
-        content: {
-          sizeType: 'Customize font styles',
-          fontFamily: 'Open Sans',
-          fontWeight: 700,
-          fontSize: 18,
-          pcFontSize: 42,
-          color: '#fff',
-          textAlign: 'center'
-        },
-        underline: {
-          open: false,
-          textDecorationColor: '',
-          textDecorationStyle: 'solid'
+        borderColor: '',
+        borderRadius: 4
+      },
+      buttonIcon: {
+        iconUrl: '',
+        layout: 'right'
+      },
+      spacing: {
+        pc: {
+          paddingTop: 6,
+          paddingBottom: 6,
+          paddingLeft: 16,
+          paddingRight: 16
         },
-        vertical: {}
+        mobile: {
+          paddingTop: 6,
+          paddingBottom: 6,
+          paddingLeft: 16,
+          paddingRight: 16
+        }
       }
+    },
+    peek: {
+      parentId: groupId,
+      id: (0, _uuid.v4)(),
+      open: true,
+      type: 'TEXT',
+      specialContent: [],
+      text: '',
+      content: {
+        sizeType: 'Customize font styles',
+        fontFamily: 'Open Sans',
+        fontWeight: 400,
+        fontSize: 12,
+        color: '#fff',
+        textAlign: 'center'
+      },
+      underline: {
+        open: false,
+        textDecorationColor: '',
+        textDecorationStyle: 'solid'
+      },
+      vertical: {}
+    },
+    background: {
+      opacity: 100,
+      color: '#F52D85',
+      image: '',
+      bgType: 'color'
     }
   };
 };
@@ -185,7 +186,30 @@ var getDefaultJSON = function getDefaultJSON() {
         }
       }
     },
-    groupSource: [imagesGroupSourceJSON(groupId), imagesGroupSourceJSON(groupId)],
+    groupSource: [imagesGroupSourceJSON(groupId)],
+    setting: {
+      // 自动轮播
+      autoplay: {
+        open: true,
+        interval: 3
+      },
+      // 切换按钮
+      navigation: {
+        open: true,
+        size: 16,
+        hoverSize: 16,
+        color: '#eee',
+        hoverColor: '#fff'
+      },
+      // 面板指示点
+      dots: {
+        open: true,
+        color: '#eee',
+        hoverColor: '#fff',
+        size: 8,
+        hoverSize: 8
+      }
+    },
     spacing: {
       pc: {
         paddingTop: 48,

package/lib/composite-comp/bol/components/Wallet/mobile/index.js

@@ -7,10 +7,20 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactSlick = _interopRequireDefault(require("react-slick"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _components = require("../../../../../meta-comp/components");
 
+var _mobx = require("../../../../../mobx");
+
+var _coreUtil = require("../../../../../utils/coreUtil");
+
 var _commonUtil = require("../../../../../utils/commonUtil");
 
+var _Iconfont = _interopRequireDefault(require("../../../../../common/Iconfont"));
+
 var _constants = require("../../../../../constants");
 
 var _currencyUtil = require("../../../../../utils/currencyUtil");
@@ -21,6 +31,8 @@ require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -230,8 +242,11 @@ function (_super) {
     _this.state = {
       cashback: 0,
       credit: 0,
-      bnpl: 0
+      bnpl: 0,
+      sliderIndex: 0
     };
+    _this.sliderRef = null;
+    _this.destroy = null;
 
     _this.getMyWalletData = function () {
       return __awaiter(_this, void 0, void 0, function () {
@@ -275,69 +290,245 @@ function (_super) {
       if (type === 'BNPL') return bnpl;
     };
 
+    _this.mouseEnterBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.hoverColor) {
+        e.target.style.color = data.setting.navigation.hoverColor;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.hoverSize) {
+        e.target.style.fontSize = data.setting.navigation.hoverSize;
+      }
+    };
+
+    _this.mouseLeaveBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.color) {
+        e.target.style.color = data.setting.navigation.color;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.size) {
+        e.target.style.fontSize = data.setting.navigation.size;
+      }
+    };
+
+    _this.sliderGoTo = function (groupSource) {
+      var nextIndex = groupSource.findIndex(function (item) {
+        return item.id === _mobx.store.clickedGroup;
+      });
+
+      if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
+        _this.sliderRef.slickGoTo(nextIndex);
+      }
+    };
+
     return _this;
   }
 
   WalletMobile.prototype.componentDidMount = function () {
+    var _this = this;
+
     this.getMyWalletData();
+    this.destroy = (0, _mobx.autorun)(function () {
+      _this.sliderGoTo(_this.props.data.groupSource);
+      /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+
+      if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+        _this.sliderRef.slickPause();
+      }
+    });
+  };
+
+  WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    if (nextProps.data.customize.layout === 'layout2' && this.sliderRef) {
+      this.sliderGoTo(nextProps.data.groupSource);
+
+      if (nextProps.data.setting.autoplay.open) {
+        this.sliderRef.slickPlay();
+      } else {
+        this.sliderRef.slickPause();
+      }
+    }
   };
 
   WalletMobile.prototype.render = function () {
     var _this = this;
 
     var data = this.props.data;
+    var sliderIndex = this.state.sliderIndex;
     var GAData = (0, _commonUtil.getGAData)(data);
     var colNum = data.customize.rowNum;
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+      autoplay = false;
+    }
+
+    var settings = {
+      className: 'slider-wrap',
+      arrows: false,
+      dots: false,
+      autoplay: autoplay,
+      autoplaySpeed: data.setting.autoplay.interval * 1000,
+      speed: 500,
+      draggable: window.magicDesign.mode === 'renderer',
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      beforeChange: function beforeChange(oldIndex, newIndex) {
+        _this.setState({
+          sliderIndex: newIndex
+        });
+      }
+    };
+    var navStyle = {
+      fontSize: (0, _commonUtil.convertToRem)(data.setting.navigation.size),
+      color: data.setting.navigation.color
+    };
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-Wallet-mobile"
     }, data.title.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "headline",
       data: data.title.headline
-    }), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "content column_" + colNum,
+    }), data.customize.layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "column-layout column_" + colNum,
       style: (0, _commonUtil.pxToRem)({
         gap: MOBILE_IMG_SIZE[colNum].gap
       })
     }, data.groupSource.map(function (item) {
       var _amount = _this.getAmount(item.sourceType);
 
+      var _bgStyle = {};
+
+      if (item.background) {
+        if (item.background.bgType === 'color') {
+          _bgStyle.backgroundColor = item.background.color;
+          _bgStyle.opacity = item.background.opacity ? item.background.opacity : 1;
+        } else {
+          _bgStyle.backgroundImage = "url(" + item.background.image + ")";
+          _bgStyle.backgroundPosition = 'center';
+          _bgStyle.backgroundSize = 'cover';
+        }
+      }
+
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "item-wrap",
-        onMouseEnter: function onMouseEnter() {
-          var _a;
-
-          return _this.setState((_a = {}, _a["hover_" + item.id] = true, _a));
-        },
-        onMouseLeave: function onMouseLeave() {
-          var _a;
-
-          return _this.setState((_a = {}, _a["hover_" + item.id] = false, _a));
-        },
         style: (0, _commonUtil.pxToRem)({
           width: "calc((100% - " + (0, _commonUtil.convertToRem)(MOBILE_IMG_SIZE[colNum].gap * (colNum - 1)) + ") / " + colNum + ")"
         })
-      }, item.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-        className: "image",
-        data: item.hover.open && item.hover.image.open && _this.state["hover_" + item.id] ? item.hover.image : item.image,
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "text-content",
+        style: _bgStyle
+      }, item.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "title",
+        data: item.title,
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
-        }) // maxHeight={MOBILE_IMG_SIZE[colNum].maxH}
-        ,
-        maxWidth: "100%"
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "text-content"
+        })
+      }), item.amount.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "amount",
+        data: __assign(__assign({}, item.amount), {
+          text: _amount
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), item.text.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "text",
+        data: item.text,
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), item.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+        className: "wallet-btn",
+        data: __assign(__assign({}, item.button), {
+          text: 'Lets Go!'
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        })
+      }), item.peek.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "peek left",
+        data: __assign(__assign({}, item.peek), {
+          text: 'B2B 30,000'
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), item.peek.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "peek right",
+        data: __assign(__assign({}, item.peek), {
+          text: 'Cenduit 30,000'
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      })));
+    })) : /*#__PURE__*/_react["default"].createElement("div", {
+      className: "carousel-layout"
+    }, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "carousel-icon-left",
+      onClick: function onClick() {
+        return _this.sliderRef.slickPrev();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-left"
+    }), /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
+      ref: function ref(slider) {
+        return _this.sliderRef = slider;
+      }
+    }, settings), data.groupSource.map(function (item) {
+      var _amount = _this.getAmount(item.sourceType);
+
+      var _bgStyle = {};
+
+      if (item.background) {
+        if (item.background.bgType === 'color') {
+          _bgStyle.backgroundColor = item.background.color;
+          _bgStyle.opacity = item.background.opacity ? item.background.opacity : 1;
+        } else {
+          _bgStyle.backgroundImage = "url(" + item.background.image + ")";
+          _bgStyle.backgroundPosition = 'center';
+          _bgStyle.backgroundSize = 'cover';
+        }
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.id,
+        className: "item-wrap"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "text-content",
+        style: _bgStyle
       }, item.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         className: "title",
-        data: item.hover.open && item.hover.title.open && _this.state["hover_" + item.id] ? item.hover.title : item.title,
+        data: item.title,
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         })
       }), item.amount.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         className: "amount",
-        data: __assign(__assign({}, item.hover.open && item.hover.amount.open && _this.state["hover_" + item.id] ? item.hover.amount : item.amount), {
+        data: __assign(__assign({}, item.amount), {
           text: _amount
         }),
         GAData: __assign(__assign({}, GAData), {
@@ -345,8 +536,70 @@ function (_super) {
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
         readonly: true
+      }), item.text.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "text",
+        data: item.text,
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), item.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+        className: "wallet-btn",
+        data: __assign(__assign({}, item.button), {
+          text: 'Lets Go!'
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        })
+      }), item.peek.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "peek left",
+        data: __assign(__assign({}, item.peek), {
+          text: 'B2B 30,000'
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), item.peek.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "peek right",
+        data: __assign(__assign({}, item.peek), {
+          text: 'Cenduit 30,000'
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
       })));
-    })));
+    })), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "carousel-icon-right",
+      onClick: function onClick() {
+        return _this.sliderRef.slickNext();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-right"
+    }), data.setting.dots.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "swiper-ban"
+    }, data.groupSource.map(function (item, i) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: i,
+        className: (0, _classnames["default"])('ban', {
+          active: i == sliderIndex
+        }),
+        onClick: function onClick() {
+          return _this.sliderRef.slickGoTo(i);
+        },
+        style: (0, _commonUtil.pxToRem)({
+          backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
+          fontSize: i == sliderIndex ? data.setting.dots.hoverSize : data.setting.dots.size
+        })
+      });
+    }))));
   };
 
   WalletMobile.defaultProps = {