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

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

@@ -42,6 +42,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-console */
 /* eslint-disable react/destructuring-assignment */
 var publ_echo_1 = require("publ-echo");
 var ReactGridLayout_1 = __importDefault(require("publ-echo/dist/lib/GridLayoutEditor/ReactGridLayout"));
@@ -90,6 +91,7 @@ function CustomSection(props) {
     (0, react_1.useEffect)(function () {
         var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         setLayouts(function (prev) {
+            console.log('custom section EFFECT: componentBlocks setLayouts');
             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) || [];
@@ -142,7 +144,9 @@ function CustomSection(props) {
             setSelectedCB('group');
             return;
         }
-        breakGroupCB();
+        if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
+            breakGroupCB();
+        }
         setSelectedCB(id);
         sectionActionHandler &&
             sectionActionHandler({
@@ -198,6 +202,9 @@ function CustomSection(props) {
         var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
         var isIdNumber = !Number.isNaN(numberId);
         if (isIdNumber) {
+            if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
+                breakGroupCB();
+            }
             setSelectedCB(numberId);
         }
         if (sectionActionHandler && isIdNumber) {
@@ -256,13 +263,17 @@ function CustomSection(props) {
     };
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
     var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
+    var innerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        console.log('Echo inner ref: ', { innerRef: innerRef });
+    }, []);
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(S_gleStyles, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: { position: 'absolute', top: 0, left: 0, backgroundColor: 'red', zIndex: 9999 } }, { children: (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: makeAllInOneGroup }, { children: "select ALL" })) })), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
                             minHeight: customSectionStyles.minHeight,
                             paddingTop: padding.top,
                             paddingBottom: padding.bottom,
                             paddingRight: padding.right,
                             paddingLeft: padding.left
-                        } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
+                        } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ innerRef: innerRef, allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
                                 width: customSectionStyles.width,
                                 maxWidth: customSectionStyles.maxWidth,
                                 minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,

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

@@ -64,7 +64,7 @@ function Button(props) {
         ? 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 } : {};
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0.3 } : {};
     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, style: {
                     paddingLeft: paddingLeft,
                     paddingRight: paddingRight,

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

@@ -15,12 +15,17 @@ 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

package/package.json

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

package/release-note.md

@@ -1,7 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.27]
+## [v0.3.28]
 ## 기준 pds-dev-kit-web 버전 @2.2.41
 ### sub
     * DynamicLayout
-        * GROUP - PERSIST
-        * [POC] 그룹은 cb 변화로 rerender되어도 깨지지 않도록 관리
+        * 에러 픽스 위한 log 추가