@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
100 lines • 6.96 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { copyAnalyticsMetadataAttribute, getAnalyticsMetadataAttribute, } from '@awsui/component-toolkit/internal/analytics-metadata';
import { useInternalI18n } from '../i18n/context';
import InternalIcon from '../icon/internal';
import { getBaseProps } from '../internal/base-component';
import { useTableComponentsContext } from '../internal/context/table-component-context';
import { fireNonCancelableEvent } from '../internal/events';
import { getPaginationState, range } from './utils';
import styles from './styles.css.js';
const defaultAriaLabels = {
nextPageLabel: '',
paginationLabel: '',
previousPageLabel: '',
pageLabel: pageNumber => `${pageNumber}`,
};
function PageButton({ className, ariaLabel, disabled, pageIndex, isCurrent = false, children, onClick, ...rest }) {
function handleClick(event) {
event.preventDefault();
onClick(pageIndex);
}
return (React.createElement("li", { className: styles['page-item'], ...copyAnalyticsMetadataAttribute(rest) },
React.createElement("button", { className: clsx(className, styles.button, disabled && styles['button-disabled'], isCurrent && styles['button-current']), type: "button", "aria-label": ariaLabel, disabled: disabled, onClick: handleClick, "aria-current": isCurrent, ...(disabled
? {}
: getAnalyticsMetadataAttribute({
action: 'click',
detail: {
label: { root: 'self' },
},
})) }, children)));
}
function PageNumber({ pageIndex, ...rest }) {
return (React.createElement(PageButton, { className: styles['page-number'], pageIndex: pageIndex, ...rest, ...(rest.disabled
? {}
: getAnalyticsMetadataAttribute({
detail: {
position: `${pageIndex}`,
},
})) }, pageIndex));
}
export default function InternalPagination({ openEnd, currentPageIndex, ariaLabels, pagesCount, disabled, onChange, onNextPageClick, onPreviousPageClick, __internalRootRef, ...rest }) {
var _a, _b, _c, _d;
const baseProps = getBaseProps(rest);
const { leftDots, leftIndex, rightIndex, rightDots } = getPaginationState(currentPageIndex, pagesCount, openEnd);
const i18n = useInternalI18n('pagination');
const paginationLabel = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.paginationLabel;
const nextPageLabel = (_a = i18n('ariaLabels.nextPageLabel', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.nextPageLabel)) !== null && _a !== void 0 ? _a : defaultAriaLabels.nextPageLabel;
const previousPageLabel = (_b = i18n('ariaLabels.previousPageLabel', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.previousPageLabel)) !== null && _b !== void 0 ? _b : defaultAriaLabels.previousPageLabel;
const pageNumberLabelFn = (_c = i18n('ariaLabels.pageLabel', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.pageLabel, format => pageNumber => format({ pageNumber }))) !== null && _c !== void 0 ? _c : defaultAriaLabels.pageLabel;
function handlePrevPageClick(requestedPageIndex) {
handlePageClick(requestedPageIndex);
fireNonCancelableEvent(onPreviousPageClick, {
requestedPageAvailable: true,
requestedPageIndex: requestedPageIndex,
});
}
function handleNextPageClick(requestedPageIndex) {
handlePageClick(requestedPageIndex);
fireNonCancelableEvent(onNextPageClick, {
requestedPageAvailable: currentPageIndex < pagesCount,
requestedPageIndex: requestedPageIndex,
});
}
function handlePageClick(requestedPageIndex) {
fireNonCancelableEvent(onChange, { currentPageIndex: requestedPageIndex });
}
const previousButtonDisabled = disabled || currentPageIndex === 1;
const nextButtonDisabled = disabled || (!openEnd && (pagesCount === 0 || currentPageIndex === pagesCount));
const tableComponentContext = useTableComponentsContext();
if ((_d = tableComponentContext === null || tableComponentContext === void 0 ? void 0 : tableComponentContext.paginationRef) === null || _d === void 0 ? void 0 : _d.current) {
tableComponentContext.paginationRef.current.currentPageIndex = currentPageIndex;
tableComponentContext.paginationRef.current.totalPageCount = pagesCount;
tableComponentContext.paginationRef.current.openEnd = openEnd;
}
return (React.createElement("ul", { "aria-label": paginationLabel, ...baseProps, className: clsx(baseProps.className, styles.root, disabled && styles['root-disabled']), ref: __internalRootRef },
React.createElement(PageButton, { className: styles.arrow, pageIndex: currentPageIndex - 1, ariaLabel: previousPageLabel !== null && previousPageLabel !== void 0 ? previousPageLabel : defaultAriaLabels.nextPageLabel, disabled: previousButtonDisabled, onClick: handlePrevPageClick, ...(previousButtonDisabled
? {}
: getAnalyticsMetadataAttribute({
detail: {
position: 'prev',
},
})) },
React.createElement(InternalIcon, { name: "angle-left", variant: disabled ? 'disabled' : 'normal' })),
React.createElement(PageNumber, { pageIndex: 1, isCurrent: currentPageIndex === 1, disabled: disabled, ariaLabel: pageNumberLabelFn(1), onClick: handlePageClick }),
leftDots && React.createElement("li", { className: styles.dots }, "..."),
range(leftIndex, rightIndex).map(pageIndex => (React.createElement(PageNumber, { key: pageIndex, isCurrent: currentPageIndex === pageIndex, pageIndex: pageIndex, disabled: disabled, ariaLabel: pageNumberLabelFn(pageIndex), onClick: handlePageClick }))),
rightDots && React.createElement("li", { className: styles.dots }, "..."),
!openEnd && pagesCount > 1 && (React.createElement(PageNumber, { isCurrent: currentPageIndex === pagesCount, pageIndex: pagesCount, disabled: disabled, ariaLabel: pageNumberLabelFn(pagesCount), onClick: handlePageClick })),
React.createElement(PageButton, { className: styles.arrow, pageIndex: currentPageIndex + 1, ariaLabel: nextPageLabel !== null && nextPageLabel !== void 0 ? nextPageLabel : defaultAriaLabels.nextPageLabel, disabled: nextButtonDisabled, onClick: handleNextPageClick, ...(nextButtonDisabled
? {}
: getAnalyticsMetadataAttribute({
detail: {
position: 'next',
},
})) },
React.createElement(InternalIcon, { name: "angle-right", variant: disabled ? 'disabled' : 'normal' }))));
}
//# sourceMappingURL=internal.js.map