pds-dev-kit-web-test 2.5.597 → 2.5.599
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +19 -13
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +1 -1
- package/package.json +2 -2
|
@@ -49,24 +49,25 @@ var createComponent = function (type, getDesignType, getLocation) {
|
|
|
49
49
|
};
|
|
50
50
|
};
|
|
51
51
|
function ContentsCarousel(props) {
|
|
52
|
-
var _a
|
|
53
|
-
var
|
|
54
|
-
var
|
|
55
|
-
var _d = (0,
|
|
52
|
+
var _a;
|
|
53
|
+
var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
|
|
54
|
+
var compositions = props.compositions, index = props.index, _c = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_STYLE_PROP_CONTENTSCAROUSEL = props.CB_STYLE_PROP_CONTENTSCAROUSEL, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
55
|
+
var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
|
|
56
|
+
var _e = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
|
|
56
57
|
props: CB_STYLE_PROP_CONTENTSCAROUSEL,
|
|
57
58
|
contentsPropsPartials: { CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS },
|
|
58
59
|
device: device
|
|
59
|
-
}), contentsCarouselNormalStyle =
|
|
60
|
-
var
|
|
60
|
+
}), contentsCarouselNormalStyle = _e.normalStyle, contentsCarouselHoverStyle = _e.hoverStyle;
|
|
61
|
+
var _f = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
|
|
61
62
|
props: CB_STYLE_PROP_CONTENTSCAROUSEL,
|
|
62
63
|
device: device
|
|
63
|
-
}), customNavigationNormalStyle =
|
|
64
|
-
var
|
|
64
|
+
}), customNavigationNormalStyle = _f.normalStyle, customNavigationHoverStyle = _f.hoverStyle;
|
|
65
|
+
var _g = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
|
|
65
66
|
props: CB_STYLE_PROP_CONTENTSCAROUSEL,
|
|
66
67
|
device: device
|
|
67
|
-
}), customProgressbarNormalStyle =
|
|
68
|
-
var
|
|
69
|
-
var
|
|
68
|
+
}), customProgressbarNormalStyle = _g.normalStyle, customProgressbarHoverStyle = _g.hoverStyle;
|
|
69
|
+
var _h = (0, useSwiper_1.useSwiper)(), swiperRef = _h.swiperRef, progressRef = _h.progressRef, leftTimeMsRef = _h.leftTimeMsRef, isBeginning = _h.isBeginning, isEnd = _h.isEnd, onSwiper = _h.onSwiper, onSlideChangeTransitionEnd = _h.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _h.onAutoplayTimeLeft, onClickPrevBtn = _h.onClickPrevBtn, onClickNextBtn = _h.onClickNextBtn;
|
|
70
|
+
var _j = (0, react_1.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
|
|
70
71
|
var loop = isHovered ? contentsCarouselHoverStyle.loop : contentsCarouselNormalStyle.loop;
|
|
71
72
|
// NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
|
|
72
73
|
var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
|
|
@@ -89,7 +90,7 @@ function ContentsCarousel(props) {
|
|
|
89
90
|
createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
|
|
90
91
|
{ type: 'PROGRESSBAR', position: 'INSET5' }
|
|
91
92
|
].filter(function (component) { return component !== undefined; });
|
|
92
|
-
var
|
|
93
|
+
var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, ccbInset = _k.ccbInset, componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
|
|
93
94
|
var renderElements = function (component) {
|
|
94
95
|
switch (component.type) {
|
|
95
96
|
case 'PREV':
|
|
@@ -102,7 +103,12 @@ function ContentsCarousel(props) {
|
|
|
102
103
|
return null;
|
|
103
104
|
}
|
|
104
105
|
};
|
|
105
|
-
|
|
106
|
+
// NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
|
|
107
|
+
var columnGapEnum = device === 'DESKTOP'
|
|
108
|
+
? CB_STYLE_PROP_CONTENTSCAROUSEL.CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING
|
|
109
|
+
: (_a = CB_STYLE_PROP_CONTENTSCAROUSEL['CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE']) !== null && _a !== void 0 ? _a : CB_STYLE_PROP_CONTENTSCAROUSEL.CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING;
|
|
110
|
+
var columnGap = columnGapEnum === 'NARROW' ? 8 : columnGapEnum === 'NORMAL' ? 24 : 36;
|
|
111
|
+
return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ 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-columns": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-number-of-items": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef }, { children: [(0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
|
|
106
112
|
? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
|
|
107
113
|
: contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle }, { children: (0, createCompositions_1.createCompositions)({
|
|
108
114
|
valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
|
|
@@ -126,7 +126,7 @@ function ContentsList(props) {
|
|
|
126
126
|
return null;
|
|
127
127
|
}
|
|
128
128
|
};
|
|
129
|
-
return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(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-
|
|
129
|
+
return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(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_ITEMCOUNTS, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "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.jsxs)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef }, { children: [(0, jsx_runtime_1.jsx)(S_ContentsListWrapper, __assign({ className: "cb-contentslist-wrapper", ccbInset: ccbInset, contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss }, { children: (0, createCompositions_1.createCompositions)({
|
|
130
130
|
valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
|
|
131
131
|
queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
|
|
132
132
|
limit: CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pds-dev-kit-web-test",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.599",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"lottie-react": "^2.3.1",
|
|
24
24
|
"nuka-carousel": "^4.8.4",
|
|
25
25
|
"publ-echo": "^0.0.119",
|
|
26
|
-
"publ-echo-test": "^0.0.
|
|
26
|
+
"publ-echo-test": "^0.0.312",
|
|
27
27
|
"react-hook-form": "^7.28.1",
|
|
28
28
|
"react-i18next": "^11.12.0",
|
|
29
29
|
"react-router-dom": "^5.2.0",
|