carbon-react 111.22.4 → 112.0.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/esm/components/batch-selection/batch-selection.component.d.ts +15 -0
- package/esm/components/batch-selection/batch-selection.component.js +7 -18
- package/esm/components/batch-selection/batch-selection.style.d.ts +4 -0
- package/esm/components/batch-selection/index.d.ts +2 -1
- package/esm/components/pager/__internal__/pager-navigation-link.component.d.ts +17 -0
- package/esm/components/pager/__internal__/pager-navigation-link.component.js +16 -25
- package/esm/components/pager/__internal__/pager-navigation.component.d.ts +28 -0
- package/esm/components/pager/__internal__/pager-navigation.component.js +22 -43
- package/esm/components/pager/index.d.ts +2 -2
- package/esm/components/pager/pager.component.d.ts +43 -0
- package/esm/components/pager/pager.component.js +33 -66
- package/esm/components/pager/pager.style.d.ts +12 -0
- package/esm/components/pager/pager.style.js +2 -2
- package/esm/components/select/__internal__/select-text/select-text.style.d.ts +2 -0
- package/esm/components/select/option/index.d.ts +5 -0
- package/esm/components/tabs/tabs.component.js +1 -5
- package/esm/locales/locale.d.ts +1 -1
- package/lib/components/batch-selection/batch-selection.component.d.ts +15 -0
- package/lib/components/batch-selection/batch-selection.component.js +8 -19
- package/lib/components/batch-selection/batch-selection.style.d.ts +4 -0
- package/lib/components/batch-selection/index.d.ts +2 -1
- package/lib/components/pager/__internal__/pager-navigation-link.component.d.ts +17 -0
- package/lib/components/pager/__internal__/pager-navigation-link.component.js +15 -24
- package/lib/components/pager/__internal__/pager-navigation.component.d.ts +28 -0
- package/lib/components/pager/__internal__/pager-navigation.component.js +22 -43
- package/lib/components/pager/index.d.ts +2 -2
- package/lib/components/pager/pager.component.d.ts +43 -0
- package/lib/components/pager/pager.component.js +34 -68
- package/lib/components/pager/pager.style.d.ts +12 -0
- package/lib/components/pager/pager.style.js +3 -3
- package/lib/components/select/__internal__/select-text/select-text.style.d.ts +2 -0
- package/lib/components/select/option/index.d.ts +5 -0
- package/lib/components/tabs/tabs.component.js +1 -5
- package/lib/locales/locale.d.ts +1 -1
- package/package.json +1 -1
- package/esm/components/batch-selection/batch-selection.d.ts +0 -18
- package/esm/components/pager/pager.d.ts +0 -42
- package/lib/components/batch-selection/batch-selection.d.ts +0 -18
- package/lib/components/pager/pager.d.ts +0 -42
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface PagerNavigationLinkProps {
|
|
3
|
+
/** Type of Pagination link to be allowed for navigation */
|
|
4
|
+
type: "next" | "previous" | "first" | "last";
|
|
5
|
+
/** Current visible page */
|
|
6
|
+
currentPage: number;
|
|
7
|
+
/** Count of all the pages */
|
|
8
|
+
pageCount: number;
|
|
9
|
+
/** Pagination page size */
|
|
10
|
+
pageSize: number;
|
|
11
|
+
/** onClick Callback function */
|
|
12
|
+
onClick?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
13
|
+
/** onPagination Callback to process pagination */
|
|
14
|
+
onPagination?: (pageSize: number, currentPage: number, origin: string) => void;
|
|
15
|
+
}
|
|
16
|
+
declare const PagerNavigationLink: ({ type, currentPage, pageCount, pageSize, onClick, onPagination, }: PagerNavigationLinkProps) => JSX.Element;
|
|
17
|
+
export default PagerNavigationLink;
|
|
@@ -28,11 +28,11 @@ const PagerNavigationLink = ({
|
|
|
28
28
|
onPagination
|
|
29
29
|
}) => {
|
|
30
30
|
const l = (0, _useLocale.default)();
|
|
31
|
-
const linkRef = (0, _react.useRef)();
|
|
31
|
+
const linkRef = (0, _react.useRef)(null);
|
|
32
32
|
const navLinkConfig = {
|
|
33
33
|
first: {
|
|
34
34
|
text: l.pager.first(),
|
|
35
|
-
destination:
|
|
35
|
+
destination: 1
|
|
36
36
|
},
|
|
37
37
|
last: {
|
|
38
38
|
text: l.pager.last(),
|
|
@@ -64,40 +64,31 @@ const PagerNavigationLink = ({
|
|
|
64
64
|
}
|
|
65
65
|
}, [disabled]);
|
|
66
66
|
|
|
67
|
-
const handleOnCLick =
|
|
68
|
-
onClick(
|
|
69
|
-
onPagination(navLinkConfig[type].destination, pageSize, type);
|
|
67
|
+
const handleOnCLick = ev => {
|
|
68
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(ev);
|
|
69
|
+
onPagination === null || onPagination === void 0 ? void 0 : onPagination(navLinkConfig[type].destination, pageSize, type);
|
|
70
70
|
};
|
|
71
71
|
|
|
72
72
|
const {
|
|
73
73
|
text
|
|
74
74
|
} = navLinkConfig[type];
|
|
75
|
-
return /*#__PURE__*/_react.default.createElement(_pager.
|
|
75
|
+
return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerLink, {
|
|
76
76
|
"data-element": `pager-link-${type}`,
|
|
77
77
|
disabled: disabled(),
|
|
78
|
-
onClick:
|
|
78
|
+
onClick: // Type assertion due to the fact that StyledPagerLink
|
|
79
|
+
// will always return a button element
|
|
80
|
+
handleOnCLick,
|
|
79
81
|
ref: linkRef
|
|
80
82
|
}, text);
|
|
81
83
|
};
|
|
82
84
|
|
|
83
85
|
PagerNavigationLink.propTypes = {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
/** Count of all the pages */
|
|
91
|
-
pageCount: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
|
|
92
|
-
|
|
93
|
-
/** Pagination page size */
|
|
94
|
-
pageSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
|
|
95
|
-
|
|
96
|
-
/** onClick Callback function */
|
|
97
|
-
onClick: _propTypes.default.func,
|
|
98
|
-
|
|
99
|
-
/** onPagination Callback to process pagination */
|
|
100
|
-
onPagination: _propTypes.default.func
|
|
86
|
+
"currentPage": _propTypes.default.number.isRequired,
|
|
87
|
+
"onClick": _propTypes.default.func,
|
|
88
|
+
"onPagination": _propTypes.default.func,
|
|
89
|
+
"pageCount": _propTypes.default.number.isRequired,
|
|
90
|
+
"pageSize": _propTypes.default.number.isRequired,
|
|
91
|
+
"type": _propTypes.default.oneOf(["first", "last", "next", "previous"]).isRequired
|
|
101
92
|
};
|
|
102
93
|
var _default = PagerNavigationLink;
|
|
103
94
|
exports.default = _default;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface PagerNavigationProps {
|
|
3
|
+
/** Current visible page */
|
|
4
|
+
currentPage: number;
|
|
5
|
+
/** Pagination page size */
|
|
6
|
+
pageSize: number;
|
|
7
|
+
pageCount: number;
|
|
8
|
+
/** Sets the current page being shown */
|
|
9
|
+
setCurrentPage: (page: number) => void;
|
|
10
|
+
/** Callback function for next link */
|
|
11
|
+
onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
12
|
+
/** Callback function for first link */
|
|
13
|
+
onFirst?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
14
|
+
/** Callback function for previous link */
|
|
15
|
+
onPrevious?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
16
|
+
/** Callback function for last link */
|
|
17
|
+
onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
18
|
+
/** onPagination Callback triggered when a change is triggered */
|
|
19
|
+
onPagination: (pageSize: number, currentPage: number, origin: string) => void;
|
|
20
|
+
/** Should the `First` and `Last` navigation buttons be shown */
|
|
21
|
+
showFirstAndLastButtons?: boolean;
|
|
22
|
+
/** Should the `Next` and `Previous` navigation buttons be shown */
|
|
23
|
+
showPreviousAndNextButtons?: boolean;
|
|
24
|
+
/** Should the page count input be shown */
|
|
25
|
+
showPageCount?: boolean;
|
|
26
|
+
}
|
|
27
|
+
declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, }: PagerNavigationProps) => JSX.Element;
|
|
28
|
+
export default PagerNavigation;
|
|
@@ -56,31 +56,33 @@ const PagerNavigation = ({
|
|
|
56
56
|
};
|
|
57
57
|
|
|
58
58
|
const handlePageInputChange = ev => {
|
|
59
|
+
const pageNumber = +ev.target.value;
|
|
60
|
+
|
|
59
61
|
if (pageCount === 0) {
|
|
60
62
|
setCurrentPage(0);
|
|
61
63
|
onPagination(0, pageSize, "input");
|
|
62
|
-
return
|
|
64
|
+
return 0;
|
|
63
65
|
}
|
|
64
66
|
|
|
65
|
-
if (
|
|
67
|
+
if (pageNumber <= 0 || Number.isNaN(pageNumber)) {
|
|
66
68
|
setCurrentPage(1);
|
|
67
69
|
onPagination(1, pageSize, "input");
|
|
68
|
-
return
|
|
70
|
+
return 1;
|
|
69
71
|
}
|
|
70
72
|
|
|
71
|
-
if (
|
|
73
|
+
if (pageNumber > pageCount) {
|
|
72
74
|
setCurrentPage(pageCount);
|
|
73
75
|
onPagination(pageCount, pageSize, "input");
|
|
74
76
|
return pageCount;
|
|
75
77
|
}
|
|
76
78
|
|
|
77
|
-
setCurrentPage(
|
|
78
|
-
onPagination(
|
|
79
|
-
return
|
|
79
|
+
setCurrentPage(pageNumber);
|
|
80
|
+
onPagination(pageNumber, pageSize, "input");
|
|
81
|
+
return pageNumber;
|
|
80
82
|
};
|
|
81
83
|
|
|
82
84
|
const handleCurrentPageChange = e => {
|
|
83
|
-
setCurrentPage(e.target.value);
|
|
85
|
+
setCurrentPage(+e.target.value);
|
|
84
86
|
};
|
|
85
87
|
|
|
86
88
|
const renderButtonsBeforeCount = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/_react.default.createElement(_pagerNavigationLink.default, _extends({
|
|
@@ -112,41 +114,18 @@ const PagerNavigation = ({
|
|
|
112
114
|
};
|
|
113
115
|
|
|
114
116
|
PagerNavigation.propTypes = {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
/** onFirst Callback triggered when first link is triggered */
|
|
128
|
-
onFirst: _propTypes.default.func,
|
|
129
|
-
|
|
130
|
-
/** onPrevious Callback triggered when previous link is triggered */
|
|
131
|
-
onPrevious: _propTypes.default.func,
|
|
132
|
-
|
|
133
|
-
/** onNext Callback triggered when next link is triggered */
|
|
134
|
-
onNext: _propTypes.default.func,
|
|
135
|
-
|
|
136
|
-
/** onLast Callback triggered when last link is triggered */
|
|
137
|
-
onLast: _propTypes.default.func,
|
|
138
|
-
|
|
139
|
-
/** onPagination Callback triggered when a change is triggered */
|
|
140
|
-
onPagination: _propTypes.default.func,
|
|
141
|
-
|
|
142
|
-
/** Should the `First` and `Last` navigation buttons be shown */
|
|
143
|
-
showFirstAndLastButtons: _propTypes.default.bool,
|
|
144
|
-
|
|
145
|
-
/** Should the `Next` and `Previous` navigation buttons be shown */
|
|
146
|
-
showPreviousAndNextButtons: _propTypes.default.bool,
|
|
147
|
-
|
|
148
|
-
/** Should the page count input be shown */
|
|
149
|
-
showPageCount: _propTypes.default.bool
|
|
117
|
+
"currentPage": _propTypes.default.number.isRequired,
|
|
118
|
+
"onFirst": _propTypes.default.func,
|
|
119
|
+
"onLast": _propTypes.default.func,
|
|
120
|
+
"onNext": _propTypes.default.func,
|
|
121
|
+
"onPagination": _propTypes.default.func.isRequired,
|
|
122
|
+
"onPrevious": _propTypes.default.func,
|
|
123
|
+
"pageCount": _propTypes.default.number.isRequired,
|
|
124
|
+
"pageSize": _propTypes.default.number.isRequired,
|
|
125
|
+
"setCurrentPage": _propTypes.default.func.isRequired,
|
|
126
|
+
"showFirstAndLastButtons": _propTypes.default.bool,
|
|
127
|
+
"showPageCount": _propTypes.default.bool,
|
|
128
|
+
"showPreviousAndNextButtons": _propTypes.default.bool
|
|
150
129
|
};
|
|
151
130
|
var _default = PagerNavigation;
|
|
152
131
|
exports.default = _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from "./pager";
|
|
2
|
-
export
|
|
1
|
+
export { default } from "./pager.component";
|
|
2
|
+
export type { PagerProps } from "./pager.component";
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare type PageSizeOption = {
|
|
3
|
+
id: string;
|
|
4
|
+
name: number;
|
|
5
|
+
};
|
|
6
|
+
export interface PagerProps {
|
|
7
|
+
/** Function called when pager changes (PageSize, Current Page) */
|
|
8
|
+
onPagination: (pageSize: number, currentPage: number, origin: string) => void;
|
|
9
|
+
/** Callback function for next link */
|
|
10
|
+
onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
11
|
+
/** Callback function for first link */
|
|
12
|
+
onFirst?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
13
|
+
/** Callback function for previous link */
|
|
14
|
+
onPrevious?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
15
|
+
/** Callback function for last link */
|
|
16
|
+
onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
17
|
+
/** Current visible page */
|
|
18
|
+
currentPage?: number | string;
|
|
19
|
+
/** Total number of records */
|
|
20
|
+
totalRecords?: number | string;
|
|
21
|
+
/** Pagination page size */
|
|
22
|
+
pageSize?: number | string;
|
|
23
|
+
/** Should the page size selection dropdown be shown */
|
|
24
|
+
showPageSizeSelection?: boolean;
|
|
25
|
+
/** Set of page size options */
|
|
26
|
+
pageSizeSelectionOptions?: PageSizeOption[];
|
|
27
|
+
/** Should the label before the page size selection dropdown be shown */
|
|
28
|
+
showPageSizeLabelBefore?: boolean;
|
|
29
|
+
/** Should the label after the page size selection dropdown be shown */
|
|
30
|
+
showPageSizeLabelAfter?: boolean;
|
|
31
|
+
/** Should the total records label be shown */
|
|
32
|
+
showTotalRecords?: boolean;
|
|
33
|
+
/** Should the `First` and `Last` navigation button be shown */
|
|
34
|
+
showFirstAndLastButtons?: boolean;
|
|
35
|
+
/** Should the `Previous` and `Next` navigation button be shown */
|
|
36
|
+
showPreviousAndNextButtons?: boolean;
|
|
37
|
+
/** Should the page count input be shown */
|
|
38
|
+
showPageCount?: boolean;
|
|
39
|
+
/** What variant the Pager background should be */
|
|
40
|
+
variant?: "default" | "alternate";
|
|
41
|
+
}
|
|
42
|
+
export declare const Pager: ({ currentPage, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
|
|
43
|
+
export default Pager;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = void 0;
|
|
6
|
+
exports.default = exports.Pager = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
@@ -13,8 +13,6 @@ var _select = require("../select");
|
|
|
13
13
|
|
|
14
14
|
var _pagerNavigation = _interopRequireDefault(require("./__internal__/pager-navigation.component"));
|
|
15
15
|
|
|
16
|
-
var _option = _interopRequireDefault(require("../select/option/option.component"));
|
|
17
|
-
|
|
18
16
|
var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
|
|
19
17
|
|
|
20
18
|
var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
|
|
@@ -64,31 +62,31 @@ const Pager = ({
|
|
|
64
62
|
...rest
|
|
65
63
|
}) => {
|
|
66
64
|
const l = (0, _useLocale.default)();
|
|
67
|
-
const [page, setPage] = (0, _react.useState)(currentPage);
|
|
68
|
-
const [currentPageSize, setCurrentPageSize] = (0, _react.useState)(pageSize);
|
|
69
|
-
const [value, setValue] = (0, _react.useState)(pageSize);
|
|
65
|
+
const [page, setPage] = (0, _react.useState)(+currentPage);
|
|
66
|
+
const [currentPageSize, setCurrentPageSize] = (0, _react.useState)(+pageSize);
|
|
67
|
+
const [value, setValue] = (0, _react.useState)(+pageSize);
|
|
70
68
|
const guid = (0, _react.useRef)((0, _guid.default)());
|
|
71
69
|
const pageSizeSelectId = `Pager_size_selector_${guid.current}`;
|
|
72
70
|
const getPageCount = (0, _react.useCallback)(() => {
|
|
73
|
-
if (
|
|
71
|
+
if (+totalRecords < 0 || Number.isNaN(+totalRecords)) {
|
|
74
72
|
return 1;
|
|
75
73
|
}
|
|
76
74
|
|
|
77
|
-
return Math.ceil(totalRecords / currentPageSize);
|
|
75
|
+
return Math.ceil(+totalRecords / currentPageSize);
|
|
78
76
|
}, [totalRecords, currentPageSize]);
|
|
79
77
|
const [pageCount, setPageCount] = (0, _react.useState)(getPageCount());
|
|
80
78
|
(0, _react.useEffect)(() => {
|
|
81
|
-
setCurrentPageSize(
|
|
82
|
-
setValue(pageSize);
|
|
79
|
+
setCurrentPageSize(+pageSize);
|
|
80
|
+
setValue(+pageSize);
|
|
83
81
|
}, [pageSize]);
|
|
84
82
|
(0, _react.useEffect)(() => {
|
|
85
83
|
const maxPage = getPageCount();
|
|
86
84
|
setPageCount(maxPage);
|
|
87
85
|
|
|
88
|
-
if (
|
|
86
|
+
if (+currentPage > maxPage) {
|
|
89
87
|
setPage(maxPage);
|
|
90
88
|
} else {
|
|
91
|
-
setPage(
|
|
89
|
+
setPage(+currentPage);
|
|
92
90
|
}
|
|
93
91
|
}, [currentPageSize, pageCount, currentPage, totalRecords, getPageCount]);
|
|
94
92
|
const handleOnFirst = (0, _react.useCallback)(e => {
|
|
@@ -123,20 +121,20 @@ const Pager = ({
|
|
|
123
121
|
}, [page, onPrevious]);
|
|
124
122
|
const handleOnPagination = (0, _react.useCallback)(e => {
|
|
125
123
|
setValue(e.target.value);
|
|
126
|
-
setCurrentPageSize(
|
|
127
|
-
onPagination(1,
|
|
124
|
+
setCurrentPageSize(+e.target.value);
|
|
125
|
+
onPagination(1, +e.target.value, "page-select");
|
|
128
126
|
}, [onPagination]);
|
|
129
127
|
const handleKeyDown = (0, _react.useCallback)(e => _events.default.isEnterKey(e) && handleOnPagination(e), [handleOnPagination]);
|
|
130
128
|
|
|
131
129
|
const sizeSelector = () => {
|
|
132
130
|
return /*#__PURE__*/_react.default.createElement(_pager.StyledSelectContainer, null, /*#__PURE__*/_react.default.createElement(_select.Select, {
|
|
133
131
|
value: String(value),
|
|
134
|
-
onChange: ev => setValue(ev.target.value),
|
|
132
|
+
onChange: ev => setValue(+ev.target.value),
|
|
135
133
|
onBlur: () => setValue(currentPageSize),
|
|
136
134
|
onKeyDown: handleKeyDown,
|
|
137
135
|
"data-element": "page-select",
|
|
138
136
|
id: pageSizeSelectId
|
|
139
|
-
}, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/_react.default.createElement(
|
|
137
|
+
}, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/_react.default.createElement(_select.Option, {
|
|
140
138
|
key: sizeOption.id,
|
|
141
139
|
text: sizeOption.id,
|
|
142
140
|
value: String(sizeOption.name),
|
|
@@ -171,60 +169,28 @@ const Pager = ({
|
|
|
171
169
|
}), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSummary, null, renderTotalRecords()));
|
|
172
170
|
};
|
|
173
171
|
|
|
172
|
+
exports.Pager = Pager;
|
|
174
173
|
Pager.propTypes = {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
onPrevious: _propTypes.default.func,
|
|
186
|
-
|
|
187
|
-
/** Callback function for last link */
|
|
188
|
-
onLast: _propTypes.default.func,
|
|
189
|
-
|
|
190
|
-
/** Current visible page */
|
|
191
|
-
currentPage: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
192
|
-
|
|
193
|
-
/** Total number of records */
|
|
194
|
-
totalRecords: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
195
|
-
|
|
196
|
-
/** Pagination page size */
|
|
197
|
-
pageSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
198
|
-
|
|
199
|
-
/** Set of page size options */
|
|
200
|
-
pageSizeSelectionOptions: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
201
|
-
id: _propTypes.default.string,
|
|
202
|
-
name: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
174
|
+
"currentPage": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
175
|
+
"onFirst": _propTypes.default.func,
|
|
176
|
+
"onLast": _propTypes.default.func,
|
|
177
|
+
"onNext": _propTypes.default.func,
|
|
178
|
+
"onPagination": _propTypes.default.func.isRequired,
|
|
179
|
+
"onPrevious": _propTypes.default.func,
|
|
180
|
+
"pageSize": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
181
|
+
"pageSizeSelectionOptions": _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
182
|
+
"id": _propTypes.default.string.isRequired,
|
|
183
|
+
"name": _propTypes.default.number.isRequired
|
|
203
184
|
})),
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
/** Should the total records label be shown */
|
|
215
|
-
showTotalRecords: _propTypes.default.bool,
|
|
216
|
-
|
|
217
|
-
/** Should the `First` and `Last` navigation button be shown */
|
|
218
|
-
showFirstAndLastButtons: _propTypes.default.bool,
|
|
219
|
-
|
|
220
|
-
/** Should the `Previous` and `Next` navigation button be shown */
|
|
221
|
-
showPreviousAndNextButtons: _propTypes.default.bool,
|
|
222
|
-
|
|
223
|
-
/** Should the page count input be shown */
|
|
224
|
-
showPageCount: _propTypes.default.bool,
|
|
225
|
-
|
|
226
|
-
/** What variant the Pager background should be */
|
|
227
|
-
variant: _propTypes.default.oneOf(["default", "alternate"])
|
|
185
|
+
"showFirstAndLastButtons": _propTypes.default.bool,
|
|
186
|
+
"showPageCount": _propTypes.default.bool,
|
|
187
|
+
"showPageSizeLabelAfter": _propTypes.default.bool,
|
|
188
|
+
"showPageSizeLabelBefore": _propTypes.default.bool,
|
|
189
|
+
"showPageSizeSelection": _propTypes.default.bool,
|
|
190
|
+
"showPreviousAndNextButtons": _propTypes.default.bool,
|
|
191
|
+
"showTotalRecords": _propTypes.default.bool,
|
|
192
|
+
"totalRecords": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
193
|
+
"variant": _propTypes.default.oneOf(["alternate", "default"])
|
|
228
194
|
};
|
|
229
195
|
var _default = Pager;
|
|
230
196
|
exports.default = _default;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PagerProps } from ".";
|
|
3
|
+
declare const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
declare const StyledPagerContainer: import("styled-components").StyledComponent<"div", any, Pick<PagerProps, "variant">, never>;
|
|
5
|
+
declare const StyledPagerSizeOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
+
declare const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
+
declare const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
+
declare const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
+
declare const StyledPagerLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, {}, never>;
|
|
10
|
+
declare const StyledPagerNoSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
|
+
declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledSelectContainer = exports.StyledPagerSummary = exports.StyledPagerNoSelect = exports.
|
|
6
|
+
exports.StyledSelectContainer = exports.StyledPagerSummary = exports.StyledPagerNoSelect = exports.StyledPagerLink = exports.StyledPagerNavInner = exports.StyledPagerNavigation = exports.StyledPagerSizeOptionsInner = exports.StyledPagerSizeOptions = exports.StyledPagerContainer = void 0;
|
|
7
7
|
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
|
|
@@ -121,12 +121,12 @@ const StyledPagerNavInner = _styledComponents.default.div`
|
|
|
121
121
|
}
|
|
122
122
|
`;
|
|
123
123
|
exports.StyledPagerNavInner = StyledPagerNavInner;
|
|
124
|
-
const
|
|
124
|
+
const StyledPagerLink = (0, _styledComponents.default)(_link.default)`
|
|
125
125
|
padding: 0 10px;
|
|
126
126
|
margin-left: 7px;
|
|
127
127
|
margin-right: 7px;
|
|
128
128
|
`;
|
|
129
|
-
exports.
|
|
129
|
+
exports.StyledPagerLink = StyledPagerLink;
|
|
130
130
|
const StyledPagerNoSelect = _styledComponents.default.div`
|
|
131
131
|
user-select: none;
|
|
132
132
|
white-space: nowrap;
|
|
@@ -11,6 +11,11 @@ export interface OptionProps {
|
|
|
11
11
|
borderColor?: string;
|
|
12
12
|
/** MultiSelect only - fill Pill background with color */
|
|
13
13
|
fill?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* @private
|
|
16
|
+
* @ignore
|
|
17
|
+
* OnClick callback */
|
|
18
|
+
onClick?: (ev: React.MouseEvent<HTMLLIElement>) => void;
|
|
14
19
|
}
|
|
15
20
|
|
|
16
21
|
declare function Option(
|
|
@@ -134,12 +134,8 @@ const Tabs = ({
|
|
|
134
134
|
previousSelectedTabId.current = selectedTabId;
|
|
135
135
|
}
|
|
136
136
|
}, [blurPreviousSelectedTab, previousSelectedTabId, selectedTabId, selectedTabIdState]);
|
|
137
|
-
/** Determines if the tab titles are in a vertical format. */
|
|
138
|
-
|
|
139
|
-
const isVertical = currentPosition => currentPosition === "left";
|
|
140
137
|
/** Handles the changing of tabs with the mouse */
|
|
141
138
|
|
|
142
|
-
|
|
143
139
|
const handleTabClick = ev => {
|
|
144
140
|
if (_events.default.isEventType(ev, "keydown")) {
|
|
145
141
|
return;
|
|
@@ -177,7 +173,7 @@ const Tabs = ({
|
|
|
177
173
|
|
|
178
174
|
const handleKeyDown = index => {
|
|
179
175
|
return event => {
|
|
180
|
-
const isTabVertical =
|
|
176
|
+
const isTabVertical = isInSidebar || position === "left";
|
|
181
177
|
|
|
182
178
|
const isUp = isTabVertical && _events.default.isUpKey(event);
|
|
183
179
|
|
package/lib/locales/locale.d.ts
CHANGED
|
@@ -48,7 +48,7 @@ interface Locale {
|
|
|
48
48
|
};
|
|
49
49
|
pager: {
|
|
50
50
|
show: () => string;
|
|
51
|
-
records: (count: number | string, showNumber
|
|
51
|
+
records: (count: number | string, showNumber?: boolean) => string;
|
|
52
52
|
first: () => string;
|
|
53
53
|
last: () => string;
|
|
54
54
|
next: () => string;
|
package/package.json
CHANGED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface BatchSelectionProps {
|
|
4
|
-
/** Content to be rendered after selected count */
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
/** Color of the background, transparent if not defined */
|
|
7
|
-
colorTheme?: "dark" | "light" | "white" | "transparent";
|
|
8
|
-
/** If true disables all user interaction */
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
/** Hidden if true */
|
|
11
|
-
hidden?: boolean;
|
|
12
|
-
/** Number of selected elements */
|
|
13
|
-
selectedCount: number;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
declare function BatchSelection(props: BatchSelectionProps): JSX.Element;
|
|
17
|
-
|
|
18
|
-
export default BatchSelection;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface PagerPropTypes {
|
|
4
|
-
/** Function called when pager changes (PageSize, Current Page) */
|
|
5
|
-
onPagination: (pageSize: number, currentPage: number, origin: string) => void;
|
|
6
|
-
/** Callback function for next link */
|
|
7
|
-
onNext?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
8
|
-
/** Callback function for first link */
|
|
9
|
-
onFirst?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
10
|
-
/** Callback function for previous link */
|
|
11
|
-
onPrevious?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
12
|
-
/** Callback function for last link */
|
|
13
|
-
onLast?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
14
|
-
/** Current visible page */
|
|
15
|
-
currentPage?: number | string;
|
|
16
|
-
/** Total number of records */
|
|
17
|
-
totalRecords?: number | string;
|
|
18
|
-
/** Pagination page size */
|
|
19
|
-
pageSize?: number | string;
|
|
20
|
-
/** Should the page size selection dropdown be shown */
|
|
21
|
-
showPageSizeSelection?: boolean;
|
|
22
|
-
/** Set of page size options */
|
|
23
|
-
pageSizeSelectionOptions?: Record<string, unknown>[];
|
|
24
|
-
/** Should the label before the page size selection dropdown be shown */
|
|
25
|
-
showPageSizeLabelBefore?: boolean;
|
|
26
|
-
/** Should the label after the page size selection dropdown be shown */
|
|
27
|
-
showPageSizeLabelAfter?: boolean;
|
|
28
|
-
/** Should the total records label be shown */
|
|
29
|
-
showTotalRecords?: boolean;
|
|
30
|
-
/** Should the `First` and `Last` navigation button be shown */
|
|
31
|
-
showFirstAndLastButtons?: boolean;
|
|
32
|
-
/** Should the `Previous` and `Next` navigation button be shown */
|
|
33
|
-
showPreviousAndNextButtons?: boolean;
|
|
34
|
-
/** Should the page count input be shown */
|
|
35
|
-
showPageCount?: boolean;
|
|
36
|
-
/** What variant the Pager background should be */
|
|
37
|
-
variant?: "default" | "alternate";
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
declare function Pager(props: PagerPropTypes): JSX.Element;
|
|
41
|
-
|
|
42
|
-
export default Pager;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface BatchSelectionProps {
|
|
4
|
-
/** Content to be rendered after selected count */
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
/** Color of the background, transparent if not defined */
|
|
7
|
-
colorTheme?: "dark" | "light" | "white" | "transparent";
|
|
8
|
-
/** If true disables all user interaction */
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
/** Hidden if true */
|
|
11
|
-
hidden?: boolean;
|
|
12
|
-
/** Number of selected elements */
|
|
13
|
-
selectedCount: number;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
declare function BatchSelection(props: BatchSelectionProps): JSX.Element;
|
|
17
|
-
|
|
18
|
-
export default BatchSelection;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface PagerPropTypes {
|
|
4
|
-
/** Function called when pager changes (PageSize, Current Page) */
|
|
5
|
-
onPagination: (pageSize: number, currentPage: number, origin: string) => void;
|
|
6
|
-
/** Callback function for next link */
|
|
7
|
-
onNext?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
8
|
-
/** Callback function for first link */
|
|
9
|
-
onFirst?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
10
|
-
/** Callback function for previous link */
|
|
11
|
-
onPrevious?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
12
|
-
/** Callback function for last link */
|
|
13
|
-
onLast?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
14
|
-
/** Current visible page */
|
|
15
|
-
currentPage?: number | string;
|
|
16
|
-
/** Total number of records */
|
|
17
|
-
totalRecords?: number | string;
|
|
18
|
-
/** Pagination page size */
|
|
19
|
-
pageSize?: number | string;
|
|
20
|
-
/** Should the page size selection dropdown be shown */
|
|
21
|
-
showPageSizeSelection?: boolean;
|
|
22
|
-
/** Set of page size options */
|
|
23
|
-
pageSizeSelectionOptions?: Record<string, unknown>[];
|
|
24
|
-
/** Should the label before the page size selection dropdown be shown */
|
|
25
|
-
showPageSizeLabelBefore?: boolean;
|
|
26
|
-
/** Should the label after the page size selection dropdown be shown */
|
|
27
|
-
showPageSizeLabelAfter?: boolean;
|
|
28
|
-
/** Should the total records label be shown */
|
|
29
|
-
showTotalRecords?: boolean;
|
|
30
|
-
/** Should the `First` and `Last` navigation button be shown */
|
|
31
|
-
showFirstAndLastButtons?: boolean;
|
|
32
|
-
/** Should the `Previous` and `Next` navigation button be shown */
|
|
33
|
-
showPreviousAndNextButtons?: boolean;
|
|
34
|
-
/** Should the page count input be shown */
|
|
35
|
-
showPageCount?: boolean;
|
|
36
|
-
/** What variant the Pager background should be */
|
|
37
|
-
variant?: "default" | "alternate";
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
declare function Pager(props: PagerPropTypes): JSX.Element;
|
|
41
|
-
|
|
42
|
-
export default Pager;
|