@hitachivantara/uikit-react-core 5.66.0 → 5.66.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.
- package/dist/cjs/Pagination/Pagination.cjs +16 -47
- package/dist/esm/Pagination/Pagination.js +17 -48
- package/dist/esm/Pagination/Pagination.js.map +1 -1
- package/package.json +2 -2
- package/dist/cjs/Pagination/utils.cjs +0 -16
- package/dist/esm/Pagination/utils.js +0 -16
- package/dist/esm/Pagination/utils.js.map +0 -1
|
@@ -6,11 +6,10 @@ const Hidden = require("@mui/material/Hidden");
|
|
|
6
6
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
7
7
|
const useDefaultProps = require("../hooks/useDefaultProps.cjs");
|
|
8
8
|
const useLabels = require("../hooks/useLabels.cjs");
|
|
9
|
-
const
|
|
9
|
+
const helpers = require("../utils/helpers.cjs");
|
|
10
10
|
const setId = require("../utils/setId.cjs");
|
|
11
11
|
const Pagination_styles = require("./Pagination.styles.cjs");
|
|
12
12
|
const Select = require("./Select.cjs");
|
|
13
|
-
const utils = require("./utils.cjs");
|
|
14
13
|
const Typography = require("../Typography/Typography.cjs");
|
|
15
14
|
const IconButton = require("../IconButton/IconButton.cjs");
|
|
16
15
|
const Input = require("../Input/Input.cjs");
|
|
@@ -66,16 +65,16 @@ const HvPagination = (props) => {
|
|
|
66
65
|
currentPageInputProps,
|
|
67
66
|
...others
|
|
68
67
|
} = useDefaultProps.useDefaultProps("HvPagination", props);
|
|
69
|
-
const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
|
|
70
|
-
const [pageInput, handleInputChange] = utils.usePageInput(page);
|
|
71
68
|
const { classes, cx } = Pagination_styles.useClasses(classesProp);
|
|
69
|
+
const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
|
|
70
|
+
const [pageInput, setPageInput] = React.useState(page);
|
|
72
71
|
const changePage = React.useCallback(
|
|
73
72
|
(newPage) => {
|
|
74
|
-
const safePage =
|
|
73
|
+
const safePage = Number.isNaN(newPage) ? page : helpers.clamp(newPage, pages - 1);
|
|
75
74
|
onPageChange?.(safePage);
|
|
76
|
-
|
|
75
|
+
setPageInput(safePage);
|
|
77
76
|
},
|
|
78
|
-
[page, pages, onPageChange
|
|
77
|
+
[page, pages, onPageChange]
|
|
79
78
|
);
|
|
80
79
|
React.useEffect(() => {
|
|
81
80
|
if (page >= pages && pages > 0) {
|
|
@@ -83,10 +82,8 @@ const HvPagination = (props) => {
|
|
|
83
82
|
}
|
|
84
83
|
}, [changePage, page, pages]);
|
|
85
84
|
React.useEffect(() => {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
89
|
-
}, [handleInputChange, page]);
|
|
85
|
+
setPageInput(page);
|
|
86
|
+
}, [page]);
|
|
90
87
|
const renderPageJump = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
91
88
|
Input.HvInput,
|
|
92
89
|
{
|
|
@@ -102,10 +99,10 @@ const HvPagination = (props) => {
|
|
|
102
99
|
input: classes?.pageSizeInput,
|
|
103
100
|
inputRoot: classes?.pageSizeInputRoot
|
|
104
101
|
},
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
onBlur: (evt, value) => changePage(Number(value) - 1),
|
|
108
|
-
|
|
102
|
+
value: String(pageInput + 1),
|
|
103
|
+
onChange: (event, value) => setPageInput(Number(value) - 1),
|
|
104
|
+
onBlur: (evt, value) => changePage(Math.round(Number(value)) - 1),
|
|
105
|
+
onEnter: (evt, value) => changePage(Math.round(Number(value)) - 1),
|
|
109
106
|
disabled: pageSize === 0,
|
|
110
107
|
disableClear: true,
|
|
111
108
|
...currentPageInputProps
|
|
@@ -155,14 +152,7 @@ const HvPagination = (props) => {
|
|
|
155
152
|
disabled: !canPrevious,
|
|
156
153
|
onClick: () => changePage(0),
|
|
157
154
|
title: labels?.firstPage || labels?.paginationFirstPageTitle,
|
|
158
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
159
|
-
uikitReactIcons.Start,
|
|
160
|
-
{
|
|
161
|
-
className: classes.icon,
|
|
162
|
-
color: utils.setColor(!canPrevious),
|
|
163
|
-
iconSize: "XS"
|
|
164
|
-
}
|
|
165
|
-
)
|
|
155
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { className: classes.icon, iconSize: "XS" })
|
|
166
156
|
}
|
|
167
157
|
),
|
|
168
158
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -173,14 +163,7 @@ const HvPagination = (props) => {
|
|
|
173
163
|
disabled: !canPrevious,
|
|
174
164
|
onClick: () => changePage(page - 1),
|
|
175
165
|
title: labels?.previousPage || labels?.paginationPreviousPageTitle,
|
|
176
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
177
|
-
uikitReactIcons.Backwards,
|
|
178
|
-
{
|
|
179
|
-
className: classes.icon,
|
|
180
|
-
color: utils.setColor(!canPrevious),
|
|
181
|
-
iconSize: "XS"
|
|
182
|
-
}
|
|
183
|
-
)
|
|
166
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { className: classes.icon, iconSize: "XS" })
|
|
184
167
|
}
|
|
185
168
|
),
|
|
186
169
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageInfo, children: [
|
|
@@ -204,14 +187,7 @@ const HvPagination = (props) => {
|
|
|
204
187
|
disabled: !canNext,
|
|
205
188
|
onClick: () => changePage(page + 1),
|
|
206
189
|
title: labels?.nextPage || labels?.paginationNextPageTitle,
|
|
207
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
208
|
-
uikitReactIcons.Forwards,
|
|
209
|
-
{
|
|
210
|
-
className: classes.icon,
|
|
211
|
-
color: utils.setColor(!canNext),
|
|
212
|
-
iconSize: "XS"
|
|
213
|
-
}
|
|
214
|
-
)
|
|
190
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { className: classes.icon, iconSize: "XS" })
|
|
215
191
|
}
|
|
216
192
|
),
|
|
217
193
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -222,14 +198,7 @@ const HvPagination = (props) => {
|
|
|
222
198
|
disabled: !canNext,
|
|
223
199
|
onClick: () => changePage(pages - 1),
|
|
224
200
|
title: labels?.lastPage || labels?.paginationLastPageTitle,
|
|
225
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
226
|
-
uikitReactIcons.End,
|
|
227
|
-
{
|
|
228
|
-
className: classes.icon,
|
|
229
|
-
color: utils.setColor(!canNext),
|
|
230
|
-
iconSize: "XS"
|
|
231
|
-
}
|
|
232
|
-
)
|
|
201
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { className: classes.icon, iconSize: "XS" })
|
|
233
202
|
}
|
|
234
203
|
)
|
|
235
204
|
] })
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { useCallback, useEffect } from "react";
|
|
2
|
+
import { useState, useCallback, useEffect } from "react";
|
|
3
3
|
import Hidden from "@mui/material/Hidden";
|
|
4
4
|
import { Start, Backwards, Forwards, End } from "@hitachivantara/uikit-react-icons";
|
|
5
5
|
import { useDefaultProps } from "../hooks/useDefaultProps.js";
|
|
6
6
|
import { useLabels } from "../hooks/useLabels.js";
|
|
7
|
-
import {
|
|
7
|
+
import { clamp } from "../utils/helpers.js";
|
|
8
8
|
import { setId } from "../utils/setId.js";
|
|
9
9
|
import { useClasses } from "./Pagination.styles.js";
|
|
10
10
|
import { staticClasses } from "./Pagination.styles.js";
|
|
11
11
|
import HvSelect, { Option } from "./Select.js";
|
|
12
|
-
import { usePageInput, setColor, getSafePage } from "./utils.js";
|
|
13
12
|
import { HvTypography } from "../Typography/Typography.js";
|
|
14
13
|
import { HvIconButton } from "../IconButton/IconButton.js";
|
|
15
14
|
import { HvInput } from "../Input/Input.js";
|
|
@@ -63,16 +62,16 @@ const HvPagination = (props) => {
|
|
|
63
62
|
currentPageInputProps,
|
|
64
63
|
...others
|
|
65
64
|
} = useDefaultProps("HvPagination", props);
|
|
66
|
-
const labels = useLabels(DEFAULT_LABELS, labelsProp);
|
|
67
|
-
const [pageInput, handleInputChange] = usePageInput(page);
|
|
68
65
|
const { classes, cx } = useClasses(classesProp);
|
|
66
|
+
const labels = useLabels(DEFAULT_LABELS, labelsProp);
|
|
67
|
+
const [pageInput, setPageInput] = useState(page);
|
|
69
68
|
const changePage = useCallback(
|
|
70
69
|
(newPage) => {
|
|
71
|
-
const safePage =
|
|
70
|
+
const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);
|
|
72
71
|
onPageChange?.(safePage);
|
|
73
|
-
|
|
72
|
+
setPageInput(safePage);
|
|
74
73
|
},
|
|
75
|
-
[page, pages, onPageChange
|
|
74
|
+
[page, pages, onPageChange]
|
|
76
75
|
);
|
|
77
76
|
useEffect(() => {
|
|
78
77
|
if (page >= pages && pages > 0) {
|
|
@@ -80,10 +79,8 @@ const HvPagination = (props) => {
|
|
|
80
79
|
}
|
|
81
80
|
}, [changePage, page, pages]);
|
|
82
81
|
useEffect(() => {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
}, [handleInputChange, page]);
|
|
82
|
+
setPageInput(page);
|
|
83
|
+
}, [page]);
|
|
87
84
|
const renderPageJump = () => /* @__PURE__ */ jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsx(
|
|
88
85
|
HvInput,
|
|
89
86
|
{
|
|
@@ -99,10 +96,10 @@ const HvPagination = (props) => {
|
|
|
99
96
|
input: classes?.pageSizeInput,
|
|
100
97
|
inputRoot: classes?.pageSizeInputRoot
|
|
101
98
|
},
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
onBlur: (evt, value) => changePage(Number(value) - 1),
|
|
105
|
-
|
|
99
|
+
value: String(pageInput + 1),
|
|
100
|
+
onChange: (event, value) => setPageInput(Number(value) - 1),
|
|
101
|
+
onBlur: (evt, value) => changePage(Math.round(Number(value)) - 1),
|
|
102
|
+
onEnter: (evt, value) => changePage(Math.round(Number(value)) - 1),
|
|
106
103
|
disabled: pageSize === 0,
|
|
107
104
|
disableClear: true,
|
|
108
105
|
...currentPageInputProps
|
|
@@ -152,14 +149,7 @@ const HvPagination = (props) => {
|
|
|
152
149
|
disabled: !canPrevious,
|
|
153
150
|
onClick: () => changePage(0),
|
|
154
151
|
title: labels?.firstPage || labels?.paginationFirstPageTitle,
|
|
155
|
-
children: /* @__PURE__ */ jsx(
|
|
156
|
-
Start,
|
|
157
|
-
{
|
|
158
|
-
className: classes.icon,
|
|
159
|
-
color: setColor(!canPrevious),
|
|
160
|
-
iconSize: "XS"
|
|
161
|
-
}
|
|
162
|
-
)
|
|
152
|
+
children: /* @__PURE__ */ jsx(Start, { className: classes.icon, iconSize: "XS" })
|
|
163
153
|
}
|
|
164
154
|
),
|
|
165
155
|
/* @__PURE__ */ jsx(
|
|
@@ -170,14 +160,7 @@ const HvPagination = (props) => {
|
|
|
170
160
|
disabled: !canPrevious,
|
|
171
161
|
onClick: () => changePage(page - 1),
|
|
172
162
|
title: labels?.previousPage || labels?.paginationPreviousPageTitle,
|
|
173
|
-
children: /* @__PURE__ */ jsx(
|
|
174
|
-
Backwards,
|
|
175
|
-
{
|
|
176
|
-
className: classes.icon,
|
|
177
|
-
color: setColor(!canPrevious),
|
|
178
|
-
iconSize: "XS"
|
|
179
|
-
}
|
|
180
|
-
)
|
|
163
|
+
children: /* @__PURE__ */ jsx(Backwards, { className: classes.icon, iconSize: "XS" })
|
|
181
164
|
}
|
|
182
165
|
),
|
|
183
166
|
/* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
|
|
@@ -201,14 +184,7 @@ const HvPagination = (props) => {
|
|
|
201
184
|
disabled: !canNext,
|
|
202
185
|
onClick: () => changePage(page + 1),
|
|
203
186
|
title: labels?.nextPage || labels?.paginationNextPageTitle,
|
|
204
|
-
children: /* @__PURE__ */ jsx(
|
|
205
|
-
Forwards,
|
|
206
|
-
{
|
|
207
|
-
className: classes.icon,
|
|
208
|
-
color: setColor(!canNext),
|
|
209
|
-
iconSize: "XS"
|
|
210
|
-
}
|
|
211
|
-
)
|
|
187
|
+
children: /* @__PURE__ */ jsx(Forwards, { className: classes.icon, iconSize: "XS" })
|
|
212
188
|
}
|
|
213
189
|
),
|
|
214
190
|
/* @__PURE__ */ jsx(
|
|
@@ -219,14 +195,7 @@ const HvPagination = (props) => {
|
|
|
219
195
|
disabled: !canNext,
|
|
220
196
|
onClick: () => changePage(pages - 1),
|
|
221
197
|
title: labels?.lastPage || labels?.paginationLastPageTitle,
|
|
222
|
-
children: /* @__PURE__ */ jsx(
|
|
223
|
-
End,
|
|
224
|
-
{
|
|
225
|
-
className: classes.icon,
|
|
226
|
-
color: setColor(!canNext),
|
|
227
|
-
iconSize: "XS"
|
|
228
|
-
}
|
|
229
|
-
)
|
|
198
|
+
children: /* @__PURE__ */ jsx(End, { className: classes.icon, iconSize: "XS" })
|
|
230
199
|
}
|
|
231
200
|
)
|
|
232
201
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport Hidden from \"@mui/material/Hidden\";\nimport {\n Backwards,\n End,\n Forwards,\n Start,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport HvSelect, { Option } from \"./Select\";\nimport { getSafePage, setColor, usePageInput } from \"./utils\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n /** The show label. */\n pageSizePrev: \"Show\",\n /** Indicate the units of the page size selection. */\n pageSizeEntryName: \"rows\",\n /** Used for the aria-label of the selection of number of unit.s */\n pageSizeSelectorDescription: \"Select how many to display\",\n /** Separator of current page and total pages. */\n pagesSeparator: \"/\",\n /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n paginationFirstPageTitle: \"First page\",\n /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n paginationPreviousPageTitle: \"Previous page\",\n /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n paginationNextPageTitle: \"Next page\",\n /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n paginationLastPageTitle: \"Last page\",\n /** Aria-label passed to the page input. */\n paginationInputLabel: \"Current page\",\n /** Label of the first page button */\n firstPage: \"First Page\",\n /** Label of the previous page button */\n previousPage: \"Previous Page\",\n /** Label of the next page button */\n nextPage: \"Next Page\",\n /** Label of the last page button */\n lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvPaginationProps extends HvBaseProps {\n /** The number of pages the component has. */\n pages?: number;\n /** The currently selected page (0-indexed). */\n page?: number;\n /** Controls whether the left page size mechanism should be visible. */\n showPageSizeOptions?: boolean;\n /** The array of possible page sizes for the dropdown. */\n pageSizeOptions?: number[];\n /** The currently selected page size. */\n pageSize?: number;\n /** Controls whether the central page changing mechanism should be visible. */\n showPageJump?: boolean;\n /** Controls whether the previous/first page buttons are enabled. */\n canPrevious?: boolean;\n /** Controls whether the next/last page buttons are enabled. */\n canNext?: boolean;\n /** Function called when the page changes. */\n onPageChange?: (page: number) => void;\n /** Function called when the page size changes. */\n onPageSizeChange?: (pageSize: number) => void;\n /** An object containing all the labels for the component. */\n labels?: HvPaginationLabels;\n /** Other props to show page component. */\n showPageProps?: React.HTMLAttributes<HTMLDivElement>;\n /** Other props to pagination component. */\n navigationProps?: React.HTMLAttributes<HTMLDivElement>;\n /** Extra properties passed to the input component representing the current pages. */\n currentPageInputProps?: HvInputProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvPaginationClasses;\n}\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n const {\n classes: classesProp,\n className,\n id,\n pages = 1,\n page = 0,\n showPageSizeOptions = true,\n pageSizeOptions = defaultPageSizeOptions,\n pageSize = defaultPageSizeOptions[1],\n showPageJump = true,\n canPrevious = false,\n canNext = false,\n onPageChange,\n onPageSizeChange,\n labels: labelsProp,\n showPageProps,\n navigationProps,\n currentPageInputProps,\n ...others\n } = useDefaultProps(\"HvPagination\", props);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const [pageInput, handleInputChange] = usePageInput(page);\n const { classes, cx } = useClasses(classesProp);\n\n const changePage = useCallback(\n (newPage: number) => {\n const safePage: number = getSafePage(newPage, page, pages);\n\n onPageChange?.(safePage);\n handleInputChange(null, safePage + 1);\n },\n [page, pages, onPageChange, handleInputChange],\n );\n\n useEffect(() => {\n if (page >= pages && pages > 0) {\n changePage(page);\n }\n }, [changePage, page, pages]);\n\n useEffect(() => {\n if (pageInput !== page + 1) {\n handleInputChange(null, page + 1);\n }\n\n // we only want to \"fix\" the input's display value when `page` property changed\n // (either externally or when internally committed - onBlur or Enter),\n // not while editing the input.\n // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n // a bug preventing properly controlling of the `page` property.\n // fixing it some other way would potentially introduce a breaking change.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handleInputChange, page]);\n\n const renderPageJump = () => (\n <div className={classes.pageJump}>\n <HvInput\n id={setId(id, \"currentPage\")}\n labels={labels}\n inputProps={{\n \"aria-label\": labels?.paginationInputLabel,\n // We really want the native number input\n type: \"number\",\n }}\n classes={{\n root: classes?.pageSizeInputContainer,\n input: classes?.pageSizeInput,\n inputRoot: classes?.pageSizeInputRoot,\n }}\n onChange={(event, value) => handleInputChange(event, Number(value))}\n value={String(pageInput)}\n onBlur={(evt, value) => changePage(Number(value) - 1)}\n onKeyDown={(evt, value) =>\n isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n }\n disabled={pageSize === 0}\n disableClear\n {...currentPageInputProps}\n />\n </div>\n );\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n <div className={classes.pageSizeOptions} {...showPageProps}>\n {showPageSizeOptions && (\n <>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes?.pageSizeTextContainer}\n >\n {labels?.pageSizePrev}\n </HvTypography>\n </Hidden>\n <HvSelect\n id={setId(id, \"pageSize\")}\n disabled={pageSize === 0}\n className={classes.pageSizeOptionsSelect}\n aria-label={labels?.pageSizeSelectorDescription}\n onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n value={pageSize}\n classes={{\n header: classes.pageSizeHeader,\n root: classes.pageSizeRoot,\n }}\n >\n {pageSizeOptions.map((option) => (\n <Option key={option} value={option}>\n {option}\n </Option>\n ))}\n </HvSelect>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes.pageSizeTextContainer}\n >\n {labels?.pageSizeEntryName}\n </HvTypography>\n </Hidden>\n </>\n )}\n </div>\n <div className={classes.pageNavigator} {...navigationProps}>\n <HvIconButton\n id={setId(id, \"firstPage-button\")}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(0)}\n title={labels?.firstPage || labels?.paginationFirstPageTitle}\n >\n <Start\n className={classes.icon}\n color={setColor(!canPrevious)}\n iconSize=\"XS\"\n />\n </HvIconButton>\n <HvIconButton\n id={setId(id, \"previousPage-button\")}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(page - 1)}\n title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n >\n <Backwards\n className={classes.icon}\n color={setColor(!canPrevious)}\n iconSize=\"XS\"\n />\n </HvIconButton>\n <div className={classes.pageInfo}>\n {showPageJump ? (\n renderPageJump()\n ) : (\n <HvTypography variant=\"caption2\" component=\"span\">{`${\n page + 1\n }`}</HvTypography>\n )}\n <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n <HvTypography\n component=\"span\"\n id={setId(id, \"totalPages\")}\n className={classes.totalPagesTextContainer}\n >\n {pages}\n </HvTypography>\n </div>\n <HvIconButton\n id={setId(id, \"nextPage-button\")}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(page + 1)}\n title={labels?.nextPage || labels?.paginationNextPageTitle}\n >\n <Forwards\n className={classes.icon}\n color={setColor(!canNext)}\n iconSize=\"XS\"\n />\n </HvIconButton>\n <HvIconButton\n id={setId(id, \"lastPage-button\")}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(pages - 1)}\n title={labels?.lastPage || labels?.paginationLastPageTitle}\n >\n <End\n className={classes.icon}\n color={setColor(!canNext)}\n iconSize=\"XS\"\n />\n </HvIconButton>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport Hidden from \"@mui/material/Hidden\";\nimport {\n Backwards,\n End,\n Forwards,\n Start,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { clamp } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport HvSelect, { Option } from \"./Select\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n /** The show label. */\n pageSizePrev: \"Show\",\n /** Indicate the units of the page size selection. */\n pageSizeEntryName: \"rows\",\n /** Used for the aria-label of the selection of number of unit.s */\n pageSizeSelectorDescription: \"Select how many to display\",\n /** Separator of current page and total pages. */\n pagesSeparator: \"/\",\n /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n paginationFirstPageTitle: \"First page\",\n /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n paginationPreviousPageTitle: \"Previous page\",\n /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n paginationNextPageTitle: \"Next page\",\n /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n paginationLastPageTitle: \"Last page\",\n /** Aria-label passed to the page input. */\n paginationInputLabel: \"Current page\",\n /** Label of the first page button */\n firstPage: \"First Page\",\n /** Label of the previous page button */\n previousPage: \"Previous Page\",\n /** Label of the next page button */\n nextPage: \"Next Page\",\n /** Label of the last page button */\n lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvPaginationProps extends HvBaseProps {\n /** The number of pages the component has. */\n pages?: number;\n /** The currently selected page (0-indexed). */\n page?: number;\n /** Controls whether the left page size mechanism should be visible. */\n showPageSizeOptions?: boolean;\n /** The array of possible page sizes for the dropdown. */\n pageSizeOptions?: number[];\n /** The currently selected page size. */\n pageSize?: number;\n /** Controls whether the central page changing mechanism should be visible. */\n showPageJump?: boolean;\n /** Controls whether the previous/first page buttons are enabled. */\n canPrevious?: boolean;\n /** Controls whether the next/last page buttons are enabled. */\n canNext?: boolean;\n /** Function called when the page changes. */\n onPageChange?: (page: number) => void;\n /** Function called when the page size changes. */\n onPageSizeChange?: (pageSize: number) => void;\n /** An object containing all the labels for the component. */\n labels?: HvPaginationLabels;\n /** Other props to show page component. */\n showPageProps?: React.HTMLAttributes<HTMLDivElement>;\n /** Other props to pagination component. */\n navigationProps?: React.HTMLAttributes<HTMLDivElement>;\n /** Extra properties passed to the input component representing the current pages. */\n currentPageInputProps?: HvInputProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvPaginationClasses;\n}\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n const {\n classes: classesProp,\n className,\n id,\n pages = 1,\n page = 0,\n showPageSizeOptions = true,\n pageSizeOptions = defaultPageSizeOptions,\n pageSize = defaultPageSizeOptions[1],\n showPageJump = true,\n canPrevious = false,\n canNext = false,\n onPageChange,\n onPageSizeChange,\n labels: labelsProp,\n showPageProps,\n navigationProps,\n currentPageInputProps,\n ...others\n } = useDefaultProps(\"HvPagination\", props);\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [pageInput, setPageInput] = useState(page);\n\n const changePage = useCallback(\n (newPage: number) => {\n const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);\n\n onPageChange?.(safePage);\n setPageInput(safePage);\n },\n [page, pages, onPageChange],\n );\n\n useEffect(() => {\n if (page >= pages && pages > 0) {\n changePage(page);\n }\n }, [changePage, page, pages]);\n\n useEffect(() => {\n setPageInput(page);\n }, [page]);\n\n const renderPageJump = () => (\n <div className={classes.pageJump}>\n <HvInput\n id={setId(id, \"currentPage\")}\n labels={labels}\n inputProps={{\n \"aria-label\": labels?.paginationInputLabel,\n // We really want the native number input\n type: \"number\",\n }}\n classes={{\n root: classes?.pageSizeInputContainer,\n input: classes?.pageSizeInput,\n inputRoot: classes?.pageSizeInputRoot,\n }}\n value={String(pageInput + 1)}\n onChange={(event, value) => setPageInput(Number(value) - 1)}\n onBlur={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n onEnter={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n disabled={pageSize === 0}\n disableClear\n {...currentPageInputProps}\n />\n </div>\n );\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n <div className={classes.pageSizeOptions} {...showPageProps}>\n {showPageSizeOptions && (\n <>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes?.pageSizeTextContainer}\n >\n {labels?.pageSizePrev}\n </HvTypography>\n </Hidden>\n <HvSelect\n id={setId(id, \"pageSize\")}\n disabled={pageSize === 0}\n className={classes.pageSizeOptionsSelect}\n aria-label={labels?.pageSizeSelectorDescription}\n onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n value={pageSize}\n classes={{\n header: classes.pageSizeHeader,\n root: classes.pageSizeRoot,\n }}\n >\n {pageSizeOptions.map((option) => (\n <Option key={option} value={option}>\n {option}\n </Option>\n ))}\n </HvSelect>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes.pageSizeTextContainer}\n >\n {labels?.pageSizeEntryName}\n </HvTypography>\n </Hidden>\n </>\n )}\n </div>\n <div className={classes.pageNavigator} {...navigationProps}>\n <HvIconButton\n id={setId(id, \"firstPage-button\")}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(0)}\n title={labels?.firstPage || labels?.paginationFirstPageTitle}\n >\n <Start className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n <HvIconButton\n id={setId(id, \"previousPage-button\")}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(page - 1)}\n title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n >\n <Backwards className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n <div className={classes.pageInfo}>\n {showPageJump ? (\n renderPageJump()\n ) : (\n <HvTypography variant=\"caption2\" component=\"span\">{`${\n page + 1\n }`}</HvTypography>\n )}\n <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n <HvTypography\n component=\"span\"\n id={setId(id, \"totalPages\")}\n className={classes.totalPagesTextContainer}\n >\n {pages}\n </HvTypography>\n </div>\n <HvIconButton\n id={setId(id, \"nextPage-button\")}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(page + 1)}\n title={labels?.nextPage || labels?.paginationNextPageTitle}\n >\n <Forwards className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n <HvIconButton\n id={setId(id, \"lastPage-button\")}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(pages - 1)}\n title={labels?.lastPage || labels?.paginationLastPageTitle}\n >\n <End className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.66.
|
|
3
|
+
"version": "5.66.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"access": "public",
|
|
63
63
|
"directory": "package"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "003bbd8b7e71fc5bebf44a7b8df811c13628349c",
|
|
66
66
|
"exports": {
|
|
67
67
|
".": {
|
|
68
68
|
"require": "./dist/cjs/index.cjs",
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const setColor = (condition) => condition ? "secondary_60" : void 0;
|
|
5
|
-
const getSafePage = (inPage, page, pages) => Number.isNaN(inPage) ? page : Math.min(Math.max(inPage, 0), pages - 1);
|
|
6
|
-
const usePageInput = (initialPage) => {
|
|
7
|
-
const [page, setPage] = React.useState(initialPage + 1);
|
|
8
|
-
const handleChange = React.useCallback(
|
|
9
|
-
(evt, newPage) => setPage(newPage),
|
|
10
|
-
[]
|
|
11
|
-
);
|
|
12
|
-
return [page, handleChange];
|
|
13
|
-
};
|
|
14
|
-
exports.getSafePage = getSafePage;
|
|
15
|
-
exports.setColor = setColor;
|
|
16
|
-
exports.usePageInput = usePageInput;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { useState, useCallback } from "react";
|
|
2
|
-
const setColor = (condition) => condition ? "secondary_60" : void 0;
|
|
3
|
-
const getSafePage = (inPage, page, pages) => Number.isNaN(inPage) ? page : Math.min(Math.max(inPage, 0), pages - 1);
|
|
4
|
-
const usePageInput = (initialPage) => {
|
|
5
|
-
const [page, setPage] = useState(initialPage + 1);
|
|
6
|
-
const handleChange = useCallback(
|
|
7
|
-
(evt, newPage) => setPage(newPage),
|
|
8
|
-
[]
|
|
9
|
-
);
|
|
10
|
-
return [page, handleChange];
|
|
11
|
-
};
|
|
12
|
-
export {
|
|
13
|
-
getSafePage,
|
|
14
|
-
setColor,
|
|
15
|
-
usePageInput
|
|
16
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/Pagination/utils.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport const setColor = (condition: boolean): string | undefined =>\n condition ? \"secondary_60\" : undefined;\n\nexport const getSafePage = (\n inPage: number,\n page: number,\n pages: number,\n): number =>\n Number.isNaN(inPage) ? page : Math.min(Math.max(inPage, 0), pages - 1);\n\nexport const usePageInput = (initialPage: number) => {\n const [page, setPage] = useState<number>(initialPage + 1);\n\n const handleChange = useCallback(\n (evt: any, newPage: number) => setPage(newPage),\n [],\n );\n\n return [page, handleChange] as const;\n};\n"],"names":[],"mappings":";AAEO,MAAM,WAAW,CAAC,cACvB,YAAY,iBAAiB;AAExB,MAAM,cAAc,CACzB,QACA,MACA,UAEA,OAAO,MAAM,MAAM,IAAI,OAAO,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,QAAQ,CAAC;AAE1D,MAAA,eAAe,CAAC,gBAAwB;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAiB,cAAc,CAAC;AAExD,QAAM,eAAe;AAAA,IACnB,CAAC,KAAU,YAAoB,QAAQ,OAAO;AAAA,IAC9C,CAAC;AAAA,EAAA;AAGI,SAAA,CAAC,MAAM,YAAY;AAC5B;"}
|