pds-dev-kit-web-test 2.7.266 → 2.7.268

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

@@ -71,7 +71,6 @@ function ContentsCarousel(props) {
     var autoPlayEnabled = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE
         : (_a = CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD['CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE:MOBILE']) !== null && _a !== void 0 ? _a : CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE;
-    // const useAutoplay = autoPlayEnabled &&  > 1;
     var displayCounts = device === 'DESKTOP'
         ? CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS
         : 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;
@@ -133,7 +132,7 @@ function ContentsCarousel(props) {
             case 'NEXT':
                 return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: style }));
             case 'PROGRESSBAR':
-                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
+                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: orderedCompositions.length, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
             default:
                 return null;
         }

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

@@ -56,7 +56,7 @@ var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
         return childrenArray;
     }, [children, slidesPerView, styles.slidesPerGroup]);
     var finalSlidesPerView = props.effect === 'cards' ? 1 : slidesPerView;
-    var useAutoplay = styles.useAutoplay && Array.isArray(children) && children.length > 1;
+    var useAutoplay = !!styles.useAutoplay && Array.isArray(children) && children.length > 1;
     return ((0, jsx_runtime_1.jsx)(StyledSwiper_1.default, __assign({ id: "styled-swiper-wrapper" }, { children: (0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ ref: ref, style: {
                 width: '100%',
                 height: '100%'

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.d.ts

@@ -4,6 +4,7 @@ type Props = {
     styles: CustomProgressbarProps;
     progressRef: React.RefObject<number>;
     leftTimeMsRef: React.RefObject<number>;
+    slidesLength: number;
 };
-export declare const CustomProgressbar: ({ styles, progressRef, leftTimeMsRef }: Props) => JSX.Element;
+export declare const CustomProgressbar: ({ styles, progressRef, leftTimeMsRef, slidesLength }: Props) => JSX.Element;
 export default CustomProgressbar;

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

@@ -24,7 +24,7 @@ var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var progressConfigs_1 = require("./progressConfigs");
 var CustomProgressbar = function (_a) {
-    var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef;
+    var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, slidesLength = _a.slidesLength;
     var _b = (0, react_1.useState)(0), leftTimeSec = _b[0], setLeftTimeSec = _b[1];
     var _c = (0, react_1.useState)(0), progress = _c[0], setProgress = _c[1];
     (0, react_1.useEffect)(function () {
@@ -56,19 +56,21 @@ var CustomProgressbar = function (_a) {
         animationId = requestAnimationFrame(updateProgress);
         return function () { return cancelAnimationFrame(animationId); };
     }, []);
+    var progressRender = slidesLength > 1 ? progress : 0;
+    var timeLeftRender = slidesLength > 1 ? leftTimeSec : 0;
     var renderProgressByType = function () {
         var _a, _b, _c, _d, _e;
         switch (styles.type) {
             case 'NONE':
                 return null;
             case 'DESIGN1':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN2':
             //   return (
             //     <ProgressDesign2
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
-            //       leftTimeSec={leftTimeSec}
+            //       progress={progressRender}
+            //       leftTimeSec={timeLeftRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
@@ -77,37 +79,37 @@ var CustomProgressbar = function (_a) {
             //   return (
             //     <ProgressDesign3
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             case 'DESIGN2':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN5':
             //   return (
             //     <ProgressDesign5
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             case 'DESIGN3':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             case 'DESIGN4':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN8':
             //   return (
             //     <ProgressDesign8
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             default:
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM', progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/hooks/useSwiper.js

@@ -17,12 +17,6 @@ function useSwiper() {
         setIsEnd(swiper.isEnd);
     };
     var onAutoplayTimeLeft = (0, react_1.useCallback)(function (swiper, time, progress) {
-        // if (swiper.slides.length === 0) {
-        //   // 즉시 autoplay를 멈추고 함수 종료
-        //   swiper.autoplay.stop();
-        //   return;
-        // }
-        console.log(swiper.autoplay.paused);
         leftTimeMsRef.current = time;
         progressRef.current = progress;
     }, []);

package/package.json

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