pds-dev-kit-web-test 2.4.20 → 2.4.22

package/dist/src/sub/DynamicLayout/pagesPreviewMock.js

@@ -157,7 +157,7 @@ exports.sampleCustomsection1 = {
                         CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
                     },
                     CB_CONTENT_PROP_TEXT: {
-                        CB_CONTENT_PROP_TEXT_SPEC_TEXT: '{"scrollId": "airpods", "totalImages": 64, "baseURL": "https://www.apple.com/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/medium", "type": "png", "startShowingImages": 0,"endShowingImages": 1000}'
+                        CB_CONTENT_PROP_TEXT_SPEC_TEXT: '{"scrollId": "airpods", "totalImages": 64, "baseURL": "https://www.apple.com/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/medium", "type": "png", "startShowingImages": 0,"endShowingImages": 1000, "bodySelector": ".sc-bdfBQB"}'
                     },
                     CB_CONTENT_PROP_VISIBILITY: {
                         CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -427,7 +427,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                 maxWidth: customSectionStyles.maxWidth,
                                 minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
                                 fontSize: "".concat(baseFontSize, "px")
-                            }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: keepSimilarOrderToPreventRerender(layouts[layoutByDevice]).map(function (each, index) {
+                            }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode, useCSSTransforms: mode === 'EDIT' ? true : false }, { children: keepSimilarOrderToPreventRerender(layouts[layoutByDevice]).map(function (each, index) {
                                 var _a;
                                 if (each === null) {
                                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js

@@ -73,7 +73,7 @@ function TextPropToAnim(props) {
     var json = JSON.parse(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
     var hasAllProp = validateAnimationProps(json);
     if (!hasAllProp) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "MUST HAVE ALL PROPS: scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages," }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "MUST HAVE ALL PROPS: scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages, bodySelector" }));
     }
     return (0, jsx_runtime_1.jsx)(ScrollAnimation_1.default, __assign({}, json));
 }
@@ -84,7 +84,8 @@ var validateAnimationProps = function (json) {
         'baseURL',
         'type',
         'startShowingImages',
-        'endShowingImages'
+        'endShowingImages',
+        'bodySelector'
     ];
     return requiredProps.every(function (prop) { return prop in json; });
 };

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ScrollAnimation.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const AirpodsAnimation: ({ scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages }: any) => JSX.Element;
+declare const AirpodsAnimation: ({ bodySelector, scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages }: any) => JSX.Element;
 export default AirpodsAnimation;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ScrollAnimation.js

@@ -52,15 +52,19 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-plusplus */
 var react_1 = require("react");
 var AirpodsAnimation = function (_a) {
-    var scrollId = _a.scrollId, totalImages = _a.totalImages, baseURL = _a.baseURL, type = _a.type, startShowingImages = _a.startShowingImages, endShowingImages = _a.endShowingImages;
+    var bodySelector = _a.bodySelector, scrollId = _a.scrollId, totalImages = _a.totalImages, baseURL = _a.baseURL, type = _a.type, startShowingImages = _a.startShowingImages, endShowingImages = _a.endShowingImages;
     var canvasRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)([]), images = _b[0], setImages = _b[1];
     var _c = (0, react_1.useState)(0), loadedImages = _c[0], setLoadedImages = _c[1];
     var _d = (0, react_1.useState)(0), currentFrameIndex = _d[0], setCurrentFrameIndex = _d[1];
-    var mainBody = (0, react_1.useState)(function () {
-        var box = document.querySelector('.sc-bdfBQB');
+    var _e = (0, react_1.useState)(function () {
+        var box = document.querySelector(bodySelector);
         return box;
-    })[0];
+    }), mainBody = _e[0], setMainBody = _e[1];
+    (0, react_1.useEffect)(function () {
+        var box = document.querySelector(bodySelector);
+        setMainBody(box);
+    }, [bodySelector]);
     (0, react_1.useEffect)(function () {
         var loadImage = function (i) {
             return new Promise(function (resolve) {
@@ -127,7 +131,7 @@ var AirpodsAnimation = function (_a) {
         return function () {
             mainBody.removeEventListener('scroll', handleScroll);
         };
-    }, [totalImages, images, startShowingImages, endShowingImages]);
+    }, [totalImages, images, startShowingImages, endShowingImages, mainBody]);
     (0, react_1.useEffect)(function () {
         if (images.length === totalImages) {
             render();
@@ -175,7 +179,8 @@ var AirpodsAnimation = function (_a) {
     };
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: "main", style: {
             width: '100vw',
-            position: 'fixed'
+            position: 'fixed',
+            pointerEvents: 'none'
             /* height: 500vh; */
         } }, { children: [(0, jsx_runtime_1.jsx)("h1", __assign({ style: {
                     position: 'fixed',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.4.20",
+  "version": "2.4.22",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",