@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
82 lines (81 loc) • 4.43 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { chevronLeftSmallIcon, chevron2xLeftSmallIcon, chevronRightSmallIcon, chevron2xRightSmallIcon, } from '@workday/canvas-system-icons-web';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil } from '@workday/canvas-kit-styling';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { system } from '@workday/canvas-tokens-web';
import { PaginationContext } from './usePaginationModel';
export const paginationControlsStencil = createStencil({
base: { name: "32ivvi", styles: "box-sizing:border-box;display:flex;gap:var(--cnvs-sys-space-x1);align-items:center;" }
}, "pagination-controls-103bfc");
const controlButtonStencil = createStencil({
base: { name: "17g8a", styles: "box-sizing:border-box;&:dir(rtl){& .wd-icon{transform:scaleX(-1);}}" }
}, "control-button-595088");
export const PaginationControls = createComponent('div')({
displayName: 'Pagination.Controls',
Component(elemProps, ref, Element) {
return _jsx(Element, { ref: ref, ...mergeStyles(elemProps, paginationControlsStencil()) });
},
});
export const JumpToFirstButton = createComponent('button')({
displayName: 'Pagination.JumpToFirstButton',
Component({ onClick, ...restProps }, ref, Element) {
const model = React.useContext(PaginationContext);
const isDisabled = model.state.currentPage <= model.state.firstPage;
const handleClick = (e) => {
if (isDisabled) {
return;
}
onClick === null || onClick === void 0 ? void 0 : onClick(e);
model.events.setCurrentPage(model.state.firstPage);
};
return (_jsx(TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: chevron2xLeftSmallIcon, onClick: handleClick, ...mergeStyles(restProps, controlButtonStencil()) }));
},
});
export const StepToPreviousButton = createComponent('button')({
displayName: 'Pagination.StepToPreviousButton',
Component({ onClick, ...restProps }, ref, Element) {
const model = React.useContext(PaginationContext);
const isDisabled = model.state.currentPage <= model.state.firstPage;
const handleClick = (e) => {
if (isDisabled) {
return;
}
onClick === null || onClick === void 0 ? void 0 : onClick(e);
model.events.setCurrentPage(model.state.currentPage - 1);
};
return (_jsx(TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: chevronLeftSmallIcon, onClick: handleClick, ...mergeStyles(restProps, controlButtonStencil()) }));
},
});
export const StepToNextButton = createComponent('button')({
displayName: 'Pagination.StepToNextButton',
Component({ onClick, ...restProps }, ref, Element) {
const model = React.useContext(PaginationContext);
const isDisabled = model.state.currentPage >= model.state.lastPage;
const handleClick = (e) => {
if (isDisabled) {
return;
}
onClick === null || onClick === void 0 ? void 0 : onClick(e);
model.events.setCurrentPage(model.state.currentPage + 1);
};
return (_jsx(TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: chevronRightSmallIcon, onClick: handleClick, ...mergeStyles(restProps, controlButtonStencil()) }));
},
});
export const JumpToLastButton = createComponent('button')({
displayName: 'Paganation.JumpToLastButton',
Component({ onClick, ...restProps }, ref, Element) {
const model = React.useContext(PaginationContext);
const isDisabled = model.state.currentPage >= model.state.lastPage;
const handleClick = (e) => {
if (isDisabled) {
return;
}
onClick === null || onClick === void 0 ? void 0 : onClick(e);
model.events.setCurrentPage(model.state.lastPage);
};
return (_jsx(TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: chevron2xRightSmallIcon, onClick: handleClick, ...mergeStyles(restProps, controlButtonStencil()) }));
},
});