@elliemae/ds-pagination 2.2.2-rc.1 → 2.3.0-alpha.10

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.
Files changed (83) hide show
  1. package/dist/cjs/Pagination.js +50 -0
  2. package/dist/cjs/Pagination.js.map +7 -0
  3. package/dist/cjs/PaginationDataTestID.js +39 -0
  4. package/dist/cjs/PaginationDataTestID.js.map +7 -0
  5. package/dist/cjs/hooks/usePaginationSearch.js +60 -0
  6. package/dist/cjs/hooks/usePaginationSearch.js.map +7 -0
  7. package/dist/cjs/index.d.js +27 -0
  8. package/dist/cjs/index.d.js.map +7 -0
  9. package/dist/cjs/index.js +28 -0
  10. package/dist/cjs/index.js.map +7 -0
  11. package/dist/cjs/parts/PageNextButton.js +53 -0
  12. package/dist/cjs/parts/PageNextButton.js.map +7 -0
  13. package/dist/cjs/parts/PagePrevButton.js +52 -0
  14. package/dist/cjs/parts/PagePrevButton.js.map +7 -0
  15. package/dist/cjs/parts/PaginationContent.js +92 -0
  16. package/dist/cjs/parts/PaginationContent.js.map +7 -0
  17. package/dist/cjs/parts/Paginator.js +131 -0
  18. package/dist/cjs/parts/Paginator.js.map +7 -0
  19. package/dist/cjs/parts/PerPageSelector.js +103 -0
  20. package/dist/cjs/parts/PerPageSelector.js.map +7 -0
  21. package/dist/cjs/props.js +82 -0
  22. package/dist/cjs/props.js.map +7 -0
  23. package/dist/cjs/styled.js +113 -0
  24. package/dist/cjs/styled.js.map +7 -0
  25. package/dist/esm/Pagination.js +21 -0
  26. package/dist/esm/Pagination.js.map +7 -0
  27. package/dist/esm/PaginationDataTestID.js +10 -0
  28. package/dist/esm/PaginationDataTestID.js.map +7 -0
  29. package/{esm → dist/esm}/hooks/usePaginationSearch.js +16 -13
  30. package/dist/esm/hooks/usePaginationSearch.js.map +7 -0
  31. package/dist/esm/index.d.js +2 -0
  32. package/dist/esm/index.d.js.map +7 -0
  33. package/dist/esm/index.js +3 -0
  34. package/dist/esm/index.js.map +7 -0
  35. package/dist/esm/parts/PageNextButton.js +24 -0
  36. package/dist/esm/parts/PageNextButton.js.map +7 -0
  37. package/dist/esm/parts/PagePrevButton.js +23 -0
  38. package/dist/esm/parts/PagePrevButton.js.map +7 -0
  39. package/dist/esm/parts/PaginationContent.js +63 -0
  40. package/dist/esm/parts/PaginationContent.js.map +7 -0
  41. package/dist/esm/parts/Paginator.js +102 -0
  42. package/dist/esm/parts/Paginator.js.map +7 -0
  43. package/dist/esm/parts/PerPageSelector.js +74 -0
  44. package/dist/esm/parts/PerPageSelector.js.map +7 -0
  45. package/dist/esm/props.js +53 -0
  46. package/dist/esm/props.js.map +7 -0
  47. package/dist/esm/styled.js +84 -0
  48. package/dist/esm/styled.js.map +7 -0
  49. package/{types → dist/types}/Pagination.d.ts +0 -0
  50. package/{types → dist/types}/PaginationDataTestID.d.ts +0 -0
  51. package/{types → dist/types}/hooks/usePaginationSearch.d.ts +0 -0
  52. package/{types → dist/types}/index.d.ts +0 -0
  53. package/{types → dist/types}/parts/PageNextButton.d.ts +0 -0
  54. package/{types → dist/types}/parts/PagePrevButton.d.ts +0 -0
  55. package/{types → dist/types}/parts/PaginationContent.d.ts +0 -0
  56. package/{types → dist/types}/parts/Paginator.d.ts +0 -0
  57. package/{types → dist/types}/parts/PerPageSelector.d.ts +0 -0
  58. package/{types → dist/types}/props.d.ts +0 -0
  59. package/package.json +44 -42
  60. package/cjs/Pagination.js +0 -36
  61. package/cjs/PaginationDataTestID.js +0 -11
  62. package/cjs/hooks/usePaginationSearch.js +0 -32
  63. package/cjs/index.d.js +0 -2
  64. package/cjs/index.js +0 -10
  65. package/cjs/parts/PageNextButton.js +0 -33
  66. package/cjs/parts/PagePrevButton.js +0 -32
  67. package/cjs/parts/PaginationContent.js +0 -78
  68. package/cjs/parts/Paginator.js +0 -143
  69. package/cjs/parts/PerPageSelector.js +0 -98
  70. package/cjs/props.js +0 -53
  71. package/cjs/styled.js +0 -48
  72. package/esm/Pagination.js +0 -27
  73. package/esm/PaginationDataTestID.js +0 -7
  74. package/esm/index.d.js +0 -1
  75. package/esm/index.js +0 -1
  76. package/esm/parts/PageNextButton.js +0 -25
  77. package/esm/parts/PagePrevButton.js +0 -24
  78. package/esm/parts/PaginationContent.js +0 -69
  79. package/esm/parts/Paginator.js +0 -136
  80. package/esm/parts/PerPageSelector.js +0 -91
  81. package/esm/props.js +0 -48
  82. package/esm/styled.js +0 -34
  83. package/types/styled.d.ts +0 -14
package/cjs/Pagination.js DELETED
@@ -1,36 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/esnext.async-iterator.for-each.js');
9
- require('core-js/modules/esnext.iterator.for-each.js');
10
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
- require('react');
12
- var dsPropsHelpers = require('@elliemae/ds-props-helpers');
13
- var reactDesc = require('react-desc');
14
- var PaginationContent = require('./parts/PaginationContent.js');
15
- var props = require('./props.js');
16
- var jsxRuntime = require('react/jsx-runtime');
17
-
18
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
-
20
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
21
-
22
- 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; }
23
-
24
- 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__default["default"](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; }
25
-
26
- const DSPagination = props$1 => {
27
- const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
28
- dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.propTypes);
29
- return /*#__PURE__*/jsxRuntime.jsx(PaginationContent.PaginationContent, _objectSpread({}, propsWithDefault));
30
- };
31
-
32
- const DSPaginationWithSchema = reactDesc.describe(DSPagination).description('DSPagination');
33
- DSPaginationWithSchema.propTypes = props.propTypes;
34
-
35
- exports.DSPagination = DSPagination;
36
- exports.DSPaginationWithSchema = DSPaginationWithSchema;
@@ -1,11 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const PAGINATION_DATA_TESTID = {
6
- PREVIOUS_BUTTON: 'data-table-pagination-prev-button',
7
- NEXT_BUTTON: 'data-table-pagination-next-button',
8
- CONTAINER: 'data-table-pagination-container'
9
- };
10
-
11
- exports.PAGINATION_DATA_TESTID = PAGINATION_DATA_TESTID;
@@ -1,32 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/web.dom-collections.iterator.js');
6
- var react = require('react');
7
-
8
- const usePaginationSearch = (pageCount, actionRef) => {
9
- const [searchValue, setSearchValue] = react.useState('');
10
- const [shouldResetSearchValue, setShouldResetSearchValue] = react.useState(true);
11
- const timeoutRef = react.useRef(null);
12
- react.useEffect(() => {
13
- if (searchValue !== '' && Number.parseInt(searchValue, 10) <= pageCount) {
14
- actionRef.current.setActiveDescendant(searchValue);
15
- actionRef.current.scrollOptionIntoView(searchValue);
16
- } // eslint-disable-next-line react-hooks/exhaustive-deps
17
-
18
- }, [searchValue]);
19
- const onKeyDown = react.useCallback(e => {
20
- if (e.code.startsWith('Digit')) {
21
- if (shouldResetSearchValue) setSearchValue(e.key);else setSearchValue(prevValue => prevValue + e.key);
22
- setShouldResetSearchValue(false);
23
- clearTimeout(timeoutRef.current);
24
- timeoutRef.current = setTimeout(() => {
25
- setShouldResetSearchValue(true);
26
- }, 1000);
27
- }
28
- }, [shouldResetSearchValue]);
29
- return onKeyDown;
30
- };
31
-
32
- exports.usePaginationSearch = usePaginationSearch;
package/cjs/index.d.js DELETED
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
package/cjs/index.js DELETED
@@ -1,10 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var Pagination = require('./Pagination.js');
6
-
7
-
8
-
9
- exports.DSPagination = Pagination.DSPagination;
10
- exports.DSPaginationWithSchema = Pagination.DSPaginationWithSchema;
@@ -1,33 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('react');
7
- var dsIcons = require('@elliemae/ds-icons');
8
- var PaginationDataTestID = require('../PaginationDataTestID.js');
9
- var styled = require('../styled.js');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
14
-
15
- const PageNextButton = _ref => {
16
- let {
17
- onNextPage,
18
- canNextPage
19
- } = _ref;
20
- return /*#__PURE__*/_jsx__default["default"](styled.PreviousNextPageButton, {
21
- onClick: () => {
22
- if (canNextPage) onNextPage();
23
- },
24
- disabled: !canNextPage,
25
- buttonType: "raw",
26
- "data-testid": PaginationDataTestID.PAGINATION_DATA_TESTID.NEXT_BUTTON,
27
- HeaderComp: () => 'Page'
28
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {
29
- color: canNextPage ? ['brand-primary', '700'] : ['neutral', '500']
30
- }));
31
- };
32
-
33
- exports.PageNextButton = PageNextButton;
@@ -1,32 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('react');
7
- var dsIcons = require('@elliemae/ds-icons');
8
- var PaginationDataTestID = require('../PaginationDataTestID.js');
9
- var styled = require('../styled.js');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
14
-
15
- const PagePrevButton = _ref => {
16
- let {
17
- onPreviousPage,
18
- canPreviousPage
19
- } = _ref;
20
- return /*#__PURE__*/_jsx__default["default"](styled.PreviousNextPageButton, {
21
- onClick: () => {
22
- if (canPreviousPage) onPreviousPage();
23
- },
24
- disabled: !canPreviousPage,
25
- buttonType: "raw",
26
- "data-testid": PaginationDataTestID.PAGINATION_DATA_TESTID.PREVIOUS_BUTTON
27
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {
28
- color: canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']
29
- }));
30
- };
31
-
32
- exports.PagePrevButton = PagePrevButton;
@@ -1,78 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('react');
7
- var Grid = require('@elliemae/ds-grid');
8
- var styled = require('../styled.js');
9
- var PerPageSelector = require('./PerPageSelector.js');
10
- var Paginator = require('./Paginator.js');
11
- var PaginationDataTestID = require('../PaginationDataTestID.js');
12
- var PagePrevButton = require('./PagePrevButton.js');
13
- var PageNextButton = require('./PageNextButton.js');
14
- var jsxRuntime = require('react/jsx-runtime');
15
-
16
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
-
18
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
19
- var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
20
-
21
- var _PaginationSeparator;
22
- const PaginationContent = _ref => {
23
- let {
24
- pageIndex,
25
- pageSize,
26
- canPreviousPage,
27
- canNextPage,
28
- onPageSizeChange,
29
- onNextPage,
30
- onPreviousPage,
31
- onPageChange,
32
- pageCount,
33
- showPerPageSelector,
34
- pageDetails,
35
- pageDetailsTitle,
36
- perPageOptions,
37
- maxPerPage,
38
- perPageStep,
39
- minPerPage,
40
- width
41
- } = _ref;
42
- return /*#__PURE__*/_jsx__default["default"](styled.PaginationContainer, {
43
- justifyContent: "center",
44
- alignItems: "center",
45
- width: width,
46
- "data-testid": PaginationDataTestID.PAGINATION_DATA_TESTID.CONTAINER
47
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationWrapper, {}, void 0, showPerPageSelector && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
48
- children: [/*#__PURE__*/_jsx__default["default"](PerPageSelector, {
49
- pageSize: pageSize,
50
- onPageSizeChange: onPageSizeChange,
51
- perPageOptions: perPageOptions,
52
- maxPerPage: maxPerPage,
53
- perPageStep: perPageStep,
54
- minPerPage: minPerPage
55
- }), _PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
56
- mr: 24
57
- }))]
58
- }), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
59
- cols: ['auto', 'auto', 'auto', 'auto', 'auto'],
60
- mr: "32px",
61
- alignItems: "center"
62
- }, void 0, /*#__PURE__*/_jsx__default["default"](PagePrevButton.PagePrevButton, {
63
- canPreviousPage: canPreviousPage,
64
- onPreviousPage: onPreviousPage
65
- }), /*#__PURE__*/_jsx__default["default"](Paginator, {
66
- pageCount: pageCount,
67
- pageIndex: pageIndex,
68
- onNextPage: onNextPage,
69
- onPageChange: onPageChange,
70
- pageDetails: pageDetails,
71
- pageDetailsTitle: pageDetailsTitle
72
- }), /*#__PURE__*/_jsx__default["default"](PageNextButton.PageNextButton, {
73
- canNextPage: canNextPage,
74
- onNextPage: onNextPage
75
- }))));
76
- };
77
-
78
- exports.PaginationContent = PaginationContent;
@@ -1,143 +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
- var react = require('react');
8
- var dsIcons = require('@elliemae/ds-icons');
9
- var dsUtilities = require('@elliemae/ds-utilities');
10
- var Grid = require('@elliemae/ds-grid');
11
- var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
12
- var styled = require('../styled.js');
13
- var usePaginationSearch = require('../hooks/usePaginationSearch.js');
14
- var jsxRuntime = require('react/jsx-runtime');
15
-
16
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
-
18
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
19
- var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
20
-
21
- var _div, _PaginationSeparator, _PaginationSeparator2, _PaginationSeparator3, _PaginationSeparator4;
22
-
23
- const Paginator = props => {
24
- var _span2;
25
-
26
- const {
27
- pageIndex,
28
- pageCount,
29
- onPageChange,
30
- pageDetails,
31
- pageDetailsTitle
32
- } = props;
33
- const [isOpened, setIsOpened] = react.useState(false);
34
- const btnRef = react.useRef(null);
35
- const pageInfoRef = react.useRef(null);
36
- const {
37
- width: btnWidth
38
- } = dsUtilities.useOnElementResize(btnRef);
39
- const {
40
- width: txtWidth
41
- } = dsUtilities.useOnElementResize(pageInfoRef);
42
- const options = react.useMemo(() => new Array(pageCount).fill(0).map((_, index) => {
43
- var _span;
44
-
45
- const option = {
46
- dsId: (index + 1).toString(),
47
- label: (index + 1).toString(),
48
- value: index + 1,
49
- type: 'single'
50
- };
51
-
52
- if (pageDetails.length) {
53
- option.render = () => /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
54
- cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
55
- gutter: "xxs",
56
- alignItems: "center"
57
- }, void 0, pageIndex === index ? /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
58
- size: "s",
59
- color: ['brand-primary', '600']
60
- }) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, index + 1)), /*#__PURE__*/_jsx__default["default"]("span", {
61
- style: {
62
- whiteSpace: 'nowrap',
63
- textOverflow: 'ellipsis',
64
- overflow: 'hidden'
65
- }
66
- }, void 0, pageDetails[index]));
67
- }
68
-
69
- return option;
70
- }), [pageCount, pageDetails, pageIndex, txtWidth]);
71
- const actionRef = react.useRef({});
72
- react.useEffect(() => {
73
- if (isOpened) {
74
- actionRef.current.setActiveDescendant((pageIndex + 1).toString());
75
- actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());
76
- } // eslint-disable-next-line react-hooks/exhaustive-deps
77
-
78
- }, [isOpened]);
79
- const onKeyDown = usePaginationSearch.usePaginationSearch(pageCount, actionRef);
80
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
81
- children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {})), /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
82
- isOpened: isOpened,
83
- options: options,
84
- selectedOptions: {
85
- [(pageIndex + 1).toString()]: true
86
- },
87
- onOptionClick: (_, clickedOption) => {
88
- onPageChange(clickedOption.value);
89
- setIsOpened(false);
90
- btnRef.current.focus();
91
- },
92
- onClickOutside: () => {
93
- setIsOpened(false);
94
- btnRef.current.focus();
95
- },
96
- customOffset: [0, 2],
97
- startPlacementPreference: "top-end",
98
- actionRef: actionRef,
99
- onKeyDown: onKeyDown,
100
- minWidth: btnWidth + 23,
101
- maxHeight: 300,
102
- HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
103
- cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
104
- }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
105
- style: {
106
- marginLeft: '8px'
107
- }
108
- }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
109
- height: "100%"
110
- })), _span2 || (_span2 = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, pageDetailsTitle))) : 'Page'
111
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
112
- buttonType: "raw",
113
- onClick: () => setIsOpened(true),
114
- innerRef: btnRef
115
- }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
116
- style: {
117
- display: 'flex',
118
- gridGap: '8px',
119
- alignItems: 'center'
120
- }
121
- }, void 0, /*#__PURE__*/jsxRuntime.jsxs(Grid__default["default"], {
122
- cols: ['auto', 'auto', 'auto'],
123
- alignItems: "center",
124
- gutter: "xxxs",
125
- ref: pageInfoRef,
126
- children: [/*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
127
- fontSize: "18px"
128
- }, void 0, pageIndex + 1), " / ", pageCount]
129
- }), pageDetails.length !== 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
130
- children: [_PaginationSeparator3 || (_PaginationSeparator3 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
131
- height: "12px",
132
- ml: "8px"
133
- })), /*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
134
- fontSize: "13px",
135
- mr: "8px"
136
- }, void 0, pageDetails[pageIndex])]
137
- }), /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
138
- color: ['brand-primary', '700']
139
- })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {}))]
140
- });
141
- };
142
-
143
- module.exports = Paginator;
@@ -1,98 +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
- var react = require('react');
8
- var memoize = require('memoize-one');
9
- var dsUtilities = require('@elliemae/ds-utilities');
10
- var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
11
- var dsIcons = require('@elliemae/ds-icons');
12
- var styled = require('../styled.js');
13
-
14
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
-
16
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
17
- var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
18
-
19
- const generateOption = value => {
20
- if (typeof value === 'object') {
21
- return value;
22
- }
23
-
24
- return {
25
- dsId: value.toString(),
26
- value,
27
- label: value.toString(),
28
- type: 'single'
29
- };
30
- };
31
-
32
- const getOptions = memoize__default["default"]((step, min, max) => {
33
- const options = dsUtilities.range(min, max + step, step).map(generateOption);
34
- return min === 0 ? options.slice(1, options.length) : options;
35
- });
36
-
37
- const PerPageSelector = props => {
38
- const [isOpened, setIsOpened] = react.useState(false);
39
- const {
40
- pageSize,
41
- onPageSizeChange,
42
- perPageOptions,
43
- maxPerPage,
44
- perPageStep,
45
- minPerPage
46
- } = props;
47
- const options = react.useMemo(() => {
48
- if (perPageOptions) return perPageOptions.map(generateOption);
49
- return getOptions(perPageStep, minPerPage, maxPerPage);
50
- }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
51
- const actionRef = react.useRef({});
52
- const btnRef = react.useRef(null);
53
- react.useEffect(() => {
54
- if (isOpened) {
55
- actionRef.current.setActiveDescendant(pageSize.toString());
56
- actionRef.current.scrollOptionIntoView(pageSize.toString());
57
- } // eslint-disable-next-line react-hooks/exhaustive-deps
58
-
59
- }, [isOpened]);
60
- const {
61
- width
62
- } = dsUtilities.useOnElementResize(btnRef);
63
- return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
64
- isOpened: isOpened,
65
- options: options,
66
- selectedOptions: {
67
- [pageSize.toString()]: true
68
- },
69
- onOptionClick: (_, clickedOption) => {
70
- onPageSizeChange(clickedOption.value);
71
- setIsOpened(false);
72
- btnRef.current.focus();
73
- },
74
- onClickOutside: () => {
75
- setIsOpened(false);
76
- btnRef.current.focus();
77
- },
78
- customOffset: [0, 2],
79
- startPlacementPreference: "top-end",
80
- actionRef: actionRef,
81
- minWidth: width + 25,
82
- maxHeight: 300,
83
- HeaderComp: () => 'Per Page'
84
- }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
85
- style: {
86
- marginLeft: '32px'
87
- }
88
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
89
- buttonType: "raw",
90
- onClick: () => setIsOpened(true),
91
- "aria-pressed": isOpened,
92
- innerRef: btnRef
93
- }, void 0, pageSize, " / page", /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
94
- color: ['brand-primary', '700']
95
- }))));
96
- };
97
-
98
- 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 reactDesc = require('react-desc');
6
-
7
- const emptyFunc = () => null;
8
-
9
- const propTypes = {
10
- pageCount: reactDesc.PropTypes.number.description('How many pages are there'),
11
- pageIndex: reactDesc.PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
12
- canPreviousPage: reactDesc.PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
13
- canNextPage: reactDesc.PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
14
- pageSize: reactDesc.PropTypes.number.description('The current page size').defaultValue(10),
15
- showPerPageSelector: reactDesc.PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
16
- perPageOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.shape({
17
- dsId: reactDesc.PropTypes.string,
18
- value: reactDesc.PropTypes.number,
19
- label: reactDesc.PropTypes.string,
20
- type: reactDesc.PropTypes.oneOf(['single'])
21
- })])).description('The available options for page size').defaultValue([10]),
22
- perPageStep: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(5),
23
- minPerPage: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(0),
24
- maxPerPage: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(100),
25
- onPageSizeChange: reactDesc.PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
26
- onPreviousPage: reactDesc.PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
27
- onPageChange: reactDesc.PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
28
- onNextPage: reactDesc.PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
29
- pageDetails: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Details to provide for each page').defaultValue([]),
30
- pageDetailsTitle: reactDesc.PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue(''),
31
- width: reactDesc.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,48 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var Grid = require('@elliemae/ds-grid');
6
- var dsButton = require('@elliemae/ds-button');
7
- var styled = require('styled-components');
8
- var styledComponents = require('@xstyled/styled-components');
9
-
10
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
-
12
- var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
13
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
-
15
- const sizeToCss = size => typeof size === 'number' && !Number.isNaN(size) ? "".concat(size, "px") : size;
16
-
17
- const styledFocusCss = _ref => {
18
- let {
19
- theme
20
- } = _ref;
21
- return "\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 ".concat(theme.colors.brand[700], ";\n pointer-events: none;\n z-index: 7;\n}");
22
- };
23
-
24
- const PaginationContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
25
- componentId: "sc-mxz59e-0"
26
- })(["padding:0 ", ";height:42px;width:", ";max-width:100%;align-items:center;box-shadow:0 -1px 3px 0 rgba(0,0,0,0.5);"], props => props.theme.space.xs, props => sizeToCss(props.width) || '100%');
27
- const PaginationWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
28
- componentId: "sc-mxz59e-1"
29
- })(["display:flex;justify-content:center;align-items:center;margin:0 32px;"]);
30
- const PaginationSeparator = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
31
- componentId: "sc-mxz59e-2"
32
- })(["background-color:", ";width:1px;height:", ";"], props => props.theme.colors.neutral[300], props => props.height || '30px');
33
- const PaginationBoldText = /*#__PURE__*/styled__default["default"].span.withConfig({
34
- componentId: "sc-mxz59e-3"
35
- })(["font-weight:", ";", " ", " position:relative;"], props => props.theme.fontWeights.semibold, styledComponents.typography, styledComponents.space);
36
- const PaginationDropdownButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
37
- componentId: "sc-mxz59e-4"
38
- })(["height:42px;display:flex;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{", "}"], props => props.theme.colors.neutral[700], props => props.theme.fontWeights.regular, styledFocusCss);
39
- const PreviousNextPageButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
40
- componentId: "sc-mxz59e-5"
41
- })(["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);
42
-
43
- exports.PaginationBoldText = PaginationBoldText;
44
- exports.PaginationContainer = PaginationContainer;
45
- exports.PaginationDropdownButton = PaginationDropdownButton;
46
- exports.PaginationSeparator = PaginationSeparator;
47
- exports.PaginationWrapper = PaginationWrapper;
48
- exports.PreviousNextPageButton = PreviousNextPageButton;
package/esm/Pagination.js DELETED
@@ -1,27 +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 { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
9
- import { describe } from 'react-desc';
10
- import { PaginationContent } from './parts/PaginationContent.js';
11
- import { propTypes, defaultProps } from './props.js';
12
- import { jsx } from 'react/jsx-runtime';
13
-
14
- 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; }
15
-
16
- 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; }
17
-
18
- const DSPagination = props => {
19
- const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
20
- useValidateTypescriptPropTypes(propsWithDefault, propTypes);
21
- return /*#__PURE__*/jsx(PaginationContent, _objectSpread({}, propsWithDefault));
22
- };
23
-
24
- const DSPaginationWithSchema = describe(DSPagination).description('DSPagination');
25
- DSPaginationWithSchema.propTypes = propTypes;
26
-
27
- export { DSPagination, DSPaginationWithSchema };
@@ -1,7 +0,0 @@
1
- const PAGINATION_DATA_TESTID = {
2
- PREVIOUS_BUTTON: 'data-table-pagination-prev-button',
3
- NEXT_BUTTON: 'data-table-pagination-next-button',
4
- CONTAINER: 'data-table-pagination-container'
5
- };
6
-
7
- export { PAGINATION_DATA_TESTID };
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 };