@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
30 lines (29 loc) • 2.4 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { brand, system } from '@workday/canvas-tokens-web';
import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
import { PaginationContext } from './usePaginationModel';
export const paginationPageButtonStencil = createStencil({
extends: buttonStencil,
base: { name: "35mkt9", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);font-weight:var(--cnvs-sys-font-weight-normal);--label-button-85bf0e:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-fg-disabled);}" },
modifiers: {
toggled: {
true: { name: "2metqf", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-85bf0e:var(--cnvs-brand-primary-base);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-brand-primary-base);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-fg-disabled);}" }
}
}
}, "pagination-page-button-88d20c");
export const PageButton = createComponent('button')({
displayName: 'Pagination.PageButton',
Component({ pageNumber, children, ...elemProps }) {
const model = React.useContext(PaginationContext);
const isCurrentPage = pageNumber === model.state.currentPage;
const handleClick = (e) => {
var _a, _b;
(_b = (_a = elemProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
model.events.goTo(pageNumber);
};
return (_jsx(BaseButton, { "aria-current": isCurrentPage ? 'page' : undefined, "aria-pressed": undefined, size: "small", onClick: handleClick, ...handleCsProp(elemProps, paginationPageButtonStencil({ toggled: isCurrentPage })), children: children || pageNumber }));
},
});