Merge pull request #861 from remap-keys/support-wheel-event-on-layer-paging-ui

Support a wheel event to change the page on a layer paging UI.

Author: yoichiro

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<number, React.RefObject<HTMLDivElement>> = new Map();
+  for (const item of items) {
+    if (item.type === 'page' && item.page !== null) {
+      pageRefs.set(item.page, useRef<HTMLDivElement>(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 (
     <nav>
       <ul
@@ -90,10 +127,11 @@ export default function LayerPagination(props: LayerPaginationProps) {
                   label={page - 1}
                   color={selected ? 'primary' : undefined}
                   clickable={!selected}
-                  onClick={() => {
+                  onClick={(): void => {
                     props.onClickPage(page);
                   }}
                   className={selected ? '' : classes.unselected}
+                  ref={pageRefs.get(page)!}
                 />
               </StyledBadge>
             );