Work

mui · Jun 21, 2024 · 5b44ae1 · 5b44ae1
1 parent a4e6249
commit 5b44ae1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScrollbar.tsx b/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScrollbar.tsx
@@ -42,15 +42,10 @@ export const TreeViewVirtualScrollbar = React.forwardRef<HTMLDivElement, {}>(
     const scrollbarRef = React.useRef<HTMLDivElement>(null);
     const contentRef = React.useRef<HTMLDivElement>(null);
 
-    // TODO: Make dynamic
-    const dimensions = {};
-
-    const contentSize =
-      dimensions.minimumSize.height + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
-
-    const scrollbarSize = dimensions.viewportInnerSize.height;
-
-    const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize.height);
+    const dimensions = instance.getDimensions();
+    const scrollbarHeight = dimensions.viewportHeight;
+    const scrollbarInnerSize =
+      scrollbarHeight * (dimensions.contentSize / dimensions.viewportHeight);
 
     const onScrollerScroll = useEventCallback(() => {
       const scroller = instance.virtualScrollerRef.current!;
@@ -66,7 +61,7 @@ export const TreeViewVirtualScrollbar = React.forwardRef<HTMLDivElement, {}>(
       }
       isLocked.current = true;
 
-      const value = scroller.scrollTop / contentSize;
+      const value = scroller.scrollTop / dimensions.contentSize;
       scrollbar.scrollTop = value * scrollbarInnerSize;
 
       lastPosition.current = scroller.scrollTop;
@@ -83,7 +78,7 @@ export const TreeViewVirtualScrollbar = React.forwardRef<HTMLDivElement, {}>(
       isLocked.current = true;
 
       const value = scrollbar.scrollTop / scrollbarInnerSize;
-      scroller.scrollTop = value * contentSize;
+      scroller.scrollTop = value * dimensions.contentSize;
     });
 
     useOnMount(() => {

diff --git a/...ree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.ts b/...ree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.ts
@@ -8,6 +8,7 @@ export const useTreeViewVirtualization: TreeViewPlugin<UseTreeViewVirtualization
   return {
     instance: {
       virtualScrollerRef,
+      getDimensions: () => ({}) as any,
     },
   };
 };
@@ -17,4 +18,8 @@ useTreeViewVirtualization.getDefaultizedParams = (params) => ({
   enableVirtualization: params.enableVirtualization ?? false,
 });
 
+useTreeViewVirtualization.getInitialState = () => ({
+  virtualization: { contentSize: 0, viewportHeight: 0 },
+});
+
 useTreeViewVirtualization.params = { enableVirtualization: true };
diff --git a/...ew-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.types.ts b/...ew-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.types.ts
@@ -3,6 +3,7 @@ import { DefaultizedProps, TreeViewPluginSignature } from '@mui/x-tree-view/inte
 
 export interface UseTreeViewVirtualizationInstance {
   virtualScrollerRef: React.RefObject<HTMLUListElement>;
+  getDimensions: () => UseTreeViewVirtualizationState['virtualization'];
 }
 
 export interface UseTreeViewVirtualizationParameters {
@@ -14,9 +15,23 @@ export type UseTreeViewVirtualizationDefaultizedParameters = DefaultizedProps<
   'enableVirtualization'
 >;
 
+interface UseTreeViewVirtualizationState {
+  virtualization: {
+    /**
+     * The viewport height.
+     */
+    viewportHeight: number;
+    /**
+     * The minimum size to display all the items.
+     */
+    contentSize: number;
+  };
+}
+
 export type UseTreeViewVirtualizationSignature = TreeViewPluginSignature<{
   params: UseTreeViewVirtualizationParameters;
   defaultizedParams: UseTreeViewVirtualizationDefaultizedParameters;
   instance: UseTreeViewVirtualizationInstance;
+  state: UseTreeViewVirtualizationState;
   dependencies: [];
 }>;