@atlaskit/pagination 14.2.7 → 14.2.8
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/CHANGELOG.md +6 -0
- package/dist/cjs/index.js +0 -2
- package/dist/cjs/internal/components/navigator.js +2 -6
- package/dist/cjs/internal/components/page.js +0 -5
- package/dist/cjs/internal/components/render-ellipsis.js +1 -6
- package/dist/cjs/internal/utils/collapse-range.js +10 -21
- package/dist/cjs/pagination.js +29 -61
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/internal/components/navigator.js +2 -1
- package/dist/es2019/internal/utils/collapse-range.js +11 -15
- package/dist/es2019/pagination.js +1 -7
- package/dist/es2019/version.json +1 -1
- package/dist/esm/internal/components/navigator.js +2 -1
- package/dist/esm/internal/components/render-ellipsis.js +1 -1
- package/dist/esm/internal/utils/collapse-range.js +13 -19
- package/dist/esm/pagination.js +29 -40
- package/dist/esm/version.json +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
package/dist/cjs/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
|
|
|
11
10
|
return _pagination.default;
|
|
12
11
|
}
|
|
13
12
|
});
|
|
14
|
-
|
|
15
13
|
var _pagination = _interopRequireDefault(require("./pagination"));
|
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = Navigator;
|
|
9
|
-
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireDefault(require("react"));
|
|
13
|
-
|
|
14
10
|
var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
|
|
15
|
-
|
|
16
11
|
function Navigator(props) {
|
|
17
|
-
return /*#__PURE__*/_react.default.createElement(_standardButton.default
|
|
12
|
+
return /*#__PURE__*/_react.default.createElement(_standardButton.default
|
|
13
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
18
14
|
, (0, _extends2.default)({}, props, {
|
|
19
15
|
appearance: "subtle"
|
|
20
16
|
}));
|
|
@@ -1,18 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = Page;
|
|
9
|
-
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireDefault(require("react"));
|
|
13
|
-
|
|
14
10
|
var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
|
|
15
|
-
|
|
16
11
|
function Page(props) {
|
|
17
12
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
18
13
|
return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, props, {
|
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = renderEllipsis;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
|
|
13
|
-
|
|
14
10
|
var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
|
|
15
|
-
|
|
16
11
|
function renderEllipsis(_ref) {
|
|
17
12
|
var key = _ref.key,
|
|
18
|
-
|
|
13
|
+
testId = _ref.testId;
|
|
19
14
|
return /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
20
15
|
as: "span",
|
|
21
16
|
testId: testId,
|
|
@@ -1,28 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
|
-
|
|
12
9
|
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
|
|
13
|
-
|
|
14
10
|
// TODO: comma needed after generic declaration below, or the .tsx file thinks
|
|
15
11
|
// it is a JSX element. Tidy up in a future refactor.
|
|
16
12
|
var collapseRange = function collapseRange(pages, current, _ref, testId) {
|
|
17
13
|
var max = _ref.max,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var total = pages.length;
|
|
21
|
-
|
|
22
|
-
var needEllipsis = total > max;
|
|
23
|
-
|
|
24
|
-
var hasStartEllipsis = needEllipsis && max - 4 < current;
|
|
25
|
-
|
|
14
|
+
ellipsis = _ref.ellipsis,
|
|
15
|
+
transform = _ref.transform;
|
|
16
|
+
var total = pages.length;
|
|
17
|
+
// only need ellipsis if we have more pages than we can display
|
|
18
|
+
var needEllipsis = total > max;
|
|
19
|
+
// show start ellipsis if the current page is further away than max - 4 from the first page
|
|
20
|
+
var hasStartEllipsis = needEllipsis && max - 4 < current;
|
|
21
|
+
// show end ellipsis if the current page is further than total - max + 3 from the last page
|
|
26
22
|
var hasEndEllipsis = needEllipsis && current < total - max + 3;
|
|
27
23
|
var getPageComponents = (0, _memoizeOne.default)(function () {
|
|
28
24
|
var startIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
@@ -31,30 +27,24 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
|
|
|
31
27
|
return transform(page, startIndex + index, testId);
|
|
32
28
|
});
|
|
33
29
|
});
|
|
34
|
-
|
|
35
30
|
if (!needEllipsis) {
|
|
36
31
|
return getPageComponents(0, total);
|
|
37
32
|
}
|
|
38
|
-
|
|
39
33
|
if (hasStartEllipsis && !hasEndEllipsis) {
|
|
40
34
|
var _pageCount = max - 2;
|
|
41
|
-
|
|
42
35
|
return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, 1)), [ellipsis({
|
|
43
36
|
key: 'ellipsis-1',
|
|
44
37
|
testId: "".concat(testId, "-ellipsis")
|
|
45
38
|
})], (0, _toConsumableArray2.default)(getPageComponents(total - _pageCount)));
|
|
46
39
|
}
|
|
47
|
-
|
|
48
40
|
if (!hasStartEllipsis && hasEndEllipsis) {
|
|
49
41
|
var _pageCount2 = max - 2;
|
|
50
|
-
|
|
51
42
|
return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, _pageCount2)), [ellipsis({
|
|
52
43
|
key: 'ellipsis-1',
|
|
53
44
|
testId: "".concat(testId, "-ellipsis")
|
|
54
45
|
})], (0, _toConsumableArray2.default)(getPageComponents(total - 1)));
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
|
|
46
|
+
}
|
|
47
|
+
// we have both start and end ellipsis
|
|
58
48
|
var pageCount = max - 4;
|
|
59
49
|
return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, 1)), [ellipsis({
|
|
60
50
|
key: 'ellipsis-1',
|
|
@@ -64,6 +54,5 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
|
|
|
64
54
|
testId: "".concat(testId, "-ellipsis")
|
|
65
55
|
})], (0, _toConsumableArray2.default)(getPageComponents(total - 1)));
|
|
66
56
|
};
|
|
67
|
-
|
|
68
57
|
var _default = collapseRange;
|
|
69
58
|
exports.default = _default;
|
package/dist/cjs/pagination.js
CHANGED
|
@@ -1,99 +1,72 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = void 0;
|
|
11
|
-
|
|
12
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
12
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
19
|
-
|
|
20
13
|
var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
|
|
21
|
-
|
|
22
14
|
var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
|
|
23
|
-
|
|
24
15
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
25
|
-
|
|
26
16
|
var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
|
|
27
|
-
|
|
28
17
|
var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
|
|
29
|
-
|
|
30
18
|
var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
|
|
31
|
-
|
|
32
19
|
var _navigator = _interopRequireDefault(require("./internal/components/navigator"));
|
|
33
|
-
|
|
34
20
|
var _page = _interopRequireDefault(require("./internal/components/page"));
|
|
35
|
-
|
|
36
21
|
var _renderEllipsis = _interopRequireDefault(require("./internal/components/render-ellipsis"));
|
|
37
|
-
|
|
38
22
|
var _constants = require("./internal/constants");
|
|
39
|
-
|
|
40
23
|
var _collapseRange = _interopRequireDefault(require("./internal/utils/collapse-range"));
|
|
41
|
-
|
|
42
24
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
43
|
-
|
|
44
25
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
45
|
-
|
|
46
26
|
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; }
|
|
47
|
-
|
|
48
27
|
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) { (0, _defineProperty2.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; }
|
|
49
|
-
|
|
50
28
|
var analyticsAttributes = {
|
|
51
29
|
componentName: 'pagination',
|
|
52
30
|
packageName: "@atlaskit/pagination",
|
|
53
|
-
packageVersion: "14.2.
|
|
31
|
+
packageVersion: "14.2.8"
|
|
54
32
|
};
|
|
55
|
-
|
|
56
33
|
function InnerPagination(_ref, ref) {
|
|
57
34
|
var _ref$components = _ref.components,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
35
|
+
components = _ref$components === void 0 ? _constants.emptyObject : _ref$components,
|
|
36
|
+
_ref$defaultSelectedI = _ref.defaultSelectedIndex,
|
|
37
|
+
defaultSelectedIndex = _ref$defaultSelectedI === void 0 ? 0 : _ref$defaultSelectedI,
|
|
38
|
+
selectedIndex = _ref.selectedIndex,
|
|
39
|
+
_ref$label = _ref.label,
|
|
40
|
+
label = _ref$label === void 0 ? 'pagination' : _ref$label,
|
|
41
|
+
_ref$previousLabel = _ref.previousLabel,
|
|
42
|
+
previousLabel = _ref$previousLabel === void 0 ? 'previous' : _ref$previousLabel,
|
|
43
|
+
_ref$nextLabel = _ref.nextLabel,
|
|
44
|
+
nextLabel = _ref$nextLabel === void 0 ? 'next' : _ref$nextLabel,
|
|
45
|
+
_ref$style = _ref.style,
|
|
46
|
+
style = _ref$style === void 0 ? _constants.emptyObject : _ref$style,
|
|
47
|
+
_ref$max = _ref.max,
|
|
48
|
+
max = _ref$max === void 0 ? 7 : _ref$max,
|
|
49
|
+
_ref$onChange = _ref.onChange,
|
|
50
|
+
onChange = _ref$onChange === void 0 ? _noop.default : _ref$onChange,
|
|
51
|
+
pages = _ref.pages,
|
|
52
|
+
getPageLabel = _ref.getPageLabel,
|
|
53
|
+
_ref$renderEllipsis = _ref.renderEllipsis,
|
|
54
|
+
renderEllipsis = _ref$renderEllipsis === void 0 ? _renderEllipsis.default : _ref$renderEllipsis,
|
|
55
|
+
analyticsContext = _ref.analyticsContext,
|
|
56
|
+
testId = _ref.testId;
|
|
81
57
|
var _useControlled = (0, _useControlled3.default)(selectedIndex, function () {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
58
|
+
return defaultSelectedIndex || 0;
|
|
59
|
+
}),
|
|
60
|
+
_useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
|
|
61
|
+
selectedIndexValue = _useControlled2[0],
|
|
62
|
+
setSelectedIndexValue = _useControlled2[1];
|
|
88
63
|
var onChangeWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
|
|
89
64
|
fn: function fn(value, analyticsEvent) {
|
|
90
65
|
var event = value.event,
|
|
91
|
-
|
|
92
|
-
|
|
66
|
+
selectedPageIndex = value.selectedPageIndex;
|
|
93
67
|
if (selectedIndex === undefined) {
|
|
94
68
|
setSelectedIndexValue(selectedPageIndex);
|
|
95
69
|
}
|
|
96
|
-
|
|
97
70
|
if (onChange) {
|
|
98
71
|
onChange(event, pages[selectedPageIndex], analyticsEvent);
|
|
99
72
|
}
|
|
@@ -102,7 +75,6 @@ function InnerPagination(_ref, ref) {
|
|
|
102
75
|
actionSubject: 'pageNumber',
|
|
103
76
|
analyticsData: analyticsContext
|
|
104
77
|
}, analyticsAttributes));
|
|
105
|
-
|
|
106
78
|
var transform = function transform(page, currPageIndex, testId) {
|
|
107
79
|
var selectedPage = pages[selectedIndexValue];
|
|
108
80
|
return /*#__PURE__*/_react.default.createElement(_page.default, {
|
|
@@ -119,7 +91,6 @@ function InnerPagination(_ref, ref) {
|
|
|
119
91
|
testId: testId && "".concat(testId, "--").concat(page === selectedPage ? 'current-' : '', "page-").concat(currPageIndex)
|
|
120
92
|
}, getPageLabel ? getPageLabel(page, currPageIndex) : page);
|
|
121
93
|
};
|
|
122
|
-
|
|
123
94
|
return /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
124
95
|
testId: testId,
|
|
125
96
|
UNSAFE_style: style,
|
|
@@ -167,9 +138,6 @@ function InnerPagination(_ref, ref) {
|
|
|
167
138
|
testId: testId && "".concat(testId, "--right-navigator")
|
|
168
139
|
})));
|
|
169
140
|
}
|
|
170
|
-
|
|
171
141
|
var Pagination = /*#__PURE__*/(0, _react.forwardRef)(InnerPagination);
|
|
172
|
-
|
|
173
142
|
var _default = /*#__PURE__*/(0, _react.memo)(Pagination);
|
|
174
|
-
|
|
175
143
|
exports.default = _default;
|
package/dist/cjs/version.json
CHANGED
|
@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import Button from '@atlaskit/button/standard-button';
|
|
4
4
|
export default function Navigator(props) {
|
|
5
|
-
return /*#__PURE__*/React.createElement(Button
|
|
5
|
+
return /*#__PURE__*/React.createElement(Button
|
|
6
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
6
7
|
, _extends({}, props, {
|
|
7
8
|
appearance: "subtle"
|
|
8
9
|
}));
|
|
@@ -1,26 +1,25 @@
|
|
|
1
|
-
import memoizeOne from 'memoize-one';
|
|
2
|
-
// it is a JSX element. Tidy up in a future refactor.
|
|
1
|
+
import memoizeOne from 'memoize-one';
|
|
3
2
|
|
|
3
|
+
// TODO: comma needed after generic declaration below, or the .tsx file thinks
|
|
4
|
+
// it is a JSX element. Tidy up in a future refactor.
|
|
4
5
|
const collapseRange = (pages, current, {
|
|
5
6
|
max,
|
|
6
7
|
ellipsis,
|
|
7
8
|
transform
|
|
8
9
|
}, testId) => {
|
|
9
|
-
const total = pages.length;
|
|
10
|
-
|
|
11
|
-
const needEllipsis = total > max;
|
|
12
|
-
|
|
13
|
-
const hasStartEllipsis = needEllipsis && max - 4 < current;
|
|
14
|
-
|
|
10
|
+
const total = pages.length;
|
|
11
|
+
// only need ellipsis if we have more pages than we can display
|
|
12
|
+
const needEllipsis = total > max;
|
|
13
|
+
// show start ellipsis if the current page is further away than max - 4 from the first page
|
|
14
|
+
const hasStartEllipsis = needEllipsis && max - 4 < current;
|
|
15
|
+
// show end ellipsis if the current page is further than total - max + 3 from the last page
|
|
15
16
|
const hasEndEllipsis = needEllipsis && current < total - max + 3;
|
|
16
17
|
const getPageComponents = memoizeOne((startIndex = 0, lastIndex = total) => {
|
|
17
18
|
return pages.slice(startIndex, lastIndex).map((page, index) => transform(page, startIndex + index, testId));
|
|
18
19
|
});
|
|
19
|
-
|
|
20
20
|
if (!needEllipsis) {
|
|
21
21
|
return getPageComponents(0, total);
|
|
22
22
|
}
|
|
23
|
-
|
|
24
23
|
if (hasStartEllipsis && !hasEndEllipsis) {
|
|
25
24
|
const pageCount = max - 2;
|
|
26
25
|
return [...getPageComponents(0, 1), ellipsis({
|
|
@@ -28,16 +27,14 @@ const collapseRange = (pages, current, {
|
|
|
28
27
|
testId: `${testId}-ellipsis`
|
|
29
28
|
}), ...getPageComponents(total - pageCount)];
|
|
30
29
|
}
|
|
31
|
-
|
|
32
30
|
if (!hasStartEllipsis && hasEndEllipsis) {
|
|
33
31
|
const pageCount = max - 2;
|
|
34
32
|
return [...getPageComponents(0, pageCount), ellipsis({
|
|
35
33
|
key: 'ellipsis-1',
|
|
36
34
|
testId: `${testId}-ellipsis`
|
|
37
35
|
}), ...getPageComponents(total - 1)];
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
}
|
|
37
|
+
// we have both start and end ellipsis
|
|
41
38
|
const pageCount = max - 4;
|
|
42
39
|
return [...getPageComponents(0, 1), ellipsis({
|
|
43
40
|
key: 'ellipsis-1',
|
|
@@ -47,5 +44,4 @@ const collapseRange = (pages, current, {
|
|
|
47
44
|
testId: `${testId}-ellipsis`
|
|
48
45
|
}), ...getPageComponents(total - 1)];
|
|
49
46
|
};
|
|
50
|
-
|
|
51
47
|
export default collapseRange;
|
|
@@ -14,9 +14,8 @@ import collapseRange from './internal/utils/collapse-range';
|
|
|
14
14
|
const analyticsAttributes = {
|
|
15
15
|
componentName: 'pagination',
|
|
16
16
|
packageName: "@atlaskit/pagination",
|
|
17
|
-
packageVersion: "14.2.
|
|
17
|
+
packageVersion: "14.2.8"
|
|
18
18
|
};
|
|
19
|
-
|
|
20
19
|
function InnerPagination({
|
|
21
20
|
components = emptyObject,
|
|
22
21
|
defaultSelectedIndex = 0,
|
|
@@ -40,11 +39,9 @@ function InnerPagination({
|
|
|
40
39
|
event,
|
|
41
40
|
selectedPageIndex
|
|
42
41
|
} = value;
|
|
43
|
-
|
|
44
42
|
if (selectedIndex === undefined) {
|
|
45
43
|
setSelectedIndexValue(selectedPageIndex);
|
|
46
44
|
}
|
|
47
|
-
|
|
48
45
|
if (onChange) {
|
|
49
46
|
onChange(event, pages[selectedPageIndex], analyticsEvent);
|
|
50
47
|
}
|
|
@@ -54,7 +51,6 @@ function InnerPagination({
|
|
|
54
51
|
analyticsData: analyticsContext,
|
|
55
52
|
...analyticsAttributes
|
|
56
53
|
});
|
|
57
|
-
|
|
58
54
|
const transform = (page, currPageIndex, testId) => {
|
|
59
55
|
const selectedPage = pages[selectedIndexValue];
|
|
60
56
|
return /*#__PURE__*/React.createElement(PageComponent, {
|
|
@@ -69,7 +65,6 @@ function InnerPagination({
|
|
|
69
65
|
testId: testId && `${testId}--${page === selectedPage ? 'current-' : ''}page-${currPageIndex}`
|
|
70
66
|
}, getPageLabel ? getPageLabel(page, currPageIndex) : page);
|
|
71
67
|
};
|
|
72
|
-
|
|
73
68
|
return /*#__PURE__*/React.createElement(Box, {
|
|
74
69
|
testId: testId,
|
|
75
70
|
UNSAFE_style: style,
|
|
@@ -113,6 +108,5 @@ function InnerPagination({
|
|
|
113
108
|
testId: testId && `${testId}--right-navigator`
|
|
114
109
|
})));
|
|
115
110
|
}
|
|
116
|
-
|
|
117
111
|
const Pagination = /*#__PURE__*/forwardRef(InnerPagination);
|
|
118
112
|
export default /*#__PURE__*/memo(Pagination);
|
package/dist/es2019/version.json
CHANGED
|
@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import Button from '@atlaskit/button/standard-button';
|
|
4
4
|
export default function Navigator(props) {
|
|
5
|
-
return /*#__PURE__*/React.createElement(Button
|
|
5
|
+
return /*#__PURE__*/React.createElement(Button
|
|
6
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
6
7
|
, _extends({}, props, {
|
|
7
8
|
appearance: "subtle"
|
|
8
9
|
}));
|
|
@@ -3,7 +3,7 @@ import Box from '@atlaskit/ds-explorations/box';
|
|
|
3
3
|
import Text from '@atlaskit/ds-explorations/text';
|
|
4
4
|
export default function renderEllipsis(_ref) {
|
|
5
5
|
var key = _ref.key,
|
|
6
|
-
|
|
6
|
+
testId = _ref.testId;
|
|
7
7
|
return /*#__PURE__*/React.createElement(Box, {
|
|
8
8
|
as: "span",
|
|
9
9
|
testId: testId,
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
-
import memoizeOne from 'memoize-one';
|
|
3
|
-
// it is a JSX element. Tidy up in a future refactor.
|
|
2
|
+
import memoizeOne from 'memoize-one';
|
|
4
3
|
|
|
4
|
+
// TODO: comma needed after generic declaration below, or the .tsx file thinks
|
|
5
|
+
// it is a JSX element. Tidy up in a future refactor.
|
|
5
6
|
var collapseRange = function collapseRange(pages, current, _ref, testId) {
|
|
6
7
|
var max = _ref.max,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var total = pages.length;
|
|
10
|
-
|
|
11
|
-
var needEllipsis = total > max;
|
|
12
|
-
|
|
13
|
-
var hasStartEllipsis = needEllipsis && max - 4 < current;
|
|
14
|
-
|
|
8
|
+
ellipsis = _ref.ellipsis,
|
|
9
|
+
transform = _ref.transform;
|
|
10
|
+
var total = pages.length;
|
|
11
|
+
// only need ellipsis if we have more pages than we can display
|
|
12
|
+
var needEllipsis = total > max;
|
|
13
|
+
// show start ellipsis if the current page is further away than max - 4 from the first page
|
|
14
|
+
var hasStartEllipsis = needEllipsis && max - 4 < current;
|
|
15
|
+
// show end ellipsis if the current page is further than total - max + 3 from the last page
|
|
15
16
|
var hasEndEllipsis = needEllipsis && current < total - max + 3;
|
|
16
17
|
var getPageComponents = memoizeOne(function () {
|
|
17
18
|
var startIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
@@ -20,30 +21,24 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
|
|
|
20
21
|
return transform(page, startIndex + index, testId);
|
|
21
22
|
});
|
|
22
23
|
});
|
|
23
|
-
|
|
24
24
|
if (!needEllipsis) {
|
|
25
25
|
return getPageComponents(0, total);
|
|
26
26
|
}
|
|
27
|
-
|
|
28
27
|
if (hasStartEllipsis && !hasEndEllipsis) {
|
|
29
28
|
var _pageCount = max - 2;
|
|
30
|
-
|
|
31
29
|
return [].concat(_toConsumableArray(getPageComponents(0, 1)), [ellipsis({
|
|
32
30
|
key: 'ellipsis-1',
|
|
33
31
|
testId: "".concat(testId, "-ellipsis")
|
|
34
32
|
})], _toConsumableArray(getPageComponents(total - _pageCount)));
|
|
35
33
|
}
|
|
36
|
-
|
|
37
34
|
if (!hasStartEllipsis && hasEndEllipsis) {
|
|
38
35
|
var _pageCount2 = max - 2;
|
|
39
|
-
|
|
40
36
|
return [].concat(_toConsumableArray(getPageComponents(0, _pageCount2)), [ellipsis({
|
|
41
37
|
key: 'ellipsis-1',
|
|
42
38
|
testId: "".concat(testId, "-ellipsis")
|
|
43
39
|
})], _toConsumableArray(getPageComponents(total - 1)));
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
40
|
+
}
|
|
41
|
+
// we have both start and end ellipsis
|
|
47
42
|
var pageCount = max - 4;
|
|
48
43
|
return [].concat(_toConsumableArray(getPageComponents(0, 1)), [ellipsis({
|
|
49
44
|
key: 'ellipsis-1',
|
|
@@ -53,5 +48,4 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
|
|
|
53
48
|
testId: "".concat(testId, "-ellipsis")
|
|
54
49
|
})], _toConsumableArray(getPageComponents(total - 1)));
|
|
55
50
|
};
|
|
56
|
-
|
|
57
51
|
export default collapseRange;
|
package/dist/esm/pagination.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
-
|
|
4
3
|
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; }
|
|
5
|
-
|
|
6
4
|
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; }
|
|
7
|
-
|
|
8
5
|
import React, { forwardRef, memo } from 'react';
|
|
9
6
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
10
7
|
import Box from '@atlaskit/ds-explorations/box';
|
|
@@ -21,50 +18,45 @@ import collapseRange from './internal/utils/collapse-range';
|
|
|
21
18
|
var analyticsAttributes = {
|
|
22
19
|
componentName: 'pagination',
|
|
23
20
|
packageName: "@atlaskit/pagination",
|
|
24
|
-
packageVersion: "14.2.
|
|
21
|
+
packageVersion: "14.2.8"
|
|
25
22
|
};
|
|
26
|
-
|
|
27
23
|
function InnerPagination(_ref, ref) {
|
|
28
24
|
var _ref$components = _ref.components,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
25
|
+
components = _ref$components === void 0 ? emptyObject : _ref$components,
|
|
26
|
+
_ref$defaultSelectedI = _ref.defaultSelectedIndex,
|
|
27
|
+
defaultSelectedIndex = _ref$defaultSelectedI === void 0 ? 0 : _ref$defaultSelectedI,
|
|
28
|
+
selectedIndex = _ref.selectedIndex,
|
|
29
|
+
_ref$label = _ref.label,
|
|
30
|
+
label = _ref$label === void 0 ? 'pagination' : _ref$label,
|
|
31
|
+
_ref$previousLabel = _ref.previousLabel,
|
|
32
|
+
previousLabel = _ref$previousLabel === void 0 ? 'previous' : _ref$previousLabel,
|
|
33
|
+
_ref$nextLabel = _ref.nextLabel,
|
|
34
|
+
nextLabel = _ref$nextLabel === void 0 ? 'next' : _ref$nextLabel,
|
|
35
|
+
_ref$style = _ref.style,
|
|
36
|
+
style = _ref$style === void 0 ? emptyObject : _ref$style,
|
|
37
|
+
_ref$max = _ref.max,
|
|
38
|
+
max = _ref$max === void 0 ? 7 : _ref$max,
|
|
39
|
+
_ref$onChange = _ref.onChange,
|
|
40
|
+
onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
|
|
41
|
+
pages = _ref.pages,
|
|
42
|
+
getPageLabel = _ref.getPageLabel,
|
|
43
|
+
_ref$renderEllipsis = _ref.renderEllipsis,
|
|
44
|
+
renderEllipsis = _ref$renderEllipsis === void 0 ? renderDefaultEllipsis : _ref$renderEllipsis,
|
|
45
|
+
analyticsContext = _ref.analyticsContext,
|
|
46
|
+
testId = _ref.testId;
|
|
52
47
|
var _useControlled = useControlled(selectedIndex, function () {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
48
|
+
return defaultSelectedIndex || 0;
|
|
49
|
+
}),
|
|
50
|
+
_useControlled2 = _slicedToArray(_useControlled, 2),
|
|
51
|
+
selectedIndexValue = _useControlled2[0],
|
|
52
|
+
setSelectedIndexValue = _useControlled2[1];
|
|
59
53
|
var onChangeWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
|
|
60
54
|
fn: function fn(value, analyticsEvent) {
|
|
61
55
|
var event = value.event,
|
|
62
|
-
|
|
63
|
-
|
|
56
|
+
selectedPageIndex = value.selectedPageIndex;
|
|
64
57
|
if (selectedIndex === undefined) {
|
|
65
58
|
setSelectedIndexValue(selectedPageIndex);
|
|
66
59
|
}
|
|
67
|
-
|
|
68
60
|
if (onChange) {
|
|
69
61
|
onChange(event, pages[selectedPageIndex], analyticsEvent);
|
|
70
62
|
}
|
|
@@ -73,7 +65,6 @@ function InnerPagination(_ref, ref) {
|
|
|
73
65
|
actionSubject: 'pageNumber',
|
|
74
66
|
analyticsData: analyticsContext
|
|
75
67
|
}, analyticsAttributes));
|
|
76
|
-
|
|
77
68
|
var transform = function transform(page, currPageIndex, testId) {
|
|
78
69
|
var selectedPage = pages[selectedIndexValue];
|
|
79
70
|
return /*#__PURE__*/React.createElement(PageComponent, {
|
|
@@ -90,7 +81,6 @@ function InnerPagination(_ref, ref) {
|
|
|
90
81
|
testId: testId && "".concat(testId, "--").concat(page === selectedPage ? 'current-' : '', "page-").concat(currPageIndex)
|
|
91
82
|
}, getPageLabel ? getPageLabel(page, currPageIndex) : page);
|
|
92
83
|
};
|
|
93
|
-
|
|
94
84
|
return /*#__PURE__*/React.createElement(Box, {
|
|
95
85
|
testId: testId,
|
|
96
86
|
UNSAFE_style: style,
|
|
@@ -138,6 +128,5 @@ function InnerPagination(_ref, ref) {
|
|
|
138
128
|
testId: testId && "".concat(testId, "--right-navigator")
|
|
139
129
|
})));
|
|
140
130
|
}
|
|
141
|
-
|
|
142
131
|
var Pagination = /*#__PURE__*/forwardRef(InnerPagination);
|
|
143
132
|
export default /*#__PURE__*/memo(Pagination);
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/pagination",
|
|
3
|
-
"version": "14.2.
|
|
3
|
+
"version": "14.2.8",
|
|
4
4
|
"description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@atlaskit/analytics-next": "^
|
|
32
|
+
"@atlaskit/analytics-next": "^9.0.0",
|
|
33
33
|
"@atlaskit/button": "^16.5.0",
|
|
34
34
|
"@atlaskit/codemod-utils": "^4.1.0",
|
|
35
35
|
"@atlaskit/ds-explorations": "^2.0.0",
|
|
@@ -76,9 +76,9 @@
|
|
|
76
76
|
],
|
|
77
77
|
"analytics": "analytics-next",
|
|
78
78
|
"design-tokens": [
|
|
79
|
+
"color",
|
|
79
80
|
"spacing"
|
|
80
81
|
],
|
|
81
|
-
"theming": "tokens",
|
|
82
82
|
"deprecation": "no-deprecated-imports",
|
|
83
83
|
"styling": [
|
|
84
84
|
"emotion",
|