pds-dev-kit-web-test 2.7.222 → 2.7.223
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/CustomPagination.js +8 -18
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.d.ts +4 -7
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.js +7 -9
- package/package.json +1 -1
|
@@ -44,36 +44,26 @@ 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
|
-
}
|
|
57
47
|
var size = styles.size || 'MEDIUM';
|
|
58
48
|
switch (styles.type) {
|
|
59
49
|
case 'NONE':
|
|
60
50
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
61
51
|
case 'DESIGN1':
|
|
62
|
-
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, size: size
|
|
52
|
+
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, size: size }));
|
|
63
53
|
case 'DESIGN2':
|
|
64
|
-
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,
|
|
54
|
+
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, size: size }));
|
|
65
55
|
case 'DESIGN3':
|
|
66
|
-
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,
|
|
56
|
+
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, size: size }));
|
|
67
57
|
case 'DESIGN4':
|
|
68
|
-
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,
|
|
58
|
+
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, size: size }));
|
|
69
59
|
case 'DESIGN5':
|
|
70
|
-
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,
|
|
60
|
+
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, size: size }));
|
|
71
61
|
case 'DESIGN6':
|
|
72
|
-
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,
|
|
62
|
+
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, size: size }));
|
|
73
63
|
case 'DESIGN7':
|
|
74
|
-
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,
|
|
64
|
+
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, size: size }));
|
|
75
65
|
case 'DESIGN8':
|
|
76
|
-
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,
|
|
66
|
+
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, size: size }));
|
|
77
67
|
default:
|
|
78
68
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
79
69
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { IconButtonProps } from '../../../../../../../../../desktop/components/IconButton/IconButton';
|
|
3
2
|
type Props = {
|
|
4
3
|
total: number;
|
|
5
4
|
current: number;
|
|
@@ -11,13 +10,11 @@ type Props = {
|
|
|
11
10
|
onPageChange?: (page: number) => void;
|
|
12
11
|
ellipsis?: boolean;
|
|
13
12
|
maxVisiblePages?: number;
|
|
14
|
-
buttonSize?: IconButtonProps['baseSize'];
|
|
15
|
-
iconSize: IconButtonProps['iconSize'];
|
|
16
13
|
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
17
14
|
};
|
|
18
|
-
export declare function Design1({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages,
|
|
19
|
-
export declare function Design2({ total, current, primaryColor, secondaryColor, ellipsis, maxVisiblePages,
|
|
20
|
-
export declare function Design3({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages,
|
|
15
|
+
export declare function Design1({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, size, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
|
16
|
+
export declare function Design2({ total, current, primaryColor, secondaryColor, ellipsis, maxVisiblePages, size, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
|
17
|
+
export declare function Design3({ total, current, pages, primaryColor, secondaryColor, ellipsis, maxVisiblePages, size, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
|
21
18
|
export declare function Design7({ total, current, pages, primaryColor, secondaryColor, size, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
|
22
|
-
export declare function Design8({ total, current, pages, primaryColor, secondaryColor,
|
|
19
|
+
export declare function Design8({ total, current, pages, primaryColor, secondaryColor, size, onPageChange, onNext, onPrevious }: Props): JSX.Element;
|
|
23
20
|
export {};
|
|
@@ -45,9 +45,7 @@ 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,
|
|
49
|
-
// iconSize = 24,
|
|
50
|
-
size = _a.size, 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, size = _a.size, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
|
51
49
|
// ellipsis prop에 따라 렌더링할 페이지 목록 결정
|
|
52
50
|
var pagesToRender = ellipsis
|
|
53
51
|
? (0, usePagination_1.getPaginationItems)(total, current, maxVisiblePages)
|
|
@@ -59,25 +57,25 @@ function Design1(_a) {
|
|
|
59
57
|
}
|
|
60
58
|
exports.Design1 = Design1;
|
|
61
59
|
function Design2(_a) {
|
|
62
|
-
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,
|
|
60
|
+
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, size = _a.size, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
|
63
61
|
var pagesToRender = ellipsis
|
|
64
62
|
? (0, usePagination_1.getPaginationItems)(total, current, maxVisiblePages)
|
|
65
63
|
: Array.from({ length: total }, function (_, i) { return i + 1; });
|
|
66
64
|
var sizeConfig = LIST_PAGINATION_SIZES.DESIGN2[size];
|
|
67
65
|
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.D_IconButton, { iconName: "ic_arrow_left", iconSize: sizeConfig.ICON_SIZE, baseSize: sizeConfig.BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) })), pagesToRender.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", fontSize: sizeConfig.FONT_SIZE, shape: "round", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: primaryColor, activeTextColor: primaryColor, radius: 8,
|
|
68
66
|
// '...'인 경우 버튼 비활성화 및 클릭 방지
|
|
69
|
-
isActive: pageNumber === current, size:
|
|
67
|
+
isActive: pageNumber === current, size: sizeConfig.SELECTION_BACKGROUND_SIZE, 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.D_IconButton, { iconName: "ic_arrow_right", iconSize: sizeConfig.ICON_SIZE, baseSize: sizeConfig.BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }))] })));
|
|
70
68
|
}
|
|
71
69
|
exports.Design2 = Design2;
|
|
72
70
|
function Design3(_a) {
|
|
73
|
-
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,
|
|
71
|
+
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, size = _a.size, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
|
74
72
|
var pagesToRender = ellipsis
|
|
75
73
|
? (0, usePagination_1.getPaginationItems)(total, current, maxVisiblePages)
|
|
76
74
|
: Array.from({ length: total }, function (_, i) { return i + 1; });
|
|
77
75
|
var sizeConfig = LIST_PAGINATION_SIZES.DESIGN3[size];
|
|
78
76
|
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.D_IconButton, { iconName: "ic_arrow_left", iconSize: sizeConfig.ICON_SIZE, baseSize: sizeConfig.BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) })), 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,
|
|
79
77
|
// '...'인 경우 버튼 비활성화 및 클릭 방지
|
|
80
|
-
size:
|
|
78
|
+
size: sizeConfig.SELECTION_BACKGROUND_SIZE, isActive: pageNumber === current, disabled: pageNumber === '...', onClick: function () { return pageNumber !== '...' && onPageChange && onPageChange(pageNumber); }, fontSize: sizeConfig.FONT_SIZE }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconName: "ic_arrow_right", iconSize: sizeConfig.ICON_SIZE, baseSize: sizeConfig.BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }))] })));
|
|
81
79
|
}
|
|
82
80
|
exports.Design3 = Design3;
|
|
83
81
|
function Design7(_a) {
|
|
@@ -89,8 +87,8 @@ function Design7(_a) {
|
|
|
89
87
|
}
|
|
90
88
|
exports.Design7 = Design7;
|
|
91
89
|
function Design8(_a) {
|
|
92
|
-
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor,
|
|
93
|
-
var
|
|
90
|
+
var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, size = _a.size, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
|
|
91
|
+
var _b = LIST_PAGINATION_SIZES.DESIGN8[size], BUTTON_SIZE = _b.BUTTON_SIZE, SELECTED_TEXT_STYLE_THEME = _b.SELECTED_TEXT_STYLE_THEME, UNSELECTED_TEXT_STYLE_THEME = _b.UNSELECTED_TEXT_STYLE_THEME, ICON_SIZE = _b.ICON_SIZE;
|
|
94
92
|
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.D_IconButton, { iconName: "ic_arrow_left", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
|
|
95
93
|
marginLeft: '8px'
|
|
96
94
|
}, colorTheme: "sysTextBlack", styleTheme: SELECTED_TEXT_STYLE_THEME }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '8px', opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME, colorTheme: "sysTextBlack" }, { children: "|" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME, 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.D_IconButton, { iconName: "ic_arrow_right", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }))] })));
|