pds-dev-kit-web-test 2.7.551 → 2.7.552
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.
|
@@ -67,9 +67,9 @@ var createComponent = function (type, getDesignType, getLocation, designType) {
|
|
|
67
67
|
};
|
|
68
68
|
};
|
|
69
69
|
function ContentsCarousel(props) {
|
|
70
|
-
var _a, _b;
|
|
71
|
-
var
|
|
72
|
-
var compositions = props.compositions, index = props.index,
|
|
70
|
+
var _a, _b, _c;
|
|
71
|
+
var _d = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _d.device, mode = _d.mode, queryData = _d.queryData;
|
|
72
|
+
var compositions = props.compositions, index = props.index, _e = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN = props.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN, CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD = props.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD, CB_STYLE_PROP_CONTENTSCAROUSELBUTTON = props.CB_STYLE_PROP_CONTENTSCAROUSELBUTTON, CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR = props.CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
|
|
73
73
|
var CB_STYLE_PROP_CONTENTSCAROUSEL = __assign(__assign(__assign(__assign({}, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN), CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD), CB_STYLE_PROP_CONTENTSCAROUSELBUTTON), CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR);
|
|
74
74
|
var autoPlayEnabled = device === 'DESKTOP'
|
|
75
75
|
? CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE
|
|
@@ -77,23 +77,26 @@ function ContentsCarousel(props) {
|
|
|
77
77
|
var displayCounts = device === 'DESKTOP'
|
|
78
78
|
? CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS
|
|
79
79
|
: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS !== null && CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS !== void 0 ? CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS : CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS.length;
|
|
80
|
-
var
|
|
81
|
-
var
|
|
80
|
+
var _f = (0, util_1.parseProperties)(props, device), style = _f.style, hoverStyle = _f.hoverStyle, layout = _f.layout, overlayStyle = _f.overlayStyle, effect = _f.effect;
|
|
81
|
+
var _g = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
|
|
82
82
|
props: CB_STYLE_PROP_CONTENTSCAROUSEL,
|
|
83
83
|
contentsPropsPartials: { CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: displayCounts },
|
|
84
84
|
device: device
|
|
85
|
-
}), contentsCarouselNormalStyle =
|
|
86
|
-
var
|
|
85
|
+
}), contentsCarouselNormalStyle = _g.normalStyle, contentsCarouselHoverStyle = _g.hoverStyle;
|
|
86
|
+
var _h = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
|
|
87
87
|
props: CB_STYLE_PROP_CONTENTSCAROUSEL,
|
|
88
88
|
device: device
|
|
89
|
-
}), customNavigationNormalStyle =
|
|
90
|
-
var
|
|
89
|
+
}), customNavigationNormalStyle = _h.normalStyle, customNavigationHoverStyle = _h.hoverStyle;
|
|
90
|
+
var _j = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
|
|
91
91
|
props: CB_STYLE_PROP_CONTENTSCAROUSEL,
|
|
92
92
|
device: device
|
|
93
|
-
}), customProgressbarNormalStyle =
|
|
94
|
-
var
|
|
95
|
-
var
|
|
93
|
+
}), customProgressbarNormalStyle = _j.normalStyle, customProgressbarHoverStyle = _j.hoverStyle;
|
|
94
|
+
var _k = (0, useSwiper_1.useSwiper)(), swiperRef = _k.swiperRef, progressRef = _k.progressRef, leftTimeMsRef = _k.leftTimeMsRef, isBeginning = _k.isBeginning, isEnd = _k.isEnd, onSwiper = _k.onSwiper, onSlideChangeTransitionEnd = _k.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _k.onAutoplayTimeLeft, onClickPrevBtn = _k.onClickPrevBtn, onClickNextBtn = _k.onClickNextBtn, resetSwiper = _k.resetSwiper;
|
|
95
|
+
var _l = (0, react_1.useState)(false), isHovered = _l[0], setIsHovered = _l[1];
|
|
96
96
|
var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET);
|
|
97
|
+
var queryDataToRender = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'DATA' && queryData
|
|
98
|
+
? queryData === null || queryData === void 0 ? void 0 : queryData[queryPath]
|
|
99
|
+
: null;
|
|
97
100
|
(0, react_1.useEffect)(function () {
|
|
98
101
|
resetSwiper();
|
|
99
102
|
}, [queryPath]);
|
|
@@ -106,8 +109,8 @@ function ContentsCarousel(props) {
|
|
|
106
109
|
: compositions.filter(function (comp) { return !comp.ccbManualItemUuid; });
|
|
107
110
|
var childrenLength = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'VALUE'
|
|
108
111
|
? orderedCompositions.length
|
|
109
|
-
: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS;
|
|
110
|
-
var loop = contentsCarouselNormalStyle.loop &&
|
|
112
|
+
: Math.min((_b = queryDataToRender === null || queryDataToRender === void 0 ? void 0 : queryDataToRender.length) !== null && _b !== void 0 ? _b : 0, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS);
|
|
113
|
+
var loop = contentsCarouselNormalStyle.loop && childrenLength >= displayCounts;
|
|
111
114
|
// NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
|
|
112
115
|
var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
|
|
113
116
|
// NOTE: EFFECT와 관련된 함수들입니다.
|
|
@@ -135,9 +138,9 @@ function ContentsCarousel(props) {
|
|
|
135
138
|
designType: customProgressbarNormalStyle.type || 'NONE'
|
|
136
139
|
}
|
|
137
140
|
].filter(function (component) { return component !== undefined; });
|
|
138
|
-
var
|
|
141
|
+
var _m = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _m.layoutRef, positionRefs = _m.positionRefs,
|
|
139
142
|
// ccbInset,
|
|
140
|
-
componentGroups =
|
|
143
|
+
componentGroups = _m.componentGroups, getPositionStyle = _m.getPositionStyle, getComponentGroupLayout = _m.getComponentGroupLayout;
|
|
141
144
|
var ccbInset = {
|
|
142
145
|
top: '0px',
|
|
143
146
|
right: '0px',
|
|
@@ -147,7 +150,7 @@ function ContentsCarousel(props) {
|
|
|
147
150
|
// NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
|
|
148
151
|
var columnGapEnum = device === 'DESKTOP'
|
|
149
152
|
? CB_STYLE_PROP_CONTENTSCAROUSELDESIGN.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN_SPEC_ITEMSPACING
|
|
150
|
-
: (
|
|
153
|
+
: (_c = CB_STYLE_PROP_CONTENTSCAROUSELDESIGN['CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE']) !== null && _c !== void 0 ? _c : CB_STYLE_PROP_CONTENTSCAROUSELDESIGN.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN_SPEC_ITEMSPACING;
|
|
151
154
|
var columnGap = columnGapEnum === 'NARROW' ? 8 : columnGapEnum === 'NORMAL' ? 16 : 24;
|
|
152
155
|
var pointerEventsObj = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
|
|
153
156
|
var backgroundRef = (0, react_1.useRef)(null);
|