diff --git a/src/components/common/layer/LayerPagination.tsx b/src/components/common/layer/LayerPagination.tsx index 73cb4626..7901cb31 100644 --- a/src/components/common/layer/LayerPagination.tsx +++ b/src/components/common/layer/LayerPagination.tsx @@ -9,7 +9,7 @@ import { MoreHoriz, MoreVert, } from '@mui/icons-material'; -import React from 'react'; +import React, { useEffect, useRef } from 'react'; const useLayerPaginationStyles = makeStyles({ ulVertical: { @@ -49,6 +49,8 @@ type LayerPaginationProps = { orientation: LayerPaginationOrientation; }; +const LAYER_PAGINATION_WHEEL_TIMEOUT = 500; + export default function LayerPagination(props: LayerPaginationProps) { const StyledBadge = withStyles(() => ({ badge: { @@ -66,6 +68,41 @@ export default function LayerPagination(props: LayerPaginationProps) { props.onClickPage(page); }, }); + + const pageRefs: Map> = new Map(); + for (const item of items) { + if (item.type === 'page' && item.page !== null) { + pageRefs.set(item.page, useRef(null)); + } + } + + useEffect(() => { + let processing = false; + const handleWheel = (event: WheelEvent) => { + event.preventDefault(); + if (processing) { + return; + } + processing = true; + if (event.deltaY < 0) { + props.onClickPage(Math.min(props.page! + 1, props.count)); + } else if (event.deltaY > 0) { + props.onClickPage(Math.max(1, props.page! - 1)); + } + setTimeout(() => { + processing = false; + }, LAYER_PAGINATION_WHEEL_TIMEOUT); + }; + for (const ref of pageRefs.values()) { + ref.current?.addEventListener('wheel', handleWheel, { passive: false }); + } + return () => { + for (const ref of pageRefs.values()) { + ref.current?.removeEventListener('wheel', handleWheel); + } + }; + }); + return (