Skip to content

Commit

Permalink
Merge pull request #863 from remap-keys/revert-861-support-wheel-even…
Browse files Browse the repository at this point in the history
…t-on-layer-paging-ui

Revert "Support a wheel event to change the page on a layer paging UI."
  • Loading branch information
yoichiro authored Feb 4, 2025
2 parents 7e7ef52 + 49a9563 commit d34102f
Showing 1 changed file with 2 additions and 40 deletions.
42 changes: 2 additions & 40 deletions src/components/common/layer/LayerPagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
MoreHoriz,
MoreVert,
} from '@mui/icons-material';
import React, { useEffect, useRef } from 'react';
import React from 'react';

const useLayerPaginationStyles = makeStyles({
ulVertical: {
Expand Down Expand Up @@ -49,8 +49,6 @@ type LayerPaginationProps = {
orientation: LayerPaginationOrientation;
};

const LAYER_PAGINATION_WHEEL_TIMEOUT = 500;

export default function LayerPagination(props: LayerPaginationProps) {
const StyledBadge = withStyles(() => ({
badge: {
Expand All @@ -68,41 +66,6 @@ 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
Expand All @@ -127,11 +90,10 @@ export default function LayerPagination(props: LayerPaginationProps) {
label={page - 1}
color={selected ? 'primary' : undefined}
clickable={!selected}
onClick={(): void => {
onClick={() => {
props.onClickPage(page);
}}
className={selected ? '' : classes.unselected}
ref={pageRefs.get(page)!}
/>
</StyledBadge>
);
Expand Down

0 comments on commit d34102f

Please sign in to comment.