Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Disable pointer events while scrolling #46

Merged
merged 1 commit into from
Apr 20, 2023
Merged

Disable pointer events while scrolling #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/core/scroller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export type Scroller = {

export const createScroller = (
store: VirtualStore,
notifyStop: () => void
onScrollStateChange: (scrolling: boolean) => void
): Scroller => {
let prevOffset = -1;
let scrollDirection: ScrollDirection = SCROLL_STOP;
Expand Down Expand Up @@ -170,11 +170,15 @@ export const createScroller = (
// Check scroll position once just after scrolling stopped
syncViewportToScrollPosition();
scrollDirection = SCROLL_STOP;
notifyStop();
onScrollStateChange(false);
}, 150);

const onScroll = () => {
const isScrollStart = scrollDirection === SCROLL_STOP;
syncViewportToScrollPosition();
if (isScrollStart) {
onScrollStateChange(true);
}
onScrollStopped();
};

Expand Down
21 changes: 17 additions & 4 deletions src/react/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,16 @@ export interface CustomWindowComponentProps {
children: ReactNode;
style: CSSProperties;
scrollSize: number;
scrolling: boolean;
horizontal: boolean;
rtl: boolean;
}

const DefaultWindow = forwardRef<any, CustomWindowComponentProps>(
({ children, style, scrollSize, horizontal, rtl }, ref): ReactElement => {
(
{ children, style, scrollSize, scrolling, horizontal, rtl },
ref
): ReactElement => {
return (
<div ref={ref} style={style}>
<div
Expand All @@ -121,8 +125,9 @@ const DefaultWindow = forwardRef<any, CustomWindowComponentProps>(
height,
minWidth: width,
minHeight: height,
pointerEvents: scrolling ? "none" : "auto",
};
}, [scrollSize])}
}, [scrollSize, scrolling])}
>
{children}
</div>
Expand All @@ -138,12 +143,14 @@ const Window = ({
_ref: ref,
_store: store,
_element: Element,
_scrolling: scrolling,
_style: style,
}: {
_children: ReactNode;
_ref: RefObject<HTMLDivElement>;
_store: VirtualStore;
_element: CustomWindowComponent;
_scrolling: boolean;
_style: CSSProperties | undefined;
}) => {
const scrollSize = useSyncExternalStore(
Expand All @@ -162,6 +169,7 @@ const Window = ({
<Element
ref={ref}
scrollSize={clampedScrollSize}
scrolling={scrolling}
horizontal={horizontal}
rtl={store._isRtl()}
style={useMemo<CSSProperties>(
Expand Down Expand Up @@ -324,9 +332,13 @@ export const List = forwardRef<ListHandle, ListProps>(
const onEndReachedCalledIndex = useRef<number>(INITIAL_END_REACHED_INDEX);

const [mountedIndexes, reset] = useState<Set<number>>(new Set<number>());
const [scrolling, setScrolling] = useState(false);
const scroller = useStatic(() =>
createScroller(store, () => {
reset(new Set());
createScroller(store, (isScrolling) => {
setScrolling(isScrolling);
if (!isScrolling) {
reset(new Set());
}
})
);

Expand Down Expand Up @@ -450,6 +462,7 @@ export const List = forwardRef<ListHandle, ListProps>(
_ref={rootRef}
_store={store}
_element={element}
_scrolling={scrolling}
_style={styleProp}
_children={items}
/>
Expand Down
36 changes: 18 additions & 18 deletions src/react/__snapshots__/List.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`horizontal should render 1 children 1`] = `
style="overflow: auto hidden; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100px; height: 100%; min-width: 100px; min-height: 100%;"
style="position: absolute; top: 0px; left: 0px; width: 100px; height: 100%; min-width: 100px; min-height: 100%; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; display: flex;"
Expand All @@ -26,7 +26,7 @@ exports[`horizontal should render 5 children 1`] = `
style="overflow: auto hidden; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 500px; height: 100%; min-width: 500px; min-height: 100%;"
style="position: absolute; top: 0px; left: 0px; width: 500px; height: 100%; min-width: 500px; min-height: 100%; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; display: flex;"
Expand Down Expand Up @@ -74,7 +74,7 @@ exports[`horizontal should render 100 children 1`] = `
style="overflow: auto hidden; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 4360px; height: 100%; min-width: 4360px; min-height: 100%;"
style="position: absolute; top: 0px; left: 0px; width: 4360px; height: 100%; min-width: 4360px; min-height: 100%; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; display: flex;"
Expand Down Expand Up @@ -129,7 +129,7 @@ exports[`horizontal should render 1000 children 1`] = `
style="overflow: auto hidden; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 40360px; height: 100%; min-width: 40360px; min-height: 100%;"
style="position: absolute; top: 0px; left: 0px; width: 40360px; height: 100%; min-width: 40360px; min-height: 100%; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; display: flex;"
Expand Down Expand Up @@ -184,7 +184,7 @@ exports[`horizontal should render 10000 children 1`] = `
style="overflow: auto hidden; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 400360px; height: 100%; min-width: 400360px; min-height: 100%;"
style="position: absolute; top: 0px; left: 0px; width: 400360px; height: 100%; min-width: 400360px; min-height: 100%; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; display: flex;"
Expand Down Expand Up @@ -239,7 +239,7 @@ exports[`horizontal should render component 1`] = `
style="overflow: auto hidden; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 300px; height: 100%; min-width: 300px; min-height: 100%;"
style="position: absolute; top: 0px; left: 0px; width: 300px; height: 100%; min-width: 300px; min-height: 100%; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; display: flex;"
Expand Down Expand Up @@ -273,7 +273,7 @@ exports[`horizontal should render fragments 1`] = `
style="overflow: auto hidden; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 200px; height: 100%; min-width: 200px; min-height: 100%;"
style="position: absolute; top: 0px; left: 0px; width: 200px; height: 100%; min-width: 200px; min-height: 100%; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; display: flex;"
Expand Down Expand Up @@ -306,7 +306,7 @@ exports[`horizontal should render non elements 1`] = `
style="overflow: auto hidden; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 200px; height: 100%; min-width: 200px; min-height: 100%;"
style="position: absolute; top: 0px; left: 0px; width: 200px; height: 100%; min-width: 200px; min-height: 100%; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; display: flex;"
Expand All @@ -329,7 +329,7 @@ exports[`horizontal should render with given width / height 1`] = `
style="overflow: auto hidden; position: relative; contain: strict; width: 100px; height: 800px; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 500px; height: 100%; min-width: 500px; min-height: 100%;"
style="position: absolute; top: 0px; left: 0px; width: 500px; height: 100%; min-width: 500px; min-height: 100%; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; display: flex;"
Expand Down Expand Up @@ -377,7 +377,7 @@ exports[`vertical should render 1 children 1`] = `
style="overflow: hidden auto; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px; min-width: 100%; min-height: 50px;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px; min-width: 100%; min-height: 50px; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px;"
Expand All @@ -397,7 +397,7 @@ exports[`vertical should render 5 children 1`] = `
style="overflow: hidden auto; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 250px; min-width: 100%; min-height: 250px;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 250px; min-width: 100%; min-height: 250px; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px;"
Expand Down Expand Up @@ -445,7 +445,7 @@ exports[`vertical should render 100 children 1`] = `
style="overflow: hidden auto; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 4060px; min-width: 100%; min-height: 4060px;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 4060px; min-width: 100%; min-height: 4060px; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px;"
Expand Down Expand Up @@ -500,7 +500,7 @@ exports[`vertical should render 1000 children 1`] = `
style="overflow: hidden auto; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 40060px; min-width: 100%; min-height: 40060px;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 40060px; min-width: 100%; min-height: 40060px; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px;"
Expand Down Expand Up @@ -555,7 +555,7 @@ exports[`vertical should render 10000 children 1`] = `
style="overflow: hidden auto; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 400060px; min-width: 100%; min-height: 400060px;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 400060px; min-width: 100%; min-height: 400060px; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px;"
Expand Down Expand Up @@ -610,7 +610,7 @@ exports[`vertical should render component 1`] = `
style="overflow: hidden auto; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 150px; min-width: 100%; min-height: 150px;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 150px; min-width: 100%; min-height: 150px; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px;"
Expand Down Expand Up @@ -644,7 +644,7 @@ exports[`vertical should render fragments 1`] = `
style="overflow: hidden auto; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; min-width: 100%; min-height: 100px;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; min-width: 100%; min-height: 100px; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px;"
Expand Down Expand Up @@ -677,7 +677,7 @@ exports[`vertical should render non elements 1`] = `
style="overflow: hidden auto; position: relative; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; min-width: 100%; min-height: 100px;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; min-width: 100%; min-height: 100px; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px;"
Expand All @@ -700,7 +700,7 @@ exports[`vertical should render with given width / height 1`] = `
style="overflow: hidden auto; position: relative; contain: strict; width: 100px; height: 800px; padding: 0px; margin: 0px;"
>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 250px; min-width: 100%; min-height: 250px;"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 250px; min-width: 100%; min-height: 250px; pointer-events: auto;"
>
<div
style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px;"
Expand Down
4 changes: 2 additions & 2 deletions src/react/__snapshots__/List.ssr.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SSR should render 10 items with renderToStaticMarkup 1`] = `"<div style="overflow:hidden auto;position:relative;contain:strict;width:100%;height:100%;padding:0;margin:0"><div style="position:absolute;top:0;left:0;width:100%;height:40000px;min-width:100%;min-height:40000px"><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:0;visibility:hidden"><div>0</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:40px;visibility:hidden"><div>1</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:80px;visibility:hidden"><div>2</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:120px;visibility:hidden"><div>3</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:160px;visibility:hidden"><div>4</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:200px;visibility:hidden"><div>5</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:240px;visibility:hidden"><div>6</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:280px;visibility:hidden"><div>7</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:320px;visibility:hidden"><div>8</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:360px;visibility:hidden"><div>9</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:400px;visibility:hidden"><div>10</div></div></div></div>"`;
exports[`SSR should render 10 items with renderToStaticMarkup 1`] = `"<div style="overflow:hidden auto;position:relative;contain:strict;width:100%;height:100%;padding:0;margin:0"><div style="position:absolute;top:0;left:0;width:100%;height:40000px;min-width:100%;min-height:40000px;pointer-events:auto"><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:0;visibility:hidden"><div>0</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:40px;visibility:hidden"><div>1</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:80px;visibility:hidden"><div>2</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:120px;visibility:hidden"><div>3</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:160px;visibility:hidden"><div>4</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:200px;visibility:hidden"><div>5</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:240px;visibility:hidden"><div>6</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:280px;visibility:hidden"><div>7</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:320px;visibility:hidden"><div>8</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:360px;visibility:hidden"><div>9</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:400px;visibility:hidden"><div>10</div></div></div></div>"`;

exports[`SSR should render 10 items with renderToString 1`] = `"<div style="overflow:hidden auto;position:relative;contain:strict;width:100%;height:100%;padding:0;margin:0"><div style="position:absolute;top:0;left:0;width:100%;height:40000px;min-width:100%;min-height:40000px"><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:0;visibility:hidden"><div>0</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:40px;visibility:hidden"><div>1</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:80px;visibility:hidden"><div>2</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:120px;visibility:hidden"><div>3</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:160px;visibility:hidden"><div>4</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:200px;visibility:hidden"><div>5</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:240px;visibility:hidden"><div>6</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:280px;visibility:hidden"><div>7</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:320px;visibility:hidden"><div>8</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:360px;visibility:hidden"><div>9</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:400px;visibility:hidden"><div>10</div></div></div></div>"`;
exports[`SSR should render 10 items with renderToString 1`] = `"<div style="overflow:hidden auto;position:relative;contain:strict;width:100%;height:100%;padding:0;margin:0"><div style="position:absolute;top:0;left:0;width:100%;height:40000px;min-width:100%;min-height:40000px;pointer-events:auto"><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:0;visibility:hidden"><div>0</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:40px;visibility:hidden"><div>1</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:80px;visibility:hidden"><div>2</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:120px;visibility:hidden"><div>3</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:160px;visibility:hidden"><div>4</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:200px;visibility:hidden"><div>5</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:240px;visibility:hidden"><div>6</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:280px;visibility:hidden"><div>7</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:320px;visibility:hidden"><div>8</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:360px;visibility:hidden"><div>9</div></div><div style="margin:0;padding:0;position:absolute;width:100%;left:0;top:400px;visibility:hidden"><div>10</div></div></div></div>"`;