UNPKG

5.73 kBJavaScriptView Raw
1"use strict";
2
3var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5Object.defineProperty(exports, "__esModule", {
6 value: true
7});
8exports.default = usePagination;
9
10var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
12var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
14var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
16var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
18var _utils = require("@material-ui/core/utils");
19
20function usePagination() {
21 var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
22 // keep default values in sync with @default tags in Pagination.propTypes
23 var _props$boundaryCount = props.boundaryCount,
24 boundaryCount = _props$boundaryCount === void 0 ? 1 : _props$boundaryCount,
25 _props$componentName = props.componentName,
26 componentName = _props$componentName === void 0 ? 'usePagination' : _props$componentName,
27 _props$count = props.count,
28 count = _props$count === void 0 ? 1 : _props$count,
29 _props$defaultPage = props.defaultPage,
30 defaultPage = _props$defaultPage === void 0 ? 1 : _props$defaultPage,
31 _props$disabled = props.disabled,
32 disabled = _props$disabled === void 0 ? false : _props$disabled,
33 _props$hideNextButton = props.hideNextButton,
34 hideNextButton = _props$hideNextButton === void 0 ? false : _props$hideNextButton,
35 _props$hidePrevButton = props.hidePrevButton,
36 hidePrevButton = _props$hidePrevButton === void 0 ? false : _props$hidePrevButton,
37 handleChange = props.onChange,
38 pageProp = props.page,
39 _props$showFirstButto = props.showFirstButton,
40 showFirstButton = _props$showFirstButto === void 0 ? false : _props$showFirstButto,
41 _props$showLastButton = props.showLastButton,
42 showLastButton = _props$showLastButton === void 0 ? false : _props$showLastButton,
43 _props$siblingCount = props.siblingCount,
44 siblingCount = _props$siblingCount === void 0 ? 1 : _props$siblingCount,
45 other = (0, _objectWithoutProperties2.default)(props, ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"]);
46
47 var _useControlled = (0, _utils.useControlled)({
48 controlled: pageProp,
49 default: defaultPage,
50 name: componentName,
51 state: 'page'
52 }),
53 _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
54 page = _useControlled2[0],
55 setPageState = _useControlled2[1];
56
57 var handleClick = function handleClick(event, value) {
58 if (!pageProp) {
59 setPageState(value);
60 }
61
62 if (handleChange) {
63 handleChange(event, value);
64 }
65 }; // https://dev.to/namirsab/comment/2050
66
67
68 var range = function range(start, end) {
69 var length = end - start + 1;
70 return Array.from({
71 length: length
72 }, function (_, i) {
73 return start + i;
74 });
75 };
76
77 var startPages = range(1, Math.min(boundaryCount, count));
78 var endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
79 var siblingsStart = Math.max(Math.min( // Natural start
80 page - siblingCount, // Lower boundary when page is high
81 count - boundaryCount - siblingCount * 2 - 1), // Greater than startPages
82 boundaryCount + 2);
83 var siblingsEnd = Math.min(Math.max( // Natural end
84 page + siblingCount, // Upper boundary when page is low
85 boundaryCount + siblingCount * 2 + 2), // Less than endPages
86 endPages[0] - 2); // Basic list of items to render
87 // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
88
89 var itemList = [].concat((0, _toConsumableArray2.default)(showFirstButton ? ['first'] : []), (0, _toConsumableArray2.default)(hidePrevButton ? [] : ['previous']), (0, _toConsumableArray2.default)(startPages), (0, _toConsumableArray2.default)(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []), (0, _toConsumableArray2.default)(range(siblingsStart, siblingsEnd)), (0, _toConsumableArray2.default)(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), (0, _toConsumableArray2.default)(endPages), (0, _toConsumableArray2.default)(hideNextButton ? [] : ['next']), (0, _toConsumableArray2.default)(showLastButton ? ['last'] : [])); // Map the button type to its page number
90
91 var buttonPage = function buttonPage(type) {
92 switch (type) {
93 case 'first':
94 return 1;
95
96 case 'previous':
97 return page - 1;
98
99 case 'next':
100 return page + 1;
101
102 case 'last':
103 return count;
104
105 default:
106 return null;
107 }
108 }; // Convert the basic item list to PaginationItem props objects
109
110
111 var items = itemList.map(function (item) {
112 return typeof item === 'number' ? {
113 onClick: function onClick(event) {
114 handleClick(event, item);
115 },
116 type: 'page',
117 page: item,
118 selected: item === page,
119 disabled: disabled,
120 'aria-current': item === page ? 'true' : undefined
121 } : {
122 onClick: function onClick(event) {
123 handleClick(event, buttonPage(item));
124 },
125 type: item,
126 page: buttonPage(item),
127 selected: false,
128 disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? page >= count : page <= 1)
129 };
130 });
131 return (0, _extends2.default)({
132 items: items
133 }, other);
134}
\No newline at end of file