@fonixtree/magic-design 0.0.82 → 0.0.84

package/es/composite-comp/bol/components/ImageGallery/mobile/index.less

@@ -1,73 +1,21 @@
-.m-banner-mobile {
-  position: relative;
-  // .turnPage {
-  //   position: absolute;
-  //   top: 50%;
-  //   transform: translateY(-50%);
-  //   z-index: 3;
-  //   cursor: pointer;
-  // }
-  // .leftBtn {
-  //   left: 20px;
-  // }
-  // .rightBtn {
-  //   right: 20px;
-  // }
+.m-image-gallery-mobile {
+  overflow-x: auto;
 
-  .carouselItem {
-    height: 386px;
-    position: relative;
+  .content {
     display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 345px;
+    margin: 0 auto;
 
-    .carouseContent {
-      padding: 80px 28px 0;
-      position: relative;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: auto;
-    }
-
-    .title {
-      margin-bottom: 8px;
+    &.horizontal {
+      flex-direction: row;
     }
 
-    .sub-title {
-      margin-bottom: 20px;
-    }
-
-    .btn-wrap {
+    .img-wrap {
       display: flex;
       align-items: center;
-      justify-content: flex-start;
-
-      .btn {
-        margin-right: 12px;
-      }
-    }
-  }
-
-  .swiper-ban {
-    position: absolute;
-    width: 100%;
-    bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .ban {
-      font-size: 16px;
-      width: 1.5em;
-      height: 0.3em;
-      background: #FFF;
-      cursor: inherit;
-      margin-right: 0.3em;
-      transition: all .5s;
-
-      &.active {
-        width: 1.5em;
-        opacity: 1;
-      }
+      justify-content: center;
     }
   }
 }

package/es/composite-comp/bol/components/ImageText/defaultJSON.js

@@ -103,6 +103,20 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         iconUrl: '',
         layout: 'right'
       },
+      spacing: {
+        pc: {
+          paddingTop: 6,
+          paddingBottom: 6,
+          paddingLeft: 10,
+          paddingRight: 10
+        },
+        mobile: {
+          paddingTop: 6,
+          paddingBottom: 6,
+          paddingLeft: 10,
+          paddingRight: 10
+        }
+      },
       hover: {
         open: false,
         content: {
@@ -125,10 +139,6 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           iconUrl: '',
           layout: 'right'
         }
-      },
-      spacing: {
-        pc: {},
-        mobile: {}
       }
     },
     secondButton: {
@@ -158,6 +168,20 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         iconUrl: '',
         layout: 'right'
       },
+      spacing: {
+        pc: {
+          paddingTop: 6,
+          paddingBottom: 6,
+          paddingLeft: 10,
+          paddingRight: 10
+        },
+        mobile: {
+          paddingTop: 6,
+          paddingBottom: 6,
+          paddingLeft: 10,
+          paddingRight: 10
+        }
+      },
       hover: {
         open: false,
         content: {
@@ -180,10 +204,6 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           iconUrl: '',
           layout: 'right'
         }
-      },
-      spacing: {
-        pc: {},
-        mobile: {}
       }
     },
     background: {

package/es/composite-comp/bol/components/ImageText/mobile/index.js

@@ -123,6 +123,7 @@ function (_super) {
       cardBtnStyle.justifyContent = _AlignSelector.alignItemMap[data.customize.align];
     }
 
+    console.log('source', data);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('image-text-mobile', data.customize.layout.h5Layout),
       style: wrapStyle

package/es/composite-comp/bol/components/Newsletter/index.less

@@ -16,7 +16,7 @@
       input {
         border: 1px solid #D2D9E5;
         width: 600px;
-        height: 56px;
+        height: 50px;
         padding: 0 20px;
         border-radius: 8px;
         background-color: #fff;

package/es/composite-comp/bol/config-panels/ButtonCompConfig/ButtonConfigGroup/index.js

@@ -21,6 +21,8 @@ require("./index.less");
 
 var _locale = require("../../../../../locale");
 
+var _decorator = require("../../../../../decorator");
+
 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); }
@@ -98,7 +100,7 @@ function (_super) {
         className: "card_wrap"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, "Button Name"));
+      }, src.button.text));
     };
 
     return _this;
@@ -133,7 +135,7 @@ function (_super) {
   AComponent.defaultProps = {
     source: []
   };
-  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], AComponent);
+  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer, _decorator.updateConfigDecorator], AComponent);
   return AComponent;
 }(_react["default"].Component);
 

package/es/composite-comp/bol/config-panels/CarouselConfig/index.js

@@ -47,7 +47,6 @@ function CarouselConfig(props) {
       key: '3',
       name: (0, _locale.i18n)('SPACING'),
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
-        configWidth: true,
         data: data.spacing
       })
     }, {

package/es/composite-comp/bol/config-panels/ImageGalleryConfig/ImageGalleryConfigImageGroup/index.js

@@ -21,6 +21,8 @@ var _defaultImg = _interopRequireDefault(require("../imgs/defaultImg.png"));
 
 var _locale = require("../../../../../locale");
 
+var _decorator = require("../../../../../decorator");
+
 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); }
@@ -110,7 +112,7 @@ function (_super) {
         src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, src.groupName.text));
+      }, (0, _coreUtil.isPc)() ? src.image.content.pcName : src.image.content.h5Name));
     };
 
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -138,7 +140,7 @@ function (_super) {
   AComponent.defaultProps = {
     source: []
   };
-  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], AComponent);
+  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer, _decorator.updateConfigDecorator], AComponent);
   return AComponent;
 }(_react["default"].Component);
 

package/es/composite-comp/bol/config-panels/ImageGalleryConfig/index.js

@@ -30,7 +30,7 @@ function ImageGalleryConfig(props) {
     headerSize: "large",
     source: [{
       key: '1',
-      name: (0, _locale.i18n)('IMAGE'),
+      name: (0, _locale.i18n)('IMAGES'),
       value: /*#__PURE__*/_react["default"].createElement(_ImageGalleryConfigImageGroup["default"], {
         source: data.groupSource
       })
@@ -41,14 +41,15 @@ function ImageGalleryConfig(props) {
         data: data.spacing
       })
     }, {
-      key: '5',
+      key: '3',
       name: (0, _locale.i18n)('CUSTOMIZE'),
       value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
+        component: "imageGallery",
         data: data.customize,
         layoutSource: _layout.imageGalleryLayout
       })
     }, {
-      key: '6',
+      key: '4',
       name: (0, _locale.i18n)('BACKGROUND'),
       value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
         data: data.background

package/es/composite-comp/bol/config-panels/TagCompConfig/TagConfigGroup/index.js

@@ -21,6 +21,8 @@ require("./index.less");
 
 var _locale = require("../../../../../locale");
 
+var _decorator = require("../../../../../decorator");
+
 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); }
@@ -98,7 +100,7 @@ function (_super) {
         className: "card_wrap"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, "Button Tag"));
+      }, src.button.text));
     };
 
     return _this;
@@ -133,7 +135,7 @@ function (_super) {
   AComponent.defaultProps = {
     source: []
   };
-  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], AComponent);
+  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer, _decorator.updateConfigDecorator], AComponent);
   return AComponent;
 }(_react["default"].Component);
 

package/es/composite-comp/bol/second-config-panels/ImageGallerySecondConfig/index.js

@@ -7,10 +7,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _locale = require("../../../../locale");
-
-var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
-
 var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -55,20 +51,13 @@ function (_super) {
 
   ImageGallerySecondConfig.prototype.render = function () {
     var panelProps = this.props.panelProps;
-    console.log('panelProps...', panelProps);
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "image_gallery_second_conf_wrap"
-    }, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
-      divider: "bold",
-      headerSize: "large",
-      source: [{
-        key: '1',
-        name: (0, _locale.i18n)('IMAGE'),
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: panelProps.image
-        }),
-        metaOption: panelProps.image
-      }]
+      className: "image_gallery_second_conf_wrap",
+      style: {
+        marginTop: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
+      data: panelProps.image
     }));
   };
 

package/es/composite-comp/common/components/ProductItem/index.less

@@ -4,6 +4,7 @@
   background: #FFFFFF;
   border: 1px solid #D2D9E5;
   width: 142px;
+  margin: 0 auto;
   cursor: pointer;
 
   .img-wrap {

package/es/composite-comp/common/config-panels/CustomizeConfig/index.js

@@ -91,21 +91,12 @@ function (_super) {
       showRowNum: true
     };
 
-    _this.layoutChange = function (v) {
+    _this.onInit = function (v) {
       var _a;
 
       var _b = _this.props,
-          selectedLayoutFun = _b.selectedLayoutFun,
-          data = _b.data,
           component = _b.component,
-          id = _b.id;
-
-      if (selectedLayoutFun) {
-        selectedLayoutFun(v);
-      } else {
-        data.layout = v;
-      } // 轮播组件特殊处理
-
+          id = _b.id; // 轮播组件特殊处理
 
       if (component === 'carousel') {
         if (v === 'layout2') {
@@ -136,6 +127,19 @@ function (_super) {
             });
           }
         }
+      } // imageGallery 第二种布局可选列数
+
+
+      if (component === 'imageGallery') {
+        if (v === 'layout2') {
+          _this.setState({
+            showRowNum: true
+          });
+        } else {
+          _this.setState({
+            showRowNum: false
+          });
+        }
       } // 移动端导航特殊处理
       // 更改需求，两个布局都需 可选行数
       // if (component == 'mobileNavigation') {
@@ -146,6 +150,20 @@ function (_super) {
       //   }
       // }
 
+    };
+
+    _this.layoutChange = function (v) {
+      var _a = _this.props,
+          selectedLayoutFun = _a.selectedLayoutFun,
+          data = _a.data;
+
+      if (selectedLayoutFun) {
+        selectedLayoutFun(v);
+      } else {
+        data.layout = v;
+      }
+
+      _this.onInit(v);
 
       _this.selfRender(); // this.setState({});
 
@@ -169,15 +187,7 @@ function (_super) {
   CustomizeConfig.prototype.componentDidMount = function () {
     var _a;
 
-    if (((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout) === 'layout2') {
-      this.setState({
-        showRowNum: false
-      });
-    } else {
-      this.setState({
-        showRowNum: true
-      });
-    }
+    this.onInit((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout);
   };
 
   CustomizeConfig.prototype.render = function () {

package/es/composite-comp/common/config-panels/SpacingConfig/index.js

@@ -62,7 +62,6 @@ function (_super) {
 
     var _a = this.props,
         data = _a.data,
-        configPaddingLR = _a.configPaddingLR,
         configCompSpace = _a.configCompSpace,
         configWidth = _a.configWidth;
     var obj = data[window.magicDesign.device] || {};
@@ -107,7 +106,7 @@ function (_super) {
         _this.selfRender();
       },
       value: obj.paddingBottom || 0
-    })), configPaddingLR && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "padding-item"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       type: "icon-padding-left"
@@ -129,7 +128,7 @@ function (_super) {
         _this.selfRender();
       },
       value: obj.paddingRight || 0
-    }))))), configCompSpace && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+    })))), configCompSpace && /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: (0, _locale.i18n)('COMPONENT_SPACING')
     }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
       maxVal: 100,
@@ -146,7 +145,6 @@ function (_super) {
   };
 
   SpacingConfig.defaultProps = {
-    configPaddingLR: true,
     configCompSpace: true,
     configWidth: false,
     data: {

package/es/composite-comp/dito/components/FlashDeal/defaultJSON.js

@@ -104,8 +104,7 @@ var getDefaultJSON = function getDefaultJSON() {
           fontWeight: 600,
           fontSize: 8,
           fontStyle: 'normal',
-          color: '#fff',
-          padding: '0 5px'
+          color: '#fff'
         },
         buttonBorder: {
           open: true,
@@ -114,16 +113,16 @@ var getDefaultJSON = function getDefaultJSON() {
         },
         spacing: {
           pc: {
-            paddingTop: 2,
-            paddingBottom: 2,
-            paddingLeft: 3,
-            paddingRight: 3
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: 4,
+            paddingRight: 4
           },
           mobile: {
-            paddingTop: 2,
-            paddingBottom: 2,
-            paddingLeft: 3,
-            paddingRight: 3
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: 4,
+            paddingRight: 4
           }
         },
         buttonIcon: {

package/es/composite-comp/dito/components/PcNavigation/pc/index.less

@@ -6,6 +6,7 @@
     width: fit-content;
     display: flex;
     align-items: center;
+    min-width: 130px;
 
     &:hover {
       @keyframes show-active{
@@ -89,8 +90,15 @@
   .category-group {
     margin-left: 180px;
     display: flex;
+    overflow-x: scroll;
+    flex: 1;
+    scroll-snap-type: x;
     .one-category {
       margin-right: 44px;
+      scroll-snap-align: end;
+      &:last-of-type {
+        margin-right: 0;
+      }
     }
   }
 

package/es/composite-comp/dito/components/Recommend/mobile/index.js

@@ -229,7 +229,7 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 var LAYOUT_IMAGE_SIZE = {
   layout1: {
     w: '100%',
-    h: 164
+    h: ''
   },
   layout2: {
     w: 100,
@@ -237,7 +237,7 @@ var LAYOUT_IMAGE_SIZE = {
   },
   layout3: {
     w: '100%',
-    h: 104
+    h: ''
   },
   layout4: {
     w: 96,
@@ -568,12 +568,15 @@ function (_super) {
       return groupSource[tabIndex].seeAll;
     }, '');
 
-    var imgHeight = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].h;
-    }, 140);
     var imgWidth = (0, _commonUtil.ensure)(function () {
       return LAYOUT_IMAGE_SIZE[layout].w;
     }, 140);
+    var imgHeight = (0, _commonUtil.ensure)(function () {
+      return LAYOUT_IMAGE_SIZE[layout].h;
+    }, 140);
+    var macyContainerDom = document.querySelector('.m-recommend-mobile');
+    if (layout === 'layout1' && macyContainerDom) imgHeight = (macyContainerDom.clientWidth - 32) / 2 - 6;
+    if (layout === 'layout3' && macyContainerDom) imgHeight = (macyContainerDom.clientWidth - 32) / 3 - 8;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-mobile",
       style: bgStyle

package/es/composite-comp/dito/components/Recommend/pc/index.js

@@ -233,7 +233,7 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 var LAYOUT_IMAGE_SIZE = {
   layout1: {
     w: '100%',
-    h: 180
+    h: ''
   },
   layout2_col6: {
     w: 160,
@@ -636,12 +636,14 @@ function (_super) {
       return groupSource[tabIndex].seeAll;
     }, '');
 
-    var imgHeight = (0, _commonUtil.ensure)(function () {
-      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].h;
-    }, 140);
     var imgWidth = (0, _commonUtil.ensure)(function () {
       return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].w : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].w;
     }, 140);
+    var imgHeight = (0, _commonUtil.ensure)(function () {
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].h;
+    }, 140);
+    var macyContainerDom = document.querySelector('.tab-list');
+    if (layout === 'layout1' && macyContainerDom) imgHeight = (macyContainerDom.clientWidth - 12 * (panelProps.customize.pcRowNum - 1)) / panelProps.customize.pcRowNum;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-pc",
       style: bgStyle

package/es/composite-comp/dito/components/Recommend/pc/index.less

@@ -31,6 +31,7 @@
       justify-content: center;
       white-space: nowrap;
       flex-direction: column;
+      cursor: pointer;
 
       img {
         height: 16px;

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

@@ -42,7 +42,7 @@ var getDefaultJSON = function getDefaultJSON() {
         open: true,
         color: {
           pc: '#D92929',
-          mobile: '#232F46'
+          mobile: '#8493AF'
         }
       },
       icon: {
@@ -50,7 +50,7 @@ var getDefaultJSON = function getDefaultJSON() {
         open: true,
         color: {
           pc: '#D92929',
-          mobile: '#8493AF'
+          mobile: '#232F46'
         }
       }
     },

package/es/composite-comp/dito/components/SearchBar/mobile/index.js

@@ -232,6 +232,8 @@ function (_super) {
   };
 
   SearchMobile.prototype.render = function () {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+
     var data = this.props.data;
     console.log('----search ', data);
     var messageNum = this.state.messageNum; // let styleWrap = {};
@@ -253,22 +255,22 @@ function (_super) {
       className: "m-search-bar"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "right"
-    }, data.content && data.content.box.open && /*#__PURE__*/_react["default"].createElement("div", {
+    }, data.content && ((_a = data.content.box) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "search-input-wrap",
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/search-page');
       },
       style: {
-        borderColor: data.content.box.color.mobile
+        borderColor: (_c = (_b = data.content.box) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c.mobile
       }
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: data.content.box.color.mobile,
+      color: (_e = (_d = data.content.box) === null || _d === void 0 ? void 0 : _d.color) === null || _e === void 0 ? void 0 : _e.mobile,
       size: 24,
       type: "icon-search2"
-    })), data.content && data.content.icon.open && /*#__PURE__*/_react["default"].createElement("div", {
+    })), data.content && ((_f = data.content.icon) === null || _f === void 0 ? void 0 : _f.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "message-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: data.content.icon.color.mobile,
+      color: (_h = (_g = data.content.icon) === null || _g === void 0 ? void 0 : _g.color) === null || _h === void 0 ? void 0 : _h.mobile,
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/message-center');
       },
@@ -276,7 +278,7 @@ function (_super) {
       type: "icon-ChatDots"
     }), !!messageNum && /*#__PURE__*/_react["default"].createElement("span", {
       className: "num"
-    }, messageNum))), data.content && data.content.logo.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+    }, messageNum))), data.content && ((_j = data.content.logo) === null || _j === void 0 ? void 0 : _j.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
       data: data.content.logo,
       style: {
         height: 30

package/es/composite-comp/dito/config-panels/FlashDealConfig/index.js

@@ -47,7 +47,6 @@ function FlashDealConfig(props) {
       name: (0, _locale.i18n)('SPACING'),
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
         configCompSpace: true,
-        configPaddingLR: false,
         data: data.spacing
       })
     }, {

package/es/composite-comp/dito/config-panels/RecommendConfig/RecommendConfigGroup/index.js

@@ -82,7 +82,7 @@ function (_super) {
     };
 
     _this.onAddClick = function () {
-      var json = (0, _defaultJSON.recommendGroupSourceJSON)('', 'Tab');
+      var json = (0, _defaultJSON.recommendGroupSourceJSON)(_this.props.id, '', 'Tab');
 
       _this.props.source.push(json);