pds-dev-kit-web-test 0.3.38 → 0.3.40

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.js

@@ -30,7 +30,7 @@ function CustomSectionBackground(_a) {
     var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
     var id = context.id, jsonProperties = context.jsonProperties;
     var backgroundRef = (0, react_1.useRef)(null);
-    var _c = jsonProperties || {}, CB_STYLE_PROP_BGOVERLAY = _c.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = _c.CB_STYLE_PROP_BGMEDIA;
+    var _c = jsonProperties.data, CB_STYLE_PROP_BGOVERLAY = _c.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = _c.CB_STYLE_PROP_BGMEDIA;
     var _d = (0, util_1.parseJsonProperties)(jsonProperties, isMobile ? 'MOBILE' : 'DESKTOP'), style = _d.style, overlayStyle = _d.overlayStyle, effect = _d.effect;
     var isOverlay = getIsOverlay(isMobile, CB_STYLE_PROP_BGOVERLAY);
     var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);

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

@@ -75,7 +75,7 @@ var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
 function CustomSection(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, sectionActionHandler = _a.sectionActionHandler, shortcutKeyMode = _a.shortcutKeyMode;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var _b = jsonProperties, CB_PLACEMENT_PROP_SECTION = _b.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _b.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _b.CB_CONTENT_PROP_SECTION;
+    var _b = jsonProperties.data, CB_PLACEMENT_PROP_SECTION = _b.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _b.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _b.CB_CONTENT_PROP_SECTION;
     var _c = (0, react_1.useState)(null), selectedCB = _c[0], setSelectedCB = _c[1];
     var gleRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(50), rowHeight = _d[0], setRowHeight = _d[1];
@@ -128,11 +128,19 @@ function CustomSection(props) {
         if (props.id !== editingSectionId) {
             return;
         }
+        if (!shortcutKeyMode) {
+            return;
+        }
         if (shortcutKeyMode === 'SELECT_ALL') {
             makeAllInOneGroup();
             return;
         }
-    }, [shortcutKeyMode]);
+        if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
+            breakGroupCB();
+            setSelectedCB(null);
+            return;
+        }
+    }, [shortcutKeyMode, setSelectedCB, breakGroupCB]);
     (0, react_1.useLayoutEffect)(function () {
         if (props.id !== editingSectionId) {
             return;
@@ -253,6 +261,10 @@ function CustomSection(props) {
         var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
         var isIdNumber = !Number.isNaN(numberId);
         if (hasLayoutPlacementChanged(item, prev)) {
+            setTimeout(function () {
+                // NOTE: to fix.
+                breakGroupCB();
+            }, 100);
             return;
         }
         if (isIdNumber) {
@@ -360,9 +372,9 @@ function CustomSection(props) {
                                                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                                             }
                                             var cbCopy = (0, deepCopy_1.default)(matchedCB);
-                                            cbCopy.properties.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE =
+                                            cbCopy.jsonProperties.data.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE =
                                                 'NONE';
-                                            cbCopy.properties.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] = 'NONE';
+                                            cbCopy.jsonProperties.data.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] = 'NONE';
                                             return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-box-in-group", onClick: function (e) {
                                                     e.stopPropagation();
                                                     clickGroupedOne(matchedCB.id, array);

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

@@ -27,8 +27,8 @@ var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
 function ComponentBlockMatcher(_a) {
     var cbProps = _a.cbProps, device = _a.device, index = _a.index;
-    var componentBlockCode = cbProps.componentBlockCode, properties = cbProps.properties;
-    var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(properties) : properties;
+    var componentBlockCode = cbProps.componentBlockCode, data = cbProps.jsonProperties.data;
+    var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(data) : data;
     switch (componentBlockCode) {
         case types_1.CB_ALL_CODES.CB_BTN:
             return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue, { index: index }));

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

@@ -20,31 +20,45 @@ export type GroupCustomSectionType = {
 export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE;
 export type CB_TEXT_TYPE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_TEXT;
-    properties: CB_TEXT_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_TEXT_PROPERTIES_TYPE;
+    };
 };
 export type CB_BTN_TYPE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_BTN;
-    properties: CB_BTN_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_BTN_PROPERTIES_TYPE;
+    };
 };
 export type CB_RICHTEXT = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_RICHTEXT;
-    properties: CB_RICHTEXT_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_RICHTEXT_PROPERTIES_TYPE;
+    };
 };
 export type CB_DIVIDER = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_DIVIDER;
-    properties: CB_DIVIDER_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_DIVIDER_PROPERTIES_TYPE;
+    };
 };
 export type CB_IMG = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_IMG;
-    properties: CB_IMG_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_IMG_PROPERTIES_TYPE;
+    };
 };
 export type CB_YOUTUBE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_YOUTUBE;
-    properties: CB_YOUTUBE_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_YOUTUBE_PROPERTIES_TYPE;
+    };
 };
 export type CB_TWITTER = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_TWITTER;
-    properties: CB_TWITTER_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_TWITTER_PROPERTIES_TYPE;
+    };
 };
 export declare enum CB_ALL_CODES {
     CB_TEXT = "CB_TEXT",

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

@@ -12,8 +12,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parsePlacement = void 0;
 function parsePlacement(components) {
     return components.reduce(function (acc, cur) {
-        var id = cur.id, properties = cur.properties;
-        var _a = parsePropPlacement(properties.CB_PLACEMENT_PROP_PLACEMENT, id), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
+        var id = cur.id, jsonProperties = cur.jsonProperties;
+        var _a = parsePropPlacement(jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, id), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
         return {
             sm: __spreadArray(__spreadArray([], acc.sm, true), [mobileLayout], false),
             lg: __spreadArray(__spreadArray([], acc.lg, true), [desktopLayout], false)

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

@@ -210,6 +210,7 @@ export interface IItemDescription extends IDescription {
     text: string;
     color?: string;
 }
+export type CustomSectionShortcutKeysType = 'BULK_SELECT' | 'COLLISION_SELECT' | 'SELECT_ALL' | 'MANUAL_COLLISION_SELECT' | 'MANUAL_BULK_BREAK' | null;
 export type DynamicLayoutProps = {
     device: 'DESKTOP' | 'MOBILE';
     /** @default 'NORMAL */
@@ -224,7 +225,7 @@ export type DynamicLayoutProps = {
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
     programmedSectionComponents?: IProgrammedSectionComponents;
     width?: number;
-    shortcutKeyMode?: 'BULK_SELECT' | 'COLLISION_SELECT' | 'SELECT_ALL' | 'MANUAL_COLLISION_SELECT' | null;
+    shortcutKeyMode?: CustomSectionShortcutKeysType;
 };
 export type NavHandlerAction = {
     openNewTab: boolean;
@@ -296,25 +297,27 @@ export type IMembershipDisplay = {
     connectedMemberships: IConnectedMembership[];
 };
 export type ISectionJsonProperties = {
-    CB_CONTENT_PROP_SECTION: {
-        CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: boolean;
-    };
-    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
-    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
-    CB_LAYOUT_PROP_PADDING?: CB_LAYOUT_PROP_PADDING_SPECS;
-    CB_PLACEMENT_PROP_SECTION: {
-        CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH: boolean;
-        'CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE': boolean | null | undefined;
-        CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT: number;
-        'CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE': number | null | undefined;
-        CB_PLACEMENT_PROP_SECTION_SPEC_ROWS: number;
-        '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;
+    data: {
+        CB_CONTENT_PROP_SECTION: {
+            CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: boolean;
+        };
+        CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+        CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+        CB_LAYOUT_PROP_PADDING?: CB_LAYOUT_PROP_PADDING_SPECS;
+        CB_PLACEMENT_PROP_SECTION: {
+            CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH: boolean;
+            'CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE': boolean | null | undefined;
+            CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT: number;
+            'CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE': number | null | undefined;
+            CB_PLACEMENT_PROP_SECTION_SPEC_ROWS: number;
+            '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_STYLE_PROP_BGCOLOR?: CB_STYLE_PROP_BGCOLOR_SPECS;
+        CB_STYLE_PROP_BGMEDIA?: CB_STYLE_PROP_BGMEDIA_SPECS;
+        CB_STYLE_PROP_BGOVERLAY?: CB_STYLE_PROP_BGOVERLAY_SPECS;
     };
-    CB_STYLE_PROP_BGCOLOR?: CB_STYLE_PROP_BGCOLOR_SPECS;
-    CB_STYLE_PROP_BGMEDIA?: CB_STYLE_PROP_BGMEDIA_SPECS;
-    CB_STYLE_PROP_BGOVERLAY?: CB_STYLE_PROP_BGOVERLAY_SPECS;
 };
 export type CB_STYLE_PROP_BGMEDIA_SPECS_BASE = {
     CB_STYLE_PROP_BGMEDIA_SPEC_YSRC: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.38",
+  "version": "0.3.40",
   "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.38]
+## [v0.3.40]
 ## 기준 pds-dev-kit-web 버전 @2.2.41
 ### sub
-    * pds- json parse → object deep copy로 변경
-    * 겹선택 겹 없을때 모달이나 disabled → Error 액션추가
-    * 충돌감지로 그룹화 시 group_created action발행
+    * DynamicLayout
+        * 커스텀섹션의 데이터 구조 변경 입니다.

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

@@ -1,2 +0,0 @@
-import type { ISection } from './types';
-export declare const customSectionMock1: ISection;