@atlaskit/pagination
Version:
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
159 lines (158 loc) • 5.79 kB
JavaScript
/* pagination.tsx generated by @compiled/babel-plugin v0.36.1 */
import "./pagination.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef, memo } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
import noop from '@atlaskit/ds-lib/noop';
import useControlled from '@atlaskit/ds-lib/use-controlled';
import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
import { Box, Inline } from '@atlaskit/primitives/compiled';
import Navigator from './internal/components/navigator';
import PageComponent from './internal/components/page';
import renderDefaultEllipsis from './internal/components/render-ellipsis';
import { emptyObject } from './internal/constants';
import collapseRange from './internal/utils/collapse-range';
const styles = {
paginationMenu: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t",
paginationMenuItem: "_1pfhze3t _ect41gqc",
navigatorIconWrapper: "_18zr12x7"
};
const analyticsAttributes = {
componentName: 'pagination',
packageName: "@atlaskit/pagination",
packageVersion: "16.1.0"
};
function NavigatorIcon({
chevronDirection
}) {
const Chevron = chevronDirection === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
return /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.navigatorIconWrapper
}, /*#__PURE__*/React.createElement(Chevron, {
label: "",
LEGACY_margin: `0 ${"var(--ds-space-negative-075, -6px)"}`,
color: "currentColor"
}));
}
function InnerPagination({
components = emptyObject,
defaultSelectedIndex = 0,
selectedIndex,
label = 'pagination',
pageLabel = 'page',
previousLabel = 'previous',
nextLabel = 'next',
style = emptyObject,
max = 7,
onChange = noop,
pages,
getPageLabel,
renderEllipsis = renderDefaultEllipsis,
analyticsContext,
testId,
isDisabled
}, ref) {
const [selectedIndexValue, setSelectedIndexValue] = useControlled(selectedIndex, () => defaultSelectedIndex || 0);
const onChangeWithAnalytics = usePlatformLeafEventHandler({
fn: (value, analyticsEvent) => {
const {
event,
selectedPageIndex
} = value;
if (selectedIndex === undefined) {
setSelectedIndexValue(selectedPageIndex);
}
if (onChange) {
onChange(event, pages[selectedPageIndex], analyticsEvent);
}
},
action: 'changed',
actionSubject: 'pageNumber',
analyticsData: analyticsContext,
...analyticsAttributes
});
const transform = (page, currPageIndex, testId) => {
const selectedPage = pages[selectedIndexValue];
const pageIndexLabel = `${pageLabel} ${getPageLabel ? getPageLabel(page, currPageIndex) : page}`;
const isCurrentPage = page === selectedPage;
return /*#__PURE__*/React.createElement(Inline, {
as: "li",
xcss: styles.paginationMenuItem,
key: `page-${getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex}`
}, /*#__PURE__*/React.createElement(PageComponent, {
component: components.Page,
onClick: event => onChangeWithAnalytics({
event,
selectedPageIndex: currPageIndex
}),
"aria-current": isCurrentPage ? 'page' : undefined,
"aria-label": pageIndexLabel,
isSelected: isCurrentPage,
isDisabled: isDisabled,
page: page,
testId: testId && `${testId}--${isCurrentPage ? 'current-' : ''}page-${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.createElement(Box, {
testId: testId,
style: style,
ref: ref,
"aria-label": label,
as: "nav"
}, /*#__PURE__*/React.createElement(Inline, {
space: "space.0",
alignBlock: "center"
}, /*#__PURE__*/React.createElement(Navigator, {
key: "left-navigator",
component: components.Previous,
onClick: event => onChangeWithAnalytics({
event,
selectedPageIndex: selectedIndexValue - 1
}),
isDisabled: isDisabled || selectedIndexValue === 0,
iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
chevronDirection: "left"
}),
"aria-label": previousLabel,
testId: testId && `${testId}--left-navigator`
}), /*#__PURE__*/React.createElement(Inline, {
space: "space.0",
alignBlock: "baseline",
as: "ul",
xcss: styles.paginationMenu
}, collapseRange(pages, selectedIndexValue, {
max: max,
ellipsis: renderEllipsis,
transform
}, testId)), /*#__PURE__*/React.createElement(Navigator, {
key: "right-navigator",
component: components.Next,
onClick: event => onChangeWithAnalytics({
event,
selectedPageIndex: selectedIndexValue + 1
}),
isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
chevronDirection: "right"
}),
"aria-label": nextLabel,
testId: testId && `${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)
*/
const Pagination = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(InnerPagination));
export default Pagination;