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

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

@@ -53,6 +53,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
 var useGroupDrag_1 = require("./hooks/useGroupDrag");
+var useGroupDrag_2 = require("./hooks/useGroupDrag/useGroupDrag");
+var utils_1 = require("./hooks/useGroupDrag/utils");
 var util_1 = require("./util");
 var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
 var WidthProvidedRGL = (0, publ_echo_1.WidthProvider)(ReactGridLayout_1.default);
@@ -80,20 +82,40 @@ function CustomSection(props) {
             sm: sm
         };
     }), layouts = _f[0], setLayouts = _f[1];
+    var _g = (0, useGroupDrag_1.useGroupDrag)({
+        setLayouts: setLayouts,
+        device: device,
+        sectionActionHandler: sectionActionHandler
+    }), setGroupCB = _g.setGroupCB, breakGroupCB = _g.breakGroupCB, makeAllInOneGroup = _g.makeAllInOneGroup, escapeFromGroup = _g.escapeFromGroup;
     (0, react_1.useEffect)(function () {
         var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
-        setLayouts({ lg: lg, sm: sm });
-    }, [componentBlocks]);
+        setLayouts(function (prev) {
+            var groupInLG = (0, useGroupDrag_2.getGroupCB)(prev.lg);
+            var groupInSM = (0, useGroupDrag_2.getGroupCB)(prev.sm);
+            var groupedCBIdsInLG = (groupInLG === null || groupInLG === void 0 ? void 0 : groupInLG.childrenIds) || [];
+            var groupedCBIdsInSM = (groupInSM === null || groupInSM === void 0 ? void 0 : groupInSM.childrenIds) || [];
+            var filteredLG = (0, useGroupDrag_2.filterItemsById)(lg, groupedCBIdsInLG);
+            var filteredSM = (0, useGroupDrag_2.filterItemsById)(sm, groupedCBIdsInSM);
+            if (groupInLG === null || groupInLG === void 0 ? void 0 : groupInLG.groupLayouts) {
+                var newGroupLayout = (0, utils_1.getGroupForMultiple)(lg.filter(function (each) { return groupedCBIdsInLG.includes(each.i); }));
+                filteredLG.push(newGroupLayout);
+                // eslint-disable-next-line no-console
+                console.log({ newGroupLG: newGroupLayout });
+            }
+            if (groupInSM === null || groupInSM === void 0 ? void 0 : groupInSM.groupLayouts) {
+                var newGroupLayout = (0, utils_1.getGroupForMultiple)(sm.filter(function (each) { return groupedCBIdsInSM.includes(each.i); }));
+                filteredSM.push(newGroupLayout);
+                // eslint-disable-next-line no-console
+                console.log({ newGroupSM: newGroupLayout });
+            }
+            return { lg: filteredLG, sm: filteredSM };
+        });
+    }, [componentBlocks, useGroupDrag_2.getGroupCB]);
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedCB(null);
         }
     }, [editingSectionId]);
-    var _g = (0, useGroupDrag_1.useGroupDrag)({
-        setLayouts: setLayouts,
-        device: device,
-        sectionActionHandler: sectionActionHandler
-    }), setGroupCB = _g.setGroupCB, breakGroupCB = _g.breakGroupCB, makeAllInOneGroup = _g.makeAllInOneGroup, escapeFromGroup = _g.escapeFromGroup, getGroupCB = _g.getGroupCB;
     var _h = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
@@ -206,7 +228,7 @@ function CustomSection(props) {
         if (!isEditMode) {
             return;
         }
-        if (getGroupCB(layouts[layoutByDevice])) {
+        if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
             breakGroupCB();
         }
         setSelectedCB(null);

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

@@ -48,19 +48,12 @@ function Text(props) {
     var cbRef = (0, react_1.useRef)(null);
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
-    console.log('CB-REF', {
-        cbRef: cbRef,
-        current: cbRef.current,
-        text: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT,
-        entry: entry
-    });
     var effectCssProperties = isVisible ? effect : {};
     var isNoneEffectType = device === 'DESKTOP'
         ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    console.log({ hasEffect: hasEffect, effectVisibleStyle: effectVisibleStyle });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getTextStyles(props, device) {

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

@@ -3,7 +3,7 @@ import { LayoutItemWithGroupType } from './utils';
 import type { LayoutsType } from '../../CustomSection';
 import type { Device } from '../../util/types';
 import type { DynamicLayoutProps } from '../../../../../DynamicLayout/types';
-import type { Layout } from 'publ-echo/dist/lib';
+import type { Layout, LayoutItem } from 'publ-echo/dist/lib';
 type Props = {
     device: Device;
     setLayouts: React.Dispatch<React.SetStateAction<LayoutsType>>;
@@ -12,8 +12,9 @@ type Props = {
 declare function useGroupDrag({ device, setLayouts, sectionActionHandler }: Props): {
     setGroupCB: (selectedId: number | 'group', newId: number) => void;
     breakGroupCB: () => void;
-    getGroupCB: (layout: Layout) => LayoutItemWithGroupType | null;
     makeAllInOneGroup: () => void;
     escapeFromGroup: (id: string) => void;
 };
+export declare function getGroupCB(layout: Layout): LayoutItemWithGroupType | null;
+export declare const filterItemsById: (layout: Layout, idsToRemove: string[]) => LayoutItem[];
 export default useGroupDrag;

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

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterItemsById = exports.getGroupCB = void 0;
 var utils_1 = require("./utils");
 function useGroupDrag(_a) {
     var device = _a.device, setLayouts = _a.setLayouts, sectionActionHandler = _a.sectionActionHandler;
@@ -107,14 +108,19 @@ function useGroupDrag(_a) {
                 }
             });
     }
-    function getGroupCB(layout) {
-        var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });
-        if (groupIdx < 0) {
-            return null;
-        }
-        var groupItem = layout[groupIdx];
-        return groupItem;
+    return { setGroupCB: setGroupCB, breakGroupCB: breakGroupCB, makeAllInOneGroup: makeAllInOneGroup, escapeFromGroup: escapeFromGroup };
+}
+function getGroupCB(layout) {
+    var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });
+    if (groupIdx < 0) {
+        return null;
     }
-    return { setGroupCB: setGroupCB, breakGroupCB: breakGroupCB, getGroupCB: getGroupCB, makeAllInOneGroup: makeAllInOneGroup, escapeFromGroup: escapeFromGroup };
+    var groupItem = layout[groupIdx];
+    return groupItem;
 }
+exports.getGroupCB = getGroupCB;
+var filterItemsById = function (layout, idsToRemove) {
+    return layout.filter(function (item) { return !idsToRemove.includes(item.i); });
+};
+exports.filterItemsById = filterItemsById;
 exports.default = useGroupDrag;

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

@@ -57,18 +57,28 @@ function getGroupForMultiple(elems) {
     if (elems.length === 0) {
         throw new Error('Array must contain at least one element.');
     }
-    var _a = elems.reduce(function (acc, elem) {
-        acc.minX = Math.min(acc.minX, elem.x);
-        acc.minY = Math.min(acc.minY, elem.y);
-        acc.maxW = Math.max(acc.maxW, elem.x - acc.minX + elem.w);
-        acc.maxH = Math.max(acc.maxH, elem.y - acc.minY + elem.h);
-        return acc;
-    }, {
-        minX: elems[0].x,
-        minY: elems[0].y,
-        maxW: elems[0].w,
-        maxH: elems[0].h
-    }), minX = _a.minX, minY = _a.minY, maxW = _a.maxW, maxH = _a.maxH;
+    var _a = elems.reduce(function (acc, elem, idx, arr) {
+        var _a, _b;
+        if (idx === arr.length - 1) {
+            return acc;
+        }
+        var elem1 = idx === 0 ? elem : acc;
+        var elem2 = arr[idx + 1];
+        var minX = Math.min(elem1.x, elem2.x);
+        var minY = Math.min(elem1.y, elem2.y);
+        var elem1W = elem1.x - minX + elem1.w;
+        var elem2W = elem2.x - minX + elem2.w;
+        var elem1H = elem1.y - minY + elem1.h;
+        var elem2H = elem2.y - minY + elem2.h;
+        var maxZ = Math.max((_a = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _a !== void 0 ? _a : 0, (_b = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _b !== void 0 ? _b : 0);
+        return {
+            x: Math.min(elem1.x, elem2.x),
+            y: Math.min(elem1.y, elem2.y),
+            w: Math.max(elem1W, elem2W),
+            h: Math.max(elem1H, elem2H),
+            z: maxZ
+        };
+    }, { x: 0, y: 0, w: 0, h: 0, z: 0 }), minX = _a.x, minY = _a.y, maxW = _a.w, maxH = _a.h, maxZ = _a.z;
     var groupLayouts = elems.map(function (elem) { return (__assign(__assign({}, elem), { x: elem.x - minX, y: elem.y - minY })); });
     var childrenIds = elems.map(function (elem) { return elem.i; });
     return {
@@ -77,6 +87,7 @@ function getGroupForMultiple(elems) {
         y: minY,
         w: maxW,
         h: maxH,
+        z: maxZ,
         groupLayouts: groupLayouts,
         childrenIds: childrenIds
     };

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

@@ -15,15 +15,12 @@ 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.log('returned', { hasIOSupport: hasIOSupport, frozen: frozen, node: node });
             return;
         }
         var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
         var observer = new IntersectionObserver(updateEntry, observerParams);
         observer.observe(node);
-        console.log('observe');
         return function () {
-            console.log('disconnect,', { observer: observer });
             observer.disconnect();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/package.json

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

package/release-note.md

@@ -1,6 +1,7 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.25]
+## [v0.3.27]
 ## 기준 pds-dev-kit-web 버전 @2.2.41
 ### sub
     * DynamicLayout
-        * 애니메이션 관련 버그 픽스를위해 로그 추가
+        * GROUP - PERSIST
+        * [POC] 그룹은 cb 변화로 rerender되어도 깨지지 않도록 관리