@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
54 lines (53 loc) • 2.31 kB
JavaScript
import * as React from 'react';
import { styled, useTheme, createComponent, } from '@workday/canvas-kit-react/common';
import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
import { BaseButton } from '@workday/canvas-kit-react/button';
import { PaginationContext } from './usePaginationModel';
const StyledPageButton = styled(BaseButton)({
minWidth: space.l,
width: space.l,
borderRadius: borderRadius.circle,
height: space.l,
}, ({ toggled }) => {
return {
fontWeight: toggled ? 700 : 'normal',
};
});
const getPaginationButtonColors = (toggled, theme) => {
const { canvas: { palette: { primary: themePrimary }, }, } = theme;
return {
default: {
background: toggled ? themePrimary.main : 'transparent',
label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
},
hover: {
background: toggled ? themePrimary.main : colors.soap300,
label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
},
active: {
background: toggled ? themePrimary.main : 'transparent',
label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
},
focus: {
background: toggled ? themePrimary.main : 'transparent',
label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
},
disabled: {
background: colors.licorice100,
},
};
};
export const PageButton = createComponent('button')({
displayName: 'Pagination.PageButton',
Component({ pageNumber, children, ...elemProps }) {
const model = React.useContext(PaginationContext);
const isCurrentPage = pageNumber === model.state.currentPage;
const theme = useTheme();
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 (React.createElement(StyledPageButton, { "aria-current": isCurrentPage ? 'page' : undefined, colors: getPaginationButtonColors(isCurrentPage, theme), "aria-pressed": undefined, onClick: handleClick, toggled: isCurrentPage, ...elemProps }, children || pageNumber));
},
});