@fonixtree/magic-design 0.0.82 → 0.0.83

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/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);
 

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

@@ -86,6 +86,7 @@ function (_super) {
     var _this = this;
 
     var data = this.props.data;
+    console.log('data', data);
     return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
       divider: "bold",
       headerSize: "large",
@@ -93,6 +94,7 @@ function (_super) {
         key: '1',
         name: (0, _locale.i18n)('GROUP'),
         value: /*#__PURE__*/_react["default"].createElement(_RecommendConfigGroup["default"], {
+          id: data.id,
           source: data.groupSource
         })
       }, {

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

@@ -78,6 +78,7 @@ function (_super) {
           hoverState = _a.hoverState,
           maxHeight = _a.maxHeight,
           maxWidth = _a.maxWidth,
+          minHeight = _a.minHeight,
           minWidth = _a.minWidth,
           limitWidthHeight = _a.limitWidthHeight,
           scale = _a.scale;
@@ -97,6 +98,10 @@ function (_super) {
         obj.maxWidth = maxWidth;
       }
 
+      if (minHeight) {
+        obj.minHeight = minHeight;
+      }
+
       if (minWidth) {
         obj.minWidth = minWidth;
       }

package/es/meta-comp/components/Image/index.less

@@ -16,8 +16,8 @@
 
   &.backgroundImg {
     &>img {
-      // object-fit: cover;
-      width: auto;
+      object-fit: cover;
+      // width: auto;
       max-width: none;
     }
   }

package/es/meta-comp/components/Text/index.less

@@ -1,5 +1,6 @@
 .m-meta-text {
   display: block;
+  margin: 0 auto;
 
   .select-container {
     position: relative;

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

@@ -13,36 +13,35 @@
   }
 
   &.layout1 {
-    flex-direction: column;
+    flex-direction: row;
 
     &.left {
-      align-items: flex-start;
+      justify-content: flex-start;
     }
 
     &.center {
-      align-items: center;
+      justify-content: center;
     }
 
     &.right {
-      align-items: flex-end;
+      justify-content: flex-end;
     }
   }
 
   &.layout2 {
-    flex-direction: row;
+    flex-direction: column;
 
     &.left {
-      justify-content: flex-start;
+      align-items: flex-start;
     }
 
     &.center {
-      justify-content: center;
+      align-items: center;
     }
 
     &.right {
-      justify-content: flex-end;
+      align-items: flex-end;
     }
   }
 
-
 }

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

@@ -13,6 +13,10 @@ var _reactSlick = _interopRequireDefault(require("react-slick"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _lodash = require("lodash");
+
+var _coreUtil = require("../../../../../utils/coreUtil");
+
 var _components = require("../../../../../meta-comp/components");
 
 var _commonUtil = require("../../../../../utils/commonUtil");
@@ -70,20 +74,20 @@ var __assign = void 0 && (void 0).__assign || function () {
 };
 
 var MOBILE_IMG_SIZE = [{
-  w: 282,
-  h: 212
+  maxW: 375,
+  maxH: 160
 }, {
-  w: 135,
-  h: 102
+  maxW: 169,
+  maxH: 126
 }, {
-  w: 86,
-  h: 65
+  maxW: 109,
+  maxH: 82
 }, {
-  w: 60,
-  h: 45
+  maxW: 78,
+  maxH: 58
 }, {
-  w: 50,
-  h: 50
+  maxW: 50,
+  maxH: 50
 }];
 
 var CarouselMobile =
@@ -95,9 +99,28 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      sliderIndex: 0
+      sliderIndex: 0,
+      contentWidth: 0
     };
     _this.sliderRef = /*#__PURE__*/_react["default"].createRef();
+    _this.destroy = null;
+
+    _this.listenWidth = function () {
+      var renderContainer = document.querySelector('.composite_wrap');
+      if (renderContainer) _this.setState({
+        contentWidth: renderContainer.offsetWidth
+      });
+    };
+
+    _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);
+      }
+    };
 
     _this.mouseEnterBtn = function (e) {
       var _a, _b;
@@ -133,14 +156,24 @@ function (_super) {
   CarouselMobile.prototype.componentDidMount = function () {
     var _a;
 
+    var _this = this;
+
     var data = this.props.data;
 
     _mobx.store.setState({
       CarouselStore: __assign(__assign({}, _mobx.store.CarouselStore), (_a = {}, _a[data.id] = data.customize.layout, _a))
     });
+
+    this.destroy = (0, _mobx.autorun)(function () {
+      _this.sliderGoTo(_this.props.data.groupSource);
+    });
+    this.listenWidth();
+    window.addEventListener('resize', (0, _lodash.debounce)(this.listenWidth));
   };
 
   CarouselMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    this.sliderGoTo(nextProps.data.groupSource);
+
     if (nextProps.data.setting.autoplay.open) {
       this.sliderRef.slickPlay();
     } else {
@@ -148,11 +181,17 @@ function (_super) {
     }
   };
 
+  CarouselMobile.prototype.componentWillUnmount = function () {
+    this.destroy();
+  };
+
   CarouselMobile.prototype.render = function () {
     var _this = this;
 
     var data = this.props.data;
-    var sliderIndex = this.state.sliderIndex;
+    var _a = this.state,
+        sliderIndex = _a.sliderIndex,
+        contentWidth = _a.contentWidth;
     var showText = data.customize.layout === 'layout2';
     var colNum = showText ? 1 : Math.min(data.customize.rowNum, data.groupSource.length);
     var bgStyle = {};
@@ -168,13 +207,18 @@ function (_super) {
       };
     }
 
-    var spacing = data.spacing[window.magicDesign.device];
-    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
+    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: data.setting.autoplay.open,
+      autoplay: autoplay,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       speed: 500,
       draggable: window.magicDesign.mode === 'renderer',
@@ -186,9 +230,16 @@ function (_super) {
         });
       }
     };
+    var spacing = data.spacing[window.magicDesign.device];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-mobile",
       style: bgStyle
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "content",
+      style: {
+        width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
+        paddingBottom: data.setting.dots.open ? '20px' : '0'
+      }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {
         return _this.sliderRef = slider;
@@ -201,8 +252,8 @@ function (_super) {
         className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
-        maxHeight: MOBILE_IMG_SIZE[colNum - 1].h,
-        maxWidth: MOBILE_IMG_SIZE[colNum - 1].w
+        maxHeight: MOBILE_IMG_SIZE[colNum - 1].maxH,
+        maxWidth: MOBILE_IMG_SIZE[colNum - 1].maxW
       })), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -237,7 +288,7 @@ function (_super) {
           fontSize: i == sliderIndex ? data.setting.dots.hoverSize : data.setting.dots.size
         }
       });
-    })));
+    }))));
   };
 
   CarouselMobile.defaultProps = {

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

@@ -1,12 +1,16 @@
 .m-carousel-mobile {
-  display: flex;
   position: relative;
-  margin: 0 auto;
+  width: 100%;
+
+  .content {
+    display: flex;
+    margin: 0 auto;
+  }
 
   .slider-wrap {
     width: 100%;
-    padding: 30px 0;
     margin: 0 auto;
+    line-height: 1;
 
     .img-wrap {
       .img {
@@ -30,6 +34,7 @@
 
       .tags {
         margin-top: 8px;
+        margin-bottom: 12px;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -54,7 +59,7 @@
   .swiper-ban {
     position: absolute;
     width: 100%;
-    bottom: 0;
+    bottom: 6px;
     display: flex;
     align-items: center;
     justify-content: center;