diff --git a/docs/data/data-grid/list-view/ListView.js b/docs/data/data-grid/list-view/ListView.js index 38405104013ac..f4bc0524e74b0 100644 --- 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'} > - Grid + Grid - List + List diff --git a/docs/data/data-grid/list-view/ListView.tsx b/docs/data/data-grid/list-view/ListView.tsx index def8aa893f4ea..64550e4d653c6 100644 --- 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'} > - Grid + Grid - List + List diff --git a/docs/data/data-grid/list-view/ListViewAdvanced.js b/docs/data/data-grid/list-view/ListViewAdvanced.js index 8b5d6cd874591..cc3beaeeabe32 100644 --- 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( () => [ @@ -272,7 +272,7 @@ export default function ListViewAdvanced(props) { > []>(INITIAL_ROWS); - const [loading, setLoading] = React.useState(false); const [overlayState, setOverlayState] = React.useState<{ @@ -72,9 +69,12 @@ 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( ( @@ -82,15 +82,10 @@ export default function ListViewAdvanced(props: Props) { field: GridRowParams['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( @@ -303,7 +296,7 @@ export default function ListViewAdvanced(props: Props) { > { 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 ( + apiRef.current.updateRows([{ id: row.id, _action: 'delete' }])} + > + + + ); +} + function ListViewCell(props) { const { row } = props; @@ -176,28 +192,20 @@ function ListViewCell(props) { {row.position} - + + + + ); } -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) => , - }), - [updateRow], - ); +const listColDef = { + field: 'listColumn', + renderCell: (params) => , +}; +export default function ListViewEdit() { return (
{ return randomArrayItem(roles); }; -const initialRows: GridRowsProp = [ +const rows: GridRowsProp = [ { id: randomId(), name: randomTraderName(), @@ -80,15 +81,12 @@ const columns: GridColDef[] = [ }, ]; -interface EditActionProps extends Pick { - onSave: (id: string, rowUpdates: GridRowModel) => void; -} - -function EditAction(props: EditActionProps) { - const { row, onSave } = props; +function EditAction(props: Pick) { + 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: React.MouseEvent) => { event.stopPropagation(); @@ -101,7 +99,7 @@ function EditAction(props: EditActionProps) { const handleSave = (event: React.FormEvent) => { event.preventDefault(); - onSave(row.id, { name, position }); + apiRef.current.updateRows([{ id: row.id, name, position }]); handleClose(); }; @@ -167,11 +165,21 @@ function EditAction(props: EditActionProps) { ); } -interface ListViewCellProps extends GridRenderCellParams { - onSave: (id: string, rowUpdates: GridRowModel) => void; +function DeleteAction(props: Pick) { + const { row } = props; + const apiRef = useGridApiContext(); + + return ( + apiRef.current.updateRows([{ id: row.id, _action: 'delete' }])} + > + + + ); } -function ListViewCell(props: ListViewCellProps) { +function ListViewCell(props: GridRenderCellParams) { const { row } = props; return ( @@ -192,28 +200,20 @@ function ListViewCell(props: ListViewCellProps) { {row.position} - + + + + ); } -export default function ListViewEdit() { - const [rows, setRows] = React.useState(initialRows); - - const updateRow = React.useCallback((id: string, rowUpdates: GridRowModel) => { - setRows((prevRows) => - prevRows.map((row) => (row.id === id ? { ...row, ...rowUpdates } : row)), - ); - }, []); - - const listColDef: GridListColDef = React.useMemo( - () => ({ - field: 'listColumn', - renderCell: (params) => , - }), - [updateRow], - ); +const listColDef: GridListColDef = { + field: 'listColumn', + renderCell: (params) => , +}; +export default function ListViewEdit() { return (