pds-dev-kit-web-test 0.3.27 → 0.3.29

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/useGroupDrag/useGroupDrag.js

@@ -18,11 +18,25 @@ function useGroupDrag(_a) {
     var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
     function makeAllInOneGroup() {
         setLayouts(function (prev) {
-            var _a;
+            var _a, _b;
+            var _c;
             // TODO: 임시용 카피
             var currentLayoutCopy = JSON.parse(JSON.stringify(prev[layoutByDevice]));
+            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            // NOTE: 그룹이 없는 경우
+            if (groupIdx < 0) {
+                var group_1 = (0, utils_1.getGroupForMultiple)(currentLayoutCopy);
+                return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = [group_1], _a));
+            }
+            // NOTE: 그룹이 이미 있는경우
+            var groupItem = currentLayoutCopy.splice(groupIdx, 1)[0];
+            if (!groupItem.groupLayouts) {
+                return prev;
+            }
+            var groupItems = (_c = groupItem.groupLayouts.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _c !== void 0 ? _c : [];
+            currentLayoutCopy.push.apply(currentLayoutCopy, groupItems);
             var group = (0, utils_1.getGroupForMultiple)(currentLayoutCopy);
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = [group], _a));
+            return __assign(__assign({}, prev), (_b = {}, _b[layoutByDevice] = [group], _b));
         });
         sectionActionHandler &&
             sectionActionHandler({

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

@@ -4,7 +4,7 @@ export interface LayoutItemWithGroupType extends LayoutItem {
     childrenIds: string[];
 }
 export declare function getGroupData(elem1: LayoutItemWithGroupType, elem2: LayoutItemWithGroupType): LayoutItemWithGroupType;
-export declare function getGroupForMultiple(elems: LayoutItemWithGroupType[]): LayoutItemWithGroupType;
+export declare function getGroupForMultiple(elems: LayoutItem[]): LayoutItemWithGroupType;
 export declare function splitComponentBlocksByGroup(componentBlocks: ComponentBlock[], groupIds: string[]): {
     inGroup: ComponentBlock[];
     notInGroup: ComponentBlock[];

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);
@@ -24,7 +32,7 @@ function useIntersectionObserver(elementRef, _a) {
             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.27",
+  "version": "0.3.29",
   "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,7 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.27]
+## [v0.3.29]
 ## 기준 pds-dev-kit-web 버전 @2.2.41
 ### sub
     * DynamicLayout
-        * GROUP - PERSIST
-        * [POC] 그룹은 cb 변화로 rerender되어도 깨지지 않도록 관리
+        * 애니메이션 이슈 픽스