@elliemae/ds-pagination 2.3.1 → 3.0.0-alpha.3
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.js +61 -0
- package/dist/cjs/Pagination.js.map +7 -0
- package/dist/cjs/PaginationDataTestID.js +39 -0
- package/dist/cjs/PaginationDataTestID.js.map +7 -0
- package/dist/cjs/hooks/usePaginationSearch.js +60 -0
- package/dist/cjs/hooks/usePaginationSearch.js.map +7 -0
- package/dist/cjs/index.d.js +27 -0
- package/dist/cjs/index.d.js.map +7 -0
- package/dist/cjs/index.js +28 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/parts/PageNextButton.js +53 -0
- package/dist/cjs/parts/PageNextButton.js.map +7 -0
- package/dist/cjs/parts/PagePrevButton.js +49 -0
- package/dist/cjs/parts/PagePrevButton.js.map +7 -0
- package/dist/cjs/parts/PaginationContent.js +111 -0
- package/dist/cjs/parts/PaginationContent.js.map +7 -0
- package/dist/cjs/parts/Paginator.js +148 -0
- package/dist/cjs/parts/Paginator.js.map +7 -0
- package/dist/cjs/parts/PerPageSelector.js +106 -0
- package/dist/cjs/parts/PerPageSelector.js.map +7 -0
- package/dist/cjs/props.js +82 -0
- package/dist/cjs/props.js.map +7 -0
- package/dist/cjs/styled.js +130 -0
- package/dist/cjs/styled.js.map +7 -0
- package/dist/esm/Pagination.js +34 -0
- package/dist/esm/Pagination.js.map +7 -0
- package/dist/esm/PaginationDataTestID.js +10 -0
- package/dist/esm/PaginationDataTestID.js.map +7 -0
- package/{esm → dist/esm}/hooks/usePaginationSearch.js +16 -13
- package/dist/esm/hooks/usePaginationSearch.js.map +7 -0
- package/dist/esm/index.d.js +2 -0
- package/dist/esm/index.d.js.map +7 -0
- package/dist/esm/index.js +3 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/parts/PageNextButton.js +24 -0
- package/dist/esm/parts/PageNextButton.js.map +7 -0
- package/dist/esm/parts/PagePrevButton.js +20 -0
- package/dist/esm/parts/PagePrevButton.js.map +7 -0
- package/dist/esm/parts/PaginationContent.js +84 -0
- package/dist/esm/parts/PaginationContent.js.map +7 -0
- package/dist/esm/parts/Paginator.js +124 -0
- package/dist/esm/parts/Paginator.js.map +7 -0
- package/dist/esm/parts/PerPageSelector.js +77 -0
- package/dist/esm/parts/PerPageSelector.js.map +7 -0
- package/dist/esm/props.js +53 -0
- package/dist/esm/props.js.map +7 -0
- package/dist/esm/styled.js +106 -0
- package/dist/esm/styled.js.map +7 -0
- package/package.json +53 -45
- package/cjs/Pagination.js +0 -35
- package/cjs/PaginationDataTestID.js +0 -11
- package/cjs/hooks/usePaginationSearch.js +0 -32
- package/cjs/index.d.js +0 -2
- package/cjs/index.js +0 -10
- package/cjs/parts/PageNextButton.js +0 -33
- package/cjs/parts/PagePrevButton.js +0 -32
- package/cjs/parts/PaginationContent.js +0 -95
- package/cjs/parts/Paginator.js +0 -163
- package/cjs/parts/PerPageSelector.js +0 -110
- package/cjs/props.js +0 -53
- package/cjs/styled.js +0 -57
- package/esm/Pagination.js +0 -26
- package/esm/PaginationDataTestID.js +0 -7
- package/esm/index.d.js +0 -1
- package/esm/index.js +0 -1
- package/esm/parts/PageNextButton.js +0 -25
- package/esm/parts/PagePrevButton.js +0 -24
- package/esm/parts/PaginationContent.js +0 -85
- package/esm/parts/Paginator.js +0 -156
- package/esm/parts/PerPageSelector.js +0 -103
- package/esm/props.js +0 -48
- package/esm/styled.js +0 -40
- package/types/Pagination.d.ts +0 -5
- package/types/PaginationDataTestID.d.ts +0 -5
- package/types/hooks/usePaginationSearch.d.ts +0 -1
- package/types/index.d.ts +0 -1
- package/types/parts/PageNextButton.d.ts +0 -3
- package/types/parts/PagePrevButton.d.ts +0 -3
- package/types/parts/PaginationContent.d.ts +0 -3
- package/types/parts/Paginator.d.ts +0 -10
- package/types/parts/PerPageSelector.d.ts +0 -4
- package/types/props.d.ts +0 -20
- package/types/styled.d.ts +0 -10
package/cjs/parts/Paginator.js
DELETED
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
-
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
|
-
require('core-js/modules/esnext.async-iterator.map.js');
|
|
6
|
-
require('core-js/modules/esnext.iterator.map.js');
|
|
7
|
-
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
8
|
-
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
-
require('core-js/modules/esnext.iterator.reduce.js');
|
|
10
|
-
var react = require('react');
|
|
11
|
-
var dsIcons = require('@elliemae/ds-icons');
|
|
12
|
-
var dsUtilities = require('@elliemae/ds-utilities');
|
|
13
|
-
var Grid = require('@elliemae/ds-grid');
|
|
14
|
-
var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
|
|
15
|
-
var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
|
|
16
|
-
var styled = require('../styled.js');
|
|
17
|
-
var usePaginationSearch = require('../hooks/usePaginationSearch.js');
|
|
18
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
19
|
-
|
|
20
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
|
-
|
|
22
|
-
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
23
|
-
var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
|
|
24
|
-
|
|
25
|
-
var _div, _PaginationSeparator, _PaginationSeparator2, _PaginationSeparator3, _PaginationSeparator4;
|
|
26
|
-
|
|
27
|
-
const Paginator = props => {
|
|
28
|
-
var _span2;
|
|
29
|
-
|
|
30
|
-
const {
|
|
31
|
-
pageIndex,
|
|
32
|
-
pageCount,
|
|
33
|
-
onPageChange,
|
|
34
|
-
pageDetails,
|
|
35
|
-
pageDetailsTitle
|
|
36
|
-
} = props;
|
|
37
|
-
const [isOpened, setIsOpened] = react.useState(false);
|
|
38
|
-
const btnRef = react.useRef(null);
|
|
39
|
-
const pageInfoRef = react.useRef(null);
|
|
40
|
-
const {
|
|
41
|
-
width: btnWidth
|
|
42
|
-
} = dsUtilities.useOnElementResize(btnRef);
|
|
43
|
-
const {
|
|
44
|
-
width: txtWidth
|
|
45
|
-
} = dsUtilities.useOnElementResize(pageInfoRef);
|
|
46
|
-
const options = react.useMemo(() => new Array(pageCount).fill(0).map((_, index) => {
|
|
47
|
-
var _span;
|
|
48
|
-
|
|
49
|
-
const option = {
|
|
50
|
-
dsId: (index + 1).toString(),
|
|
51
|
-
label: (index + 1).toString(),
|
|
52
|
-
value: index + 1,
|
|
53
|
-
type: 'single'
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
if (pageDetails !== null && pageDetails !== void 0 && pageDetails.length) {
|
|
57
|
-
option.render = () => /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
|
|
58
|
-
cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
|
|
59
|
-
gutter: "xxs",
|
|
60
|
-
alignItems: "center"
|
|
61
|
-
}, void 0, pageIndex === index ? /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
|
|
62
|
-
size: "s",
|
|
63
|
-
color: ['brand-primary', '600']
|
|
64
|
-
}) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, index + 1)), /*#__PURE__*/_jsx__default["default"]("span", {
|
|
65
|
-
style: {
|
|
66
|
-
whiteSpace: 'nowrap',
|
|
67
|
-
textOverflow: 'ellipsis',
|
|
68
|
-
overflow: 'hidden'
|
|
69
|
-
}
|
|
70
|
-
}, void 0, pageDetails[index]));
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
return option;
|
|
74
|
-
}), [pageCount, pageDetails, pageIndex, txtWidth]);
|
|
75
|
-
const actionRef = react.useRef({});
|
|
76
|
-
react.useEffect(() => {
|
|
77
|
-
if (isOpened) {
|
|
78
|
-
actionRef.current.setActiveDescendant((pageIndex + 1).toString());
|
|
79
|
-
actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());
|
|
80
|
-
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
81
|
-
|
|
82
|
-
}, [isOpened]);
|
|
83
|
-
const [detailWidth, setDetailWidth] = react.useState(0);
|
|
84
|
-
react.useLayoutEffect(() => {
|
|
85
|
-
const invisibleDetails = [...document.body.querySelectorAll('[data-testid="ds-pagination-invisible-detail-for-width-calc"]')];
|
|
86
|
-
const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);
|
|
87
|
-
setDetailWidth(maxWidth);
|
|
88
|
-
}, [pageDetails]);
|
|
89
|
-
const onKeyDown = usePaginationSearch.usePaginationSearch(pageCount, actionRef);
|
|
90
|
-
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
91
|
-
children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {})), /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
|
|
92
|
-
isOpened: isOpened,
|
|
93
|
-
options: options,
|
|
94
|
-
selectedOptions: {
|
|
95
|
-
[(pageIndex + 1).toString()]: true
|
|
96
|
-
},
|
|
97
|
-
onOptionClick: (_, clickedOption) => {
|
|
98
|
-
var _btnRef$current;
|
|
99
|
-
|
|
100
|
-
onPageChange(clickedOption.value);
|
|
101
|
-
setIsOpened(false);
|
|
102
|
-
(_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
|
|
103
|
-
},
|
|
104
|
-
onClickOutside: () => {
|
|
105
|
-
var _btnRef$current2;
|
|
106
|
-
|
|
107
|
-
setIsOpened(false);
|
|
108
|
-
(_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
|
|
109
|
-
},
|
|
110
|
-
customOffset: [-23, 2],
|
|
111
|
-
startPlacementPreference: "top-start",
|
|
112
|
-
actionRef: actionRef,
|
|
113
|
-
onKeyDown: onKeyDown,
|
|
114
|
-
minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
|
|
115
|
-
maxHeight: 300,
|
|
116
|
-
HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
|
|
117
|
-
cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
|
|
118
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
|
|
119
|
-
style: {
|
|
120
|
-
marginLeft: '8px'
|
|
121
|
-
}
|
|
122
|
-
}, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
|
|
123
|
-
height: "100%"
|
|
124
|
-
})), _span2 || (_span2 = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, pageDetailsTitle))) : 'Page'
|
|
125
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
|
|
126
|
-
buttonType: "raw",
|
|
127
|
-
onClick: () => setIsOpened(prev => !prev),
|
|
128
|
-
innerRef: btnRef
|
|
129
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
|
|
130
|
-
gutter: "xxs",
|
|
131
|
-
alignItems: "center",
|
|
132
|
-
cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(0px, 70%)', 'min-content'] : ['auto', 'min-content']
|
|
133
|
-
}, void 0, /*#__PURE__*/jsxRuntime.jsxs(Grid__default["default"], {
|
|
134
|
-
alignItems: "center",
|
|
135
|
-
gutter: "xxxs",
|
|
136
|
-
ref: pageInfoRef,
|
|
137
|
-
style: {
|
|
138
|
-
gridAutoFlow: 'column'
|
|
139
|
-
},
|
|
140
|
-
children: [/*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
|
|
141
|
-
fontSize: "18px"
|
|
142
|
-
}, void 0, pageIndex + 1), " / ", pageCount]
|
|
143
|
-
}), pageDetails.length !== 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
144
|
-
children: [_PaginationSeparator3 || (_PaginationSeparator3 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
|
|
145
|
-
height: "12px",
|
|
146
|
-
ml: "8px"
|
|
147
|
-
})), /*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
|
|
148
|
-
fontSize: "13px",
|
|
149
|
-
w: detailWidth,
|
|
150
|
-
mr: "xxs",
|
|
151
|
-
display: "grid"
|
|
152
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
|
|
153
|
-
value: pageDetails[pageIndex]
|
|
154
|
-
}, void 0, pageDetails[pageIndex]), pageDetails.map(pageDetail => /*#__PURE__*/_jsx__default["default"](styled.InvisibleDetail, {
|
|
155
|
-
"data-testid": "ds-pagination-invisible-detail-for-width-calc"
|
|
156
|
-
}, void 0, pageDetail)))]
|
|
157
|
-
}), /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
|
|
158
|
-
color: ['brand-primary', '700']
|
|
159
|
-
})))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {}))]
|
|
160
|
-
});
|
|
161
|
-
};
|
|
162
|
-
|
|
163
|
-
module.exports = Paginator;
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
-
require('core-js/modules/esnext.async-iterator.map.js');
|
|
5
|
-
require('core-js/modules/esnext.iterator.map.js');
|
|
6
|
-
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
-
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
8
|
-
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
-
require('core-js/modules/esnext.iterator.reduce.js');
|
|
10
|
-
var react = require('react');
|
|
11
|
-
var memoize = require('memoize-one');
|
|
12
|
-
var dsUtilities = require('@elliemae/ds-utilities');
|
|
13
|
-
var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
|
|
14
|
-
var dsIcons = require('@elliemae/ds-icons');
|
|
15
|
-
var styled = require('../styled.js');
|
|
16
|
-
|
|
17
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
|
-
|
|
19
|
-
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
20
|
-
var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
|
|
21
|
-
|
|
22
|
-
const generateOption = value => {
|
|
23
|
-
if (typeof value === 'object') {
|
|
24
|
-
return value;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
return {
|
|
28
|
-
dsId: value.toString(),
|
|
29
|
-
value,
|
|
30
|
-
label: value.toString(),
|
|
31
|
-
type: 'single'
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const getOptions = memoize__default["default"]((step, min, max) => {
|
|
36
|
-
const options = dsUtilities.range(min, max + step, step).map(generateOption);
|
|
37
|
-
return min === 0 ? options.slice(1, options.length) : options;
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
const PerPageSelector = props => {
|
|
41
|
-
const [isOpened, setIsOpened] = react.useState(false);
|
|
42
|
-
const {
|
|
43
|
-
pageSize,
|
|
44
|
-
onPageSizeChange,
|
|
45
|
-
perPageOptions,
|
|
46
|
-
maxPerPage,
|
|
47
|
-
perPageStep,
|
|
48
|
-
minPerPage
|
|
49
|
-
} = props;
|
|
50
|
-
const options = react.useMemo(() => {
|
|
51
|
-
if (perPageOptions) return perPageOptions.map(generateOption);
|
|
52
|
-
return getOptions(perPageStep, minPerPage, maxPerPage);
|
|
53
|
-
}, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
|
|
54
|
-
const actionRef = react.useRef({});
|
|
55
|
-
const btnRef = react.useRef(null);
|
|
56
|
-
react.useEffect(() => {
|
|
57
|
-
if (isOpened) {
|
|
58
|
-
actionRef.current.setActiveDescendant(pageSize.toString());
|
|
59
|
-
actionRef.current.scrollOptionIntoView(pageSize.toString());
|
|
60
|
-
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
61
|
-
|
|
62
|
-
}, [isOpened]);
|
|
63
|
-
const width = react.useMemo(() => {
|
|
64
|
-
const maxLength = options.reduce((acc, cur) => {
|
|
65
|
-
var _length, _cur$label;
|
|
66
|
-
|
|
67
|
-
return Math.max(acc, (_length = cur === null || cur === void 0 ? void 0 : (_cur$label = cur.label) === null || _cur$label === void 0 ? void 0 : _cur$label.length) !== null && _length !== void 0 ? _length : 0);
|
|
68
|
-
}, 0);
|
|
69
|
-
return maxLength * 6 + 90;
|
|
70
|
-
}, [options]);
|
|
71
|
-
return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
|
|
72
|
-
isOpened: isOpened,
|
|
73
|
-
options: options,
|
|
74
|
-
selectedOptions: {
|
|
75
|
-
[pageSize.toString()]: true
|
|
76
|
-
},
|
|
77
|
-
onOptionClick: (_, clickedOption) => {
|
|
78
|
-
var _btnRef$current;
|
|
79
|
-
|
|
80
|
-
onPageSizeChange(clickedOption.value);
|
|
81
|
-
setIsOpened(false);
|
|
82
|
-
(_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
|
|
83
|
-
},
|
|
84
|
-
onClickOutside: () => {
|
|
85
|
-
var _btnRef$current2;
|
|
86
|
-
|
|
87
|
-
setIsOpened(false);
|
|
88
|
-
(_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
|
|
89
|
-
},
|
|
90
|
-
customOffset: [10, 2],
|
|
91
|
-
startPlacementPreference: "top-start",
|
|
92
|
-
actionRef: actionRef,
|
|
93
|
-
minWidth: width,
|
|
94
|
-
maxHeight: 300,
|
|
95
|
-
HeaderComp: () => 'Per Page'
|
|
96
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
|
|
97
|
-
style: {
|
|
98
|
-
marginLeft: '32px'
|
|
99
|
-
}
|
|
100
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
|
|
101
|
-
buttonType: "raw",
|
|
102
|
-
onClick: () => setIsOpened(prev => !prev),
|
|
103
|
-
"aria-pressed": isOpened,
|
|
104
|
-
innerRef: btnRef
|
|
105
|
-
}, void 0, pageSize, " / page", /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
|
|
106
|
-
color: ['brand-primary', '700']
|
|
107
|
-
}))));
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
module.exports = PerPageSelector;
|
package/cjs/props.js
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
6
|
-
|
|
7
|
-
const emptyFunc = () => null;
|
|
8
|
-
|
|
9
|
-
const propTypes = {
|
|
10
|
-
pageCount: dsPropsHelpers.PropTypes.number.description('How many pages are there'),
|
|
11
|
-
pageIndex: dsPropsHelpers.PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
|
|
12
|
-
canPreviousPage: dsPropsHelpers.PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
|
|
13
|
-
canNextPage: dsPropsHelpers.PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
|
|
14
|
-
pageSize: dsPropsHelpers.PropTypes.number.description('The current page size').defaultValue(10),
|
|
15
|
-
showPerPageSelector: dsPropsHelpers.PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
|
|
16
|
-
perPageOptions: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.shape({
|
|
17
|
-
dsId: dsPropsHelpers.PropTypes.string,
|
|
18
|
-
value: dsPropsHelpers.PropTypes.number,
|
|
19
|
-
label: dsPropsHelpers.PropTypes.string,
|
|
20
|
-
type: dsPropsHelpers.PropTypes.oneOf(['single'])
|
|
21
|
-
})])).description('The available options for page size').defaultValue([10]),
|
|
22
|
-
perPageStep: dsPropsHelpers.PropTypes.number.description('Step for the per page options').defaultValue(5),
|
|
23
|
-
minPerPage: dsPropsHelpers.PropTypes.number.description('Step for the per page options').defaultValue(0),
|
|
24
|
-
maxPerPage: dsPropsHelpers.PropTypes.number.description('Step for the per page options').defaultValue(100),
|
|
25
|
-
onPageSizeChange: dsPropsHelpers.PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
|
|
26
|
-
onPreviousPage: dsPropsHelpers.PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
|
|
27
|
-
onPageChange: dsPropsHelpers.PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
|
|
28
|
-
onNextPage: dsPropsHelpers.PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
|
|
29
|
-
pageDetails: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.string).description('Details to provide for each page').defaultValue([]),
|
|
30
|
-
pageDetailsTitle: dsPropsHelpers.PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue(''),
|
|
31
|
-
width: dsPropsHelpers.PropTypes.any.description('Width for the container of the pagination').defaultValue('100%')
|
|
32
|
-
};
|
|
33
|
-
const defaultProps = {
|
|
34
|
-
pageIndex: 1,
|
|
35
|
-
canPreviousPage: true,
|
|
36
|
-
canNextPage: true,
|
|
37
|
-
pageSize: 10,
|
|
38
|
-
showPerPageSelector: true,
|
|
39
|
-
perPageOptions: [10],
|
|
40
|
-
perPageStep: 5,
|
|
41
|
-
minPerPage: 0,
|
|
42
|
-
maxPerPage: 100,
|
|
43
|
-
onPageSizeChange: emptyFunc,
|
|
44
|
-
onPreviousPage: emptyFunc,
|
|
45
|
-
onNextPage: emptyFunc,
|
|
46
|
-
onPageChange: emptyFunc,
|
|
47
|
-
pageDetails: [],
|
|
48
|
-
pageDetailsTitle: '',
|
|
49
|
-
width: '100%'
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
exports.defaultProps = defaultProps;
|
|
53
|
-
exports.propTypes = propTypes;
|
package/cjs/styled.js
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
6
|
-
var Grid = require('@elliemae/ds-grid');
|
|
7
|
-
var dsButton = require('@elliemae/ds-button');
|
|
8
|
-
var styled = require('styled-components');
|
|
9
|
-
var styledComponents = require('@xstyled/styled-components');
|
|
10
|
-
var dsSystem = require('@elliemae/ds-system');
|
|
11
|
-
|
|
12
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
|
-
|
|
14
|
-
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
|
|
15
|
-
var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
|
|
16
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
17
|
-
|
|
18
|
-
var _templateObject;
|
|
19
|
-
const styledFocusCss = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ", ";\n pointer-events: none;\n z-index: 7;\n }\n"])), _ref => {
|
|
20
|
-
let {
|
|
21
|
-
theme
|
|
22
|
-
} = _ref;
|
|
23
|
-
return theme.colors.brand[700];
|
|
24
|
-
});
|
|
25
|
-
const PaginationContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
|
|
26
|
-
componentId: "sc-mxz59e-0"
|
|
27
|
-
})(["height:42px;max-width:100%;align-items:center;box-shadow:0 -1px 3px 0 rgba(0,0,0,0.5);"]);
|
|
28
|
-
const PaginationWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
29
|
-
componentId: "sc-mxz59e-1"
|
|
30
|
-
})(["display:flex;justify-content:center;align-items:center;"]);
|
|
31
|
-
const PaginationSeparator = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
|
|
32
|
-
componentId: "sc-mxz59e-2"
|
|
33
|
-
})(["background-color:", ";width:1px;height:", ";"], props => props.theme.colors.neutral[300], props => props.height || '30px');
|
|
34
|
-
const PaginationBoldText = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
35
|
-
componentId: "sc-mxz59e-3"
|
|
36
|
-
})(["font-weight:", ";", " ", " ", " ", " position:relative;"], props => props.theme.fontWeights.semibold, styledComponents.typography, styledComponents.space, styledComponents.sizing, styledComponents.layout);
|
|
37
|
-
const InvisibleDetail = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
38
|
-
componentId: "sc-mxz59e-4"
|
|
39
|
-
})(["opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;"]);
|
|
40
|
-
const PaginationDetail = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
41
|
-
componentId: "sc-mxz59e-5"
|
|
42
|
-
})(["text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
|
|
43
|
-
const PaginationDropdownButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
|
|
44
|
-
componentId: "sc-mxz59e-6"
|
|
45
|
-
})(["height:42px;display:grid;grid-auto-flow:column;justify-content:center;align-items:center;position:relative;padding-left:16px;padding-right:16px;grid-gap:8px;font-size:13px;color:", ";cursor:pointer;border-radius:0;font-weight:", ";:focus{", "}white-space:nowrap;"], props => props.theme.colors.neutral[700], props => props.theme.fontWeights.regular, styledFocusCss);
|
|
46
|
-
const PreviousNextPageButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
|
|
47
|
-
componentId: "sc-mxz59e-7"
|
|
48
|
-
})(["height:42px;display:grid;place-items:center;position:relative;padding-left:8px;padding-right:8px;border-radius:0;cursor:", ";:focus{", "}"], props => props.disabled ? 'not-allowed' : 'pointer', styledFocusCss);
|
|
49
|
-
|
|
50
|
-
exports.InvisibleDetail = InvisibleDetail;
|
|
51
|
-
exports.PaginationBoldText = PaginationBoldText;
|
|
52
|
-
exports.PaginationContainer = PaginationContainer;
|
|
53
|
-
exports.PaginationDetail = PaginationDetail;
|
|
54
|
-
exports.PaginationDropdownButton = PaginationDropdownButton;
|
|
55
|
-
exports.PaginationSeparator = PaginationSeparator;
|
|
56
|
-
exports.PaginationWrapper = PaginationWrapper;
|
|
57
|
-
exports.PreviousNextPageButton = PreviousNextPageButton;
|
package/esm/Pagination.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
-
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
-
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
-
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
-
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
-
import 'react';
|
|
8
|
-
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
|
|
9
|
-
import { PaginationContent } from './parts/PaginationContent.js';
|
|
10
|
-
import { propTypes, defaultProps } from './props.js';
|
|
11
|
-
import { jsx } from 'react/jsx-runtime';
|
|
12
|
-
|
|
13
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
-
|
|
15
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
-
|
|
17
|
-
const DSPagination = props => {
|
|
18
|
-
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
19
|
-
useValidateTypescriptPropTypes(propsWithDefault, propTypes);
|
|
20
|
-
return /*#__PURE__*/jsx(PaginationContent, _objectSpread({}, propsWithDefault));
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const DSPaginationWithSchema = describe(DSPagination).description('DSPagination');
|
|
24
|
-
DSPaginationWithSchema.propTypes = propTypes;
|
|
25
|
-
|
|
26
|
-
export { DSPagination, DSPaginationWithSchema };
|
package/esm/index.d.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/esm/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DSPagination, DSPaginationWithSchema } from './Pagination.js';
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
-
import 'react';
|
|
3
|
-
import { ChevronRight } from '@elliemae/ds-icons';
|
|
4
|
-
import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
|
|
5
|
-
import { PreviousNextPageButton } from '../styled.js';
|
|
6
|
-
|
|
7
|
-
const PageNextButton = _ref => {
|
|
8
|
-
let {
|
|
9
|
-
onNextPage,
|
|
10
|
-
canNextPage
|
|
11
|
-
} = _ref;
|
|
12
|
-
return /*#__PURE__*/_jsx(PreviousNextPageButton, {
|
|
13
|
-
onClick: () => {
|
|
14
|
-
if (canNextPage) onNextPage();
|
|
15
|
-
},
|
|
16
|
-
disabled: !canNextPage,
|
|
17
|
-
buttonType: "raw",
|
|
18
|
-
"data-testid": PAGINATION_DATA_TESTID.NEXT_BUTTON,
|
|
19
|
-
HeaderComp: () => 'Page'
|
|
20
|
-
}, void 0, /*#__PURE__*/_jsx(ChevronRight, {
|
|
21
|
-
color: canNextPage ? ['brand-primary', '700'] : ['neutral', '500']
|
|
22
|
-
}));
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export { PageNextButton };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
-
import 'react';
|
|
3
|
-
import { ChevronLeft } from '@elliemae/ds-icons';
|
|
4
|
-
import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
|
|
5
|
-
import { PreviousNextPageButton } from '../styled.js';
|
|
6
|
-
|
|
7
|
-
const PagePrevButton = _ref => {
|
|
8
|
-
let {
|
|
9
|
-
onPreviousPage,
|
|
10
|
-
canPreviousPage
|
|
11
|
-
} = _ref;
|
|
12
|
-
return /*#__PURE__*/_jsx(PreviousNextPageButton, {
|
|
13
|
-
onClick: () => {
|
|
14
|
-
if (canPreviousPage) onPreviousPage();
|
|
15
|
-
},
|
|
16
|
-
disabled: !canPreviousPage,
|
|
17
|
-
buttonType: "raw",
|
|
18
|
-
"data-testid": PAGINATION_DATA_TESTID.PREVIOUS_BUTTON
|
|
19
|
-
}, void 0, /*#__PURE__*/_jsx(ChevronLeft, {
|
|
20
|
-
color: canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']
|
|
21
|
-
}));
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export { PagePrevButton };
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
-
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
-
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
-
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
-
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
-
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
8
|
-
import 'react';
|
|
9
|
-
import Grid from '@elliemae/ds-grid';
|
|
10
|
-
import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
|
|
11
|
-
import { PaginationContainer, PaginationWrapper, PaginationSeparator } from '../styled.js';
|
|
12
|
-
import PerPageSelector from './PerPageSelector.js';
|
|
13
|
-
import Paginator from './Paginator.js';
|
|
14
|
-
import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
|
|
15
|
-
import { PagePrevButton } from './PagePrevButton.js';
|
|
16
|
-
import { PageNextButton } from './PageNextButton.js';
|
|
17
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
18
|
-
|
|
19
|
-
var _PaginationSeparator;
|
|
20
|
-
|
|
21
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
22
|
-
|
|
23
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
24
|
-
const PaginationContent = props => {
|
|
25
|
-
const {
|
|
26
|
-
pageIndex,
|
|
27
|
-
pageSize,
|
|
28
|
-
canPreviousPage,
|
|
29
|
-
canNextPage,
|
|
30
|
-
onPageSizeChange,
|
|
31
|
-
onNextPage,
|
|
32
|
-
onPreviousPage,
|
|
33
|
-
onPageChange,
|
|
34
|
-
pageCount,
|
|
35
|
-
showPerPageSelector,
|
|
36
|
-
pageDetails,
|
|
37
|
-
pageDetailsTitle,
|
|
38
|
-
perPageOptions,
|
|
39
|
-
maxPerPage,
|
|
40
|
-
perPageStep,
|
|
41
|
-
minPerPage,
|
|
42
|
-
width
|
|
43
|
-
} = props;
|
|
44
|
-
const globalAttributes = useGetGlobalAttributes(props);
|
|
45
|
-
return /*#__PURE__*/jsx(PaginationContainer, _objectSpread(_objectSpread({
|
|
46
|
-
justifyContent: "center",
|
|
47
|
-
alignItems: "center",
|
|
48
|
-
width: width.toString(),
|
|
49
|
-
"data-testid": PAGINATION_DATA_TESTID.CONTAINER,
|
|
50
|
-
cols: ['minmax(auto, 80%)']
|
|
51
|
-
}, globalAttributes), {}, {
|
|
52
|
-
children: /*#__PURE__*/_jsx(PaginationWrapper, {}, void 0, showPerPageSelector && /*#__PURE__*/jsxs(Fragment, {
|
|
53
|
-
children: [/*#__PURE__*/_jsx(PerPageSelector, {
|
|
54
|
-
pageSize: pageSize,
|
|
55
|
-
onPageSizeChange: onPageSizeChange,
|
|
56
|
-
perPageOptions: perPageOptions,
|
|
57
|
-
maxPerPage: maxPerPage,
|
|
58
|
-
perPageStep: perPageStep,
|
|
59
|
-
minPerPage: minPerPage
|
|
60
|
-
}), _PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx(PaginationSeparator, {
|
|
61
|
-
mr: 24
|
|
62
|
-
}))]
|
|
63
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
|
64
|
-
mr: "32px",
|
|
65
|
-
alignItems: "center",
|
|
66
|
-
style: {
|
|
67
|
-
gridAutoFlow: 'column'
|
|
68
|
-
}
|
|
69
|
-
}, void 0, /*#__PURE__*/_jsx(PagePrevButton, {
|
|
70
|
-
canPreviousPage: canPreviousPage,
|
|
71
|
-
onPreviousPage: onPreviousPage
|
|
72
|
-
}), /*#__PURE__*/_jsx(Paginator, {
|
|
73
|
-
pageCount: pageCount,
|
|
74
|
-
pageIndex: pageIndex,
|
|
75
|
-
onPageChange: onPageChange,
|
|
76
|
-
pageDetails: pageDetails,
|
|
77
|
-
pageDetailsTitle: pageDetailsTitle
|
|
78
|
-
}), /*#__PURE__*/_jsx(PageNextButton, {
|
|
79
|
-
canNextPage: canNextPage,
|
|
80
|
-
onNextPage: onNextPage
|
|
81
|
-
})))
|
|
82
|
-
}));
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
export { PaginationContent };
|