Add on scroll handler

brimdata · Apr 4, 2024 · fd6a30a · fd6a30a
1 parent 9179af3
commit fd6a30a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/modules/react-arborist/src/components/tree-view.tsx b/modules/react-arborist/src/components/tree-view.tsx
@@ -71,7 +71,7 @@ function TreeViewContainer() {
         outerRef={outerRef}
         innerElementType={ListInner as any}
         direction={tree.props.direction}
-        // onScroll={tree.props.onScroll}
+        onScroll={tree.props.onScroll}
         ref={(node) => {
           tree.listElement = node;
           tree.visibleStartIndex;

diff --git a/modules/react-arborist/src/props/use-default-props.ts b/modules/react-arborist/src/props/use-default-props.ts
@@ -39,6 +39,9 @@ export function useDefaultProps<T>(
     overscanCount: props.overscanCount ?? 1,
     direction: "ltr",
 
+    /* Callbacks */
+    onScroll: props.onScroll ?? (() => {}),
+
     /* Class names */
     className: props.className,
     rowClassName: props.rowClassName,

diff --git a/modules/react-arborist/src/types/tree-view-props.ts b/modules/react-arborist/src/types/tree-view-props.ts
@@ -8,6 +8,7 @@ import { FocusPartialController } from "../focus/types";
 import { VisiblePartialController } from "../visible/types";
 import { ShortcutAttrs } from "../shortcuts/types";
 import { CommandObject } from "../commands/types";
+import { ListOnScrollProps } from "react-window";
 
 export type TreeViewProps<T> = {
   /* Partial Controllers */
@@ -35,6 +36,9 @@ export type TreeViewProps<T> = {
   padding: number;
   direction: "rtl" | "ltr";
 
+  /* Callbacks */
+  onScroll: (args: ListOnScrollProps) => void;
+
   /* Class Names */
   className?: string;
   rowClassName?: string;

diff --git a/modules/showcase/pages/version4.tsx b/modules/showcase/pages/version4.tsx
@@ -14,7 +14,7 @@ export default function Version4() {
           nodes={nodes}
           className="tree"
           rowClassName="tree-row"
-          height={900}
+          height={100}
           {...filterProps}
         />
         <input