@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
103 lines • 7.23 kB
JavaScript
import { __rest } from "tslib";
// 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(_a) {
var { className, ariaLabel, disabled, pageIndex, isCurrent = false, children, onClick } = _a, rest = __rest(_a, ["className", "ariaLabel", "disabled", "pageIndex", "isCurrent", "children", "onClick"]);
function handleClick(event) {
event.preventDefault();
onClick(pageIndex);
}
return (React.createElement("li", Object.assign({ className: styles['page-item'] }, copyAnalyticsMetadataAttribute(rest)),
React.createElement("button", Object.assign({ 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(_a) {
var { pageIndex } = _a, rest = __rest(_a, ["pageIndex"]);
return (React.createElement(PageButton, Object.assign({ className: styles['page-number'], pageIndex: pageIndex }, rest, (rest.disabled
? {}
: getAnalyticsMetadataAttribute({
detail: {
position: `${pageIndex}`,
},
}))), pageIndex));
}
export default function InternalPagination(_a) {
var _b, _c, _d, _e;
var { openEnd, currentPageIndex, ariaLabels, pagesCount, disabled, onChange, onNextPageClick, onPreviousPageClick, __internalRootRef = null } = _a, rest = __rest(_a, ["openEnd", "currentPageIndex", "ariaLabels", "pagesCount", "disabled", "onChange", "onNextPageClick", "onPreviousPageClick", "__internalRootRef"]);
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 = (_b = i18n('ariaLabels.nextPageLabel', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.nextPageLabel)) !== null && _b !== void 0 ? _b : defaultAriaLabels.nextPageLabel;
const previousPageLabel = (_c = i18n('ariaLabels.previousPageLabel', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.previousPageLabel)) !== null && _c !== void 0 ? _c : defaultAriaLabels.previousPageLabel;
const pageNumberLabelFn = (_d = i18n('ariaLabels.pageLabel', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.pageLabel, format => pageNumber => format({ pageNumber }))) !== null && _d !== void 0 ? _d : 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 ((_e = tableComponentContext === null || tableComponentContext === void 0 ? void 0 : tableComponentContext.paginationRef) === null || _e === void 0 ? void 0 : _e.current) {
tableComponentContext.paginationRef.current.currentPageIndex = currentPageIndex;
tableComponentContext.paginationRef.current.totalPageCount = pagesCount;
}
return (React.createElement("ul", Object.assign({ "aria-label": paginationLabel }, baseProps, { className: clsx(baseProps.className, styles.root, disabled && styles['root-disabled']), ref: __internalRootRef }),
React.createElement(PageButton, Object.assign({ 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, Object.assign({ 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