@fonixtree/magic-design 1.0.159 → 1.0.161

package/es/common/ProductCardModal/index.js

@@ -121,7 +121,7 @@ function ProductCardModal(_a) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
-  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
+  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.slice(0, 2).map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
       key: item.offerId,
       animate: {

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

@@ -72,7 +72,8 @@ function (_super) {
   CardItem.prototype.render = function () {
     var _a = this.props,
         data = _a.data,
-        rest = __rest(_a, ["data"]);
+        onLoad = _a.onLoad,
+        rest = __rest(_a, ["data", "onLoad"]);
 
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
       className: (0, _classnames["default"])('slide-image-card-item-wrap'),
@@ -81,7 +82,8 @@ function (_super) {
       }
     }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
       cursor: data.clickUrl || '',
-      data: data
+      data: data,
+      onLoad: onLoad
     }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "text",
       data: data.groupName,

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

@@ -42,6 +42,7 @@ function ParallaxScroll(_a) {
       colThreeScrollY = _d[0],
       setColThreeScrollY = _d[1];
 
+  var num = 0;
   var third = Math.ceil(source.length / 3);
   var firstPart = source.slice(0, third);
   var secondPart = source.slice(third, 2 * third);
@@ -85,11 +86,23 @@ function ParallaxScroll(_a) {
     }
   };
 
+  var onLoad = function onLoad() {
+    // if (num < source.length - 1) {
+    //   num += 1;
+    // } else {
+    //   initLayout();
+    // }
+    initLayout();
+    setTimeout(function () {
+      initLayout();
+    }, 1000);
+  };
+
   (0, _react.useEffect)(function () {
     if (!(0, _coreUtil.isDesignMode)()) {
-      setTimeout(function () {
-        initLayout();
-      }, 1500);
+      // setTimeout(() => {
+      //   initLayout();
+      // }, 1000);
       window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
       return function () {
         window.removeEventListener('resize', initLayout);
@@ -100,7 +113,7 @@ function ParallaxScroll(_a) {
     className: "m-parallax-scroll"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     ref: gridRef,
-    className: "grid grid-cols-3",
+    className: "grid-cols-3",
     style: {
       gap: xGap + 'px'
     }
@@ -117,7 +130,8 @@ function ParallaxScroll(_a) {
         y: translateFirst
       }
     }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
-      data: el
+      data: el,
+      onLoad: onLoad
     }));
   })), /*#__PURE__*/_react["default"].createElement("div", {
     ref: colTwoRef,
@@ -132,7 +146,8 @@ function ParallaxScroll(_a) {
         y: translateSecond
       }
     }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
-      data: el
+      data: el,
+      onLoad: onLoad
     }));
   })), /*#__PURE__*/_react["default"].createElement("div", {
     ref: colThreeRef,
@@ -147,7 +162,8 @@ function ParallaxScroll(_a) {
         y: translateThird
       }
     }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
-      data: el
+      data: el,
+      onLoad: onLoad
     }));
   }))));
 }

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

@@ -1,12 +1,23 @@
 .m-parallax-scroll {
 
+  .grid-cols-3 {
+    display: grid;
+    align-content: start;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .grid {
     display: grid;
     align-content: start;
     height: fit-content;
-  }
 
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    >div {
+      z-index: 2;
+
+      &:hover {
+        z-index: 1;
+      }
+    }
   }
+
 }

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

@@ -98,14 +98,14 @@ function (_super) {
       });
       video_1.addEventListener('seeked', function () {
         // 设置Canvas尺寸与视频一致
-        canvas_1.width = video_1.offsetWidth;
-        canvas_1.height = video_1.offsetHeight; // 绘制视频帧到Canvas
+        canvas_1.width = video_1.videoWidth;
+        canvas_1.height = video_1.videoHeight; // 绘制视频帧到Canvas
 
         var ctx = canvas_1.getContext('2d');
         ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
 
         _this.setState({
-          videoPoster: canvas_1.toDataURL('image/png')
+          videoPoster: canvas_1.toDataURL('image/jpeg', 0.95)
         });
       });
     }
@@ -122,7 +122,8 @@ function (_super) {
 
     var _g = this.props,
         data = _g.data,
-        cursor = _g.cursor;
+        cursor = _g.cursor,
+        onLoad = _g.onLoad;
     var _h = this.state,
         playing = _h.playing,
         videoPoster = _h.videoPoster;
@@ -150,6 +151,7 @@ function (_super) {
       className: (0, _classnames["default"])('video-img', {
         cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
       }),
+      onLoad: onLoad,
       src: img,
       style: {
         visibility: playing ? 'hidden' : 'visible'

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

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./index.less");
-
 var _ParallaxScroll = _interopRequireDefault(require("./components/ParallaxScroll"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

@@ -21,8 +21,6 @@ var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-p
 
 var _coreUtil = require("../../../../utils/coreUtil");
 
-require("./index.less");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {

package/lib/common/ProductCardModal/index.js

@@ -121,7 +121,7 @@ function ProductCardModal(_a) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
-  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
+  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.slice(0, 2).map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
       key: item.offerId,
       animate: {

package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js

@@ -72,7 +72,8 @@ function (_super) {
   CardItem.prototype.render = function () {
     var _a = this.props,
         data = _a.data,
-        rest = __rest(_a, ["data"]);
+        onLoad = _a.onLoad,
+        rest = __rest(_a, ["data", "onLoad"]);
 
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
       className: (0, _classnames["default"])('slide-image-card-item-wrap'),
@@ -81,7 +82,8 @@ function (_super) {
       }
     }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
       cursor: data.clickUrl || '',
-      data: data
+      data: data,
+      onLoad: onLoad
     }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "text",
       data: data.groupName,

package/lib/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js

@@ -42,6 +42,7 @@ function ParallaxScroll(_a) {
       colThreeScrollY = _d[0],
       setColThreeScrollY = _d[1];
 
+  var num = 0;
   var third = Math.ceil(source.length / 3);
   var firstPart = source.slice(0, third);
   var secondPart = source.slice(third, 2 * third);
@@ -85,11 +86,23 @@ function ParallaxScroll(_a) {
     }
   };
 
+  var onLoad = function onLoad() {
+    // if (num < source.length - 1) {
+    //   num += 1;
+    // } else {
+    //   initLayout();
+    // }
+    initLayout();
+    setTimeout(function () {
+      initLayout();
+    }, 1000);
+  };
+
   (0, _react.useEffect)(function () {
     if (!(0, _coreUtil.isDesignMode)()) {
-      setTimeout(function () {
-        initLayout();
-      }, 1500);
+      // setTimeout(() => {
+      //   initLayout();
+      // }, 1000);
       window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
       return function () {
         window.removeEventListener('resize', initLayout);
@@ -100,7 +113,7 @@ function ParallaxScroll(_a) {
     className: "m-parallax-scroll"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     ref: gridRef,
-    className: "grid grid-cols-3",
+    className: "grid-cols-3",
     style: {
       gap: xGap + 'px'
     }
@@ -117,7 +130,8 @@ function ParallaxScroll(_a) {
         y: translateFirst
       }
     }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
-      data: el
+      data: el,
+      onLoad: onLoad
     }));
   })), /*#__PURE__*/_react["default"].createElement("div", {
     ref: colTwoRef,
@@ -132,7 +146,8 @@ function ParallaxScroll(_a) {
         y: translateSecond
       }
     }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
-      data: el
+      data: el,
+      onLoad: onLoad
     }));
   })), /*#__PURE__*/_react["default"].createElement("div", {
     ref: colThreeRef,
@@ -147,7 +162,8 @@ function ParallaxScroll(_a) {
         y: translateThird
       }
     }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
-      data: el
+      data: el,
+      onLoad: onLoad
     }));
   }))));
 }

package/lib/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.less

@@ -1,12 +1,23 @@
 .m-parallax-scroll {
 
+  .grid-cols-3 {
+    display: grid;
+    align-content: start;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .grid {
     display: grid;
     align-content: start;
     height: fit-content;
-  }
 
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    >div {
+      z-index: 2;
+
+      &:hover {
+        z-index: 1;
+      }
+    }
   }
+
 }

package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js

@@ -98,14 +98,14 @@ function (_super) {
       });
       video_1.addEventListener('seeked', function () {
         // 设置Canvas尺寸与视频一致
-        canvas_1.width = video_1.offsetWidth;
-        canvas_1.height = video_1.offsetHeight; // 绘制视频帧到Canvas
+        canvas_1.width = video_1.videoWidth;
+        canvas_1.height = video_1.videoHeight; // 绘制视频帧到Canvas
 
         var ctx = canvas_1.getContext('2d');
         ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
 
         _this.setState({
-          videoPoster: canvas_1.toDataURL('image/png')
+          videoPoster: canvas_1.toDataURL('image/jpeg', 0.95)
         });
       });
     }
@@ -122,7 +122,8 @@ function (_super) {
 
     var _g = this.props,
         data = _g.data,
-        cursor = _g.cursor;
+        cursor = _g.cursor,
+        onLoad = _g.onLoad;
     var _h = this.state,
         playing = _h.playing,
         videoPoster = _h.videoPoster;
@@ -150,6 +151,7 @@ function (_super) {
       className: (0, _classnames["default"])('video-img', {
         cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
       }),
+      onLoad: onLoad,
       src: img,
       style: {
         visibility: playing ? 'hidden' : 'visible'

package/lib/composite-comp/dito/components/SlideImage/pc/index.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./index.less");
-
 var _ParallaxScroll = _interopRequireDefault(require("./components/ParallaxScroll"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

@@ -21,8 +21,6 @@ var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-p
 
 var _coreUtil = require("../../../../utils/coreUtil");
 
-require("./index.less");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {

package/package.json

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

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

@@ -1 +0,0 @@
-.m-slide-image-pc {}

package/lib/composite-comp/dito/components/SlideImage/pc/index.less

@@ -1 +0,0 @@
-.m-slide-image-pc {}