@atlaskit/pagination
Version:
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
189 lines (187 loc) • 9.78 kB
JavaScript
/* pagination.tsx generated by @compiled/babel-plugin v0.36.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./pagination.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _analyticsNext = require("@atlaskit/analytics-next");
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
var _compiled = require("@atlaskit/primitives/compiled");
var _navigator = _interopRequireDefault(require("./internal/components/navigator"));
var _page = _interopRequireDefault(require("./internal/components/page"));
var _renderEllipsis = _interopRequireDefault(require("./internal/components/render-ellipsis"));
var _constants = require("./internal/constants");
var _collapseRange = _interopRequireDefault(require("./internal/utils/collapse-range"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var styles = {
paginationMenu: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t",
paginationMenuItem: "_1pfhze3t _ect41gqc",
navigatorIconWrapper: "_18zr12x7"
};
var analyticsAttributes = {
componentName: 'pagination',
packageName: "@atlaskit/pagination",
packageVersion: "16.1.0"
};
function NavigatorIcon(_ref) {
var chevronDirection = _ref.chevronDirection;
var Chevron = chevronDirection === 'left' ? _chevronLeftChevronLeftLarge.default : _chevronRightChevronRightLarge.default;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "span",
xcss: styles.navigatorIconWrapper
}, /*#__PURE__*/_react.default.createElement(Chevron, {
label: "",
LEGACY_margin: "0 ".concat("var(--ds-space-negative-075, -6px)"),
color: "currentColor"
}));
}
function InnerPagination(_ref2, ref) {
var _ref2$components = _ref2.components,
components = _ref2$components === void 0 ? _constants.emptyObject : _ref2$components,
_ref2$defaultSelected = _ref2.defaultSelectedIndex,
defaultSelectedIndex = _ref2$defaultSelected === void 0 ? 0 : _ref2$defaultSelected,
selectedIndex = _ref2.selectedIndex,
_ref2$label = _ref2.label,
label = _ref2$label === void 0 ? 'pagination' : _ref2$label,
_ref2$pageLabel = _ref2.pageLabel,
pageLabel = _ref2$pageLabel === void 0 ? 'page' : _ref2$pageLabel,
_ref2$previousLabel = _ref2.previousLabel,
previousLabel = _ref2$previousLabel === void 0 ? 'previous' : _ref2$previousLabel,
_ref2$nextLabel = _ref2.nextLabel,
nextLabel = _ref2$nextLabel === void 0 ? 'next' : _ref2$nextLabel,
_ref2$style = _ref2.style,
style = _ref2$style === void 0 ? _constants.emptyObject : _ref2$style,
_ref2$max = _ref2.max,
max = _ref2$max === void 0 ? 7 : _ref2$max,
_ref2$onChange = _ref2.onChange,
onChange = _ref2$onChange === void 0 ? _noop.default : _ref2$onChange,
pages = _ref2.pages,
getPageLabel = _ref2.getPageLabel,
_ref2$renderEllipsis = _ref2.renderEllipsis,
renderEllipsis = _ref2$renderEllipsis === void 0 ? _renderEllipsis.default : _ref2$renderEllipsis,
analyticsContext = _ref2.analyticsContext,
testId = _ref2.testId,
isDisabled = _ref2.isDisabled;
var _useControlled = (0, _useControlled3.default)(selectedIndex, function () {
return defaultSelectedIndex || 0;
}),
_useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
selectedIndexValue = _useControlled2[0],
setSelectedIndexValue = _useControlled2[1];
var onChangeWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
fn: function fn(value, analyticsEvent) {
var event = value.event,
selectedPageIndex = value.selectedPageIndex;
if (selectedIndex === undefined) {
setSelectedIndexValue(selectedPageIndex);
}
if (onChange) {
onChange(event, pages[selectedPageIndex], analyticsEvent);
}
},
action: 'changed',
actionSubject: 'pageNumber',
analyticsData: analyticsContext
}, analyticsAttributes));
var transform = function transform(page, currPageIndex, testId) {
var selectedPage = pages[selectedIndexValue];
var pageIndexLabel = "".concat(pageLabel, " ").concat(getPageLabel ? getPageLabel(page, currPageIndex) : page);
var isCurrentPage = page === selectedPage;
return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
as: "li",
xcss: styles.paginationMenuItem,
key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex)
}, /*#__PURE__*/_react.default.createElement(_page.default, {
component: components.Page,
onClick: function onClick(event) {
return onChangeWithAnalytics({
event: event,
selectedPageIndex: currPageIndex
});
},
"aria-current": isCurrentPage ? 'page' : undefined,
"aria-label": pageIndexLabel,
isSelected: isCurrentPage,
isDisabled: isDisabled,
page: page,
testId: testId && "".concat(testId, "--").concat(isCurrentPage ? 'current-' : '', "page-").concat(currPageIndex)
}, getPageLabel ? getPageLabel(page, currPageIndex) : page));
};
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
_react.default.createElement(_compiled.Box, {
testId: testId,
style: style,
ref: ref,
"aria-label": label,
as: "nav"
}, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
space: "space.0",
alignBlock: "center"
}, /*#__PURE__*/_react.default.createElement(_navigator.default, {
key: "left-navigator",
component: components.Previous,
onClick: function onClick(event) {
return onChangeWithAnalytics({
event: event,
selectedPageIndex: selectedIndexValue - 1
});
},
isDisabled: isDisabled || selectedIndexValue === 0,
iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
chevronDirection: "left"
}),
"aria-label": previousLabel,
testId: testId && "".concat(testId, "--left-navigator")
}), /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
space: "space.0",
alignBlock: "baseline",
as: "ul",
xcss: styles.paginationMenu
}, (0, _collapseRange.default)(pages, selectedIndexValue, {
max: max,
ellipsis: renderEllipsis,
transform: transform
}, testId)), /*#__PURE__*/_react.default.createElement(_navigator.default, {
key: "right-navigator",
component: components.Next,
onClick: function onClick(event) {
return onChangeWithAnalytics({
event: event,
selectedPageIndex: selectedIndexValue + 1
});
},
isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
chevronDirection: "right"
}),
"aria-label": nextLabel,
testId: testId && "".concat(testId, "--right-navigator")
})))
);
}
/**
* __Pagination__
*
* Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
*
* - [Examples](https://atlassian.design/components/pagination/examples)
* - [Code](https://atlassian.design/components/pagination/code)
* - [Usage](https://atlassian.design/components/pagination/usage)
*/
var Pagination = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(InnerPagination));
var _default = exports.default = Pagination;