@drivy/cobalt 0.50.0 → 0.50.2
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.
|
@@ -80,12 +80,12 @@ class Stepper extends PureComponent {
|
|
|
80
80
|
"cobalt-Stepper--error": status === "error",
|
|
81
81
|
}) },
|
|
82
82
|
React.createElement("div", { className: "cobalt-Stepper__Wrapper" },
|
|
83
|
-
React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, onPointerDown: () => this.onPointerDown(this.onDecrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button", "data-label": "stepper-
|
|
83
|
+
React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, onPointerDown: () => this.onPointerDown(this.onDecrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button", "data-label": "stepper-minus" },
|
|
84
84
|
React.createElement(MinusIcon, null)),
|
|
85
85
|
React.createElement("div", { className: "cobalt-Stepper__ContentWrapper" },
|
|
86
86
|
children ? children(this.state.value) : this.state.value,
|
|
87
87
|
React.createElement("input", { type: "hidden", name: name, value: this.state.value })),
|
|
88
|
-
React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, onPointerDown: () => this.onPointerDown(this.onIncrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button", "data-label": "stepper-
|
|
88
|
+
React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, onPointerDown: () => this.onPointerDown(this.onIncrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button", "data-label": "stepper-plus" },
|
|
89
89
|
React.createElement(PlusIcon, null)))));
|
|
90
90
|
}
|
|
91
91
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n value: number,\n min: number | undefined,\n max: number | undefined\n) => {\n let enforcedValue = value\n if (typeof max !== \"undefined\") {\n enforcedValue = Math.min(enforcedValue, max)\n }\n if (typeof min !== \"undefined\") {\n enforcedValue = Math.max(enforcedValue, min)\n }\n return enforcedValue\n}\n\ntype Props = {\n value: number\n name?: string\n disabled?: boolean\n min?: number\n max?: number\n step: number\n onChange?: (value: number) => void\n children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n constructor(props: Props) {\n super(props)\n\n if (props.step < 0)\n throw new Error(\"Incorrect step value. Can't be below zero\")\n\n this.onDecrement = this.onDecrement.bind(this)\n this.onIncrement = this.onIncrement.bind(this)\n this.changeValue = this.changeValue.bind(this)\n this.onPointerDown = this.onPointerDown.bind(this)\n this.onPointerUp = this.onPointerUp.bind(this)\n\n this.state = {\n value: enforceInRange(props.value, props.min, props.max),\n }\n }\n\n timeout: ReturnType<typeof setTimeout> | null = null\n interval: ReturnType<typeof setInterval> | null = null\n\n componentDidUpdate(_prevProps: Props, prevState: State) {\n if (prevState.value !== this.state.value) {\n this.changeValue(this.state.value)\n } else if (this.props.value !== this.state.value) {\n this.changeValue(this.props.value)\n }\n }\n\n onDecrement = () => {\n ;(this.props.min !== null || this.state.value > this.props.min) &&\n this.changeValue(\n parseFloat((this.state.value - this.props.step).toFixed(10))\n )\n }\n\n onIncrement = () => {\n ;(this.props.max !== null || this.state.value < this.props.max) &&\n this.changeValue(\n parseFloat((this.state.value + this.props.step).toFixed(10))\n )\n }\n\n onPointerDown = (callback: () => void) => {\n callback()\n this.timeout && clearTimeout(this.timeout)\n this.timeout = setTimeout(() => {\n this.interval && clearInterval(this.interval)\n this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n }, AUTO_CHANGE_TIMEOUT_IN_MS)\n }\n\n onPointerUp = () => {\n if (this.interval) {\n clearInterval(this.interval)\n this.interval = null\n }\n this.timeout && clearTimeout(this.timeout)\n }\n\n changeValue = (value: number) => {\n this.setState(\n {\n value: enforceInRange(value, this.props.min, this.props.max),\n },\n () => {\n this.props.onChange && this.props.onChange(this.state.value)\n }\n )\n }\n\n render() {\n const { name, status, disabled, min, max, children } = this.props\n\n return (\n <div\n className={classNames(\"cobalt-Stepper\", {\n \"cobalt-Stepper--disabled\": disabled,\n \"cobalt-Stepper--success\": status === \"success\",\n \"cobalt-Stepper--error\": status === \"error\",\n })}\n >\n <div className=\"cobalt-Stepper__Wrapper\">\n <DefaultButton\n className=\"cobalt-Stepper__ActionButton\"\n disabled={disabled || this.state.value === min}\n onPointerDown={() => this.onPointerDown(this.onDecrement)}\n onPointerUp={this.onPointerUp}\n onPointerLeave={this.onPointerUp}\n type={\"button\"}\n data-label=\"stepper-
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n value: number,\n min: number | undefined,\n max: number | undefined\n) => {\n let enforcedValue = value\n if (typeof max !== \"undefined\") {\n enforcedValue = Math.min(enforcedValue, max)\n }\n if (typeof min !== \"undefined\") {\n enforcedValue = Math.max(enforcedValue, min)\n }\n return enforcedValue\n}\n\ntype Props = {\n value: number\n name?: string\n disabled?: boolean\n min?: number\n max?: number\n step: number\n onChange?: (value: number) => void\n children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n constructor(props: Props) {\n super(props)\n\n if (props.step < 0)\n throw new Error(\"Incorrect step value. Can't be below zero\")\n\n this.onDecrement = this.onDecrement.bind(this)\n this.onIncrement = this.onIncrement.bind(this)\n this.changeValue = this.changeValue.bind(this)\n this.onPointerDown = this.onPointerDown.bind(this)\n this.onPointerUp = this.onPointerUp.bind(this)\n\n this.state = {\n value: enforceInRange(props.value, props.min, props.max),\n }\n }\n\n timeout: ReturnType<typeof setTimeout> | null = null\n interval: ReturnType<typeof setInterval> | null = null\n\n componentDidUpdate(_prevProps: Props, prevState: State) {\n if (prevState.value !== this.state.value) {\n this.changeValue(this.state.value)\n } else if (this.props.value !== this.state.value) {\n this.changeValue(this.props.value)\n }\n }\n\n onDecrement = () => {\n ;(this.props.min !== null || this.state.value > this.props.min) &&\n this.changeValue(\n parseFloat((this.state.value - this.props.step).toFixed(10))\n )\n }\n\n onIncrement = () => {\n ;(this.props.max !== null || this.state.value < this.props.max) &&\n this.changeValue(\n parseFloat((this.state.value + this.props.step).toFixed(10))\n )\n }\n\n onPointerDown = (callback: () => void) => {\n callback()\n this.timeout && clearTimeout(this.timeout)\n this.timeout = setTimeout(() => {\n this.interval && clearInterval(this.interval)\n this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n }, AUTO_CHANGE_TIMEOUT_IN_MS)\n }\n\n onPointerUp = () => {\n if (this.interval) {\n clearInterval(this.interval)\n this.interval = null\n }\n this.timeout && clearTimeout(this.timeout)\n }\n\n changeValue = (value: number) => {\n this.setState(\n {\n value: enforceInRange(value, this.props.min, this.props.max),\n },\n () => {\n this.props.onChange && this.props.onChange(this.state.value)\n }\n )\n }\n\n render() {\n const { name, status, disabled, min, max, children } = this.props\n\n return (\n <div\n className={classNames(\"cobalt-Stepper\", {\n \"cobalt-Stepper--disabled\": disabled,\n \"cobalt-Stepper--success\": status === \"success\",\n \"cobalt-Stepper--error\": status === \"error\",\n })}\n >\n <div className=\"cobalt-Stepper__Wrapper\">\n <DefaultButton\n className=\"cobalt-Stepper__ActionButton\"\n disabled={disabled || this.state.value === min}\n onPointerDown={() => this.onPointerDown(this.onDecrement)}\n onPointerUp={this.onPointerUp}\n onPointerLeave={this.onPointerUp}\n type={\"button\"}\n data-label=\"stepper-minus\"\n >\n <MinusIcon />\n </DefaultButton>\n <div className=\"cobalt-Stepper__ContentWrapper\">\n {children ? children(this.state.value) : this.state.value}\n <input type=\"hidden\" name={name} value={this.state.value} />\n </div>\n <DefaultButton\n className=\"cobalt-Stepper__ActionButton\"\n disabled={disabled || this.state.value === max}\n onPointerDown={() => this.onPointerDown(this.onIncrement)}\n onPointerUp={this.onPointerUp}\n onPointerLeave={this.onPointerUp}\n type={\"button\"}\n data-label=\"stepper-plus\"\n >\n <PlusIcon />\n </DefaultButton>\n </div>\n </div>\n )\n }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}
|
|
@@ -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.2",
|
|
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.
|
|
70
|
-
"@types/react": "18.3.
|
|
69
|
+
"@types/node": "20.17.12",
|
|
70
|
+
"@types/react": "18.3.18",
|
|
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",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"rollup-plugin-copy": "3.5.0",
|
|
97
97
|
"rollup-plugin-svgo": "2.0.0",
|
|
98
98
|
"rollup-plugin-typescript2": "0.36.0",
|
|
99
|
-
"sass": "1.83.
|
|
99
|
+
"sass": "1.83.1",
|
|
100
100
|
"sass-loader": "13.3.3",
|
|
101
101
|
"sharp": "0.33.5",
|
|
102
102
|
"sharp-cli": "5.1.0",
|
|
@@ -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;
|