pds-dev-kit-web-test 2.7.217 → 2.7.220
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/ContentsList/components/paginationConfigs.js +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js +42 -13
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.js +1 -1
- package/package.json +1 -1
|
@@ -60,7 +60,7 @@ function Design2(_a) {
|
|
|
60
60
|
var pagesToRender = ellipsis
|
|
61
61
|
? (0, usePagination_1.getPaginationItems)(total, current, maxVisiblePages)
|
|
62
62
|
: Array.from({ length: total }, function (_, i) { return i + 1; });
|
|
63
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "
|
|
63
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor, radius: 8,
|
|
64
64
|
// '...'인 경우 버튼 비활성화 및 클릭 방지
|
|
65
65
|
isActive: pageNumber === current, size: iconSize, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) }))] })));
|
|
66
66
|
}
|
|
@@ -70,7 +70,7 @@ function Design3(_a) {
|
|
|
70
70
|
var pagesToRender = ellipsis
|
|
71
71
|
? (0, usePagination_1.getPaginationItems)(total, current, maxVisiblePages)
|
|
72
72
|
: Array.from({ length: total }, function (_, i) { return i + 1; });
|
|
73
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "
|
|
73
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, radius: 16, activeTextColor: primaryColor,
|
|
74
74
|
// '...'인 경우 버튼 비활성화 및 클릭 방지
|
|
75
75
|
size: iconSize, isActive: pageNumber === current, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark", overrideColorHex: primaryColor }) }))] })));
|
|
76
76
|
}
|
|
@@ -56,28 +56,57 @@ var CustomProgressbar = function (_a) {
|
|
|
56
56
|
return function () { return cancelAnimationFrame(animationId); };
|
|
57
57
|
}, []);
|
|
58
58
|
var renderProgressByType = function () {
|
|
59
|
-
var _a, _b, _c, _d, _e
|
|
59
|
+
var _a, _b, _c, _d, _e;
|
|
60
60
|
switch (styles.type) {
|
|
61
61
|
case 'NONE':
|
|
62
62
|
return null;
|
|
63
63
|
case 'DESIGN1':
|
|
64
64
|
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 }));
|
|
65
|
+
// case 'DESIGN2':
|
|
66
|
+
// return (
|
|
67
|
+
// <ProgressDesign2
|
|
68
|
+
// size={styles.size ?? 'MEDIUM'}
|
|
69
|
+
// progress={progress}
|
|
70
|
+
// leftTimeSec={leftTimeSec}
|
|
71
|
+
// progressColor={styles.primaryColor}
|
|
72
|
+
// bufferColor={styles.secondaryColor}
|
|
73
|
+
// />
|
|
74
|
+
// );
|
|
75
|
+
// case 'DESIGN3':
|
|
76
|
+
// return (
|
|
77
|
+
// <ProgressDesign3
|
|
78
|
+
// size={styles.size ?? 'MEDIUM'}
|
|
79
|
+
// progress={progress}
|
|
80
|
+
// progressColor={styles.primaryColor}
|
|
81
|
+
// bufferColor={styles.secondaryColor}
|
|
82
|
+
// />
|
|
83
|
+
// );
|
|
65
84
|
case 'DESIGN2':
|
|
66
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.
|
|
85
|
+
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 }));
|
|
86
|
+
// case 'DESIGN5':
|
|
87
|
+
// return (
|
|
88
|
+
// <ProgressDesign5
|
|
89
|
+
// size={styles.size ?? 'MEDIUM'}
|
|
90
|
+
// progress={progress}
|
|
91
|
+
// progressColor={styles.primaryColor}
|
|
92
|
+
// bufferColor={styles.secondaryColor}
|
|
93
|
+
// />
|
|
94
|
+
// );
|
|
67
95
|
case 'DESIGN3':
|
|
68
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.
|
|
96
|
+
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 }));
|
|
69
97
|
case 'DESIGN4':
|
|
70
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.
|
|
71
|
-
case '
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
98
|
+
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 }));
|
|
99
|
+
// case 'DESIGN8':
|
|
100
|
+
// return (
|
|
101
|
+
// <ProgressDesign8
|
|
102
|
+
// size={styles.size ?? 'MEDIUM'}
|
|
103
|
+
// progress={progress}
|
|
104
|
+
// progressColor={styles.primaryColor}
|
|
105
|
+
// bufferColor={styles.secondaryColor}
|
|
106
|
+
// />
|
|
107
|
+
// );
|
|
79
108
|
default:
|
|
80
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor, size: (
|
|
109
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor, size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM' }));
|
|
81
110
|
}
|
|
82
111
|
};
|
|
83
112
|
return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));
|
|
@@ -149,7 +149,7 @@ var S_ProgressDesign3 = styled_components_1.default.div(templateObject_3 || (tem
|
|
|
149
149
|
var bgColor = _a.bgColor;
|
|
150
150
|
return bgColor;
|
|
151
151
|
});
|
|
152
|
-
var S_ProgressDesign4 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\n
|
|
152
|
+
var S_ProgressDesign4 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: ", "px;\n z-index: 11;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: ", "px;\n z-index: 11;\n }\n"])), function (_a) {
|
|
153
153
|
var barColor = _a.barColor;
|
|
154
154
|
return barColor;
|
|
155
155
|
}, function (_a) {
|