Work

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

Hide file tree

Showing 5 changed files with 37 additions and 25 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/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScroller.tsx b/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScroller.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
-import { shouldForwardProp } from '@mui/system/createStyled';
 import useForkRef from '@mui/utils/useForkRef';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import {
@@ -13,23 +12,16 @@ import { UseTreeViewVirtualizationSignature } from '../internals/plugins/useTree
 import { useTreeViewVirtualScroller } from './useTreeViewVirtualScroller';
 import { TreeViewVirtualScrollerProps } from './TreeViewVirtualScroller.types';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
+import { TreeViewVirtualScrollbar } from './TreeViewVirtualScrollbar';
 
 const TreeViewVirtualScrollerRoot = styled('div', {
   name: 'MuiTreeViewVirtualScroller',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'enableVirtualization',
 })({
-  variants: [
-    {
-      props: { enableVirtualization: true },
-      style: {
-        flexGrow: 1,
-        position: 'relative',
-        overflow: 'hidden',
-      },
-    },
-  ],
+  flexGrow: 1,
+  position: 'relative',
+  overflow: 'hidden',
 });
 
 const releaseInfo = getReleaseInfo();
@@ -44,7 +36,7 @@ export const TreeViewVirtualScroller = React.forwardRef(function TreeViewVirtual
 
   const { instance } =
     useTreeViewContext<[UseTreeViewVirtualizationSignature, UseTreeViewItemsSignature]>();
-  const { getRootProps } = useTreeViewVirtualScroller();
+  const { getRootProps, getScrollbarProps } = useTreeViewVirtualScroller();
   const handleRef = useForkRef(ref, instance.virtualScrollerRef);
 
   const Root = slots.root;
@@ -66,6 +58,7 @@ export const TreeViewVirtualScroller = React.forwardRef(function TreeViewVirtual
         slotProps={slotProps}
         itemsToRender={instance.getItemsToRender()}
       />
+      <TreeViewVirtualScrollbar {...getScrollbarProps()} />
       <Watermark packageName="x-tree-view-pro" releaseInfo={releaseInfo} />
     </TreeViewVirtualScrollerRoot>
   );

diff --git a/packages/x-tree-view-pro/src/TreeViewVirtualScroller/useTreeViewVirtualScroller.ts b/packages/x-tree-view-pro/src/TreeViewVirtualScroller/useTreeViewVirtualScroller.ts
@@ -1,11 +1,15 @@
 import * as React from 'react';
 
 export const useTreeViewVirtualScroller = () => {
-  const rootRef = React.useRef<HTMLDivElement>(null);
+  const rootRef = React.useRef<HTMLUListElement>(null);
+  const scrollbarRef = React.useRef<HTMLDivElement>(null);
 
   const getRootProps = () => ({ ref: rootRef });
 
+  const getScrollbarProps = () => ({ ref: scrollbarRef });
+
   return {
     getRootProps,
+    getScrollbarProps,
   };
 };
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: [];
 }>;