@drivy/cobalt 0.50.0 → 0.50.1
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.
|
@@ -9,10 +9,10 @@ const PaginationButton = ({ currentPage, pageNumber, onPageChange, }) => {
|
|
|
9
9
|
return (React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), selected: isActive, onClick: () => !isActive && onPageChange(pageNumber) }, pageNumber));
|
|
10
10
|
};
|
|
11
11
|
const PAGE_DOTS_VALUE = -1; // Unrevelant value only used to represent dots in the pages array
|
|
12
|
-
const generatePages = (currentPage, totalPages) => {
|
|
12
|
+
const generatePages = (currentPage, totalPages, options) => {
|
|
13
13
|
const pages = [];
|
|
14
|
-
const maxVisiblePages =
|
|
15
|
-
const edgeButtons =
|
|
14
|
+
const maxVisiblePages = options.maxVisibleLength; // Max visible pages (excluding dots)
|
|
15
|
+
const edgeButtons = options.edgeVisibleLength; // Number of fixed edge buttons
|
|
16
16
|
if (totalPages <= maxVisiblePages) {
|
|
17
17
|
// Show all pages
|
|
18
18
|
for (let i = 1; i <= totalPages; i++) {
|
|
@@ -52,10 +52,13 @@ const generatePages = (currentPage, totalPages) => {
|
|
|
52
52
|
return pages;
|
|
53
53
|
};
|
|
54
54
|
// eslint-disable-next-line complexity
|
|
55
|
-
const Pagination = ({ onPageChange, currentPage, totalPages,
|
|
55
|
+
const Pagination = ({ onPageChange, currentPage, totalPages, options = {
|
|
56
|
+
maxVisibleLength: 11,
|
|
57
|
+
edgeVisibleLength: 3,
|
|
58
|
+
}, }) => {
|
|
56
59
|
if (totalPages <= 1)
|
|
57
60
|
return null;
|
|
58
|
-
const pages = generatePages(currentPage, totalPages);
|
|
61
|
+
const pages = generatePages(currentPage, totalPages, options);
|
|
59
62
|
return (React.createElement("div", { className: "cobalt-pagination" },
|
|
60
63
|
React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), disabled: currentPage === 1, onClick: () => onPageChange(currentPage - 1), icon: "chevronLeft" }),
|
|
61
64
|
pages.map((page, index) => page === PAGE_DOTS_VALUE ? (React.createElement(DotsHorizontalIcon, { key: `dots-${index}`, className: "cobalt-pagination__threeDots", color: "accent" })) : (React.createElement(PaginationButton, { key: page, currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n currentPage,\n pageNumber,\n onPageChange,\n}: {\n currentPage: number\n pageNumber: number\n onPageChange: (page: number) => void\n}) => {\n const isActive = currentPage === pageNumber\n return (\n <DefaultButton\n className={cx(\"cobalt-pagination__DefaultButton\")}\n selected={isActive}\n onClick={() => !isActive && onPageChange(pageNumber)}\n >\n {pageNumber}\n </DefaultButton>\n )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (currentPage: number
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n currentPage,\n pageNumber,\n onPageChange,\n}: {\n currentPage: number\n pageNumber: number\n onPageChange: (page: number) => void\n}) => {\n const isActive = currentPage === pageNumber\n return (\n <DefaultButton\n className={cx(\"cobalt-pagination__DefaultButton\")}\n selected={isActive}\n onClick={() => !isActive && onPageChange(pageNumber)}\n >\n {pageNumber}\n </DefaultButton>\n )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (\n currentPage: number,\n totalPages: number,\n options: {\n maxVisibleLength: number\n edgeVisibleLength: number\n }\n) => {\n const pages: number[] = []\n const maxVisiblePages = options.maxVisibleLength // Max visible pages (excluding dots)\n const edgeButtons = options.edgeVisibleLength // Number of fixed edge buttons\n\n if (totalPages <= maxVisiblePages) {\n // Show all pages\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i)\n }\n return pages\n }\n\n // Calculate dynamic range for middle pages\n const middlePagesCount = maxVisiblePages - 2 * edgeButtons // Remaining pages for the middle\n let startMiddlePage = Math.max(\n currentPage - Math.floor(middlePagesCount / 2),\n edgeButtons + 1\n )\n let endMiddlePage = Math.min(\n currentPage + Math.floor(middlePagesCount / 2),\n totalPages - edgeButtons\n )\n\n // Adjust start and end pages if they exceed boundaries\n if (startMiddlePage === edgeButtons + 1) {\n endMiddlePage = startMiddlePage + middlePagesCount - 1\n } else if (endMiddlePage === totalPages - edgeButtons) {\n startMiddlePage = endMiddlePage - middlePagesCount + 1\n }\n\n // Add leading edge buttons\n for (let i = 1; i <= edgeButtons; i++) {\n pages.push(i)\n }\n if (startMiddlePage > edgeButtons + 1) {\n pages.push(PAGE_DOTS_VALUE)\n }\n\n // Add middle pages\n for (let i = startMiddlePage; i <= endMiddlePage; i++) {\n pages.push(i)\n }\n\n // Add trailing edge buttons\n if (endMiddlePage < totalPages - edgeButtons) {\n pages.push(PAGE_DOTS_VALUE)\n }\n for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {\n pages.push(i)\n }\n\n return pages\n}\n\n// eslint-disable-next-line complexity\nconst Pagination = ({\n onPageChange,\n currentPage,\n totalPages,\n options = {\n maxVisibleLength: 11,\n edgeVisibleLength: 3,\n },\n}: {\n currentPage: number\n totalPages: number\n onPageChange: (page: number) => void\n options?: {\n maxVisibleLength: number\n edgeVisibleLength: number\n }\n}) => {\n if (totalPages <= 1) return null\n const pages = generatePages(currentPage, totalPages, options)\n\n return (\n <div className=\"cobalt-pagination\">\n <DefaultButton\n className={cx(\"cobalt-pagination__DefaultButton\")}\n disabled={currentPage === 1}\n onClick={() => onPageChange(currentPage - 1)}\n icon=\"chevronLeft\"\n />\n {pages.map((page, index) =>\n page === PAGE_DOTS_VALUE ? (\n <DotsHorizontalIcon\n key={`dots-${index}`}\n className=\"cobalt-pagination__threeDots\"\n color=\"accent\"\n />\n ) : (\n <PaginationButton\n key={page}\n currentPage={currentPage}\n pageNumber={page}\n onPageChange={onPageChange}\n />\n )\n )}\n <DefaultButton\n className={cx(\"cobalt-pagination__DefaultButton\")}\n disabled={currentPage === totalPages}\n onClick={() => onPageChange(currentPage + 1)}\n icon=\"chevronRight\"\n />\n </div>\n )\n}\n\nexport default Pagination\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@drivy/cobalt",
|
|
3
|
-
"version": "0.50.
|
|
3
|
+
"version": "0.50.1",
|
|
4
4
|
"description": "Opinionated design system for Drivy's projects.",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"types": "types/src/index.d.ts",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@reach/slider": "0.16.0",
|
|
30
30
|
"@reach/tabs": "0.16.4",
|
|
31
31
|
"@reach/visually-hidden": "0.16.0",
|
|
32
|
-
"@react-spring/web": "9.
|
|
32
|
+
"@react-spring/web": "9.7.5",
|
|
33
33
|
"@tippyjs/react": "4.2.6",
|
|
34
34
|
"classnames": "2.5.1",
|
|
35
35
|
"date-fns": "2.30.0",
|
|
@@ -66,14 +66,14 @@
|
|
|
66
66
|
"@types/jest": "29.5.14",
|
|
67
67
|
"@types/lodash.throttle": "4.1.9",
|
|
68
68
|
"@types/media-typer": "1.1.3",
|
|
69
|
-
"@types/node": "20.17.
|
|
69
|
+
"@types/node": "20.17.12",
|
|
70
70
|
"@types/react": "18.3.17",
|
|
71
71
|
"@types/react-dom": "18.3.5",
|
|
72
72
|
"autoprefixer": "10.4.20",
|
|
73
73
|
"core-js": "3.39.0",
|
|
74
74
|
"css-loader": "7.1.2",
|
|
75
75
|
"eslint": "8.57.1",
|
|
76
|
-
"eslint-plugin-storybook": "^0.11.
|
|
76
|
+
"eslint-plugin-storybook": "^0.11.2",
|
|
77
77
|
"file-loader": "6.2.0",
|
|
78
78
|
"fs-extra": "11.2.0",
|
|
79
79
|
"html-entities": "2.5.2",
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare const Pagination: ({ onPageChange, currentPage, totalPages, }: {
|
|
2
|
+
declare const Pagination: ({ onPageChange, currentPage, totalPages, options, }: {
|
|
3
3
|
currentPage: number;
|
|
4
4
|
totalPages: number;
|
|
5
5
|
onPageChange: (page: number) => void;
|
|
6
|
+
options?: {
|
|
7
|
+
maxVisibleLength: number;
|
|
8
|
+
edgeVisibleLength: number;
|
|
9
|
+
};
|
|
6
10
|
}) => React.JSX.Element | null;
|
|
7
11
|
export default Pagination;
|