[docs] Use updateRows method for list view demos (@KenanYusuf) (#15824

) Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>
mui · Dec 12, 2024 · 3009085 · 3009085
1 parent dedff41
commit 3009085
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 131 deletions.
diff --git a/docs/data/data-grid/list-view/ListView.js b/docs/data/data-grid/list-view/ListView.js
@@ -8,8 +8,8 @@ import IconButton from '@mui/material/IconButton';
 import MessageIcon from '@mui/icons-material/Message';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
-import GridIcon from '@mui/icons-material/GridOn';
-import ListIcon from '@mui/icons-material/TableRowsOutlined';
+import GridViewIcon from '@mui/icons-material/ViewModule';
+import ListViewIcon from '@mui/icons-material/ViewList';
 
 function MessageAction(params) {
   const handleMessage = (event) => {
@@ -77,7 +77,7 @@ function Toolbar({ view, onChangeView }) {
           value="grid"
           selected={view === 'grid'}
         >
-          <GridIcon fontSize="small" /> Grid
+          <GridViewIcon fontSize="small" /> Grid
         </ToggleButton>
         <ToggleButton
           size="small"
@@ -86,7 +86,7 @@ function Toolbar({ view, onChangeView }) {
           value="list"
           selected={view === 'list'}
         >
-          <ListIcon fontSize="small" /> List
+          <ListViewIcon fontSize="small" /> List
         </ToggleButton>
       </ToggleButtonGroup>
     </GridToolbarContainer>

diff --git a/docs/data/data-grid/list-view/ListView.tsx b/docs/data/data-grid/list-view/ListView.tsx
@@ -15,8 +15,8 @@ import IconButton from '@mui/material/IconButton';
 import MessageIcon from '@mui/icons-material/Message';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
-import GridIcon from '@mui/icons-material/GridOn';
-import ListIcon from '@mui/icons-material/TableRowsOutlined';
+import GridViewIcon from '@mui/icons-material/ViewModule';
+import ListViewIcon from '@mui/icons-material/ViewList';
 
 declare module '@mui/x-data-grid' {
   interface ToolbarPropsOverrides {
@@ -96,7 +96,7 @@ function Toolbar({ view, onChangeView }: ToolbarProps) {
           value="grid"
           selected={view === 'grid'}
         >
-          <GridIcon fontSize="small" /> Grid
+          <GridViewIcon fontSize="small" /> Grid
         </ToggleButton>
         <ToggleButton
           size="small"
@@ -105,7 +105,7 @@ function Toolbar({ view, onChangeView }: ToolbarProps) {
           value="list"
           selected={view === 'list'}
         >
-          <ListIcon fontSize="small" /> List
+          <ListViewIcon fontSize="small" /> List
         </ToggleButton>
       </ToggleButtonGroup>
     </GridToolbarContainer>

diff --git a/docs/data/data-grid/list-view/ListViewAdvanced.js b/docs/data/data-grid/list-view/ListViewAdvanced.js
@@ -38,8 +38,6 @@ export default function ListViewAdvanced(props) {
 
   const apiRef = useGridApiRef();
 
-  const [rows, setRows] = React.useState(INITIAL_ROWS);
-
   const [loading, setLoading] = React.useState(false);
 
   const [overlayState, setOverlayState] = React.useState({
@@ -51,65 +49,67 @@ export default function ListViewAdvanced(props) {
     setOverlayState({ overlay: null, params: null });
   };
 
-  const handleDelete = React.useCallback((ids) => {
-    setRows((prevRows) => prevRows.filter((row) => !ids.includes(row.id)));
-  }, []);
+  const handleDelete = React.useCallback(
+    (ids) => {
+      apiRef.current.updateRows(ids.map((id) => ({ id, _action: 'delete' })));
+    },
+    [apiRef],
+  );
 
-  const handleUpdate = React.useCallback((id, field, value) => {
-    setRows((prevRows) =>
-      prevRows.map((row) =>
-        row.id === id
-          ? { ...row, [field]: value, updatedAt: new Date().toISOString() }
-          : row,
-      ),
-    );
-  }, []);
+  const handleUpdate = React.useCallback(
+    (id, field, value) => {
+      const updatedAt = new Date().toISOString();
+      apiRef.current.updateRows([{ id, [field]: value, updatedAt }]);
+    },
+    [apiRef],
+  );
 
-  const handleUpload = React.useCallback((event) => {
-    if (!event.target.files) {
-      return;
-    }
+  const handleUpload = React.useCallback(
+    (event) => {
+      if (!event.target.files) {
+        return;
+      }
 
-    const file = event.target.files[0];
-    const createdAt = new Date().toISOString();
+      const file = event.target.files[0];
+      const createdAt = new Date().toISOString();
 
-    const fileType = file.type.split('/')[1];
+      const fileType = file.type.split('/')[1];
 
-    // validate file type
-    if (!FILE_TYPES.includes(fileType)) {
-      alert('Invalid file type');
-      return;
-    }
+      // validate file type
+      if (!FILE_TYPES.includes(fileType)) {
+        alert('Invalid file type');
+        return;
+      }
 
-    const row = {
-      id: randomId(),
-      name: file.name,
-      description: '',
-      type: fileType,
-      size: file.size,
-      createdBy: 'Kenan Yusuf',
-      createdAt,
-      updatedAt: createdAt,
-      state: 'pending',
-    };
+      const row = {
+        id: randomId(),
+        name: file.name,
+        description: '',
+        type: fileType,
+        size: file.size,
+        createdBy: 'Kenan Yusuf',
+        createdAt,
+        updatedAt: createdAt,
+        state: 'pending',
+      };
 
-    event.target.value = '';
+      event.target.value = '';
 
-    // Add temporary row
-    setLoading(true);
-    setRows((prevRows) => [...prevRows, row]);
+      // Add temporary row
+      setLoading(true);
+      apiRef.current.updateRows([row]);
 
-    // Simulate server response time
-    const timeout = Math.floor(Math.random() * 3000) + 2000;
-    setTimeout(() => {
-      const uploadedRow = { ...row, state: 'uploaded' };
-      setRows((prevRows) =>
-        prevRows.map((r) => (r.id === row.id ? uploadedRow : r)),
-      );
-      setOverlayState({ overlay: 'actions', params: { row } });
-      setLoading(false);
-    }, timeout);
-  }, []);
+      // Simulate server response time
+      const timeout = Math.floor(Math.random() * 3000) + 2000;
+      setTimeout(() => {
+        const uploadedRow = { ...row, state: 'uploaded' };
+        apiRef.current.updateRows([uploadedRow]);
+        setOverlayState({ overlay: 'actions', params: { row } });
+        setLoading(false);
+      }, timeout);
+    },
+    [apiRef],
+  );
 
   const columns = React.useMemo(
     () => [
@@ -266,7 +266,7 @@ export default function ListViewAdvanced(props) {
       <div ref={containerRef} style={{ maxWidth: '100%' }}>
         <DataGridPremium
           apiRef={apiRef}
-          rows={rows}
+          rows={INITIAL_ROWS}
           columns={columns}
           loading={loading}
           slots={{ toolbar: Toolbar }}

diff --git a/docs/data/data-grid/list-view/ListViewAdvanced.tsx b/docs/data/data-grid/list-view/ListViewAdvanced.tsx
@@ -7,7 +7,6 @@ import {
   DataGridPremium,
   GridRowId,
   gridClasses,
-  GridRowModel,
 } from '@mui/x-data-grid-premium';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -56,8 +55,6 @@ export default function ListViewAdvanced(props: Props) {
 
   const apiRef = useGridApiRef();
 
-  const [rows, setRows] = React.useState<GridRowModel<RowModel>[]>(INITIAL_ROWS);
-
   const [loading, setLoading] = React.useState(false);
 
   const [overlayState, setOverlayState] = React.useState<{
@@ -72,25 +69,23 @@ export default function ListViewAdvanced(props: Props) {
     setOverlayState({ overlay: null, params: null });
   };
 
-  const handleDelete = React.useCallback((ids: GridRowId[]) => {
-    setRows((prevRows) => prevRows.filter((row) => !ids.includes(row.id)));
-  }, []);
+  const handleDelete = React.useCallback(
+    (ids: GridRowId[]) => {
+      apiRef.current.updateRows(ids.map((id) => ({ id, _action: 'delete' })));
+    },
+    [apiRef],
+  );
 
   const handleUpdate = React.useCallback(
     (
       id: GridRowId,
       field: GridRowParams<RowModel>['columns'][number]['field'],
       value: string,
     ) => {
-      setRows((prevRows) =>
-        prevRows.map((row) =>
-          row.id === id
-            ? { ...row, [field]: value, updatedAt: new Date().toISOString() }
-            : row,
-        ),
-      );
+      const updatedAt = new Date().toISOString();
+      apiRef.current.updateRows([{ id, [field]: value, updatedAt }]);
     },
-    [],
+    [apiRef],
   );
 
   const handleUpload = React.useCallback(
@@ -126,20 +121,18 @@ export default function ListViewAdvanced(props: Props) {
 
       // Add temporary row
       setLoading(true);
-      setRows((prevRows) => [...prevRows, row]);
+      apiRef.current.updateRows([row]);
 
       // Simulate server response time
       const timeout = Math.floor(Math.random() * 3000) + 2000;
       setTimeout(() => {
         const uploadedRow: RowModel = { ...row, state: 'uploaded' };
-        setRows((prevRows) =>
-          prevRows.map((r) => (r.id === row.id ? uploadedRow : r)),
-        );
+        apiRef.current.updateRows([uploadedRow]);
         setOverlayState({ overlay: 'actions', params: { row } });
         setLoading(false);
       }, timeout);
     },
-    [],
+    [apiRef],
   );
 
   const columns: GridColDef[] = React.useMemo(
@@ -297,7 +290,7 @@ export default function ListViewAdvanced(props: Props) {
       <div ref={containerRef} style={{ maxWidth: '100%' }}>
         <DataGridPremium
           apiRef={apiRef}
-          rows={rows}
+          rows={INITIAL_ROWS}
           columns={columns}
           loading={loading}
           slots={{ toolbar: Toolbar }}

diff --git a/docs/data/data-grid/list-view/ListViewEdit.js b/docs/data/data-grid/list-view/ListViewEdit.js
@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPro, useGridApiContext } from '@mui/x-data-grid-pro';
 import Stack from '@mui/material/Stack';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -28,7 +29,7 @@ const randomRole = () => {
   return randomArrayItem(roles);
 };
 
-const initialRows = [
+const rows = [
   {
     id: randomId(),
     name: randomTraderName(),
@@ -73,10 +74,11 @@ const columns = [
 ];
 
 function EditAction(props) {
-  const { row, onSave } = props;
+  const { row } = props;
   const [editing, setEditing] = React.useState(false);
   const [name, setName] = React.useState(row.name);
   const [position, setPosition] = React.useState(row.position);
+  const apiRef = useGridApiContext();
 
   const handleEdit = (event) => {
     event.stopPropagation();
@@ -89,7 +91,7 @@ function EditAction(props) {
 
   const handleSave = (event) => {
     event.preventDefault();
-    onSave(row.id, { name, position });
+    apiRef.current.updateRows([{ id: row.id, name, position }]);
     handleClose();
   };
 
@@ -155,6 +157,20 @@ function EditAction(props) {
   );
 }
 
+function DeleteAction(props) {
+  const { row } = props;
+  const apiRef = useGridApiContext();
+
+  return (
+    <IconButton
+      aria-label="Delete"
+      onClick={() => apiRef.current.updateRows([{ id: row.id, _action: 'delete' }])}
+    >
+      <DeleteIcon />
+    </IconButton>
+  );
+}
+
 function ListViewCell(props) {
   const { row } = props;
 
@@ -176,28 +192,20 @@ function ListViewCell(props) {
           {row.position}
         </Typography>
       </Stack>
-      <EditAction {...props} />
+      <Stack direction="row" sx={{ gap: 0.5 }}>
+        <EditAction {...props} />
+        <DeleteAction {...props} />
+      </Stack>
     </Stack>
   );
 }
 
-export default function ListViewEdit() {
-  const [rows, setRows] = React.useState(initialRows);
-
-  const updateRow = React.useCallback((id, rowUpdates) => {
-    setRows((prevRows) =>
-      prevRows.map((row) => (row.id === id ? { ...row, ...rowUpdates } : row)),
-    );
-  }, []);
-
-  const listColDef = React.useMemo(
-    () => ({
-      field: 'listColumn',
-      renderCell: (params) => <ListViewCell {...params} onSave={updateRow} />,
-    }),
-    [updateRow],
-  );
+const listColDef = {
+  field: 'listColumn',
+  renderCell: (params) => <ListViewCell {...params} />,
+};
 
+export default function ListViewEdit() {
   return (
     <div
       style={{