pds-dev-kit-web 2.2.137 → 2.2.138

package/dist/src/sub/DynamicLayout/sections/{CustomSection/FlexGridCustomSection.js → FlexGridCustomSection.js}

@@ -42,89 +42,45 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-unused-vars */
 var react_1 = __importStar(require("react"));
-var ErrorBoundary_1 = require("../../../DynamicLayout/components/Section/ErrorBoundary");
-var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
+var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
+var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
-var components_1 = require("../../components");
-var CustomSection_1 = require("./CustomSection");
-var FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
-var useGroupDrag_1 = require("./hooks/useGroupDrag");
-var useGroupDrag_2 = require("./hooks/useGroupDrag/useGroupDrag");
-var utils_1 = require("./hooks/useGroupDrag/utils");
-var useResizableObserver_1 = require("./hooks/useResizableObserver");
-var util_1 = require("./util");
-var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
+var components_1 = require("../components");
+var gleStyles_1 = require("../gleStyles");
+var FlexGridItem_1 = __importDefault(require("./CustomSection/FlexGridItem"));
+var useResizableObserver_1 = require("./CustomSection/hooks/useResizableObserver");
+var util_1 = require("./CustomSection/util");
+var parseSectionPadding_1 = __importDefault(require("./CustomSection/util/layoutPropParsers/parseSectionPadding"));
 var GRID_CELL_MIN = 24;
 var DESKTOP_GRID_COLS = 24;
 var MOBILE_GRID_COLS = 8;
 var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
 var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
-var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
+var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
     var _a;
     var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var _c = jsonProperties.data, CB_PLACEMENT_PROP_SECTION = _c.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _c.CB_LAYOUT_PROP_PADDING;
+    var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
     var containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _d = (0, react_1.useState)(null), selectedCB = _d[0], setSelectedCB = _d[1];
+    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
     var gleRef = (0, react_1.useRef)(null);
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
-    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
-    var _e = (0, react_1.useState)(function () {
-        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
-        return {
-            lg: lg,
-            sm: sm
-        };
-    }), layouts = _e[0], setLayouts = _e[1];
-    var _f = (0, useGroupDrag_1.useGroupDrag)({
-        setLayouts: setLayouts,
-        device: device,
-        sectionActionHandler: sectionActionHandler
-    }), breakGroupCB = _f.breakGroupCB, makeAllInOneGroup = _f.makeAllInOneGroup, makeCollisionGroup = _f.makeCollisionGroup;
-    (0, react_1.useImperativeHandle)(ref, function () {
-        return {
-            selectCB: function (cbId) {
-                setSelectedCB(cbId);
-            },
-            selectCBInBulk: function (cbIds) {
-                var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []);
-                setLayouts(function (prev) {
-                    var _a;
-                    var filteredLayout = (0, useGroupDrag_2.filterItemsById)(parsedLayouts[layoutByDevice], cbIds);
-                    var newGroupLayout = (0, utils_1.getGroupForMultiple)(parsedLayouts[layoutByDevice].filter(function (each) { return cbIds.includes(each.i); }));
-                    filteredLayout.push(newGroupLayout);
-                    return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
-                });
-            }
-        };
-    }, [componentBlocks]);
-    (0, react_1.useLayoutEffect)(function () {
-        var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []);
-        setLayouts(function (prev) {
-            var _a;
-            var _b;
-            var group = (0, useGroupDrag_2.getGroupCB)(prev[layoutByDevice]);
-            var groupedCBIds = (_b = group === null || group === void 0 ? void 0 : group.childrenIds) !== null && _b !== void 0 ? _b : [];
-            var filteredLayout = (0, useGroupDrag_2.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
-            if (group === null || group === void 0 ? void 0 : group.groupLayouts) {
-                var groupCbs = parsedLayouts[layoutByDevice].filter(function (each) {
-                    return groupedCBIds.includes(each.i);
-                });
-                if (groupCbs.length > 0) {
-                    var newGroupLayout = (0, utils_1.getGroupForMultiple)(groupCbs);
-                    filteredLayout.push(newGroupLayout);
-                }
-            }
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
-        });
-    }, [componentBlocks, useGroupDrag_2.getGroupCB, layoutByDevice]);
+    // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    // const [layouts] = useState<LayoutsType>(() => {
+    //   const { lg, sm } = parsePlacement(componentBlocks ?? []);
+    //   return {
+    //     lg,
+    //     sm
+    //   };
+    // });
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedCB(null);
-            breakGroupCB();
+            // breakGroupCB();
         }
     }, [editingSectionId]);
     // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
@@ -140,38 +96,38 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                 setSelectedCB(componentBlocks[0].id);
                 return;
             }
-            makeAllInOneGroup();
+            // makeAllInOneGroup();
             return;
         }
         if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
-            breakGroupCB();
+            // breakGroupCB();
             setSelectedCB(null);
             return;
         }
-    }, [shortcutKeyMode, setSelectedCB, breakGroupCB]);
+    }, [shortcutKeyMode, setSelectedCB]);
     (0, react_1.useLayoutEffect)(function () {
         if (props.id !== editingSectionId) {
             return;
         }
         if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
-            if (!selectedCB || selectedCB === 'group') {
+            if (!selectedCB || selectedCB === 'BULK') {
                 return;
             }
-            makeCollisionGroup(selectedCB);
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/CB_CLICKED',
-                    payload: {
-                        id: 'group'
-                    }
-                });
-            setSelectedCB('group');
-        }
-    }, [selectedCB, shortcutKeyMode, makeCollisionGroup, sectionActionHandler, setSelectedCB]);
-    var _g = (0, util_1.parseCustomSectionPlacement)({
+            // makeCollisionGroup(selectedCB);
+            // sectionActionHandler &&
+            //   sectionActionHandler({
+            //     type: '@CUSTOMSECTION/BLOCK_CLICKED',
+            //     payload: {
+            //      block:
+            //     }
+            //   });
+            setSelectedCB('BULK');
+        }
+    }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
+    var _f = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _g.width, minHeight = _g.minHeight, isFullWidth = _g.isFullWidth;
+    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -181,9 +137,6 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         if (!isEditMode) {
             return;
         }
-        if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
-            breakGroupCB();
-        }
         setSelectedCB(null);
         sectionActionHandler &&
             sectionActionHandler({
@@ -231,7 +184,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         return 16;
     })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(CustomSection_1.S_gleStyles, { children: (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: {
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, { children: (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,
@@ -242,11 +195,14 @@ 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")
-                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) { return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight }) }, cb.id)); }) })) })) })) }) }));
+                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
+                        }) })) })) })) }) }));
 });
 var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
 var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.default = react_1.default.memo(CustomSection);
+exports.default = react_1.default.memo(FlexGridCustomSection);
 function getDefensiveFontSize(device, width) {
     if (device === 'MOBILE') {
         return width * (0.0000868 * width + 0.0202);

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -1,11 +1,11 @@
 import type { TypeOfSectionAction } from './sectionActionTypes';
-import type { CustomSectionImperativeHandleRef } from './sections/CustomSection/CustomSection';
 import type { ComponentBlock } from './sections/CustomSection/types';
 import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './sections/CustomSection/util/contentPropParsers/parseContentVisibility';
 import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './sections/CustomSection/util/effectPropParsers/parseEffectPropEntAnim';
 import type { CB_LAYOUT_PROP_PADDING_SPECS } from './sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding';
 import type { CB_STYLE_PROP_BGCOLOR_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgColor';
 import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay';
+import type { Block, ZOrder } from 'publ-echo/dist/lib/GridLayoutEditor/group';
 import type { Ref } from 'react';
 export { TypeOfSectionAction };
 export type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM';
@@ -60,6 +60,7 @@ export interface ISection {
     componentBlocks?: ComponentBlock[];
     jsonProperties?: ISectionJsonProperties;
 }
+export type SectionPedigree = Block;
 export interface SubscriptionProductInList {
     id: number;
     type: SubscriptionProductType;
@@ -212,6 +213,11 @@ export interface IItemDescription extends IDescription {
     color?: string;
 }
 export type CustomSectionShortcutKeysType = 'BULK_SELECT' | 'COLLISION_SELECT' | 'SELECT_ALL' | 'MANUAL_COLLISION_SELECT' | 'MANUAL_BULK_BREAK' | null;
+export type CustomSectionImperativeHandleRef = {
+    selectCB: (cbId: string) => void;
+    selectCBInBulk: (cbIds: string[]) => void;
+    selectGroup: (groupBlockId: string) => void;
+};
 export type DynamicLayoutProps = {
     device: 'DESKTOP' | 'MOBILE';
     /** @default 'NORMAL */
@@ -300,6 +306,8 @@ export type IMembershipDisplay = {
     connectedMemberships: IConnectedMembership[];
 };
 export type ISectionJsonProperties = {
+    zOrders?: ZOrder;
+    pedigree?: SectionPedigree;
     data: {
         CB_CONTENT_PROP_SECTION: {
             CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: boolean;
@@ -316,6 +324,8 @@ export type ISectionJsonProperties = {
             'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE': number | null | undefined;
             CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH: number;
             'CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE': number | null | undefined;
+            CB_PLACEMENT_PROP_SECTION_SPEC_COLS?: number;
+            'CB_PLACEMENT_PROP_SECTION_SPEC_COLS:MOBILE': number | null | undefined;
         };
         CB_STYLE_PROP_BGCOLOR?: CB_STYLE_PROP_BGCOLOR_SPECS;
         CB_STYLE_PROP_BGMEDIA?: CB_STYLE_PROP_BGMEDIA_SPECS;
@@ -364,3 +374,37 @@ export type CB_STYLE_PROP_BGMEDIA_SPECS = CB_STYLE_PROP_BGMEDIA_SPECS_BASE & {
     'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE': string | null | undefined;
     'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE:HOVER': string | null | undefined;
 };
+export interface IComposition {
+    id: number;
+    administrativeTitle?: string;
+    display: boolean;
+    order: number;
+    manifest: {
+        schema: TypeOfSectionManifestSchema;
+        availableProperties: Array<KeyOfSectionProperties>;
+        availableStyles: Array<KeyOfSectionStyles>;
+        availableTemplates: Array<TypeofSectionTemplate>;
+    } | Record<string, never>;
+    template: TypeofSectionTemplate;
+    properties: ISectionProperties;
+    styles: ISectionStyles;
+    dynamicLayoutSectionItems: Array<IItem> | null;
+    insertedAt: string;
+    updatedAt: string;
+    type: TypeOfSectionType;
+    program?: 'MEMBERSHIP_DISPLAY';
+    programData?: {
+        mdid: string;
+        preview: {
+            availableResources: ['REAL.MEMBERSHIP_DISPLAY'];
+            resources: {
+                mock: Record<string, never>;
+                real: {
+                    membershipDisplay: IMembershipDisplay;
+                };
+            };
+        };
+    };
+    componentBlocks?: ComponentBlock[];
+    jsonProperties?: ISectionJsonProperties;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.137",
+  "version": "2.2.138",
   "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.104",
+    "publ-echo": "^0.0.118",
     "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 Release Notes
-## [v2.2.137]
+## [v2.2.138]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* 컬러키 싱크
+* feature/v3.3