pds-dev-kit-web-test 0.3.28 → 0.3.30

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_TWITTER_PROPERTIES_TYPE } from '../../../../util/types';
-type Props = CB_TWITTER_PROPERTIES_TYPE;
+import type { CB_TWITTER_PROPERTIES_TYPE, IndexForIntersection } from '../../../../util/types';
+type Props = CB_TWITTER_PROPERTIES_TYPE & IndexForIntersection;
 declare function Twitter(props: Props): JSX.Element;
 export default Twitter;

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

@@ -22,7 +22,7 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 function Twitter(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, index = props.index;
     var CB_CONTENT_PROP_TWITTER_SPEC_SRC = props.CB_CONTENT_PROP_TWITTER.CB_CONTENT_PROP_TWITTER_SPEC_SRC, CB_STYLE_PROP_TWITTER_SPEC_THEME = props.CB_STYLE_PROP_TWITTER.CB_STYLE_PROP_TWITTER_SPEC_THEME, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
     var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
     var userId = CB_CONTENT_PROP_TWITTER_SPEC_SRC.replace('https://twitter.com/', '');
@@ -37,7 +37,9 @@ function Twitter(props) {
         delete layout.justifyContent;
     }
     var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { CB_YOUTUBE_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
-type Props = CB_YOUTUBE_PROPERTIES_TYPE;
+import type { CB_YOUTUBE_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+type Props = CB_YOUTUBE_PROPERTIES_TYPE & IndexForIntersection;
 export type YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'ALWAYS' | 'VIEWPORT-FREEZE' | 'VIEWPORT';
 declare function Youtube(props: Props): JSX.Element;
 export default Youtube;

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

@@ -32,7 +32,7 @@ var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentPr
 var YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'VIEWPORT';
 function Youtube(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE, device, YOUTUBE_AUTOPLAY_TRIGGER_POINT), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id, cbAutoplayMode = _b.cbAutoplayMode;
     var isEditMode = mode === 'EDIT';
     var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
@@ -42,7 +42,9 @@ function Youtube(props) {
         propsStyle.visibility = 'visible';
     }
     var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var isNoneEffectType = device === 'DESKTOP'
@@ -54,7 +56,7 @@ function Youtube(props) {
     var autoplayRef = (0, react_1.useRef)(null);
     var autoplayEntry = (0, hooks_1.useIntersectionObserver)(autoplayRef, {
         freezeOnceVisible: YOUTUBE_AUTOPLAY_TRIGGER_POINT === 'VIEWPORT-FREEZE' ? true : false
-    });
+    }, [index]);
     var onLoadIframe = function () {
         var _a;
         if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useIntersectionObserver.d.ts

@@ -2,5 +2,5 @@ import { RefObject } from 'react';
 interface Args extends IntersectionObserverInit {
     freezeOnceVisible?: boolean;
 }
-export declare function useIntersectionObserver(elementRef: RefObject<Element>, { threshold, root, rootMargin, freezeOnceVisible }: Args): IntersectionObserverEntry | undefined;
+export declare function useIntersectionObserver(elementRef: RefObject<Element>, { threshold, root, rootMargin, freezeOnceVisible }: Args, deps: any[]): IntersectionObserverEntry | undefined;
 export {};

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

@@ -1,13 +1,21 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIntersectionObserver = void 0;
-/* eslint-disable no-console */
 var react_1 = require("react");
-function useIntersectionObserver(elementRef, _a) {
+function useIntersectionObserver(elementRef, _a, deps) {
     var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
     var _f = (0, react_1.useState)(), entry = _f[0], setEntry = _f[1];
     var frozen = (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && freezeOnceVisible;
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useLayoutEffect)(function () {
         var updateEntry = function (_a) {
             var entry = _a[0];
             setEntry(entry);
@@ -15,21 +23,16 @@ function useIntersectionObserver(elementRef, _a) {
         var node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current; // DOM Ref
         var hasIOSupport = !!window.IntersectionObserver;
         if (!hasIOSupport || frozen || !node) {
-            console.error('no node!', node);
             return;
         }
         var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
         var observer = new IntersectionObserver(updateEntry, observerParams);
         observer.observe(node);
-        console.log('observer-connected', node);
-        var rect = node.getBoundingClientRect();
-        console.log('rect:', { x: rect.x, y: rect.y, top: rect.top, bottom: rect.bottom });
         return function () {
-            console.log('observer-disconnected');
             observer.disconnect();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [elementRef === null || elementRef === void 0 ? void 0 : elementRef.current, JSON.stringify(threshold), root, rootMargin, frozen]);
+    }, __spreadArray([elementRef === null || elementRef === void 0 ? void 0 : elementRef.current, JSON.stringify(threshold), root, rootMargin, frozen], deps, true));
     return entry;
 }
 exports.useIntersectionObserver = useIntersectionObserver;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts

@@ -132,3 +132,6 @@ export type ParserResult = {
 };
 export type JsonPropertiesParserResult = Omit<ParserResult, 'hoverStyle'> & OverlayStyle;
 export type NamedPropAllTypes = NamedStylePropType | NamedLayoutPropType;
+export type IndexForIntersection = {
+    index: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.28",
+  "version": "0.3.30",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,7 +22,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.30",
+    "publ-echo": "^0.0.31",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,6 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.28]
+## [v0.3.30]
 ## 기준 pds-dev-kit-web 버전 @2.2.41
 ### sub
     * DynamicLayout
-        * 에러 픽스 위한 log 추가
+        * 애니메이션 이슈 픽스 - cb의 순서를 최대한 보장한다.