@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
88 lines (87 loc) • 4.59 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 { useRTL } from './common/utils/useRTL';
import { PaginationContext } from './usePaginationModel';
export const paginationControlsStencil = createStencil({
base: { name: "1nbadb", styles: "box-sizing:border-box;display:flex;gap:var(--cnvs-sys-space-x1);align-items:center;" }
}, "pagination-controls-f02bc7");
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);
};
const { shouldUseRTL } = useRTL();
const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
return (_jsx(TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick, ...restProps }));
},
});
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);
};
const { shouldUseRTL } = useRTL();
const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
return (_jsx(TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick, ...restProps }));
},
});
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);
};
const { shouldUseRTL } = useRTL();
const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
return (_jsx(TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick, ...restProps }));
},
});
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);
};
const { shouldUseRTL } = useRTL();
const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
return (_jsx(TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick, ...restProps }));
},
});