pds-dev-kit-web-test 2.7.202 → 2.7.204
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/mock_contentsList.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/CustomPagination.js +23 -13
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.d.ts +12 -9
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.js +34 -28
- package/package.json +1 -1
@@ -2379,7 +2379,7 @@ exports.SAMPLE_LIST_CB = {
|
|
2379
2379
|
'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': null,
|
2380
2380
|
CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSIZE: 'MEDIUM',
|
2381
2381
|
'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSIZE:MOBILE': null,
|
2382
|
-
CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSTYLE: '
|
2382
|
+
CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN1',
|
2383
2383
|
'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSTYLE:MOBILE': null
|
2384
2384
|
},
|
2385
2385
|
CB_STYLE_PROP_OPACITY: {
|
@@ -44,35 +44,45 @@ var CustomPagination = function (_a) {
|
|
44
44
|
onPageClick(pageNumber);
|
45
45
|
};
|
46
46
|
var renderPagination = function () {
|
47
|
+
var buttonSize = 'large';
|
48
|
+
var iconSize = 24;
|
49
|
+
if (styles.size === 'SMALL') {
|
50
|
+
buttonSize = 'small';
|
51
|
+
iconSize = 16;
|
52
|
+
}
|
53
|
+
if (styles.size === 'LARGE') {
|
54
|
+
buttonSize = 'xxlarge';
|
55
|
+
iconSize = 32;
|
56
|
+
}
|
47
57
|
switch (styles.type) {
|
48
58
|
case 'NONE':
|
49
59
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
50
60
|
case 'DESIGN1':
|
51
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
61
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
52
62
|
case 'DESIGN2':
|
53
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
63
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
54
64
|
case 'DESIGN3':
|
55
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
65
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
56
66
|
case 'DESIGN4':
|
57
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3 }));
|
67
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3, buttonSize: buttonSize, iconSize: iconSize }));
|
58
68
|
case 'DESIGN5':
|
59
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3 }));
|
69
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3, buttonSize: buttonSize, iconSize: iconSize }));
|
60
70
|
case 'DESIGN6':
|
61
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3 }));
|
71
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, ellipsis: true, maxVisiblePages: 3, buttonSize: buttonSize, iconSize: iconSize }));
|
62
72
|
case 'DESIGN7':
|
63
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design7, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
73
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design7, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
64
74
|
case 'DESIGN8':
|
65
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design8, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
75
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design8, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
66
76
|
case 'DESIGN9':
|
67
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design9, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
77
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design9, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
68
78
|
case 'DESIGN10':
|
69
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design10, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
79
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design10, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
70
80
|
case 'DESIGN11':
|
71
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design11, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
81
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design11, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
72
82
|
case 'DESIGN12':
|
73
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design12, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
83
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design12, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
74
84
|
case 'DESIGN13':
|
75
|
-
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design13, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
|
85
|
+
return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design13, { total: total, current: current, primaryColor: styles.primaryColor, secondaryColor: styles.secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick, buttonSize: buttonSize, iconSize: iconSize }));
|
76
86
|
default:
|
77
87
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
78
88
|
}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
+
import type { IconButtonProps } from '../../../../../../../../../desktop/components/IconButton/IconButton';
|
2
3
|
type Props = {
|
3
4
|
total: number;
|
4
5
|
current: number;
|
@@ -10,15 +11,17 @@ type Props = {
|
|
10
11
|
onPageChange?: (page: number) => void;
|
11
12
|
ellipsis?: boolean;
|
12
13
|
maxVisiblePages?: number;
|
14
|
+
buttonSize?: IconButtonProps['baseSize'];
|
15
|
+
iconSize: IconButtonProps['iconSize'];
|
13
16
|
};
|
14
|
-
export declare function Design1({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
15
|
-
export declare function Design2({ total, current,
|
16
|
-
export declare function Design3({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
17
|
-
export declare function Design7({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
18
|
-
export declare function Design8({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
19
|
-
export declare function Design9({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
20
|
-
export declare function Design10({ total, current, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
21
|
-
export declare function Design11({ total, current, primaryColor, secondaryColor, onNext, onPrevious }: Props): JSX.Element;
|
22
|
-
export declare function Design12({ total, current, primaryColor, secondaryColor, onNext, onPrevious }: Props): JSX.Element;
|
17
|
+
export declare function Design1({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, buttonSize, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
18
|
+
export declare function Design2({ total, current, primaryColor, secondaryColor, ellipsis, maxVisiblePages, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
19
|
+
export declare function Design3({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
20
|
+
export declare function Design7({ total, current, pages, primaryColor, secondaryColor, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
21
|
+
export declare function Design8({ total, current, pages, primaryColor, secondaryColor, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
22
|
+
export declare function Design9({ total, current, pages, primaryColor, secondaryColor, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
23
|
+
export declare function Design10({ total, current, primaryColor, secondaryColor, iconSize, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
24
|
+
export declare function Design11({ total, current, primaryColor, secondaryColor, iconSize, onNext, onPrevious }: Props): JSX.Element;
|
25
|
+
export declare function Design12({ total, current, primaryColor, secondaryColor, iconSize, onNext, onPrevious }: Props): JSX.Element;
|
23
26
|
export declare function Design13({ total, current, primaryColor, secondaryColor, onNext, onPrevious }: Props): JSX.Element;
|
24
27
|
export {};
|
@@ -45,75 +45,75 @@ var components_1 = require("../../../../../../../../DynamicLayout/components");
|
|
45
45
|
var styled_components_1 = __importStar(require("styled-components"));
|
46
46
|
var usePagination_1 = require("../hooks/usePagination");
|
47
47
|
function Design1(_a) {
|
48
|
-
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
48
|
+
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, buttonSize = _a.buttonSize, _c = _a.iconSize, iconSize = _c === void 0 ? 24 : _c, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
49
49
|
// ellipsis prop에 따라 렌더링할 페이지 목록 결정
|
50
50
|
var pagesToRender = ellipsis
|
51
51
|
? (0, usePagination_1.getPaginationItems)(total, current, maxVisiblePages)
|
52
52
|
: Array.from({ length: total }, function (_, i) { return i + 1; });
|
53
|
-
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:
|
53
|
+
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: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor,
|
54
54
|
// '...'인 경우 버튼 비활성화 및 클릭 방지
|
55
|
-
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:
|
55
|
+
isActive: pageNumber === current, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); }, size: iconSize }, { 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 }) }))] })));
|
56
56
|
}
|
57
57
|
exports.Design1 = Design1;
|
58
58
|
function Design2(_a) {
|
59
|
-
var total = _a.total, current = _a.current,
|
59
|
+
var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 24 : _c, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
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:
|
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: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor, radius: 8,
|
64
64
|
// '...'인 경우 버튼 비활성화 및 클릭 방지
|
65
|
-
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:
|
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
|
}
|
67
67
|
exports.Design2 = Design2;
|
68
68
|
function Design3(_a) {
|
69
|
-
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
69
|
+
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, ellipsis = _a.ellipsis, _b = _a.maxVisiblePages, maxVisiblePages = _b === void 0 ? 5 : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 24 : _c, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
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:
|
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: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, radius: 16, activeTextColor: primaryColor,
|
74
74
|
// '...'인 경우 버튼 비활성화 및 클릭 방지
|
75
|
-
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:
|
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
|
}
|
77
77
|
exports.Design3 = Design3;
|
78
78
|
function Design7(_a) {
|
79
|
-
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
80
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_left", size:
|
79
|
+
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
80
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
|
81
81
|
marginLeft: '8px'
|
82
|
-
}, colorTheme: "sysTextBlack", styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_right", size:
|
82
|
+
}, colorTheme: "sysTextBlack", styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
|
83
83
|
}
|
84
84
|
exports.Design7 = Design7;
|
85
85
|
function Design8(_a) {
|
86
|
-
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
87
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_left", size:
|
86
|
+
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
87
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
|
88
88
|
marginLeft: '8px'
|
89
|
-
}, colorTheme: "sysTextBlack", styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '8px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "|" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_right", size:
|
89
|
+
}, colorTheme: "sysTextBlack", styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '8px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "|" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: primaryColor, iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
|
90
90
|
}
|
91
91
|
exports.Design8 = Design8;
|
92
92
|
// NOTE: 이 밑은 NOT IN USE
|
93
93
|
function Design9(_a) {
|
94
|
-
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
95
|
-
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:
|
94
|
+
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
95
|
+
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" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: primaryColor, activeBackgroundColor: secondaryColor, textColor: secondaryColor, activeTextColor: primaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); }, size: iconSize }, { 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" }) }))] })));
|
96
96
|
}
|
97
97
|
exports.Design9 = Design9;
|
98
98
|
function Design10(_a) {
|
99
|
-
var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
99
|
+
var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
100
100
|
var paginationPages = generatePaginationPages(total, current);
|
101
|
-
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:
|
101
|
+
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" }) })), paginationPages === null || paginationPages === void 0 ? void 0 : paginationPages.map(function (pageNumber) {
|
102
102
|
if (typeof pageNumber === 'string') {
|
103
|
-
return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, isActive: false, disabled: true }, { children: pageNumber }), pageNumber));
|
103
|
+
return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, isActive: false, size: iconSize, disabled: true }, { children: pageNumber }), pageNumber));
|
104
104
|
}
|
105
|
-
return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber));
|
106
|
-
}), (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:
|
105
|
+
return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, size: iconSize, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber));
|
106
|
+
}), (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" }) }))] })));
|
107
107
|
}
|
108
108
|
exports.Design10 = Design10;
|
109
109
|
function Design11(_a) {
|
110
|
-
var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
111
|
-
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:
|
110
|
+
var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
111
|
+
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" }) })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": secondaryColor }, { children: current })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: total })), (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" }) }))] })));
|
112
112
|
}
|
113
113
|
exports.Design11 = Design11;
|
114
114
|
function Design12(_a) {
|
115
|
-
var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
116
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": secondaryColor }, { children: current })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: total })), (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:
|
115
|
+
var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
116
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": secondaryColor }, { children: current })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: total })), (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" }) })), (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: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
|
117
117
|
}
|
118
118
|
exports.Design12 = Design12;
|
119
119
|
function Design13(_a) {
|
@@ -138,14 +138,14 @@ var FlexBox = styled_components_1.default.div(templateObject_1 || (templateObjec
|
|
138
138
|
var _b = _a.justifyContent, justifyContent = _b === void 0 ? 'center' : _b;
|
139
139
|
return justifyContent;
|
140
140
|
});
|
141
|
-
var S_Pointer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: ", ";\n
|
141
|
+
var S_Pointer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n opacity: ", ";\n"], ["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n opacity: ", ";\n"])), function (_a) {
|
142
142
|
var disabled = _a.disabled;
|
143
143
|
return (disabled ? 'auto' : 'pointer');
|
144
144
|
}, function (_a) {
|
145
145
|
var disabled = _a.disabled;
|
146
146
|
return (disabled ? 0.3 : 1);
|
147
147
|
});
|
148
|
-
var S_Page = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n border-radius: ", ";\n color: ", ";\n display: flex;\n font-size: ", ";\n font-weight: ", ";\n height:
|
148
|
+
var S_Page = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n border-radius: ", ";\n color: ", ";\n display: flex;\n font-size: ", ";\n font-weight: ", ";\n height: ", ";\n justify-content: center;\n outline: none;\n width: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border: none;\n border-radius: ", ";\n color: ", ";\n display: flex;\n font-size: ", ";\n font-weight: ", ";\n height: ", ";\n justify-content: center;\n outline: none;\n width: ", ";\n"])), function (_a) {
|
149
149
|
var isActive = _a.isActive, backgroundColor = _a.backgroundColor, activeBackgroundColor = _a.activeBackgroundColor;
|
150
150
|
return isActive ? activeBackgroundColor : backgroundColor;
|
151
151
|
}, function (_a) {
|
@@ -162,6 +162,12 @@ var S_Page = styled_components_1.default.button(templateObject_3 || (templateObj
|
|
162
162
|
}, function (_a) {
|
163
163
|
var theme = _a.theme, isActive = _a.isActive;
|
164
164
|
return isActive ? theme.fontWeight.bold : theme.fontWeight.normal;
|
165
|
+
}, function (_a) {
|
166
|
+
var size = _a.size;
|
167
|
+
return (typeof size === 'number' ? "".concat(size, "px") : size || '32px');
|
168
|
+
}, function (_a) {
|
169
|
+
var size = _a.size;
|
170
|
+
return (typeof size === 'number' ? "".concat(size, "px") : size || '32px');
|
165
171
|
});
|
166
172
|
var S_Text = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (_a) {
|
167
173
|
var $color = _a.$color;
|