@fonixtree/magic-design 1.0.4 → 1.0.6

package/lib/composite-comp/bol/components/ImageText/pc/index.less

@@ -116,3 +116,35 @@
     }
   }
 }
+
+
+.leftImage .group-wrap .one-card {
+  flex-direction: row;
+  .card-image-wrap  .card-image {
+    margin: 0 32px 0 0;
+  }
+}
+.rightImage .group-wrap .one-card {
+  flex-direction: row-reverse;
+  .card-image-wrap  .card-image {
+    margin: 0 0 0 32px;
+  }
+}
+
+.leftImage, .rightImage {
+  padding: 48px 108px;
+  .group-wrap {
+    flex-direction: column;
+    .one-card {
+      // flex-direction: row;
+      .card-image-wrap {
+        width: fit-content;
+      }
+      .content-wrap {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultJSON = void 0;
+
+var _uuid = require("uuid");
+
+var getDefaultJSON = function getDefaultJSON() {
+  var groupId = (0, _uuid.v4)();
+  return {
+    id: groupId,
+    type: 'LOCATION',
+    logo: {
+      parentId: groupId,
+      id: (0, _uuid.v4)(),
+      open: true,
+      color: '#fff'
+    },
+    address: {
+      parentId: groupId,
+      id: (0, _uuid.v4)(),
+      open: true
+    },
+    icon: {
+      parentId: groupId,
+      id: (0, _uuid.v4)(),
+      open: true,
+      color: '#fff'
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 12,
+        paddingBottom: 12,
+        paddingLeft: 12,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: {
+        pcLayout: 'top',
+        h5Layout: 'top'
+      }
+    },
+    background: {
+      opacity: 100,
+      color: '#597EF7',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;

package/lib/composite-comp/bol/components/Location/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultJSON = require("./defaultJSON");
+
+var _common = require("../../../../common");
+
+var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+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); }
+
+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 __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
+    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  }
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+var CustomCode =
+/** @class */
+function (_super) {
+  __extends(CustomCode, _super);
+
+  function CustomCode() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  CustomCode.prototype.componentDidMount = function () {};
+
+  CustomCode.prototype.render = function () {
+    var nodeData = this.props.nodeData;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null) : /*#__PURE__*/_react["default"].createElement("div", {
+      className: "location-mobile"
+    }, nodeData.logo.open && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      className: "logo",
+      color: nodeData.logo.color,
+      size: 20,
+      type: "icon-MapPin"
+    }), nodeData.address.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "address"
+    }, "Display Location Address"), nodeData.icon.open && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      className: "logo",
+      color: nodeData.icon.color,
+      size: 16,
+      type: "icon-outlined-right"
+    })));
+  };
+
+  CustomCode.defaultProps = {};
+  CustomCode.type = 'LOCATION';
+  CustomCode.getDefaultJSON = _defaultJSON.getDefaultJSON;
+  CustomCode = __decorate([_compositeDecorator["default"]], CustomCode);
+  return CustomCode;
+}(_react.Component);
+
+var _default = CustomCode;
+exports["default"] = _default;

package/lib/composite-comp/bol/components/Location/index.less

@@ -0,0 +1,15 @@
+.location-mobile {
+  display: flex;
+  align-items: center;
+  .logo {
+    margin-right: 6px;
+  }
+  .address {
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    color: #fff;
+  }
+  
+}

package/lib/composite-comp/bol/components/Newsletter/index.js

@@ -102,10 +102,7 @@ function (_super) {
     //   wrapStyle.backgroundPosition = 'center';
     // }
 
-    var GAData = {
-      moduleId: nodeData.id,
-      moduleName: nodeData.moduleIndex + '.' + nodeData.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(nodeData);
 
     var style = __assign({}, (0, _Text.contentStyle)(nodeData.content.inputField.content));
 

package/lib/composite-comp/bol/components/Tag/index.js

@@ -17,6 +17,8 @@ var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/
 
 var _ConfigPanel = require("../../../../core/Designer/ConfigPanel");
 
+var _commonUtil = require("../../../../utils/commonUtil");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -92,10 +94,7 @@ function (_super) {
     var _a;
 
     var nodeData = this.props.nodeData;
-    var GAData = {
-      moduleId: nodeData.id,
-      moduleName: nodeData.moduleIndex + '.' + nodeData.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(nodeData);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('tag-comp-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a)),
       onClick: this.onComponentClick

package/lib/composite-comp/bol/components/Text/index.js

@@ -17,6 +17,8 @@ var _components = require("../../../../meta-comp/components");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _commonUtil = require("../../../../utils/commonUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -93,10 +95,7 @@ function (_super) {
         nodeData = _b.nodeData,
         mode = _b.mode,
         outputType = _b.outputType;
-    var GAData = {
-      moduleId: nodeData.id,
-      moduleName: nodeData.moduleIndex + '.' + nodeData.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(nodeData);
     var groupWrapContainerStyle = window.magicDesign.device === 'pc' ? 'padding: 16px 20px;' : 'padding: 12px 20px;';
     var style = ".m-text{word-break: break-word;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{" + groupWrapContainerStyle + "}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}";
     return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/composite-comp/bol/components/Video/components/VideoTag/index.js

@@ -13,14 +13,16 @@ var _components = require("../../../../../../meta-comp/components");
 
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
-var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
-
 var _index = _interopRequireDefault(require("../ShareBtn/index"));
 
 require("./index.less");
 
 var _AlignSelector = require("../../../../../../common/AlignSelector");
 
+var _coreUtil = require("../../../../../../utils/coreUtil");
+
+var _PlaySvg = _interopRequireDefault(require("../../../../../../meta-comp/config-panels/PlayIconConfig/PlaySvg"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -49,6 +51,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 debug = require('debug')('worker:VideoTag');
 
 var VideoTag =
@@ -73,23 +91,43 @@ function (_super) {
         padding = _a.padding,
         share = _a.share,
         layout = _a.layout,
-        align = _a.align,
-        GAData = _a.GAData;
+        customize = _a.customize,
+        GAData = _a.GAData,
+        _c = _a.notVertical,
+        notVertical = _c === void 0 ? false : _c;
+    var align = customize.align,
+        vertical = customize.vertical;
     var showBtn = data.video.playButton == 'Bottom Left' && !['h5-layout3', 'pc-layout4', 'pc-layout5'].includes(layout);
+    var distanceObj = {};
+
+    if (!notVertical) {
+      if (vertical === 'top') {
+        distanceObj.top = (0, _coreUtil.isPc)() ? 40 : 12;
+        distanceObj.bottom = 'unset';
+      } else if (vertical === 'center') {
+        distanceObj.top = '50%';
+        distanceObj.bottom = 'unset';
+        distanceObj.transform = 'translateY(-50%)';
+      } else {
+        //  if (vertical === 'bottom')
+        distanceObj.bottom = (0, _coreUtil.isPc)() ? 40 : 12;
+      }
+    }
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-tag-container",
-      style: (0, _commonUtil.pxToRem)({
+      style: (0, _commonUtil.pxToRem)(__assign({
         position: position,
         padding: padding
-      })
+      }, distanceObj))
     }, showBtn && /*#__PURE__*/_react["default"].createElement("div", {
       className: "left-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "play-btn center",
       onClick: onPlayClick
-    }, /*#__PURE__*/_react["default"].createElement("img", {
-      alt: "",
-      src: _playCircle["default"]
+    }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
+      imgName: data.playIcon.iconType,
+      imgWidth: (0, _coreUtil.isPc)() ? data.playIcon.pcSize : data.playIcon.size
     }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "right-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -136,7 +174,8 @@ function (_super) {
 
   VideoTag.defaultProps = {
     data: {},
-    noShare: false
+    noShare: false,
+    notVertical: false
   };
   return VideoTag;
 }(_react["default"].Component);

package/lib/composite-comp/bol/components/Video/components/VideoTag/index.less

@@ -3,7 +3,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  padding-bottom: 10px;
+  // padding-bottom: 10px;
   display: flex;
   align-items: center;
 
@@ -20,8 +20,8 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      width: 60px;
-      height: 60px;
+      // width: 60px;
+      // height: 60px;
       z-index: 1;
       cursor: pointer;
       transform: translateX(-50%) !important;
@@ -53,11 +53,11 @@
       }
 
       .first-button {
-        margin: 5px;
+        margin: 0 5px;
       }
 
       .secondary-button {
-        margin: 5px;
+        margin: 0 5px;
       }
     }
 

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

@@ -154,6 +154,16 @@ var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
       speed: 1,
       playPosition: 'Play in Box',
       playButton: 'Middle'
+    },
+    playIcon: {
+      open: true,
+      parentId: groupId,
+      id: (0, _uuid.v4)(),
+      type: 'PLAY',
+      size: 48,
+      pcSize: 60,
+      iconType: 'light-playicon-01',
+      iconColor: 'Light'
     }
   };
 };

package/lib/composite-comp/bol/components/Video/index.js

@@ -66,7 +66,29 @@ function (_super) {
 
   function Video() {
     return _super !== null && _super.apply(this, arguments) || this;
-  }
+  } // componentWillMount() {
+  //   console.log('--video WillMount');
+  //   // 兼容新开发的功能： video新增播放按钮 的设置
+  //   const { nodeData } = this.props;
+  //   if (nodeData.groupSource && nodeData.groupSource.length > 0) {
+  //     nodeData.groupSource.forEach(group => {
+  //       if (!group.playIcon) {
+  //         console.log('--video add group.playIcon ');
+  //         group.playIcon = {
+  //           open: true,
+  //           parentId: group.id,
+  //           id: uuidv4(),
+  //           type: 'PLAY',
+  //           size: 48,
+  //           pcSize: 60,
+  //           iconType: 'light-playicon-01',
+  //           iconColor: 'Light',
+  //         };
+  //       }
+  //     });
+  //   }
+  // }
+
 
   Video.prototype.render = function () {
     var nodeData = this.props.nodeData; // console.log('---Video', nodeData);

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

@@ -11,8 +11,6 @@ var _index = _interopRequireDefault(require("../../components/ShareBtn/index"));
 
 var _common = require("../../../../../../common");
 
-var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
-
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
 var _VideoTag = _interopRequireDefault(require("../../components/VideoTag"));
@@ -23,6 +21,8 @@ var _ConfigPanel = require("../../../../../../core/Designer/ConfigPanel");
 
 require("./index.less");
 
+var _PlaySvg = _interopRequireDefault(require("../../../../../../meta-comp/config-panels/PlayIconConfig/PlaySvg"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -111,14 +111,11 @@ function (_super) {
     var _this = this;
 
     var data = this.props.data;
-    var GAData = {
-      moduleId: data.id,
-      moduleName: data.moduleIndex + '.' + data.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(data);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-layout1-wrap"
     }, data.groupSource.map(function (group) {
-      var _a, _b;
+      var _a, _b, _c;
       /** 当前是否在播放 */
 
 
@@ -151,18 +148,18 @@ function (_super) {
         }),
         play: (_b = _this.videoRefMap[group.id]) === null || _b === void 0 ? void 0 : _b.playing,
         videoId: group.id
-      }), !isPlaying && group.video.playButton == 'Middle' && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !isPlaying && group.video.playButton == 'Middle' && ((_c = group === null || group === void 0 ? void 0 : group.playIcon) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("div", {
         className: "play-btn center",
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        alt: "",
-        src: _playCircle["default"]
+      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
+        imgName: group.playIcon.iconType,
+        imgWidth: group === null || group === void 0 ? void 0 : group.playIcon.size
       })), data.share.open && !isPlaying && /*#__PURE__*/_react["default"].createElement(_index["default"], {
         data: data
       }), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

package/lib/composite-comp/bol/components/Video/mobile/Layout1/index.less

@@ -1,30 +1,24 @@
 .video-layout1-wrap {
   display: flex;
   flex-direction: column;
-
-  .video-item-wrap {
-    height: 212px;
-    position: relative;
-    margin-bottom: 10px;
-
-    &:last-child{
-      margin-bottom: 0;
-    }
-
-    .play-btn {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 60px;
-      height: 60px;
-      z-index: 1;
-      cursor: pointer;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
+}
+.video-layout1-wrap .video-item-wrap {
+  height: 4.24rem;
+  position: relative;
+  margin-bottom: 0.2rem;
+}
+.video-layout1-wrap .video-item-wrap:last-child {
+  margin-bottom: 0;
+}
+.video-layout1-wrap .video-item-wrap .play-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  cursor: pointer;
+}
+.video-layout1-wrap .video-item-wrap .play-btn img {
+  width: 100%;
+  height: 100%;
+}

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

@@ -11,8 +11,6 @@ var _index = _interopRequireDefault(require("../../components/ShareBtn/index"));
 
 var _common = require("../../../../../../common");
 
-var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
-
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
 var _coreUtil = require("../../../../../../utils/coreUtil");
@@ -23,6 +21,8 @@ var _ConfigPanel = require("../../../../../../core/Designer/ConfigPanel");
 
 require("./index.less");
 
+var _PlaySvg = _interopRequireDefault(require("../../../../../../meta-comp/config-panels/PlayIconConfig/PlaySvg"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -136,10 +136,7 @@ function (_super) {
 
     var sliderIndex = this.state.sliderIndex;
     var data = this.props.data;
-    var GAData = {
-      moduleId: data.id,
-      moduleName: data.moduleIndex + '.' + data.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(data);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-layout2-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -183,16 +180,16 @@ function (_super) {
         }),
         play: (_b = _this.videoRefMap[group.id]) === null || _b === void 0 ? void 0 : _b.playing,
         videoId: group.id
-      }), !isPlaying && group.video.playButton == 'Middle' && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !isPlaying && group.video.playButton == 'Middle' && group.playIcon.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "play-btn center",
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        alt: "",
-        src: _playCircle["default"]
+      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
+        imgName: group.playIcon.iconType,
+        imgWidth: group.playIcon.size
       })), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,