@lunit/oui
Version:
Lunit Oncology UI components
65 lines (64 loc) • 4.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useMemo } from 'react';
import { ArrowDown } from '../../icons';
import { Divider } from '../Divider';
import { MenuItem, Menu } from '../Menu';
import { PaperProps, PaginationBox, SidePageBox, SelectButton, ArrowButton, PAGE_SIZE_LIST, divider, } from './Pagination.styled';
function Pagination({ count: itemCount, page: selectedPage = 1, perPage: selectedPerPage, totalPage, onPageChange, onPerPageChange, }) {
const [perPageAnchorEl, setPerPageAnchorEl] = useState(null);
const [pageAnchorEl, setPageAnchorEl] = useState(null);
const perPageOpen = Boolean(perPageAnchorEl);
const pageOpen = Boolean(pageAnchorEl);
const pages = useMemo(() => Array.from({ length: totalPage }, (_, index) => index + 1), [totalPage]);
const startItemNumber = selectedPerPage * (selectedPage - 1) + 1;
const endItemNumber = Math.min(startItemNumber + selectedPerPage - 1, itemCount);
const handlePerPageClick = (event) => {
setPerPageAnchorEl(event.currentTarget);
};
const handlePerPageClose = () => {
setPerPageAnchorEl(null);
};
const handlePageClick = (event) => {
setPageAnchorEl(event.currentTarget);
};
const handlePageClose = () => {
setPageAnchorEl(null);
};
useEffect(() => {
if (selectedPage > totalPage) {
onPageChange?.(null, totalPage);
}
}, [totalPage, selectedPage, onPageChange]);
return (_jsxs(PaginationBox, { children: [_jsxs(SidePageBox, { children: ["Items per page", _jsx(SelectButton, { endIcon: _jsx(ArrowDown, { style: {
transform: perPageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
} }), onClick: handlePerPageClick, children: selectedPerPage }), _jsx(Menu, { showCheck: true, anchorEl: perPageAnchorEl, anchorOrigin: {
vertical: 'top',
horizontal: 'right',
}, transformOrigin: {
vertical: 'bottom',
horizontal: 'right',
}, PaperProps: PaperProps, onClose: handlePerPageClose, open: perPageOpen, children: PAGE_SIZE_LIST.map((perPage) => (_jsx(MenuItem, { selected: perPage === selectedPerPage, onClick: (event) => {
event.preventDefault();
onPerPageChange?.(event, perPage);
handlePerPageClose();
}, label: perPage }, perPage))) }), _jsx(Divider, { orientation: "vertical", sx: divider }), startItemNumber, "-", endItemNumber, " of \u00A0", itemCount, " items"] }), _jsxs(SidePageBox, { children: ["This page", _jsx(SelectButton, { id: "selected-page", endIcon: _jsx(ArrowDown, { style: {
transform: pageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
} }), onClick: handlePageClick, children: selectedPage }), _jsx(Menu, { showCheck: true, anchorEl: pageAnchorEl, anchorOrigin: {
vertical: 'top',
horizontal: 'right',
}, transformOrigin: {
vertical: 'bottom',
horizontal: 'right',
}, PaperProps: PaperProps, onClose: handlePageClose, open: pageOpen, children: pages.map((page) => (_jsx(MenuItem, { selected: page === selectedPage, onClick: (event) => {
event.preventDefault();
onPageChange?.(event, page);
handlePageClose();
}, label: page }, page))) }), _jsx(Divider, { orientation: "vertical", sx: divider }), _jsx(ArrowButton, { id: "prev-button", disabled: selectedPage === 1, onClick: (event) => {
event.preventDefault();
onPageChange?.(event, selectedPage - 1);
}, endIcon: _jsx(ArrowDown, { style: { transform: 'rotate(90deg)' } }) }), _jsx(ArrowButton, { id: "next-button", disabled: selectedPage === totalPage, onClick: (event) => {
event.preventDefault();
onPageChange?.(event, selectedPage + 1);
}, endIcon: _jsx(ArrowDown, { style: { transform: 'rotate(-90deg)' } }) })] })] }));
}
export default Pagination;