carbon-react 153.1.1 → 153.2.0
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/pager/__internal__/pager-navigation.component.d.ts +3 -1
- package/esm/components/pager/__internal__/pager-navigation.component.js +8 -3
- package/esm/components/pager/pager.component.d.ts +3 -1
- package/esm/components/pager/pager.component.js +12 -6
- package/esm/components/pager/pager.style.d.ts +16 -8
- package/esm/components/pager/pager.style.js +50 -18
- package/lib/components/pager/__internal__/pager-navigation.component.d.ts +3 -1
- package/lib/components/pager/__internal__/pager-navigation.component.js +8 -3
- package/lib/components/pager/pager.component.d.ts +3 -1
- package/lib/components/pager/pager.component.js +12 -6
- package/lib/components/pager/pager.style.d.ts +16 -8
- package/lib/components/pager/pager.style.js +50 -18
- package/package.json +1 -1
|
@@ -27,6 +27,8 @@ export interface PagerNavigationProps {
|
|
|
27
27
|
interactivePageNumber?: boolean;
|
|
28
28
|
/** If true, sets css property visibility: hidden on all disabled elements */
|
|
29
29
|
hideDisabledElements?: boolean;
|
|
30
|
+
/** Breakpoint for small screen styling to be applied. */
|
|
31
|
+
smallScreenBreakpoint?: string;
|
|
30
32
|
}
|
|
31
|
-
declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, interactivePageNumber, hideDisabledElements, }: PagerNavigationProps) => React.JSX.Element;
|
|
33
|
+
declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, interactivePageNumber, hideDisabledElements, smallScreenBreakpoint, }: PagerNavigationProps) => React.JSX.Element;
|
|
32
34
|
export default PagerNavigation;
|
|
@@ -20,7 +20,8 @@ const PagerNavigation = ({
|
|
|
20
20
|
showPreviousAndNextButtons = true,
|
|
21
21
|
showPageCount = true,
|
|
22
22
|
interactivePageNumber = true,
|
|
23
|
-
hideDisabledElements = false
|
|
23
|
+
hideDisabledElements = false,
|
|
24
|
+
smallScreenBreakpoint
|
|
24
25
|
}) => {
|
|
25
26
|
const l = useLocale();
|
|
26
27
|
const guid = useRef(createGuid());
|
|
@@ -76,7 +77,9 @@ const PagerNavigation = ({
|
|
|
76
77
|
hideDisabledElements: hideDisabledElements,
|
|
77
78
|
onClick: onLast
|
|
78
79
|
}, pagerNavigationProps)));
|
|
79
|
-
return /*#__PURE__*/React.createElement(StyledPagerNavigation,
|
|
80
|
+
return /*#__PURE__*/React.createElement(StyledPagerNavigation, {
|
|
81
|
+
smallScreenBreakpoint: smallScreenBreakpoint
|
|
82
|
+
}, !hasOnePage && renderButtonsBeforeCount(), showPageCount && (interactivePageNumber ? /*#__PURE__*/React.createElement(StyledPagerNavInner, null, /*#__PURE__*/React.createElement("label", {
|
|
80
83
|
htmlFor: currentPageId
|
|
81
84
|
}, /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.pageX())), /*#__PURE__*/React.createElement(NumberInput, {
|
|
82
85
|
value: currentPage.toString(),
|
|
@@ -85,7 +88,9 @@ const PagerNavigation = ({
|
|
|
85
88
|
onBlur: handlePageInputChange,
|
|
86
89
|
id: currentPageId,
|
|
87
90
|
onKeyUp: ev => Events.isEnterKey(ev) ? handlePageInputChange(ev) : false
|
|
88
|
-
}), /*#__PURE__*/React.createElement(StyledPagerNoSelect,
|
|
91
|
+
}), /*#__PURE__*/React.createElement(StyledPagerNoSelect, {
|
|
92
|
+
"data-element": "max-pages"
|
|
93
|
+
}, l.pager.ofY(pageCount))) : /*#__PURE__*/React.createElement(StyledPagerNavLabel, {
|
|
89
94
|
"data-element": "current-page-label",
|
|
90
95
|
"data-role": "current-page-label",
|
|
91
96
|
id: currentPageId,
|
|
@@ -43,6 +43,8 @@ export interface PagerProps extends TagProps {
|
|
|
43
43
|
showPageCount?: boolean;
|
|
44
44
|
/** What variant the Pager background should be */
|
|
45
45
|
variant?: "default" | "alternate";
|
|
46
|
+
/** Breakpoint for small screen styling to be applied. */
|
|
47
|
+
smallScreenBreakpoint?: string;
|
|
46
48
|
}
|
|
47
|
-
export declare const Pager: ({ currentPage, hideDisabledElements, interactivePageNumber, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => React.JSX.Element;
|
|
49
|
+
export declare const Pager: ({ currentPage, hideDisabledElements, interactivePageNumber, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, smallScreenBreakpoint, ...rest }: PagerProps) => React.JSX.Element;
|
|
48
50
|
export default Pager;
|
|
@@ -39,6 +39,7 @@ export const Pager = ({
|
|
|
39
39
|
showPreviousAndNextButtons = true,
|
|
40
40
|
showPageCount = true,
|
|
41
41
|
variant = "default",
|
|
42
|
+
smallScreenBreakpoint,
|
|
42
43
|
...rest
|
|
43
44
|
}) => {
|
|
44
45
|
const l = useLocale();
|
|
@@ -120,12 +121,14 @@ export const Pager = ({
|
|
|
120
121
|
const wrapper = (isLabel, child) => isLabel ? /*#__PURE__*/React.createElement("label", {
|
|
121
122
|
htmlFor: pageSizeSelectId
|
|
122
123
|
}, child) : /*#__PURE__*/React.createElement("div", null, child);
|
|
123
|
-
return
|
|
124
|
+
return /*#__PURE__*/React.createElement(StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && wrapper(showPageSizeLabelBefore, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && wrapper(!showPageSizeLabelBefore, l.pager.records(currentPageSize, false)));
|
|
124
125
|
};
|
|
125
|
-
const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
|
|
126
126
|
return /*#__PURE__*/React.createElement(StyledPagerContainer, _extends({
|
|
127
|
-
variant: variant
|
|
128
|
-
|
|
127
|
+
variant: variant,
|
|
128
|
+
smallScreenBreakpoint: smallScreenBreakpoint,
|
|
129
|
+
showPageSizeSelection: showPageSizeSelection,
|
|
130
|
+
showTotalRecords: showTotalRecords
|
|
131
|
+
}, rest, tagComponent("pager", rest)), showPageSizeSelection && /*#__PURE__*/React.createElement(StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/React.createElement(PagerNavigation, {
|
|
129
132
|
pageSize: currentPageSize,
|
|
130
133
|
currentPage: page,
|
|
131
134
|
interactivePageNumber: interactivePageNumber,
|
|
@@ -139,7 +142,10 @@ export const Pager = ({
|
|
|
139
142
|
pageCount: pageCount,
|
|
140
143
|
showFirstAndLastButtons: showFirstAndLastButtons,
|
|
141
144
|
showPreviousAndNextButtons: showPreviousAndNextButtons,
|
|
142
|
-
showPageCount: showPageCount
|
|
143
|
-
|
|
145
|
+
showPageCount: showPageCount,
|
|
146
|
+
smallScreenBreakpoint: smallScreenBreakpoint
|
|
147
|
+
}), showTotalRecords && /*#__PURE__*/React.createElement(StyledPagerSummary, {
|
|
148
|
+
smallScreenBreakpoint: smallScreenBreakpoint
|
|
149
|
+
}, l.pager.records(totalRecords)));
|
|
144
150
|
};
|
|
145
151
|
export default Pager;
|
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PagerProps } from ".";
|
|
3
|
-
interface StyledPagerProps {
|
|
4
|
-
hideDisabledButtons?: boolean;
|
|
5
|
-
}
|
|
6
2
|
declare const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
-
|
|
3
|
+
interface StyledPagerContainerProps {
|
|
4
|
+
variant?: "alternate" | "default";
|
|
5
|
+
smallScreenBreakpoint?: string;
|
|
6
|
+
showPageSizeSelection?: boolean;
|
|
7
|
+
showTotalRecords?: boolean;
|
|
8
|
+
}
|
|
9
|
+
declare const StyledPagerContainer: import("styled-components").StyledComponent<"div", any, StyledPagerContainerProps, never>;
|
|
8
10
|
declare const StyledPagerSizeOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
11
|
declare const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
-
|
|
12
|
+
interface StyledPagerProps {
|
|
13
|
+
smallScreenBreakpoint?: string;
|
|
14
|
+
}
|
|
15
|
+
declare const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, StyledPagerProps, never>;
|
|
11
16
|
declare const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
17
|
declare const StyledPagerNavLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
|
|
13
|
-
|
|
18
|
+
interface StyledPagerLinkProps {
|
|
19
|
+
hideDisabledButtons?: boolean;
|
|
20
|
+
}
|
|
21
|
+
declare const StyledPagerLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyledPagerLinkProps, never>;
|
|
14
22
|
declare const StyledPagerNoSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
15
|
-
declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any,
|
|
23
|
+
declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, StyledPagerProps, never>;
|
|
16
24
|
export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerNavLabel, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };
|
|
@@ -15,14 +15,35 @@ const StyledSelectContainer = styled.div`
|
|
|
15
15
|
}
|
|
16
16
|
`;
|
|
17
17
|
const StyledPagerContainer = styled.div`
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
padding: 0px 24px;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
display: grid;
|
|
21
20
|
align-items: center;
|
|
22
|
-
|
|
21
|
+
justify-content: space-between;
|
|
22
|
+
padding: var(--sizing050) var(--sizing300);
|
|
23
|
+
width: 100%;
|
|
24
|
+
min-height: var(--sizing550);
|
|
25
|
+
font-size: var(--fontSizes100);
|
|
23
26
|
color: var(--colorsUtilityYin090);
|
|
24
27
|
border: 1px solid var(--colorsUtilityMajor100);
|
|
25
28
|
border-radius: var(--borderRadius100);
|
|
29
|
+
grid-template-columns: repeat(3, 1fr);
|
|
30
|
+
flex-wrap: wrap;
|
|
31
|
+
|
|
32
|
+
${({
|
|
33
|
+
smallScreenBreakpoint,
|
|
34
|
+
showPageSizeSelection,
|
|
35
|
+
showTotalRecords
|
|
36
|
+
}) => smallScreenBreakpoint && css`
|
|
37
|
+
@media (max-width: ${smallScreenBreakpoint}) {
|
|
38
|
+
grid-template-columns: 1fr;
|
|
39
|
+
padding: var(--sizing050) var(--sizing100);
|
|
40
|
+
|
|
41
|
+
${(showPageSizeSelection || showTotalRecords) && css`
|
|
42
|
+
grid-template-columns: 1fr 1fr;
|
|
43
|
+
grid-template-rows: 1fr 1fr;
|
|
44
|
+
`}
|
|
45
|
+
}
|
|
46
|
+
`}
|
|
26
47
|
|
|
27
48
|
${({
|
|
28
49
|
variant
|
|
@@ -31,9 +52,7 @@ const StyledPagerContainer = styled.div`
|
|
|
31
52
|
`}
|
|
32
53
|
`;
|
|
33
54
|
const StyledPagerSizeOptions = styled.div`
|
|
34
|
-
|
|
35
|
-
flex: 1 1 30%;
|
|
36
|
-
justify-content: flex-start;
|
|
55
|
+
grid-area: 1 / 1 / 1 / 1;
|
|
37
56
|
|
|
38
57
|
${StyledInputPresentation} {
|
|
39
58
|
width: 55px;
|
|
@@ -63,9 +82,21 @@ const StyledPagerSizeOptionsInner = styled.div`
|
|
|
63
82
|
`;
|
|
64
83
|
const StyledPagerNavigation = styled.div`
|
|
65
84
|
display: flex;
|
|
66
|
-
flex: 1 1 auto;
|
|
67
85
|
justify-content: center;
|
|
68
86
|
align-items: center;
|
|
87
|
+
padding: 0 var(--spacing200);
|
|
88
|
+
gap: var(--spacing400);
|
|
89
|
+
grid-area: 1 / 2 / 1 / 2;
|
|
90
|
+
|
|
91
|
+
${({
|
|
92
|
+
smallScreenBreakpoint
|
|
93
|
+
}) => smallScreenBreakpoint && css`
|
|
94
|
+
@media (max-width: ${smallScreenBreakpoint}) {
|
|
95
|
+
padding: 0;
|
|
96
|
+
gap: var(--spacing200);
|
|
97
|
+
grid-area: 2 / 1 / 2 / 3;
|
|
98
|
+
}
|
|
99
|
+
`}
|
|
69
100
|
|
|
70
101
|
&& ${StyledInputPresentation} {
|
|
71
102
|
padding: 0;
|
|
@@ -84,8 +115,6 @@ const StyledPagerNavigation = styled.div`
|
|
|
84
115
|
const StyledPagerNavInner = styled.div`
|
|
85
116
|
display: flex;
|
|
86
117
|
align-items: center;
|
|
87
|
-
padding: 0 12px;
|
|
88
|
-
margin: 4px 0;
|
|
89
118
|
|
|
90
119
|
&& ${StyledFormField} {
|
|
91
120
|
margin-bottom: 0;
|
|
@@ -93,13 +122,8 @@ const StyledPagerNavInner = styled.div`
|
|
|
93
122
|
`;
|
|
94
123
|
const StyledPagerNavLabel = styled.label`
|
|
95
124
|
white-space: nowrap;
|
|
96
|
-
padding: 9px 12px;
|
|
97
|
-
margin: 4px 0;
|
|
98
125
|
`;
|
|
99
126
|
const StyledPagerLink = styled(Link)`
|
|
100
|
-
margin-left: 17px;
|
|
101
|
-
margin-right: 17px;
|
|
102
|
-
|
|
103
127
|
${({
|
|
104
128
|
hideDisabledButtons
|
|
105
129
|
}) => hideDisabledButtons && css`
|
|
@@ -114,8 +138,16 @@ const StyledPagerNoSelect = styled.div`
|
|
|
114
138
|
font-weight: normal;
|
|
115
139
|
`;
|
|
116
140
|
const StyledPagerSummary = styled.div`
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
141
|
+
justify-self: end;
|
|
142
|
+
white-space: nowrap;
|
|
143
|
+
grid-area: 1 / 3 / 1 / 3;
|
|
144
|
+
|
|
145
|
+
${({
|
|
146
|
+
smallScreenBreakpoint
|
|
147
|
+
}) => smallScreenBreakpoint && css`
|
|
148
|
+
@media (max-width: ${smallScreenBreakpoint}) {
|
|
149
|
+
grid-area: 1 / 2 / 1 / 2;
|
|
150
|
+
}
|
|
151
|
+
`}
|
|
120
152
|
`;
|
|
121
153
|
export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerNavLabel, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer };
|
|
@@ -27,6 +27,8 @@ export interface PagerNavigationProps {
|
|
|
27
27
|
interactivePageNumber?: boolean;
|
|
28
28
|
/** If true, sets css property visibility: hidden on all disabled elements */
|
|
29
29
|
hideDisabledElements?: boolean;
|
|
30
|
+
/** Breakpoint for small screen styling to be applied. */
|
|
31
|
+
smallScreenBreakpoint?: string;
|
|
30
32
|
}
|
|
31
|
-
declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, interactivePageNumber, hideDisabledElements, }: PagerNavigationProps) => React.JSX.Element;
|
|
33
|
+
declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, interactivePageNumber, hideDisabledElements, smallScreenBreakpoint, }: PagerNavigationProps) => React.JSX.Element;
|
|
32
34
|
export default PagerNavigation;
|
|
@@ -29,7 +29,8 @@ const PagerNavigation = ({
|
|
|
29
29
|
showPreviousAndNextButtons = true,
|
|
30
30
|
showPageCount = true,
|
|
31
31
|
interactivePageNumber = true,
|
|
32
|
-
hideDisabledElements = false
|
|
32
|
+
hideDisabledElements = false,
|
|
33
|
+
smallScreenBreakpoint
|
|
33
34
|
}) => {
|
|
34
35
|
const l = (0, _useLocale.default)();
|
|
35
36
|
const guid = (0, _react.useRef)((0, _guid.default)());
|
|
@@ -85,7 +86,9 @@ const PagerNavigation = ({
|
|
|
85
86
|
hideDisabledElements: hideDisabledElements,
|
|
86
87
|
onClick: onLast
|
|
87
88
|
}, pagerNavigationProps)));
|
|
88
|
-
return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavigation,
|
|
89
|
+
return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavigation, {
|
|
90
|
+
smallScreenBreakpoint: smallScreenBreakpoint
|
|
91
|
+
}, !hasOnePage && renderButtonsBeforeCount(), showPageCount && (interactivePageNumber ? /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavInner, null, /*#__PURE__*/_react.default.createElement("label", {
|
|
89
92
|
htmlFor: currentPageId
|
|
90
93
|
}, /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.pageX())), /*#__PURE__*/_react.default.createElement(_number.default, {
|
|
91
94
|
value: currentPage.toString(),
|
|
@@ -94,7 +97,9 @@ const PagerNavigation = ({
|
|
|
94
97
|
onBlur: handlePageInputChange,
|
|
95
98
|
id: currentPageId,
|
|
96
99
|
onKeyUp: ev => _events.default.isEnterKey(ev) ? handlePageInputChange(ev) : false
|
|
97
|
-
}), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect,
|
|
100
|
+
}), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, {
|
|
101
|
+
"data-element": "max-pages"
|
|
102
|
+
}, l.pager.ofY(pageCount))) : /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavLabel, {
|
|
98
103
|
"data-element": "current-page-label",
|
|
99
104
|
"data-role": "current-page-label",
|
|
100
105
|
id: currentPageId,
|
|
@@ -43,6 +43,8 @@ export interface PagerProps extends TagProps {
|
|
|
43
43
|
showPageCount?: boolean;
|
|
44
44
|
/** What variant the Pager background should be */
|
|
45
45
|
variant?: "default" | "alternate";
|
|
46
|
+
/** Breakpoint for small screen styling to be applied. */
|
|
47
|
+
smallScreenBreakpoint?: string;
|
|
46
48
|
}
|
|
47
|
-
export declare const Pager: ({ currentPage, hideDisabledElements, interactivePageNumber, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => React.JSX.Element;
|
|
49
|
+
export declare const Pager: ({ currentPage, hideDisabledElements, interactivePageNumber, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, smallScreenBreakpoint, ...rest }: PagerProps) => React.JSX.Element;
|
|
48
50
|
export default Pager;
|
|
@@ -48,6 +48,7 @@ const Pager = ({
|
|
|
48
48
|
showPreviousAndNextButtons = true,
|
|
49
49
|
showPageCount = true,
|
|
50
50
|
variant = "default",
|
|
51
|
+
smallScreenBreakpoint,
|
|
51
52
|
...rest
|
|
52
53
|
}) => {
|
|
53
54
|
const l = (0, _useLocale.default)();
|
|
@@ -129,12 +130,14 @@ const Pager = ({
|
|
|
129
130
|
const wrapper = (isLabel, child) => isLabel ? /*#__PURE__*/_react.default.createElement("label", {
|
|
130
131
|
htmlFor: pageSizeSelectId
|
|
131
132
|
}, child) : /*#__PURE__*/_react.default.createElement("div", null, child);
|
|
132
|
-
return
|
|
133
|
+
return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && wrapper(showPageSizeLabelBefore, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && wrapper(!showPageSizeLabelBefore, l.pager.records(currentPageSize, false)));
|
|
133
134
|
};
|
|
134
|
-
const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
|
|
135
135
|
return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerContainer, _extends({
|
|
136
|
-
variant: variant
|
|
137
|
-
|
|
136
|
+
variant: variant,
|
|
137
|
+
smallScreenBreakpoint: smallScreenBreakpoint,
|
|
138
|
+
showPageSizeSelection: showPageSizeSelection,
|
|
139
|
+
showTotalRecords: showTotalRecords
|
|
140
|
+
}, rest, (0, _tags.default)("pager", rest)), showPageSizeSelection && /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/_react.default.createElement(_pagerNavigation.default, {
|
|
138
141
|
pageSize: currentPageSize,
|
|
139
142
|
currentPage: page,
|
|
140
143
|
interactivePageNumber: interactivePageNumber,
|
|
@@ -148,8 +151,11 @@ const Pager = ({
|
|
|
148
151
|
pageCount: pageCount,
|
|
149
152
|
showFirstAndLastButtons: showFirstAndLastButtons,
|
|
150
153
|
showPreviousAndNextButtons: showPreviousAndNextButtons,
|
|
151
|
-
showPageCount: showPageCount
|
|
152
|
-
|
|
154
|
+
showPageCount: showPageCount,
|
|
155
|
+
smallScreenBreakpoint: smallScreenBreakpoint
|
|
156
|
+
}), showTotalRecords && /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSummary, {
|
|
157
|
+
smallScreenBreakpoint: smallScreenBreakpoint
|
|
158
|
+
}, l.pager.records(totalRecords)));
|
|
153
159
|
};
|
|
154
160
|
exports.Pager = Pager;
|
|
155
161
|
var _default = exports.default = Pager;
|
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PagerProps } from ".";
|
|
3
|
-
interface StyledPagerProps {
|
|
4
|
-
hideDisabledButtons?: boolean;
|
|
5
|
-
}
|
|
6
2
|
declare const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
-
|
|
3
|
+
interface StyledPagerContainerProps {
|
|
4
|
+
variant?: "alternate" | "default";
|
|
5
|
+
smallScreenBreakpoint?: string;
|
|
6
|
+
showPageSizeSelection?: boolean;
|
|
7
|
+
showTotalRecords?: boolean;
|
|
8
|
+
}
|
|
9
|
+
declare const StyledPagerContainer: import("styled-components").StyledComponent<"div", any, StyledPagerContainerProps, never>;
|
|
8
10
|
declare const StyledPagerSizeOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
11
|
declare const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
-
|
|
12
|
+
interface StyledPagerProps {
|
|
13
|
+
smallScreenBreakpoint?: string;
|
|
14
|
+
}
|
|
15
|
+
declare const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, StyledPagerProps, never>;
|
|
11
16
|
declare const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
17
|
declare const StyledPagerNavLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
|
|
13
|
-
|
|
18
|
+
interface StyledPagerLinkProps {
|
|
19
|
+
hideDisabledButtons?: boolean;
|
|
20
|
+
}
|
|
21
|
+
declare const StyledPagerLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyledPagerLinkProps, never>;
|
|
14
22
|
declare const StyledPagerNoSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
15
|
-
declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any,
|
|
23
|
+
declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, StyledPagerProps, never>;
|
|
16
24
|
export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerNavLabel, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };
|
|
@@ -24,14 +24,35 @@ const StyledSelectContainer = exports.StyledSelectContainer = _styledComponents.
|
|
|
24
24
|
}
|
|
25
25
|
`;
|
|
26
26
|
const StyledPagerContainer = exports.StyledPagerContainer = _styledComponents.default.div`
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
padding: 0px 24px;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
display: grid;
|
|
30
29
|
align-items: center;
|
|
31
|
-
|
|
30
|
+
justify-content: space-between;
|
|
31
|
+
padding: var(--sizing050) var(--sizing300);
|
|
32
|
+
width: 100%;
|
|
33
|
+
min-height: var(--sizing550);
|
|
34
|
+
font-size: var(--fontSizes100);
|
|
32
35
|
color: var(--colorsUtilityYin090);
|
|
33
36
|
border: 1px solid var(--colorsUtilityMajor100);
|
|
34
37
|
border-radius: var(--borderRadius100);
|
|
38
|
+
grid-template-columns: repeat(3, 1fr);
|
|
39
|
+
flex-wrap: wrap;
|
|
40
|
+
|
|
41
|
+
${({
|
|
42
|
+
smallScreenBreakpoint,
|
|
43
|
+
showPageSizeSelection,
|
|
44
|
+
showTotalRecords
|
|
45
|
+
}) => smallScreenBreakpoint && (0, _styledComponents.css)`
|
|
46
|
+
@media (max-width: ${smallScreenBreakpoint}) {
|
|
47
|
+
grid-template-columns: 1fr;
|
|
48
|
+
padding: var(--sizing050) var(--sizing100);
|
|
49
|
+
|
|
50
|
+
${(showPageSizeSelection || showTotalRecords) && (0, _styledComponents.css)`
|
|
51
|
+
grid-template-columns: 1fr 1fr;
|
|
52
|
+
grid-template-rows: 1fr 1fr;
|
|
53
|
+
`}
|
|
54
|
+
}
|
|
55
|
+
`}
|
|
35
56
|
|
|
36
57
|
${({
|
|
37
58
|
variant
|
|
@@ -40,9 +61,7 @@ const StyledPagerContainer = exports.StyledPagerContainer = _styledComponents.de
|
|
|
40
61
|
`}
|
|
41
62
|
`;
|
|
42
63
|
const StyledPagerSizeOptions = exports.StyledPagerSizeOptions = _styledComponents.default.div`
|
|
43
|
-
|
|
44
|
-
flex: 1 1 30%;
|
|
45
|
-
justify-content: flex-start;
|
|
64
|
+
grid-area: 1 / 1 / 1 / 1;
|
|
46
65
|
|
|
47
66
|
${_inputPresentation.default} {
|
|
48
67
|
width: 55px;
|
|
@@ -72,9 +91,21 @@ const StyledPagerSizeOptionsInner = exports.StyledPagerSizeOptionsInner = _style
|
|
|
72
91
|
`;
|
|
73
92
|
const StyledPagerNavigation = exports.StyledPagerNavigation = _styledComponents.default.div`
|
|
74
93
|
display: flex;
|
|
75
|
-
flex: 1 1 auto;
|
|
76
94
|
justify-content: center;
|
|
77
95
|
align-items: center;
|
|
96
|
+
padding: 0 var(--spacing200);
|
|
97
|
+
gap: var(--spacing400);
|
|
98
|
+
grid-area: 1 / 2 / 1 / 2;
|
|
99
|
+
|
|
100
|
+
${({
|
|
101
|
+
smallScreenBreakpoint
|
|
102
|
+
}) => smallScreenBreakpoint && (0, _styledComponents.css)`
|
|
103
|
+
@media (max-width: ${smallScreenBreakpoint}) {
|
|
104
|
+
padding: 0;
|
|
105
|
+
gap: var(--spacing200);
|
|
106
|
+
grid-area: 2 / 1 / 2 / 3;
|
|
107
|
+
}
|
|
108
|
+
`}
|
|
78
109
|
|
|
79
110
|
&& ${_inputPresentation.default} {
|
|
80
111
|
padding: 0;
|
|
@@ -93,8 +124,6 @@ const StyledPagerNavigation = exports.StyledPagerNavigation = _styledComponents.
|
|
|
93
124
|
const StyledPagerNavInner = exports.StyledPagerNavInner = _styledComponents.default.div`
|
|
94
125
|
display: flex;
|
|
95
126
|
align-items: center;
|
|
96
|
-
padding: 0 12px;
|
|
97
|
-
margin: 4px 0;
|
|
98
127
|
|
|
99
128
|
&& ${_formField.default} {
|
|
100
129
|
margin-bottom: 0;
|
|
@@ -102,13 +131,8 @@ const StyledPagerNavInner = exports.StyledPagerNavInner = _styledComponents.defa
|
|
|
102
131
|
`;
|
|
103
132
|
const StyledPagerNavLabel = exports.StyledPagerNavLabel = _styledComponents.default.label`
|
|
104
133
|
white-space: nowrap;
|
|
105
|
-
padding: 9px 12px;
|
|
106
|
-
margin: 4px 0;
|
|
107
134
|
`;
|
|
108
135
|
const StyledPagerLink = exports.StyledPagerLink = (0, _styledComponents.default)(_link.default)`
|
|
109
|
-
margin-left: 17px;
|
|
110
|
-
margin-right: 17px;
|
|
111
|
-
|
|
112
136
|
${({
|
|
113
137
|
hideDisabledButtons
|
|
114
138
|
}) => hideDisabledButtons && (0, _styledComponents.css)`
|
|
@@ -123,7 +147,15 @@ const StyledPagerNoSelect = exports.StyledPagerNoSelect = _styledComponents.defa
|
|
|
123
147
|
font-weight: normal;
|
|
124
148
|
`;
|
|
125
149
|
const StyledPagerSummary = exports.StyledPagerSummary = _styledComponents.default.div`
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
150
|
+
justify-self: end;
|
|
151
|
+
white-space: nowrap;
|
|
152
|
+
grid-area: 1 / 3 / 1 / 3;
|
|
153
|
+
|
|
154
|
+
${({
|
|
155
|
+
smallScreenBreakpoint
|
|
156
|
+
}) => smallScreenBreakpoint && (0, _styledComponents.css)`
|
|
157
|
+
@media (max-width: ${smallScreenBreakpoint}) {
|
|
158
|
+
grid-area: 1 / 2 / 1 / 2;
|
|
159
|
+
}
|
|
160
|
+
`}
|
|
129
161
|
`;
|