@fonixtree/magic-design 0.0.61 → 0.0.62

package/es/assets/less/modal.less

@@ -1,19 +1,24 @@
 [magic_design] .ant-modal-wrap {
   display: flex;
   align-items: center;
+
   .ant-modal {
     width: 100%;
     top: 0 !important;
-    padding-bottom:  0px !important;
+    padding-bottom: 0px !important;
+
     .ant-modal-content {
       border-radius: 8px !important;
+
       .ant-modal-header {
         border-top-left-radius: 8px !important;
         border-top-right-radius: 8px !important;
       }
+
       .ant-modal-body {
         padding: 16px 16px 12px 16px !important;
+        max-height: 800px !important;
       }
     }
   }
-}
+}

package/es/common/ButtonIconLayout/index.less

@@ -7,8 +7,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 94px;
-    height: 50px;
+    min-width: 94px;
+    min-height: 50px;
+    padding: 6px 10px;
+    box-sizing: border-box;
     background: #FFFFFF;
     border: 1px solid #D2D9E5;
     border-radius: 8px;

package/es/common/Collapse/index.js

@@ -94,8 +94,19 @@ function (_super) {
         return;
       }
 
-      if (type === 'switch') {
-        debug('source', source);
+      var activeItem = source.find(function (src) {
+        return src.active;
+      });
+
+      if (activeItem) {
+        actives.push(activeItem.key);
+
+        _this.setState({
+          activeKey: actives
+        });
+
+        return;
+      } else if (type === 'switch') {
         var first = source.find(function (src) {
           var _a;
 
@@ -324,10 +335,12 @@ function (_super) {
     var _this = this;
 
     this.distroy = (0, _mobx.autorun)(function () {
-      if (_this.props.type === 'switch' && _mobx.store.clickedMeta) {
+      if (_mobx.store.clickedMeta && _this.props.type === 'switch') {
         _this.setState({
           activeKey: [_mobx.store.clickedMeta]
         });
+      } else if (_mobx.store.clickedMeta && _this.props.type === 'triangle') {
+        _this.initActive(_this.props);
       }
     });
   }; // componentWillReceiveProps(nextProps) {

package/es/common/ImageModal/index.less

@@ -1,4 +1,8 @@
 .catg_tree_container {
+  .search_container {
+    margin-bottom: 15px;
+  }
+
   .ant-tree-title {
     max-width: 200px;
     overflow: hidden;
@@ -13,9 +17,10 @@
     display: flex;
     flex-wrap: wrap;
   }
+
   .ant-upload-list-item-thumbnail {
     img {
       object-fit: contain;
     }
   }
-}
+}

package/es/common/UrlPicker/index.js

@@ -63,10 +63,13 @@ function (_super) {
     var visible = this.state.visible;
     var _a = this.props,
         value = _a.value,
-        _onChange = _a.onChange;
+        _onChange = _a.onChange,
+        disabled = _a.disabled;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-url-picker"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+    }, disabled && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "disabled"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "input-url"
     }, /*#__PURE__*/_react["default"].createElement("input", {
       onChange: function onChange(e) {
@@ -112,6 +115,7 @@ function (_super) {
 
   UrlPicker.defaultProps = {
     value: '',
+    disabled: false,
     onChange: function onChange() {}
   };
   return UrlPicker;

package/es/common/UrlPicker/index.less

@@ -1,5 +1,16 @@
 .m-url-picker {
-
+  position: relative;
+  .disabled {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background-color: #D2D9E5;
+    z-index: 1;
+    opacity: 0.5;
+    border-radius: 8px;
+  }
   .input-url {
     width: 100%;
     height: 40px;

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

@@ -59,8 +59,7 @@ function (_super) {
 
     _this.state = {
       carouseIndex: 0,
-      hoverState: false,
-      clickedGroup: ''
+      hoverState: false
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -120,12 +119,11 @@ function (_super) {
     var data = this.props.data;
     var _a = this.state,
         carouseIndex = _a.carouseIndex,
-        hoverState = _a.hoverState,
-        clickedGroup = _a.clickedGroup;
+        hoverState = _a.hoverState;
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
-    if ((0, _coreUtil.isDesignMode)() && clickedGroup) {
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
       autoplay = false;
     }
 

package/es/composite-comp/bol/components/Banner/pc/index.js

@@ -23,6 +23,8 @@ var _AlignSelector = require("../../../../../common/AlignSelector");
 
 var _common = require("../../../../../common");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -125,8 +127,7 @@ function (_super) {
       };
 
       if (item.background.bgType === 'color') {
-        bgStyle.opacity = item.background.opacity ? item.background.opacity / 100 : 1;
-        bgStyle.backgroundColor = item.background.color;
+        bgStyle.backgroundColor = (0, _commonUtil.getColorRgba)(item.background.color || '#fff', item.background.opacity / 100 || 1);
       } else {
         bgStyle.backgroundImage = "url(" + item.background.image + ")";
       }

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

@@ -363,151 +363,6 @@ var getDefaultJSON = function getDefaultJSON() {
   return {
     id: (0, _uuid.v4)(),
     type: 'IMAGE_TEXT',
-    // headline: {
-    //   id: uuidv4(),
-    //   open: true,
-    //   type: 'TEXT',
-    //   specialContent: [],
-    //   text: 'Digital Maturity',
-    //   content: {
-    //     sizeType: 'Customize font styles',
-    //     fontFamily: 'Open Sans',
-    //     fontWeight: 600,
-    //     fontSize: 28,
-    //     color: '#232F46',
-    //     width: 0,
-    //   },
-    //   underline: {
-    //     open: false,
-    //     textDecorationColor: '',
-    //     textDecorationStyle: 'solid',
-    //   },
-    //   vertical: {
-    //   },
-    // },
-    // subtitle: {
-    //   id: uuidv4(),
-    //   open: true,
-    //   type: 'TEXT',
-    //   specialContent: [],
-    //   text: 'Freedom to innovate and create with ODA compliant B/OSS solutions',
-    //   content: {
-    //     sizeType: 'Customize font styles',
-    //     fontFamily: 'Open Sans',
-    //     fontWeight: 400,
-    //     // textAlign: 'center',
-    //     fontSize: 16,
-    //     color: '#232F46',
-    //     width: 0,
-    //   },
-    //   underline: {
-    //     open: false,
-    //     textDecorationColor: '',
-    //     textDecorationStyle: 'solid',
-    //   },
-    //   vertical: {
-    //   },
-    // },
-    // button: {
-    //   id: uuidv4(),
-    //   open: true,
-    //   type: 'BUTTON',
-    //   text: 'Button',
-    //   content: {
-    //     url: '',
-    //     backgroundColor: '#2F54EB',
-    //   },
-    //   buttonText: {
-    //     sizeType: 'Customize font styles',
-    //     fontFamily: 'Open Sans',
-    //     fontWeight: 600,
-    //     fontSize: 14,
-    //     fontStyle: 'normal',
-    //     color: '#fff',
-    //   },
-    //   buttonBorder: {
-    //     open: true,
-    //     borderColor: '',
-    //     borderRadius: 6,
-    //   },
-    //   buttonIcon: {
-    //     iconUrl: '',
-    //     layout: 'right',
-    //   },
-    //   hover: {
-    //     open: false,
-    //     content: {
-    //       backgroundColor: '#0d39ed',
-    //     },
-    //     buttonText: {
-    //       sizeType: 'Customize font styles',
-    //       fontFamily: 'Open Sans',
-    //       fontWeight: 600,
-    //       fontSize: 14,
-    //       fontStyle: 'normal',
-    //       color: '#fff',
-    //     },
-    //     buttonBorder: {
-    //       open: true,
-    //       borderColor: '',
-    //       borderRadius: 6,
-    //     },
-    //     buttonIcon: {
-    //       iconUrl: '',
-    //       layout: 'right',
-    //     },
-    //   },
-    // },
-    // secondButton: {
-    //   id: uuidv4(),
-    //   open: false,
-    //   type: 'BUTTON',
-    //   text: 'Button',
-    //   content: {
-    //     url: '',
-    //     backgroundColor: '#FFFFFF',
-    //   },
-    //   buttonText: {
-    //     sizeType: 'Customize font styles',
-    //     fontFamily: 'Open Sans',
-    //     fontWeight: 600,
-    //     fontSize: 14,
-    //     fontStyle: 'normal',
-    //     color: '#2F54EB',
-    //   },
-    //   buttonBorder: {
-    //     open: true,
-    //     borderColor: '#2F54EB',
-    //     borderRadius: 6,
-    //   },
-    //   buttonIcon: {
-    //     iconUrl: '',
-    //     layout: 'right',
-    //   },
-    //   hover: {
-    //     open: false,
-    //     content: {
-    //       backgroundColor: '#0d39ed',
-    //     },
-    //     buttonText: {
-    //       sizeType: 'Customize font styles',
-    //       fontFamily: 'Open Sans',
-    //       fontWeight: 600,
-    //       fontSize: 14,
-    //       fontStyle: 'normal',
-    //       color: '#fff',
-    //     },
-    //     buttonBorder: {
-    //       open: true,
-    //       borderColor: '',
-    //       borderRadius: 6,
-    //     },
-    //     buttonIcon: {
-    //       iconUrl: '',
-    //       layout: 'right',
-    //     },
-    //   },
-    // },
     spacing: {
       pc: {
         paddingTop: 10,

package/es/composite-comp/bol/config-panels/CarouselConfig/CarouselConfigImageGroup/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); }
@@ -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/second-config-panels/ImageTextSecondConfig/index.js

@@ -142,7 +142,7 @@ function (_super) {
         tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.secondButton, ['buttonBorder', 'buttonIcon', 'buttonText', 'content', 'open', 'text']));
         panelProps.hover.secondButton = __assign(__assign({}, panelProps.hover.secondButton), tempObj);
         tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.image, ['content', 'open']));
-        panelProps.hover.image = __assign(__assign({}, panelProps.image.secondButton), tempObj);
+        panelProps.hover.image = __assign(__assign({}, panelProps.hover.image), tempObj);
         tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.text, ['content', 'open', 'spacing', 'specialContent', 'text', 'underline', 'vertical']));
         panelProps.hover.text = __assign(__assign({}, panelProps.hover.text), tempObj);
         tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.title, ['content', 'open', 'spacing', 'specialContent', 'text', 'underline', 'vertical']));
@@ -169,7 +169,7 @@ function (_super) {
       }, {
         key: 'imageTextSecondConfig2',
         name: (0, _locale.i18n)('HOVER'),
-        value: this.getContentPanel(panelProps.hover, false),
+        value: this.getContentPanel(panelProps.hover),
         metaOption: panelProps.hover,
         toggleType: 'switch'
       }]

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

@@ -122,20 +122,16 @@ function (_super) {
           CarouselStore: __assign(__assign({}, _mobx.store.CarouselStore), (_a = {}, _a[id] = v, _a))
         });
       } // 移动端导航特殊处理
+      // 更改需求，两个布局都需 可选行数
+      // if (component == 'mobileNavigation') {
+      //   if (v === 'tile') {
+      //     this.setState({ showRowNum: false });
+      //   } else {
+      //     this.setState({ showRowNum: true });
+      //   }
+      // }
 
 
-      if (component == 'mobileNavigation') {
-        if (v === 'tile') {
-          _this.setState({
-            showRowNum: false
-          });
-        } else {
-          _this.setState({
-            showRowNum: true
-          });
-        }
-      }
-
       _this.selfRender(); // this.setState({});
 
     };

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

@@ -77,7 +77,8 @@ var getDefaultJSON = function getDefaultJSON() {
     customize: {
       layout: 'newline',
       rowNum: 4,
-      mobileMaxRowNum: 5
+      mobileMaxRowNum: 5,
+      mobileMinRowNum: 3
     },
     background: {
       opacity: 100,

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

@@ -50,17 +50,27 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.calcWidth = function (num) {
-      return (100 - (num - 1) * 2) / num + "%";
+      return (100 - (num - 1) * 3) / num + "%";
+    };
+
+    _this.tileCalcWidth = function (num) {
+      return (100 - (num - 1) * 3) / (num + 0.5) + "%";
     };
 
     _this.getCardStyle = function (source, i) {
       var data = _this.props.data;
       var cardStyle = {};
-      cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
 
       if (data.customize.layout === 'newline') {
-        cardStyle.marginBottom = 12;
+        if (i > data.customize.rowNum - 1) {
+          cardStyle.marginTop = 12;
+        }
+
+        cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '3%' : 0;
         cardStyle.width = _this.calcWidth(data.customize.rowNum);
+      } else {
+        cardStyle.marginRight = '3%';
+        cardStyle.width = _this.tileCalcWidth(data.customize.rowNum);
       }
 
       return cardStyle;

package/es/composite-comp/dito/components/MobileNavigation/mobile/index.less

@@ -1,7 +1,7 @@
 .mobile-navigation-mobile {
   // display: flex;
   // flex-direction: column;
-  padding: 18px 0;
+  padding-top: 18px;
   .group-wrap {
     padding: 0 20px;
     display: flex;
@@ -29,9 +29,10 @@
     overflow-x: auto;
     flex-wrap: nowrap;
     scroll-snap-type: x;
+    padding: 0 15px;
     .one-card {
+      flex-shrink: 0;
       scroll-snap-align: end;
-      min-width: 30%;
     }
   }
 }

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

@@ -7,10 +7,11 @@ exports.recommendGroupSourceJSON = exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
+var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo, text) {
   var groupId = (0, _uuid.v4)();
   return {
     id: groupId,
+    parentId: parentId,
     image: {
       parentId: groupId,
       id: (0, _uuid.v4)(),
@@ -39,6 +40,7 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
       specialContent: [],
       text: text,
       content: {
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 14,
@@ -52,6 +54,7 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
       vertical: {}
     },
     seeAll: {
+      parentId: groupId,
       id: (0, _uuid.v4)(),
       open: true,
       type: 'BUTTON',
@@ -61,6 +64,7 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
         backgroundColor: '#fff'
       },
       buttonText: {
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 12,
@@ -98,7 +102,7 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
     intelligentValue: [],
     maxProdNum: 10,
     hover: {
-      open: true,
+      open: false,
       image: {
         parentId: groupId,
         id: (0, _uuid.v4)(),
@@ -127,6 +131,7 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
         specialContent: [],
         text: text,
         content: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -146,13 +151,17 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
 exports.recommendGroupSourceJSON = recommendGroupSourceJSON;
 
 var getDefaultJSON = function getDefaultJSON() {
+  var groupId = (0, _uuid.v4)();
+  var contentId = (0, _uuid.v4)();
   return {
-    id: (0, _uuid.v4)(),
+    id: groupId,
     type: 'RECOMMEND',
-    groupSource: [recommendGroupSourceJSON('', 'Tab1'), recommendGroupSourceJSON('', 'Tab2')],
+    groupSource: [recommendGroupSourceJSON(groupId, '', 'Tab1'), recommendGroupSourceJSON(groupId, '', 'Tab2')],
     content: {
+      id: contentId,
       label: {
         id: (0, _uuid.v4)(),
+        contentId: contentId,
         open: true,
         type: 'BUTTON',
         text: 'Button',
@@ -161,6 +170,7 @@ var getDefaultJSON = function getDefaultJSON() {
           backgroundColor: '#CE1126'
         },
         buttonText: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 8,
@@ -194,11 +204,13 @@ var getDefaultJSON = function getDefaultJSON() {
       },
       productName: {
         id: (0, _uuid.v4)(),
+        contentId: contentId,
         open: true,
         type: 'Text',
         specialContent: [],
         text: 'Flash Deal',
         content: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 700,
           fontSize: 14,
@@ -216,11 +228,13 @@ var getDefaultJSON = function getDefaultJSON() {
       },
       activityPrice: {
         id: (0, _uuid.v4)(),
+        contentId: contentId,
         open: true,
         type: 'Text',
         specialContent: [],
         text: 'Flash Deal',
         content: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 700,
           fontSize: 14,
@@ -238,11 +252,13 @@ var getDefaultJSON = function getDefaultJSON() {
       },
       salesPrice: {
         id: (0, _uuid.v4)(),
+        contentId: contentId,
         open: true,
         type: 'Text',
         specialContent: [],
         text: 'Flash Deal',
         content: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 500,
           fontSize: 10,

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

@@ -558,7 +558,7 @@ function (_super) {
         hideTabs = _a.hideTabs;
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
-    var isDivide = groupSource.length <= 3;
+    var isDivide = groupSource.length <= 4;
     var layout = panelProps.customize.layout.h5Layout;
 
     var _seeAll = (0, _commonUtil.ensure)(function () {
@@ -636,6 +636,8 @@ function (_super) {
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout5'
       })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "productList"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "productCard"
@@ -651,7 +653,7 @@ function (_super) {
         panelProps: panelProps.content,
         showProgress: false
       }));
-    }), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
       className: "btnSeeAll",
       data: _seeAll
     })));

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

@@ -25,7 +25,8 @@
     .tabTitle {
       display: flex;
       align-items: center;
-      padding: 0 24px;
+      // padding: 0 24px;
+      min-width: 80px;
       height: 100%;
       justify-content: center;
       white-space: nowrap;
@@ -57,17 +58,23 @@
   .scrollContainer {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: center;
     margin: 0 16px;
     overflow-x: auto;
     padding-bottom: 15px;
 
-    &.pl_100 {
-      padding-left: 100px;
-    }
+    .productList {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
 
-    .productCard {
-      margin-right: 12px;
+      &.pl_100 {
+        padding-left: 100px;
+      }
+
+      .productCard {
+        margin-right: 12px;
+      }
     }
   }