Skip to content

Commit 3009085

Browse files
github-actions[bot]KenanYusuf
github-actions[bot]
and
KenanYusuf
authored
[docs] Use updateRows method for list view demos (@KenanYusuf) (#15824)
Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>
1 parent dedff41 commit 3009085

File tree

6 files changed

+132
-131
lines changed

6 files changed

+132
-131
lines changed

‎docs/data/data-grid/list-view/ListView.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import IconButton from '@mui/material/IconButton';
88
import MessageIcon from '@mui/icons-material/Message';
99
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
1010
import ToggleButton from '@mui/material/ToggleButton';
11-
import GridIcon from '@mui/icons-material/GridOn';
12-
import ListIcon from '@mui/icons-material/TableRowsOutlined';
11+
import GridViewIcon from '@mui/icons-material/ViewModule';
12+
import ListViewIcon from '@mui/icons-material/ViewList';
1313

1414
function MessageAction(params) {
1515
const handleMessage = (event) => {
@@ -77,7 +77,7 @@ function Toolbar({ view, onChangeView }) {
7777
value="grid"
7878
selected={view === 'grid'}
7979
>
80-
<GridIcon fontSize="small" /> Grid
80+
<GridViewIcon fontSize="small" /> Grid
8181
</ToggleButton>
8282
<ToggleButton
8383
size="small"
@@ -86,7 +86,7 @@ function Toolbar({ view, onChangeView }) {
8686
value="list"
8787
selected={view === 'list'}
8888
>
89-
<ListIcon fontSize="small" /> List
89+
<ListViewIcon fontSize="small" /> List
9090
</ToggleButton>
9191
</ToggleButtonGroup>
9292
</GridToolbarContainer>

‎docs/data/data-grid/list-view/ListView.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import IconButton from '@mui/material/IconButton';
1515
import MessageIcon from '@mui/icons-material/Message';
1616
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
1717
import ToggleButton from '@mui/material/ToggleButton';
18-
import GridIcon from '@mui/icons-material/GridOn';
19-
import ListIcon from '@mui/icons-material/TableRowsOutlined';
18+
import GridViewIcon from '@mui/icons-material/ViewModule';
19+
import ListViewIcon from '@mui/icons-material/ViewList';
2020

2121
declare module '@mui/x-data-grid' {
2222
interface ToolbarPropsOverrides {
@@ -96,7 +96,7 @@ function Toolbar({ view, onChangeView }: ToolbarProps) {
9696
value="grid"
9797
selected={view === 'grid'}
9898
>
99-
<GridIcon fontSize="small" /> Grid
99+
<GridViewIcon fontSize="small" /> Grid
100100
</ToggleButton>
101101
<ToggleButton
102102
size="small"
@@ -105,7 +105,7 @@ function Toolbar({ view, onChangeView }: ToolbarProps) {
105105
value="list"
106106
selected={view === 'list'}
107107
>
108-
<ListIcon fontSize="small" /> List
108+
<ListViewIcon fontSize="small" /> List
109109
</ToggleButton>
110110
</ToggleButtonGroup>
111111
</GridToolbarContainer>

‎docs/data/data-grid/list-view/ListViewAdvanced.js

+53-53
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ export default function ListViewAdvanced(props) {
3838

3939
const apiRef = useGridApiRef();
4040

41-
const [rows, setRows] = React.useState(INITIAL_ROWS);
42-
4341
const [loading, setLoading] = React.useState(false);
4442

4543
const [overlayState, setOverlayState] = React.useState({
@@ -51,65 +49,67 @@ export default function ListViewAdvanced(props) {
5149
setOverlayState({ overlay: null, params: null });
5250
};
5351

54-
const handleDelete = React.useCallback((ids) => {
55-
setRows((prevRows) => prevRows.filter((row) => !ids.includes(row.id)));
56-
}, []);
52+
const handleDelete = React.useCallback(
53+
(ids) => {
54+
apiRef.current.updateRows(ids.map((id) => ({ id, _action: 'delete' })));
55+
},
56+
[apiRef],
57+
);
5758

58-
const handleUpdate = React.useCallback((id, field, value) => {
59-
setRows((prevRows) =>
60-
prevRows.map((row) =>
61-
row.id === id
62-
? { ...row, [field]: value, updatedAt: new Date().toISOString() }
63-
: row,
64-
),
65-
);
66-
}, []);
59+
const handleUpdate = React.useCallback(
60+
(id, field, value) => {
61+
const updatedAt = new Date().toISOString();
62+
apiRef.current.updateRows([{ id, [field]: value, updatedAt }]);
63+
},
64+
[apiRef],
65+
);
6766

68-
const handleUpload = React.useCallback((event) => {
69-
if (!event.target.files) {
70-
return;
71-
}
67+
const handleUpload = React.useCallback(
68+
(event) => {
69+
if (!event.target.files) {
70+
return;
71+
}
7272

73-
const file = event.target.files[0];
74-
const createdAt = new Date().toISOString();
73+
const file = event.target.files[0];
74+
const createdAt = new Date().toISOString();
7575

76-
const fileType = file.type.split('/')[1];
76+
const fileType = file.type.split('/')[1];
7777

78-
// validate file type
79-
if (!FILE_TYPES.includes(fileType)) {
80-
alert('Invalid file type');
81-
return;
82-
}
78+
// validate file type
79+
if (!FILE_TYPES.includes(fileType)) {
80+
alert('Invalid file type');
81+
return;
82+
}
8383

84-
const row = {
85-
id: randomId(),
86-
name: file.name,
87-
description: '',
88-
type: fileType,
89-
size: file.size,
90-
createdBy: 'Kenan Yusuf',
91-
createdAt,
92-
updatedAt: createdAt,
93-
state: 'pending',
94-
};
84+
const row = {
85+
id: randomId(),
86+
name: file.name,
87+
description: '',
88+
type: fileType,
89+
size: file.size,
90+
createdBy: 'Kenan Yusuf',
91+
createdAt,
92+
updatedAt: createdAt,
93+
state: 'pending',
94+
};
9595

96-
event.target.value = '';
96+
event.target.value = '';
9797

98-
// Add temporary row
99-
setLoading(true);
100-
setRows((prevRows) => [...prevRows, row]);
98+
// Add temporary row
99+
setLoading(true);
100+
apiRef.current.updateRows([row]);
101101

102-
// Simulate server response time
103-
const timeout = Math.floor(Math.random() * 3000) + 2000;
104-
setTimeout(() => {
105-
const uploadedRow = { ...row, state: 'uploaded' };
106-
setRows((prevRows) =>
107-
prevRows.map((r) => (r.id === row.id ? uploadedRow : r)),
108-
);
109-
setOverlayState({ overlay: 'actions', params: { row } });
110-
setLoading(false);
111-
}, timeout);
112-
}, []);
102+
// Simulate server response time
103+
const timeout = Math.floor(Math.random() * 3000) + 2000;
104+
setTimeout(() => {
105+
const uploadedRow = { ...row, state: 'uploaded' };
106+
apiRef.current.updateRows([uploadedRow]);
107+
setOverlayState({ overlay: 'actions', params: { row } });
108+
setLoading(false);
109+
}, timeout);
110+
},
111+
[apiRef],
112+
);
113113

114114
const columns = React.useMemo(
115115
() => [
@@ -266,7 +266,7 @@ export default function ListViewAdvanced(props) {
266266
<div ref={containerRef} style={{ maxWidth: '100%' }}>
267267
<DataGridPremium
268268
apiRef={apiRef}
269-
rows={rows}
269+
rows={INITIAL_ROWS}
270270
columns={columns}
271271
loading={loading}
272272
slots={{ toolbar: Toolbar }}

‎docs/data/data-grid/list-view/ListViewAdvanced.tsx

+13-20
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
DataGridPremium,
88
GridRowId,
99
gridClasses,
10-
GridRowModel,
1110
} from '@mui/x-data-grid-premium';
1211
import EditIcon from '@mui/icons-material/Edit';
1312
import DeleteIcon from '@mui/icons-material/Delete';
@@ -56,8 +55,6 @@ export default function ListViewAdvanced(props: Props) {
5655

5756
const apiRef = useGridApiRef();
5857

59-
const [rows, setRows] = React.useState<GridRowModel<RowModel>[]>(INITIAL_ROWS);
60-
6158
const [loading, setLoading] = React.useState(false);
6259

6360
const [overlayState, setOverlayState] = React.useState<{
@@ -72,25 +69,23 @@ export default function ListViewAdvanced(props: Props) {
7269
setOverlayState({ overlay: null, params: null });
7370
};
7471

75-
const handleDelete = React.useCallback((ids: GridRowId[]) => {
76-
setRows((prevRows) => prevRows.filter((row) => !ids.includes(row.id)));
77-
}, []);
72+
const handleDelete = React.useCallback(
73+
(ids: GridRowId[]) => {
74+
apiRef.current.updateRows(ids.map((id) => ({ id, _action: 'delete' })));
75+
},
76+
[apiRef],
77+
);
7878

7979
const handleUpdate = React.useCallback(
8080
(
8181
id: GridRowId,
8282
field: GridRowParams<RowModel>['columns'][number]['field'],
8383
value: string,
8484
) => {
85-
setRows((prevRows) =>
86-
prevRows.map((row) =>
87-
row.id === id
88-
? { ...row, [field]: value, updatedAt: new Date().toISOString() }
89-
: row,
90-
),
91-
);
85+
const updatedAt = new Date().toISOString();
86+
apiRef.current.updateRows([{ id, [field]: value, updatedAt }]);
9287
},
93-
[],
88+
[apiRef],
9489
);
9590

9691
const handleUpload = React.useCallback(
@@ -126,20 +121,18 @@ export default function ListViewAdvanced(props: Props) {
126121

127122
// Add temporary row
128123
setLoading(true);
129-
setRows((prevRows) => [...prevRows, row]);
124+
apiRef.current.updateRows([row]);
130125

131126
// Simulate server response time
132127
const timeout = Math.floor(Math.random() * 3000) + 2000;
133128
setTimeout(() => {
134129
const uploadedRow: RowModel = { ...row, state: 'uploaded' };
135-
setRows((prevRows) =>
136-
prevRows.map((r) => (r.id === row.id ? uploadedRow : r)),
137-
);
130+
apiRef.current.updateRows([uploadedRow]);
138131
setOverlayState({ overlay: 'actions', params: { row } });
139132
setLoading(false);
140133
}, timeout);
141134
},
142-
[],
135+
[apiRef],
143136
);
144137

145138
const columns: GridColDef[] = React.useMemo(
@@ -297,7 +290,7 @@ export default function ListViewAdvanced(props: Props) {
297290
<div ref={containerRef} style={{ maxWidth: '100%' }}>
298291
<DataGridPremium
299292
apiRef={apiRef}
300-
rows={rows}
293+
rows={INITIAL_ROWS}
301294
columns={columns}
302295
loading={loading}
303296
slots={{ toolbar: Toolbar }}

‎docs/data/data-grid/list-view/ListViewEdit.js

+29-21
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import * as React from 'react';
2-
import { DataGridPro } from '@mui/x-data-grid-pro';
2+
import { DataGridPro, useGridApiContext } from '@mui/x-data-grid-pro';
33
import Stack from '@mui/material/Stack';
44
import Avatar from '@mui/material/Avatar';
55
import Typography from '@mui/material/Typography';
66
import IconButton from '@mui/material/IconButton';
77
import EditIcon from '@mui/icons-material/Edit';
8+
import DeleteIcon from '@mui/icons-material/Delete';
89
import Dialog from '@mui/material/Dialog';
910
import DialogTitle from '@mui/material/DialogTitle';
1011
import DialogContent from '@mui/material/DialogContent';
@@ -28,7 +29,7 @@ const randomRole = () => {
2829
return randomArrayItem(roles);
2930
};
3031

31-
const initialRows = [
32+
const rows = [
3233
{
3334
id: randomId(),
3435
name: randomTraderName(),
@@ -73,10 +74,11 @@ const columns = [
7374
];
7475

7576
function EditAction(props) {
76-
const { row, onSave } = props;
77+
const { row } = props;
7778
const [editing, setEditing] = React.useState(false);
7879
const [name, setName] = React.useState(row.name);
7980
const [position, setPosition] = React.useState(row.position);
81+
const apiRef = useGridApiContext();
8082

8183
const handleEdit = (event) => {
8284
event.stopPropagation();
@@ -89,7 +91,7 @@ function EditAction(props) {
8991

9092
const handleSave = (event) => {
9193
event.preventDefault();
92-
onSave(row.id, { name, position });
94+
apiRef.current.updateRows([{ id: row.id, name, position }]);
9395
handleClose();
9496
};
9597

@@ -155,6 +157,20 @@ function EditAction(props) {
155157
);
156158
}
157159

160+
function DeleteAction(props) {
161+
const { row } = props;
162+
const apiRef = useGridApiContext();
163+
164+
return (
165+
<IconButton
166+
aria-label="Delete"
167+
onClick={() => apiRef.current.updateRows([{ id: row.id, _action: 'delete' }])}
168+
>
169+
<DeleteIcon />
170+
</IconButton>
171+
);
172+
}
173+
158174
function ListViewCell(props) {
159175
const { row } = props;
160176

@@ -176,28 +192,20 @@ function ListViewCell(props) {
176192
{row.position}
177193
</Typography>
178194
</Stack>
179-
<EditAction {...props} />
195+
<Stack direction="row" sx={{ gap: 0.5 }}>
196+
<EditAction {...props} />
197+
<DeleteAction {...props} />
198+
</Stack>
180199
</Stack>
181200
);
182201
}
183202

184-
export default function ListViewEdit() {
185-
const [rows, setRows] = React.useState(initialRows);
186-
187-
const updateRow = React.useCallback((id, rowUpdates) => {
188-
setRows((prevRows) =>
189-
prevRows.map((row) => (row.id === id ? { ...row, ...rowUpdates } : row)),
190-
);
191-
}, []);
192-
193-
const listColDef = React.useMemo(
194-
() => ({
195-
field: 'listColumn',
196-
renderCell: (params) => <ListViewCell {...params} onSave={updateRow} />,
197-
}),
198-
[updateRow],
199-
);
203+
const listColDef = {
204+
field: 'listColumn',
205+
renderCell: (params) => <ListViewCell {...params} />,
206+
};
200207

208+
export default function ListViewEdit() {
201209
return (
202210
<div
203211
style={{

0 commit comments

Comments
 (0)