@fonixtree/magic-design 2.0.8 → 2.0.10

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
 
+var _coreUtil = require("../../../../utils/coreUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -46,18 +48,128 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
+
+    _this.getImageRecommendSize = function (customize) {
+      var _a, _b;
+
+      var obj = null;
+
+      if ((0, _coreUtil.isPc)()) {
+        switch ((_a = customize === null || customize === void 0 ? void 0 : customize.layout) === null || _a === void 0 ? void 0 : _a.pcLayout) {
+          case 'layout1':
+            obj = {
+              width: 1440,
+              height: 912
+            };
+            break;
+
+          case 'layout2':
+            {
+              switch (customize === null || customize === void 0 ? void 0 : customize.pcRowNum) {
+                case 6:
+                  obj = {
+                    width: 220,
+                    height: 166
+                  };
+                  break;
+
+                case 5:
+                  obj = {
+                    width: 268,
+                    height: 202
+                  };
+                  break;
+
+                case 4:
+                  obj = {
+                    width: 342,
+                    height: 256
+                  };
+                  break;
+
+                case 3:
+                  obj = {
+                    width: 464,
+                    height: 348
+                  };
+                  break;
+
+                case 2:
+                  obj = {
+                    width: 708,
+                    height: 531
+                  };
+                  break;
+              }
+
+              break;
+            }
+        }
+      } else {
+        switch ((_b = customize === null || customize === void 0 ? void 0 : customize.layout) === null || _b === void 0 ? void 0 : _b.h5Layout) {
+          case 'layout1':
+            obj = {
+              width: 375,
+              height: 282
+            };
+            break;
+
+          case 'layout2':
+            {
+              switch (customize === null || customize === void 0 ? void 0 : customize.rowNum) {
+                case 5:
+                  obj = {
+                    width: 69,
+                    height: 50
+                  };
+                  break;
+
+                case 4:
+                  obj = {
+                    width: 85,
+                    height: 66
+                  };
+                  break;
+
+                case 3:
+                  obj = {
+                    width: 117,
+                    height: 87
+                  };
+                  break;
+
+                case 2:
+                  obj = {
+                    width: 182,
+                    height: 137
+                  };
+                  break;
+              }
+
+              break;
+            }
+        }
+      }
+
+      return obj;
+    };
+
     return _this;
   }
 
   ImageGallerySecondConfig.prototype.render = function () {
-    var panelProps = this.props.panelProps;
+    var _a = this.props,
+        panelProps = _a.panelProps,
+        parentNode = _a.parentNode;
+    var size = this.getImageRecommendSize(parentNode.customize);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "image_gallery_second_conf_wrap",
       style: {
         marginTop: '20px'
       }
     }, /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-      data: panelProps.image
+      data: panelProps.image,
+      recommendImgSize: size
     }));
   };
 

package/lib/composite-comp/bol/second-config-panels/ImageTextSecondConfig/index.js

@@ -81,13 +81,123 @@ function (_super) {
 
     _this.state = {};
 
+    _this.getImageRecommendSize = function (customize) {
+      var _a, _b, _c;
+
+      var obj = null;
+
+      if ((0, _coreUtil.isPc)()) {
+        if (((_a = customize === null || customize === void 0 ? void 0 : customize.layout) === null || _a === void 0 ? void 0 : _a.pcLayout) == 'normal' || ((_b = customize === null || customize === void 0 ? void 0 : customize.layout) === null || _b === void 0 ? void 0 : _b.pcLayout) == 'center') {
+          switch (customize === null || customize === void 0 ? void 0 : customize.pcRowNum) {
+            case 5:
+              obj = {
+                width: 119,
+                height: 90
+              };
+              break;
+
+            case 4:
+              obj = {
+                width: 150,
+                height: 112
+              };
+              break;
+
+            case 3:
+              obj = {
+                width: 205,
+                height: 154
+              };
+              break;
+
+            case 2:
+              obj = {
+                width: 314,
+                height: 236
+              };
+              break;
+
+            case 1:
+              obj = {
+                width: 640,
+                height: 480
+              };
+              break;
+          }
+        } else {
+          obj = {
+            width: 65,
+            height: 65
+          };
+        }
+      } else {
+        switch ((_c = customize === null || customize === void 0 ? void 0 : customize.layout) === null || _c === void 0 ? void 0 : _c.h5Layout) {
+          case 'normal2':
+            obj = {
+              width: 190,
+              height: 142
+            };
+            break;
+
+          case 'normal3':
+            {
+              switch (customize === null || customize === void 0 ? void 0 : customize.rowNum) {
+                case 4:
+                  obj = {
+                    width: 61,
+                    height: 61
+                  };
+                  break;
+
+                case 3:
+                  obj = {
+                    width: 91,
+                    height: 91
+                  };
+                  break;
+
+                case 2:
+                  obj = {
+                    width: 150,
+                    height: 150
+                  };
+                  break;
+
+                case 1:
+                  obj = {
+                    width: 327,
+                    height: 327
+                  };
+                  break;
+              }
+
+              break;
+            }
+
+          default:
+            obj = {
+              width: 38,
+              height: 38
+            };
+            break;
+        }
+      }
+
+      return obj;
+    };
+
     _this.getContentPanel = function (data, needHover) {
+      var parentNode = _this.props.parentNode;
+
+      var size = _this.getImageRecommendSize(parentNode.customize);
+
       var source = [{
         key: 'imageTextSecondContent1',
         name: (0, _locale.i18n)('IMAGE'),
         value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
           data: data.image,
-          needHover: needHover
+          needHover: needHover,
+          recommendImgSize: size
         }),
         metaOption: data.image
       }, {
@@ -182,7 +292,8 @@ function (_super) {
   };
 
   ImageTextSecondConfig.defaultProps = {
-    panelProps: {}
+    panelProps: {},
+    parentNode: {}
   };
   return ImageTextSecondConfig;
 }(_react["default"].Component);

package/lib/composite-comp/bol/second-config-panels/VideoSecondConfig/index.js

@@ -75,8 +75,59 @@ function (_super) {
       _this.setState({});
     };
 
+    _this.getImageRecommendSize = function (customize) {
+      var _a;
+
+      var obj = null;
+      console.log(customize);
+
+      if ((0, _coreUtil.isPc)()) {
+        switch ((_a = customize === null || customize === void 0 ? void 0 : customize.layout) === null || _a === void 0 ? void 0 : _a.pcLayout) {
+          case 'layout1':
+            obj = {
+              width: 1280,
+              height: 600
+            };
+            break;
+
+          case 'layout2':
+            obj = {
+              width: 640,
+              height: 600
+            };
+            break;
+
+          case 'layout3':
+            obj = {
+              width: 410,
+              height: 300
+            };
+            break;
+
+          default:
+            obj = {
+              width: 440,
+              height: 272
+            };
+            break;
+        }
+      } else {
+        obj = {
+          width: 343,
+          height: 212
+        };
+      }
+
+      return obj;
+    };
+
     _this.getContentPanel = function () {
-      var panelProps = _this.props.panelProps;
+      var _a = _this.props,
+          panelProps = _a.panelProps,
+          parentNode = _a.parentNode;
+
+      var size = _this.getImageRecommendSize(parentNode.customize);
+
       var source = [{
         key: '1',
         name: 'Overlay',
@@ -84,7 +135,8 @@ function (_super) {
           data: panelProps.overilay,
           needClickArea: false,
           needHover: false,
-          needURL: false
+          needURL: false,
+          recommendImgSize: size
         }),
         metaOption: panelProps.overilay
       }, {

package/lib/composite-comp/dito/second-config-panels/MobileNavigationSecondConfig/index.js

@@ -55,13 +55,80 @@ function (_super) {
 
     _this.state = {};
 
+    _this.getImageRecommendSize = function (customize) {
+      var obj = null;
+
+      switch (customize === null || customize === void 0 ? void 0 : customize.layout) {
+        case 'newline':
+          switch (customize === null || customize === void 0 ? void 0 : customize.rowNum) {
+            case 5:
+              obj = {
+                width: 48,
+                height: 48
+              };
+              break;
+
+            case 4:
+              obj = {
+                width: 52,
+                height: 52
+              };
+              break;
+
+            case 3:
+              obj = {
+                width: 82,
+                height: 82
+              };
+              break;
+          }
+
+          break;
+
+        case 'tile':
+          {
+            switch (customize === null || customize === void 0 ? void 0 : customize.rowNum) {
+              case 5:
+                obj = {
+                  width: 44,
+                  height: 44
+                };
+                break;
+
+              case 4:
+                obj = {
+                  width: 52,
+                  height: 52
+                };
+                break;
+
+              case 3:
+                obj = {
+                  width: 78,
+                  height: 78
+                };
+                break;
+            }
+
+            break;
+          }
+      }
+
+      return obj;
+    };
+
     _this.getContentPanel = function (data, needHover) {
+      var parentNode = _this.props.parentNode;
+
+      var size = _this.getImageRecommendSize(parentNode.customize);
+
       var source = [{
         key: 'mobileNavSecondContent1',
         name: (0, _locale.i18n)('IMAGE'),
         value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
           data: data.image,
-          needHover: needHover
+          needHover: needHover,
+          recommendImgSize: size
         }),
         metaOption: data.image
       }, {

package/lib/constants/layout.js

@@ -37,6 +37,10 @@ var _layoutImagetextP2 = _interopRequireDefault(require("../assets/images/layout
 
 var _layoutImagetextP3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p4.png"));
 
+var _imageTextLeft = _interopRequireDefault(require("../assets/images/layout-icon/imageTextLeft.svg"));
+
+var _imageTextRight = _interopRequireDefault(require("../assets/images/layout-icon/imageTextRight.svg"));
+
 var _newsletter = _interopRequireDefault(require("../assets/images/layout-icon/newsletter.svg"));
 
 var _layoutRecommend = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-1.png"));
@@ -128,6 +132,14 @@ var imageTextLayoutPc = [{
   id: 'layout3',
   name: 'center',
   image: _layoutImagetextP3["default"]
+}, {
+  id: 'layout4',
+  name: 'leftImage',
+  image: _imageTextLeft["default"]
+}, {
+  id: 'layout5',
+  name: 'rightImage',
+  image: _imageTextRight["default"]
 }];
 exports.imageTextLayoutPc = imageTextLayoutPc;
 var imageTextLayoutMobile = [{

package/lib/core/Designer/AiImageGenerator/History/index.less

@@ -6,10 +6,7 @@
   min-height: 100%;
   background-color: #FFF;
   border-radius: 4px;
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
+  
   .history_header {
     font-size: 14px;
     display: flex;

package/lib/core/Designer/AiImageGenerator/index.less

@@ -1,4 +1,8 @@
 .generate_drawer {
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
   .dialog_head {
     display: flex;
     align-items: center;

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

@@ -285,7 +285,8 @@ function (_super) {
       if (panelProps) {
         var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, {
           panelProps: panelProps,
-          outputType: outputType
+          outputType: outputType,
+          parentNode: selectedNode
         }) : null;
         return instance;
       }

package/lib/locale/en/en.json

@@ -1,4 +1,5 @@
 {
+  "RECOMMENDED_SIZE": "Recommended Size",
   "BOLD": "Bold",
   "SEMIBOLD": "Semibold",
   "DARK": "Dark",

package/lib/locale/es/es.json

@@ -1,4 +1,5 @@
 {
+  "RECOMMENDED_SIZE": "Recommended Size",
   "BOLD": "Bold",
   "SEMIBOLD": "Semibold",
   "DARK": "Dark",

package/lib/locale/id/id.json

@@ -1,4 +1,5 @@
 {
+  "RECOMMENDED_SIZE": "Recommended Size",
   "BOLD": "Bold",
   "SEMIBOLD": "Semibold",
   "DARK": "Dark",

package/lib/meta-comp/config-panels/ImageConfig/index.js

@@ -319,7 +319,8 @@ function (_super) {
         data = _a.data,
         needHover = _a.needHover,
         needClickArea = _a.needClickArea,
-        needURL = _a.needURL;
+        needURL = _a.needURL,
+        recommendImgSize = _a.recommendImgSize;
     var selectImg = this.getSelectedImg(data);
 
     var ContentSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
@@ -330,6 +331,7 @@ function (_super) {
       onChange: function onChange(v, way) {
         _this.getImg(v, way);
       },
+      recommendImgSize: recommendImgSize,
       value: selectImg
     }), needClickArea && selectImg && /*#__PURE__*/_react["default"].createElement(_HotAreaConfig["default"], {
       imgUrl: selectImg,

package/package.json

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