pds-dev-kit-web-test 0.2.34 → 0.2.36

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, customGridRows }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, customGridRows = _a.customGridRows;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
@@ -36,7 +36,8 @@ function DynamicLayout(_a) {
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
             editingSectionId: editingSectionId,
-            programmedSectionComponents: programmedSectionComponents
+            programmedSectionComponents: programmedSectionComponents,
+            customGridRows: customGridRows
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }

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

@@ -53,13 +53,9 @@ var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlo
 var util_1 = require("./util");
 var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
 var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
-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 GRID_CELL_MIN = 8;
 function CustomSection(props) {
-    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, sectionActionHandler = _a.sectionActionHandler;
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, sectionActionHandler = _a.sectionActionHandler, customGridRows = _a.customGridRows;
     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 _c = (0, react_1.useState)(null), selectedCB = _c[0], setSelectedCB = _c[1];
@@ -68,6 +64,19 @@ function CustomSection(props) {
     var _e = (0, react_1.useState)(16), baseFontSize = _e[0], setBaseFontSize = _e[1];
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
+    var gridData = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        var desktopCols = (_a = customGridRows === null || customGridRows === void 0 ? void 0 : customGridRows.lg) !== null && _a !== void 0 ? _a : 24;
+        var mobileCols = (_b = customGridRows === null || customGridRows === void 0 ? void 0 : customGridRows.sm) !== null && _b !== void 0 ? _b : 8;
+        var gleMinWidthDesktop = "".concat(GRID_CELL_MIN * desktopCols, "px");
+        var gleMinWidthMobile = "".concat(GRID_CELL_MIN * mobileCols, "px");
+        return {
+            desktopCols: desktopCols,
+            mobileCols: mobileCols,
+            gleMinWidthDesktop: gleMinWidthDesktop,
+            gleMinWidthMobile: gleMinWidthMobile
+        };
+    }, [customGridRows]);
     var _f = (0, react_1.useState)(function () {
         var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         return {
@@ -170,13 +179,15 @@ function CustomSection(props) {
         // NOTE: local환경에서 CB_CONTENT_PROP_SECTION이 없는 경우가 있음.
         !!(CB_CONTENT_PROP_SECTION === null || CB_CONTENT_PROP_SECTION === void 0 ? void 0 : CB_CONTENT_PROP_SECTION.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
         if (device === 'MOBILE') {
-            var cellWidth_1 = width / MOBILE_GRID_COLS;
-            setRowHeight(cellWidth_1 * 0.56);
+            var cellWidth_1 = width / gridData.mobileCols;
+            // setRowHeight(cellWidth * 0.56);
+            setRowHeight(cellWidth_1);
             baseFontSize !== 16 && setBaseFontSize(16);
             return;
         }
-        var cellWidth = width / DESKTOP_GRID_COLS;
-        setRowHeight(cellWidth * 0.56);
+        var cellWidth = width / gridData.desktopCols;
+        // setRowHeight(cellWidth * 0.56);
+        setRowHeight(cellWidth);
         responsiveFontMode ? setBaseFontSize(cellWidth / 2.35) : setBaseFontSize(16);
     };
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
@@ -187,9 +198,9 @@ function CustomSection(props) {
                         paddingBottom: padding.bottom,
                         paddingRight: padding.right,
                         paddingLeft: padding.left
-                    } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, 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({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: gridData.desktopCols, sm: gridData.mobileCols }, rowHeight: rowHeight, margin: [0, 0], containerPadding: [0, 0], style: {
                             width: customSectionStyles.width,
-                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+                            minWidth: isMobile ? gridData.gleMinWidthMobile : gridData.gleMinWidthDesktop,
                             fontSize: "".concat(baseFontSize, "px")
                         }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                                     width: '100%',

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

@@ -224,6 +224,10 @@ export type DynamicLayoutProps = {
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
     programmedSectionComponents?: IProgrammedSectionComponents;
     width?: number;
+    customGridRows?: {
+        lg: number;
+        sm: number;
+    };
 };
 export type NavHandlerAction = {
     openNewTab: boolean;

package/package.json

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

package/release-note.md

@@ -1,6 +1,9 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.2.34]
-## 기준 pds-dev-kit-web 버전 @2.2.3
+## [v0.2.36]
+## 기준 pds-dev-kit-web 버전 @2.2.4
 ### sub
 * DynamicLayout - custom section
-    * device를 판단하고 각 device에서 CB_EFFECT_PROP_ENTANIM_SPEC_TYPE이 NONE인지를 체크하여, 서로 영향을 받지 않고 NONE일 때만 hasEffect가 false일 수 있도록 조건을 변경
+    * gutter를 0으로 조정
+    * gridItem 관련 조정
+        * min cell width 8px
+        * height-width 1:1 ratio