pds-dev-kit-web-test 2.7.350 → 2.7.352
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 +8 -8
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarouselCore.js +2 -5
- package/package.json +1 -1
|
@@ -93,7 +93,13 @@ function ContentsCarousel(props) {
|
|
|
93
93
|
}), customProgressbarNormalStyle = _h.normalStyle, customProgressbarHoverStyle = _h.hoverStyle;
|
|
94
94
|
var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn;
|
|
95
95
|
var _k = (0, react_1.useState)(false), isHovered = _k[0], setIsHovered = _k[1];
|
|
96
|
-
var
|
|
96
|
+
var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
|
|
97
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
98
|
+
.map(function (item) {
|
|
99
|
+
return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
|
|
100
|
+
});
|
|
101
|
+
var loop = contentsCarouselNormalStyle.loop && orderedCompositions.length >= displayCounts;
|
|
102
|
+
console.log('loop', loop);
|
|
97
103
|
// NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
|
|
98
104
|
var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
|
|
99
105
|
// NOTE: EFFECT와 관련된 함수들입니다.
|
|
@@ -150,16 +156,10 @@ function ContentsCarousel(props) {
|
|
|
150
156
|
var isMobile = device === 'MOBILE';
|
|
151
157
|
var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
|
|
152
158
|
var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
|
|
153
|
-
var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
|
|
154
|
-
.sort(function (a, b) { return a.order - b.order; })
|
|
155
|
-
.map(function (item) {
|
|
156
|
-
return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
|
|
157
|
-
});
|
|
158
159
|
var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
|
|
159
160
|
if (mode === 'EDIT') {
|
|
160
161
|
style.visibility = 'visible';
|
|
161
162
|
}
|
|
162
|
-
console.log('contentsCarouselStyle', contentsCarouselNormalStyle);
|
|
163
163
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), Object.entries(componentGroups).map(function (_a) {
|
|
164
164
|
var position = _a[0], groupComponents = _a[1];
|
|
165
165
|
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-group ccb-elements ".concat(position), ref: function (el) {
|
|
@@ -180,7 +180,7 @@ function ContentsCarousel(props) {
|
|
|
180
180
|
display: layout.display,
|
|
181
181
|
flexDirection: layout.flexDirection,
|
|
182
182
|
justifyContent: layout.justifyContent
|
|
183
|
-
} }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: displayCounts, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase(), displayCounts: displayCounts }, { children: (0, createCompositions_1.createCompositions)({
|
|
183
|
+
} }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: displayCounts, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase(), loop: loop, displayCounts: displayCounts }, { children: (0, createCompositions_1.createCompositions)({
|
|
184
184
|
valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
|
|
185
185
|
queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
|
|
186
186
|
limit: displayCounts,
|
|
@@ -41,7 +41,7 @@ require("swiper/modules/navigation/navigation.min.css");
|
|
|
41
41
|
var react_2 = require("swiper/react");
|
|
42
42
|
var StyledSwiper_1 = __importDefault(require("../../../StyledSwiper/StyledSwiper"));
|
|
43
43
|
var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
|
|
44
|
-
var styles = _a.styles, slidesPerView = _a.slidesPerView, children = _a.children, allowTouchMove = _a.allowTouchMove, displayCounts = _a.displayCounts, props = __rest(_a, ["styles", "slidesPerView", "children", "allowTouchMove", "displayCounts"]);
|
|
44
|
+
var styles = _a.styles, slidesPerView = _a.slidesPerView, children = _a.children, allowTouchMove = _a.allowTouchMove, displayCounts = _a.displayCounts, loop = _a.loop, props = __rest(_a, ["styles", "slidesPerView", "children", "allowTouchMove", "displayCounts", "loop"]);
|
|
45
45
|
var childrenArray = (0, react_1.useMemo)(function () {
|
|
46
46
|
return Array.isArray(children) ? children : [children];
|
|
47
47
|
}, [children]);
|
|
@@ -51,7 +51,6 @@ var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
51
51
|
}, [children]);
|
|
52
52
|
var finalSlidesPerView = props.effect === 'cards' ? 1 : slidesPerView;
|
|
53
53
|
var useAutoplay = !!styles.useAutoplay && childrenArray.length > 1;
|
|
54
|
-
var loop = styles.loop && originalChildren.length >= displayCounts;
|
|
55
54
|
// 2. (수정) 루프와 slidesPerView 문제를 해결하기 위한 배열
|
|
56
55
|
var loopedChildren = (0, react_1.useMemo)(function () {
|
|
57
56
|
// 루프가 아니거나, slidesPerView가 1이하이면 원본 반환
|
|
@@ -98,9 +97,7 @@ var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
98
97
|
swiper_1.EffectCards,
|
|
99
98
|
swiper_1.EffectCoverflow,
|
|
100
99
|
swiper_1.EffectFlip
|
|
101
|
-
], slidesPerView: finalSlidesPerView, scrollbar: styles.scrollbar, slidesPerGroup: styles.slidesPerGroup, spaceBetween: styles.spaceBetween, freeMode: styles.freeMode, autoplay: useAutoplay ? styles.autoplay : false, loop:
|
|
102
|
-
// cnrk
|
|
103
|
-
observer: true, observeParents: true }, props, { children: loopedChildren.map(function (slide, index) { return ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, __assign({ style: { pointerEvents: allowTouchMove ? 'auto' : 'none' } }, { children: slide || (0, jsx_runtime_1.jsx)("div", { className: "swiper-slide-empty" }) }), index)); }) })) })));
|
|
100
|
+
], allowSlideNext: allowTouchMove, allowSlidePrev: allowTouchMove, slidesPerView: finalSlidesPerView, scrollbar: styles.scrollbar, slidesPerGroup: styles.slidesPerGroup, spaceBetween: styles.spaceBetween, freeMode: styles.freeMode, autoplay: useAutoplay ? styles.autoplay : false, loop: loop, allowTouchMove: allowTouchMove, observer: true, observeParents: true }, props, { children: loopedChildren.map(function (slide, index) { return ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, __assign({ style: { pointerEvents: allowTouchMove ? 'auto' : 'none' } }, { children: slide || (0, jsx_runtime_1.jsx)("div", { className: "swiper-slide-empty" }) }), index)); }) })) })));
|
|
104
101
|
});
|
|
105
102
|
ContentsCarouselCore.displayName = 'ContentsCarouselCore';
|
|
106
103
|
exports.default = ContentsCarouselCore;
|