Merge branch 'v7.x' into cherry-pick-15543

mui · Nov 22, 2024 · f5ae0cf · f5ae0cf
2 parents 848c80b + 22b021d
commit f5ae0cf
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 25 deletions.
diff --git a/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.js b/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.js
@@ -13,6 +13,8 @@ import {
   randomId,
 } from '@mui/x-data-grid-generator';
 
+const DetailPanelDataCache = React.createContext(new Map());
+
 async function getProducts(orderId) {
   await new Promise((resolve) => {
     setTimeout(resolve, 1000);
@@ -32,11 +34,18 @@ function DetailPanelContent({ row: rowProp }) {
   const [isLoading, setLoading] = React.useState(true);
   const [products, setProducts] = React.useState([]);
 
+  const detailPanelDataCache = React.useContext(DetailPanelDataCache);
+
   React.useEffect(() => {
     let isMounted = true;
     (async () => {
-      console.log('fetching detail panel content for row', rowProp.id);
-      const result = await getProducts(rowProp.id);
+      if (!detailPanelDataCache.has(rowProp.id)) {
+        console.log('fetching detail panel content for row', rowProp.id);
+        const response = await getProducts(rowProp.id);
+        // Store the data in cache so that when detail panel unmounts due to virtualization, the data is not lost
+        detailPanelDataCache.set(rowProp.id, response);
+      }
+      const result = detailPanelDataCache.get(rowProp.id);
 
       if (!isMounted) {
         return;
@@ -49,7 +58,7 @@ function DetailPanelContent({ row: rowProp }) {
     return () => {
       isMounted = false;
     };
-  }, [rowProp.id]);
+  }, [rowProp.id, detailPanelDataCache]);
 
   return (
     <Stack
@@ -111,14 +120,34 @@ const getDetailPanelContent = (params) => <DetailPanelContent row={params.row} /
 const getDetailPanelHeight = () => 240;
 
 export default function LazyLoadingDetailPanel() {
+  const detailPanelDataCache = React.useRef(new Map()).current;
+
+  const handleDetailPanelExpansionChange = React.useCallback(
+    (newExpandedRowIds) => {
+      // Only keep cached data for detail panels that are still expanded
+      const preservedEntries = newExpandedRowIds.map((id) => [
+        id,
+        detailPanelDataCache.get(id),
+      ]);
+      detailPanelDataCache.clear();
+      preservedEntries.forEach(
+        ([id, value]) => value && detailPanelDataCache.set(id, value),
+      );
+    },
+    [detailPanelDataCache],
+  );
+
   return (
     <Box sx={{ width: '100%', height: 400 }}>
-      <DataGridPro
-        columns={columns}
-        rows={rows}
-        getDetailPanelHeight={getDetailPanelHeight}
-        getDetailPanelContent={getDetailPanelContent}
-      />
+      <DetailPanelDataCache.Provider value={detailPanelDataCache}>
+        <DataGridPro
+          columns={columns}
+          rows={rows}
+          getDetailPanelHeight={getDetailPanelHeight}
+          getDetailPanelContent={getDetailPanelContent}
+          onDetailPanelExpandedRowIdsChange={handleDetailPanelExpansionChange}
+        />
+      </DetailPanelDataCache.Provider>
     </Box>
   );
 }
diff --git a/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.tsx b/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.tsx
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
-import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro';
+import { DataGridPro, DataGridProProps, GridColDef } from '@mui/x-data-grid-pro';
 import {
   randomEmail,
   randomInt,
@@ -14,6 +14,8 @@ import {
 } from '@mui/x-data-grid-generator';
 import { DataGridProps } from '@mui/x-data-grid';
 
+const DetailPanelDataCache = React.createContext<Map<string, any>>(new Map());
+
 async function getProducts(orderId: Customer['id']) {
   await new Promise((resolve) => {
     setTimeout(resolve, 1000);
@@ -35,11 +37,18 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) {
     Awaited<ReturnType<typeof getProducts>>
   >([]);
 
+  const detailPanelDataCache = React.useContext(DetailPanelDataCache);
+
   React.useEffect(() => {
     let isMounted = true;
     (async () => {
-      console.log('fetching detail panel content for row', rowProp.id);
-      const result = await getProducts(rowProp.id);
+      if (!detailPanelDataCache.has(rowProp.id)) {
+        console.log('fetching detail panel content for row', rowProp.id);
+        const response = await getProducts(rowProp.id);
+        // Store the data in cache so that when detail panel unmounts due to virtualization, the data is not lost
+        detailPanelDataCache.set(rowProp.id, response);
+      }
+      const result = detailPanelDataCache.get(rowProp.id);
 
       if (!isMounted) {
         return;
@@ -52,7 +61,7 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) {
     return () => {
       isMounted = false;
     };
-  }, [rowProp.id]);
+  }, [rowProp.id, detailPanelDataCache]);
 
   return (
     <Stack
@@ -118,14 +127,36 @@ const getDetailPanelContent: DataGridProps['getDetailPanelContent'] = (params) =
 const getDetailPanelHeight = () => 240;
 
 export default function LazyLoadingDetailPanel() {
+  const detailPanelDataCache = React.useRef(new Map()).current;
+
+  const handleDetailPanelExpansionChange = React.useCallback<
+    NonNullable<DataGridProProps['onDetailPanelExpandedRowIdsChange']>
+  >(
+    (newExpandedRowIds) => {
+      // Only keep cached data for detail panels that are still expanded
+      const preservedEntries = newExpandedRowIds.map((id) => [
+        id,
+        detailPanelDataCache.get(id),
+      ]);
+      detailPanelDataCache.clear();
+      preservedEntries.forEach(
+        ([id, value]) => value && detailPanelDataCache.set(id, value),
+      );
+    },
+    [detailPanelDataCache],
+  );
+
   return (
     <Box sx={{ width: '100%', height: 400 }}>
-      <DataGridPro
-        columns={columns}
-        rows={rows}
-        getDetailPanelHeight={getDetailPanelHeight}
-        getDetailPanelContent={getDetailPanelContent}
-      />
+      <DetailPanelDataCache.Provider value={detailPanelDataCache}>
+        <DataGridPro
+          columns={columns}
+          rows={rows}
+          getDetailPanelHeight={getDetailPanelHeight}
+          getDetailPanelContent={getDetailPanelContent}
+          onDetailPanelExpandedRowIdsChange={handleDetailPanelExpansionChange}
+        />
+      </DetailPanelDataCache.Provider>
     </Box>
   );
 }
diff --git a/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.tsx.preview b/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.tsx.preview
@@ -1,6 +1,9 @@
-<DataGridPro
-  columns={columns}
-  rows={rows}
-  getDetailPanelHeight={getDetailPanelHeight}
-  getDetailPanelContent={getDetailPanelContent}
-/>
+<DetailPanelDataCache.Provider value={detailPanelDataCache}>
+  <DataGridPro
+    columns={columns}
+    rows={rows}
+    getDetailPanelHeight={getDetailPanelHeight}
+    getDetailPanelContent={getDetailPanelContent}
+    onDetailPanelExpandedRowIdsChange={handleDetailPanelExpansionChange}
+  />
+</DetailPanelDataCache.Provider>