pds-dev-kit-web-test 2.7.251 → 2.7.253

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

@@ -5325,12 +5325,14 @@ exports.SAMPLE_LIST_CB = {
         currentVersion: '2025-01-10',
         data: {
             CB_CONTENT_PROP_CONTENTSLIST: {
-                CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS: 1,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS: 2,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS: 1,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: 'NONE',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: 'NONE',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET: 0,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: 'PAPPQUERY_SORTING_ITEM_TITLE_ASC',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS: 1,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS: 1,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_EDITCOMMONITEM: null,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS: 1,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS: [

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

@@ -69,16 +69,24 @@ function ContentsList(props) {
     var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
     var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
     var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
+    // list의 minheight / minwidth를 계산
+    var numberOfColumns = device === 'DESKTOP'
+        ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
+        : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
     var displayCounts = device === 'DESKTOP'
         ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS
         : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS !== null && CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS !== void 0 ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length;
     var totalPage = Math.ceil((CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'DATA' && queryDataValue
         ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
         : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length) / displayCounts);
+    console.log('columns', numberOfColumns);
+    console.log('displayCounts', displayCounts);
+    console.log('totalPage', totalPage);
     var CB_STYLE_PROP_CONTENTSLIST = __assign(__assign({}, CB_STYLE_PROP_CONTENTSLISTDESIGN), CB_STYLE_PROP_CONTENTSLISTPAGINATION);
     var _k = (0, util_1.parseProperties)(props, device), style = _k.style, hoverStyle = _k.hoverStyle, layout = _k.layout, effect = _k.effect, overlayStyle = _k.overlayStyle;
     var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
-        props: CB_CONTENT_PROP_CONTENTSLIST
+        props: CB_CONTENT_PROP_CONTENTSLIST,
+        device: device
     }).contentPropCss;
     var _l = (0, contentsListUtils_1.parseGridStyleProp)({
         props: CB_STYLE_PROP_CONTENTSLIST,
@@ -106,13 +114,8 @@ function ContentsList(props) {
     var handlePageClick = function (page) {
         setCurrentPage(page);
     };
-    // CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS ?? CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS;
     var startIndex = (currentPage - 1) * displayCounts;
     var endIndex = startIndex + (displayCounts - 1);
-    // list의 minheight / minwidth를 계산
-    var numberOfColumns = device === 'DESKTOP'
-        ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
-        : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
     // NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
     var columnGapEnum = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSLIST.CB_STYLE_PROP_CONTENTSLISTDESIGN_SPEC_ITEMSPACING
@@ -179,7 +182,7 @@ function ContentsList(props) {
                     }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
                             return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
                         }) })) }), position));
-            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(displayCounts, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(displayCounts, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), (0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
+            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), (0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
                                 display: layout.display,
                                 flexDirection: layout.flexDirection,
                                 justifyContent: layout.justifyContent

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.d.ts

@@ -8,6 +8,7 @@ type ParseContentsListStyleToCarouselCoreProps = {
 };
 type ParseContentsListContentToCarouselCoreProps = {
     props: CB_CONTENT_PROP_CONTENTSLIST;
+    device: Device;
 };
 type ParseContentsListStyleToCustomPaginationProps = {
     props: CB_STYLE_PROP_CONTENTSLIST_SPECS;
@@ -18,7 +19,7 @@ export declare function parseGridStyleProp({ props, device }: ParseContentsListS
     stylePropCss: CssFragment;
     hoverStylePropCss: CssFragment;
 };
-export declare function parseGridContentProp({ props }: ParseContentsListContentToCarouselCoreProps): {
+export declare function parseGridContentProp({ props, device }: ParseContentsListContentToCarouselCoreProps): {
     contentPropCss: CssFragment;
 };
 export declare function parsePaginationStyleProp({ props, device }: ParseContentsListStyleToCustomPaginationProps): {

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

@@ -42,10 +42,18 @@ function parseStylePropertyStyles(key, value) {
 function getColumnsPropStyleValues(value, rows) {
     return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "], ["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "])), value, rows);
 }
-function parseContentPropertyStyles(key, value, rows) {
-    switch (key) {
-        case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
-            return getColumnsPropStyleValues(value, rows);
+function parseContentPropertyStyles(key, value, rows, device) {
+    if (device === 'DESKTOP') {
+        switch (key) {
+            case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
+                return getColumnsPropStyleValues(value, rows);
+        }
+    }
+    if (device === 'MOBILE') {
+        switch (key) {
+            case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS':
+                return getColumnsPropStyleValues(value, rows);
+        }
     }
     return undefined;
 }
@@ -70,16 +78,19 @@ function parseGridStyleProp(_a) {
 }
 exports.parseGridStyleProp = parseGridStyleProp;
 function parseGridContentProp(_a) {
-    var props = _a.props;
+    var props = _a.props, device = _a.device;
     var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
     var displayCounts = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS ||
         props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS ||
         1;
-    var columns = Math.min(props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, displayCounts);
+    var columnsByDevice = device === 'DESKTOP'
+        ? props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
+        : props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
+    var columns = Math.min(columnsByDevice, displayCounts);
     var rows = Math.ceil(displayCounts / columns);
     return availableSpecCodes.reduce(function (acc, currentKey) {
         var value = props[currentKey];
-        var styles = parseContentPropertyStyles(currentKey, value, rows);
+        var styles = parseContentPropertyStyles(currentKey, value, rows, device);
         return {
             contentPropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
         };

package/package.json

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