@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
82 lines (81 loc) • 4.28 kB
JavaScript
import * as React from 'react';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { createComponent } from '@workday/canvas-kit-react/common';
import { chevronLeftSmallIcon, chevron2xLeftSmallIcon, chevronRightSmallIcon, chevron2xRightSmallIcon, } from '@workday/canvas-system-icons-web';
import { Flex } from '@workday/canvas-kit-react/layout';
import { useRTL } from './common/utils/useRTL';
import { PaginationContext } from './usePaginationModel';
export const PaginationControls = createComponent('div')({
displayName: 'Pagination.Controls',
Component(elemProps, ref, Element) {
return React.createElement(Flex, { ref: ref, as: Element, gap: "xxxs", alignItems: "center", ...elemProps });
},
});
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 (React.createElement(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 (React.createElement(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 (React.createElement(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 (React.createElement(TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick, ...restProps }));
},
});