@fonixtree/magic-design 0.0.186 → 0.0.188

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

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./index.less");
-
 var _components = require("../../../../../meta-comp/components");
 
 var _constants = require("../../../../../constants");
@@ -17,6 +15,10 @@ var _commonUtil = require("../../../../../utils/commonUtil");
 
 var _currencyUtil = require("../../../../../utils/currencyUtil");
 
+var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
+
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -284,6 +286,10 @@ function (_super) {
     var _this = this;
 
     var data = this.props.data;
+    var GAData = {
+      moduleId: data.id,
+      moduleName: data.moduleIndex + '.' + data.type
+    };
     var colNum = data.customize.pcRowNum;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-Wallet-pc"
@@ -316,19 +322,31 @@ function (_super) {
         }
       }, 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 // maxHeight={MOBILE_IMG_SIZE[colNum].maxH}
+        data: item.hover.open && item.hover.image.open && _this.state["hover_" + item.id] ? item.hover.image : item.image,
+        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.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.hover.open && item.hover.title.open && _this.state["hover_" + item.id] ? item.hover.title : 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), {
           text: _amount
         }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
         readonly: true
       })));
     })));

package/lib/composite-comp/bol/config-panels/BannerConfig/BannerConfigGroup/index.js

@@ -23,6 +23,8 @@ var _locale = require("../../../../../locale");
 
 var _decorator = require("../../../../../decorator");
 
+var _defaultImg = _interopRequireDefault(require("../../../../../common/GroupList/defaultImg.png"));
+
 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); }
@@ -95,10 +97,31 @@ function (_super) {
       _this.setState({});
     };
 
+    _this.renderCard = function (src) {
+      var name = '';
+
+      if ((0, _coreUtil.isPc)()) {
+        name = src.image.content.pcImgSrc ? src.image.content.pcName : (0, _locale.i18n)('BANNER_GROUP_NAME');
+      } else {
+        name = src.image.content.h5ImgSrc ? src.image.content.h5Name : (0, _locale.i18n)('BANNER_GROUP_NAME');
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "card_wrap"
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "",
+        src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "name"
+      }, name));
+    };
+
     return _this;
   }
 
   AComponent.prototype.render = function () {
+    var _this = this;
+
     var source = this.props.source;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "banner_group"
@@ -108,6 +131,9 @@ function (_super) {
       className: "notice"
     }, notice) : /*#__PURE__*/_react["default"].createElement(_GroupList["default"], {
       onClickItem: this.onClickItem,
+      renderCard: function renderCard(v) {
+        return _this.renderCard(v);
+      },
       reRender: this.reRender,
       source: source
     })), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/composite-comp/bol/config-panels/ImageTextConfig/ImageTextConfigGroup/index.js

@@ -21,6 +21,8 @@ var _locale = require("../../../../../locale");
 
 var _decorator = require("../../../../../decorator");
 
+var _defaultImg = _interopRequireDefault(require("../../../../../common/GroupList/defaultImg.png"));
+
 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); }
@@ -95,10 +97,23 @@ function (_super) {
       _this.setState({});
     };
 
+    _this.renderCard = function (src) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "card_wrap"
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "",
+        src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "name"
+      }, src.title.open ? src.title.text : (0, _locale.i18n)('IMAGE_AND_TEXT_NAME')));
+    };
+
     return _this;
   }
 
   ImageTextConfigGroup.prototype.render = function () {
+    var _this = this;
+
     var source = this.props.source;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "banner_group"
@@ -108,6 +123,9 @@ function (_super) {
       className: "notice"
     }, notice) : /*#__PURE__*/_react["default"].createElement(_GroupList["default"], {
       onClickItem: this.onClickItem,
+      renderCard: function renderCard(v) {
+        return _this.renderCard(v);
+      },
       reRender: this.reRender,
       source: source
     })), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/composite-comp/dito/components/SearchBar/defaultJSON.js

@@ -7,12 +7,6 @@ exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _xtLogo = _interopRequireDefault(require("./imgs/xt-logo.png"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-// import { ButtonMetaType } from '../../../meta-comp/config-panels/ButtonConfig';
-// import { TextMetaType } from '../../../meta-comp/config-panels/TextConfig';
 var getDefaultJSON = function getDefaultJSON() {
   return {
     id: (0, _uuid.v4)(),
@@ -25,8 +19,8 @@ var getDefaultJSON = function getDefaultJSON() {
         content: {
           h5Name: 'name2',
           pcName: 'name2',
-          h5ImgSrc: _xtLogo["default"],
-          pcImgSrc: _xtLogo["default"],
+          h5ImgSrc: '',
+          pcImgSrc: '',
           clickUrl: ''
         },
         hover: {

package/lib/core/Designer/ConfigPanel/index.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.getSecondConfigName = exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -23,10 +23,10 @@ var _componentTypes = require("../../../constants/component-types");
 
 var _mobx = require("../../../mobx");
 
-require("./index.less");
-
 var _locale = require("../../../locale");
 
+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); }
@@ -59,6 +59,81 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var getSecondConfigName = function getSecondConfigName(selectedNode, clickedGroup) {
+  var _a, _b, _c, _d;
+
+  if (!selectedNode || !selectedNode.groupSource) {
+    return;
+  }
+
+  var panelProps = selectedNode.groupSource.find(function (src) {
+    return src.id === clickedGroup;
+  });
+  var panelIndex = selectedNode.groupSource.findIndex(function (src) {
+    return src.id === clickedGroup;
+  });
+
+  if (!panelProps) {
+    return;
+  }
+
+  var groupName = '';
+
+  switch (selectedNode.type) {
+    case 'IMAGE_GALLERY':
+    case 'WALLET':
+    case 'BANNER':
+      groupName = ''; // if (!groupName) {
+      //   groupName = isPc() ? panelProps.image?.content?.pcName : panelProps.image?.content?.h5Name;
+      // }
+
+      if ((0, _coreUtil.isPc)()) {
+        groupName = panelProps.image.content.pcImgSrc ? panelProps.image.content.pcName : (0, _locale.i18n)('BANNER_GROUP_NAME');
+      } else {
+        groupName = panelProps.image.content.h5ImgSrc ? panelProps.image.content.h5Name : (0, _locale.i18n)('BANNER_GROUP_NAME');
+      }
+
+      break;
+
+    case 'CAROUSEL':
+      groupName = (0, _coreUtil.isPc)() ? (_b = (_a = panelProps.image) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.pcName : (_d = (_c = panelProps.image) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.h5Name;
+      break;
+
+    case 'MOBILE_NAVIGATION':
+    case 'PC_NAVIGATION':
+      groupName = (panelProps === null || panelProps === void 0 ? void 0 : panelProps.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
+      break;
+
+    case 'IMAGE_TEXT':
+      groupName = panelProps.title.open ? panelProps.title.text : (0, _locale.i18n)('IMAGE_AND_TEXT_NAME');
+      break;
+
+    case 'TEXT':
+      groupName = panelProps.title.text;
+      break;
+
+    case 'RECOMMEND':
+      groupName = panelProps.groupName.text;
+      break;
+
+    case 'BUTTON':
+      groupName = panelProps.button.text;
+      break;
+
+    case 'VIDEO':
+      groupName = 'Video' + (panelIndex + 1);
+      break;
+
+    case 'TAG':
+      groupName = panelProps.button.text;
+      break;
+  }
+
+  return groupName || 'Group Name';
+};
+
+exports.getSecondConfigName = getSecondConfigName;
+
 var ConfigPanel =
 /** @class */
 function (_super) {
@@ -218,77 +293,6 @@ function (_super) {
       return null;
     };
 
-    _this.getSecondConfigName = function () {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-
-      var selectedNode = _this.state.selectedNode;
-
-      if (!selectedNode || !selectedNode.groupSource) {
-        return;
-      }
-
-      var panelProps = selectedNode.groupSource.find(function (src) {
-        return src.id === _this.state.clickedGroup;
-      });
-      var panelIndex = selectedNode.groupSource.findIndex(function (src) {
-        return src.id === _this.state.clickedGroup;
-      });
-
-      if (!panelProps) {
-        return;
-      }
-
-      var groupName = '';
-
-      switch (selectedNode.type) {
-        case 'IMAGE_GALLERY':
-        case 'WALLET':
-        case 'BANNER':
-          groupName = (_a = panelProps.title) === null || _a === void 0 ? void 0 : _a.text;
-
-          if (!groupName) {
-            groupName = (0, _coreUtil.isPc)() ? (_c = (_b = panelProps.image) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.pcName : (_e = (_d = panelProps.image) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.h5Name;
-          }
-
-          break;
-
-        case 'CAROUSEL':
-          groupName = (0, _coreUtil.isPc)() ? (_g = (_f = panelProps.image) === null || _f === void 0 ? void 0 : _f.content) === null || _g === void 0 ? void 0 : _g.pcName : (_j = (_h = panelProps.image) === null || _h === void 0 ? void 0 : _h.content) === null || _j === void 0 ? void 0 : _j.h5Name;
-          break;
-
-        case 'MOBILE_NAVIGATION':
-        case 'PC_NAVIGATION':
-          groupName = (panelProps === null || panelProps === void 0 ? void 0 : panelProps.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
-          break;
-
-        case 'IMAGE_TEXT':
-          groupName = panelProps.title.text;
-          break;
-
-        case 'TEXT':
-          groupName = panelProps.title.text;
-          break;
-
-        case 'RECOMMEND':
-          groupName = panelProps.groupName.text;
-          break;
-
-        case 'BUTTON':
-          groupName = panelProps.button.text;
-          break;
-
-        case 'VIDEO':
-          groupName = 'Video' + (panelIndex + 1);
-          break;
-
-        case 'TAG':
-          groupName = panelProps.button.text;
-          break;
-      }
-
-      return groupName || 'Group Name';
-    };
-
     _this.onSecConfigBack = function () {
       _mobx.store.setState({
         clickedGroup: null
@@ -336,7 +340,9 @@ function (_super) {
     var _a, _b;
 
     var device = this.props.device;
-    var selectedNode = this.state.selectedNode;
+    var _c = this.state,
+        selectedNode = _c.selectedNode,
+        clickedGroup = _c.clickedGroup;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "config_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -368,7 +374,7 @@ function (_super) {
       type: "icon"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "title"
-    }, this.getSecondConfigName())), this.getSecondConfigInstance()));
+    }, getSecondConfigName(selectedNode, clickedGroup))), this.getSecondConfigInstance()));
   };
 
   return ConfigPanel;

package/lib/core/Designer/RenderHtml/index.js

@@ -58,7 +58,7 @@ function (_super) {
         _this.setState({
           renderProps: renderProps
         }, function () {
-          document.querySelector('#render-html-wrap > div').style = 'max-width:800px';
+          document.querySelector('#render-html-wrap > div').style = 'max-width:600px';
           var html = document.querySelector('#render-html-wrap').innerHTML;
           resolve(html.replace(/url\("((\S|\s)*)"\)/g, 'url($1)'));
 

package/lib/core/Renderer/index.js

@@ -98,13 +98,17 @@ var Renderer = function Renderer(props) {
       background: pageBackground,
       overflow: 'auto'
     }
-  }, filterCompFloor().map(function (nodeData) {
+  }, filterCompFloor().map(function (nodeData, moduleIndex) {
     var Clazz = _componentTypes.componentMap[nodeData.type];
 
     if (!Clazz) {
       console.error("[MagicBox] Can not find type " + nodeData.type);
       return;
     }
+    /** 添加模块需要 给GA使用 */
+
+
+    nodeData.moduleIndex = moduleIndex + 1;
 
     var newInstanceProps = __assign(__assign({}, nodeData), {
       nodeData: nodeData,

package/lib/decorator/metaDecorator.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobx = require("../mobx");
 
+var _commonUtil = require("../utils/commonUtil");
+
 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; }
@@ -88,6 +90,13 @@ function metaDecorator(WrappedComponent) {
         var _a, _b;
 
         if (window.magicDesign.mode === 'renderer') {
+          var _c = _this.props,
+              data = _c.data,
+              GAData = _c.GAData;
+          (0, _commonUtil.pushGA)(__assign(__assign({}, GAData), {
+            elementId: data.id,
+            elementName: data.text
+          }));
           return;
         } // 组织冒泡
 

package/lib/locale/en/en.json

@@ -1,4 +1,6 @@
 {
+  "IMAGE_AND_TEXT_NAME": "Image and Text Name",
+  "BANNER_GROUP_NAME": "Banner Group Name",
   "VIDEO": "Video",
   "BACK": "Back",
   "VIDEO_HEIGHT": "Video Height",

package/lib/locale/es/es.json

@@ -1,4 +1,6 @@
 {
+  "IMAGE_AND_TEXT_NAME": "Image and Text Name",
+  "BANNER_GROUP_NAME": "Banner Group Name",
   "VIDEO": "Video",
   "BACK": "Back",
   "VIDEO_HEIGHT": "Video Height",

package/lib/locale/id/id.json

@@ -1,4 +1,6 @@
 {
+  "IMAGE_AND_TEXT_NAME": "Image and Text Name",
+  "BANNER_GROUP_NAME": "Banner Group Name",
   "VIDEO": "Video",
   "BACK": "Back",
   "VIDEO_HEIGHT": "Video Height",

package/lib/utils/commonUtil.js

@@ -30,22 +30,6 @@ var _qs = _interopRequireDefault(require("qs"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -595,25 +579,27 @@ function getPageDataMap() {
 /** GA上报 */
 
 
-function pushGA(data) {
-  // setInterval(() => {
-  var random = ~~(Math.random() * 10);
-  window.gtag('event', 'designer_click', __assign({
-    pageName: '页面名称' + random,
-    moduleName: '模块名称' + random,
-    moduleId: '模块id' + random,
-    groupName: '组名称' + random,
-    groupId: '组id' + random,
-    elementName: '元素名称' + random,
-    elementId: '元素id' + random,
-    pageId: '页面id' + random,
-    pageId_moduleId: 'pageId_moduleId' + random,
-    pageId_moduleId_groupId: 'pageId_moduleId_groupId' + random,
-    pageId_moduleId_groupId_elementId: 'pageId_moduleId_groupId_elementId' + random,
-    pageName_moduleName: 'pageName_moduleName' + random,
-    pageName_moduleName_groupName: 'pageName_moduleName_groupName' + random,
-    pageName_moduleName_groupName_elementNam: 'pageName_moduleName_groupName_elementNam' + random
-  }, data)); // }, 1000);
+function pushGA(data, eventName) {
+  if (eventName === void 0) {
+    eventName = 'designer_click';
+  }
+
+  if (window.magicDesign.mode == 'renderer') {
+    var pageId = window.magicDesign.pageId || '';
+    var pageName = window.magicDesign.pageName || '';
+    var eventData = {
+      pageId: pageId,
+      pageName: pageName,
+      moduleId: data.moduleId,
+      moduleName: data.moduleName,
+      groupId: data.groupId,
+      groupName: data.groupName,
+      elementId: data.elementId,
+      elementName: data.elementName
+    };
+    console.log('GA push', eventName, eventData);
+    window.gtag('event', eventName, eventData);
+  }
 }
 /** react key 计算 */
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.186",
+  "version": "0.0.188",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",