-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'upstream/next' into fix-11679
- Loading branch information
Showing
129 changed files
with
782 additions
and
318 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import FormControlLabel from '@mui/material/FormControlLabel'; | ||
| import Checkbox from '@mui/material/Checkbox'; | ||
|
|
||
| import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; | ||
| import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; | ||
| import { BarPlot } from '@mui/x-charts/BarChart'; | ||
| import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; | ||
| import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; | ||
|
|
||
| const dataset = [ | ||
| { min: -12, max: -4, precip: 79, month: 'Jan' }, | ||
| { min: -11, max: -3, precip: 66, month: 'Feb' }, | ||
| { min: -6, max: 2, precip: 76, month: 'Mar' }, | ||
| { min: 1, max: 9, precip: 106, month: 'Apr' }, | ||
| { min: 8, max: 17, precip: 105, month: 'Mai' }, | ||
| { min: 15, max: 24, precip: 114, month: 'Jun' }, | ||
| { min: 18, max: 26, precip: 106, month: 'Jul' }, | ||
| { min: 17, max: 26, precip: 105, month: 'Aug' }, | ||
| { min: 13, max: 21, precip: 100, month: 'Sept' }, | ||
| { min: 6, max: 13, precip: 116, month: 'Oct' }, | ||
| { min: 0, max: 6, precip: 93, month: 'Nov' }, | ||
| { min: -8, max: -1, precip: 93, month: 'Dec' }, | ||
| ]; | ||
|
|
||
| const series = [ | ||
| { type: 'line', dataKey: 'min', color: '#577399' }, | ||
| { type: 'line', dataKey: 'max', color: '#fe5f55' }, | ||
| { type: 'bar', dataKey: 'precip', color: '#bfdbf7', yAxisKey: 'rightAxis' }, | ||
| ]; | ||
|
|
||
| export default function ReverseExampleNoSnap() { | ||
| const [reverseX, setReverseX] = React.useState(false); | ||
| const [reverseLeft, setReverseLeft] = React.useState(false); | ||
| const [reverseRight, setReverseRight] = React.useState(false); | ||
|
|
||
| return ( | ||
| <Stack sx={{ width: '100%' }}> | ||
| <Stack direction="row"> | ||
| <FormControlLabel | ||
| checked={reverseX} | ||
| control={ | ||
| <Checkbox onChange={(event) => setReverseX(event.target.checked)} /> | ||
| } | ||
| label="reverse x-axis" | ||
| labelPlacement="end" | ||
| /> | ||
| <FormControlLabel | ||
| checked={reverseLeft} | ||
| control={ | ||
| <Checkbox onChange={(event) => setReverseLeft(event.target.checked)} /> | ||
| } | ||
| label="reverse left axis" | ||
| labelPlacement="end" | ||
| /> | ||
| <FormControlLabel | ||
| checked={reverseRight} | ||
| control={ | ||
| <Checkbox onChange={(event) => setReverseRight(event.target.checked)} /> | ||
| } | ||
| label="reverse right axis" | ||
| labelPlacement="end" | ||
| /> | ||
| </Stack> | ||
| <Box sx={{ width: '100%' }}> | ||
| <ResponsiveChartContainer | ||
| series={series} | ||
| xAxis={[ | ||
| { | ||
| scaleType: 'band', | ||
| dataKey: 'month', | ||
| label: 'Month', | ||
| reverse: reverseX, | ||
| }, | ||
| ]} | ||
| yAxis={[ | ||
| { id: 'leftAxis', reverse: reverseLeft }, | ||
| { id: 'rightAxis', reverse: reverseRight }, | ||
| ]} | ||
| dataset={dataset} | ||
| height={400} | ||
| > | ||
| <BarPlot /> | ||
| <LinePlot /> | ||
| <MarkPlot /> | ||
|
|
||
| <ChartsXAxis /> | ||
| <ChartsYAxis axisId="leftAxis" label="temerature (°C)" /> | ||
| <ChartsYAxis | ||
| axisId="rightAxis" | ||
| position="right" | ||
| label="precipitation (mm)" | ||
| /> | ||
| </ResponsiveChartContainer> | ||
| </Box> | ||
| </Stack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
docs/data/data-grid/column-definition/ActionsWithModalGrid.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import * as React from 'react'; | ||
| import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid'; | ||
| import DeleteIcon from '@mui/icons-material/Delete'; | ||
| import { randomUserName } from '@mui/x-data-grid-generator'; | ||
| import Dialog from '@mui/material/Dialog'; | ||
| import DialogTitle from '@mui/material/DialogTitle'; | ||
| import DialogContent from '@mui/material/DialogContent'; | ||
| import DialogContentText from '@mui/material/DialogContentText'; | ||
| import DialogActions from '@mui/material/DialogActions'; | ||
| import Button from '@mui/material/Button'; | ||
|
|
||
| const initialRows = [ | ||
| { id: 1, name: randomUserName() }, | ||
| { id: 2, name: randomUserName() }, | ||
| { id: 3, name: randomUserName() }, | ||
| ]; | ||
|
|
||
| function DeleteUserActionItem({ deleteUser, ...props }) { | ||
| const [open, setOpen] = React.useState(false); | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <GridActionsCellItem {...props} onClick={() => setOpen(true)} /> | ||
| <Dialog | ||
| open={open} | ||
| onClose={() => setOpen(false)} | ||
| aria-labelledby="alert-dialog-title" | ||
| aria-describedby="alert-dialog-description" | ||
| > | ||
| <DialogTitle id="alert-dialog-title">Delete this user?</DialogTitle> | ||
| <DialogContent> | ||
| <DialogContentText id="alert-dialog-description"> | ||
| This action cannot be undone. | ||
| </DialogContentText> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button onClick={() => setOpen(false)}>Cancel</Button> | ||
| <Button | ||
| onClick={() => { | ||
| setOpen(false); | ||
| deleteUser(); | ||
| }} | ||
| color="warning" | ||
| autoFocus | ||
| > | ||
| Delete | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| export default function ActionsWithModalGrid() { | ||
| const [rows, setRows] = React.useState(initialRows); | ||
|
|
||
| const deleteUser = React.useCallback( | ||
| (id) => () => { | ||
| setTimeout(() => { | ||
| setRows((prevRows) => prevRows.filter((row) => row.id !== id)); | ||
| }); | ||
| }, | ||
| [], | ||
| ); | ||
|
|
||
| const columns = React.useMemo( | ||
| () => [ | ||
| { field: 'name', type: 'string' }, | ||
| { | ||
| field: 'actions', | ||
| type: 'actions', | ||
| width: 80, | ||
| getActions: (params) => [ | ||
| <DeleteUserActionItem | ||
| label="Delete" | ||
| showInMenu | ||
| icon={<DeleteIcon />} | ||
| deleteUser={deleteUser(params.id)} | ||
| closeMenuOnClick={false} | ||
| />, | ||
| ], | ||
| }, | ||
| ], | ||
| [deleteUser], | ||
| ); | ||
|
|
||
| return ( | ||
| <div style={{ height: 300, width: '100%' }}> | ||
| <DataGrid columns={columns} rows={rows} /> | ||
| </div> | ||
| ); | ||
| } |
103 changes: 103 additions & 0 deletions
103
docs/data/data-grid/column-definition/ActionsWithModalGrid.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import * as React from 'react'; | ||
| import { | ||
| DataGrid, | ||
| GridActionsCellItem, | ||
| GridRowId, | ||
| GridColDef, | ||
| GridActionsCellItemProps, | ||
| } from '@mui/x-data-grid'; | ||
| import DeleteIcon from '@mui/icons-material/Delete'; | ||
| import { randomUserName } from '@mui/x-data-grid-generator'; | ||
| import Dialog from '@mui/material/Dialog'; | ||
| import DialogTitle from '@mui/material/DialogTitle'; | ||
| import DialogContent from '@mui/material/DialogContent'; | ||
| import DialogContentText from '@mui/material/DialogContentText'; | ||
| import DialogActions from '@mui/material/DialogActions'; | ||
| import Button from '@mui/material/Button'; | ||
|
|
||
| const initialRows = [ | ||
| { id: 1, name: randomUserName() }, | ||
| { id: 2, name: randomUserName() }, | ||
| { id: 3, name: randomUserName() }, | ||
| ]; | ||
|
|
||
| function DeleteUserActionItem({ | ||
| deleteUser, | ||
| ...props | ||
| }: GridActionsCellItemProps & { deleteUser: () => void }) { | ||
| const [open, setOpen] = React.useState(false); | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <GridActionsCellItem {...props} onClick={() => setOpen(true)} /> | ||
| <Dialog | ||
| open={open} | ||
| onClose={() => setOpen(false)} | ||
| aria-labelledby="alert-dialog-title" | ||
| aria-describedby="alert-dialog-description" | ||
| > | ||
| <DialogTitle id="alert-dialog-title">Delete this user?</DialogTitle> | ||
| <DialogContent> | ||
| <DialogContentText id="alert-dialog-description"> | ||
| This action cannot be undone. | ||
| </DialogContentText> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button onClick={() => setOpen(false)}>Cancel</Button> | ||
| <Button | ||
| onClick={() => { | ||
| setOpen(false); | ||
| deleteUser(); | ||
| }} | ||
| color="warning" | ||
| autoFocus | ||
| > | ||
| Delete | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| type Row = (typeof initialRows)[number]; | ||
|
|
||
| export default function ActionsWithModalGrid() { | ||
| const [rows, setRows] = React.useState<Row[]>(initialRows); | ||
|
|
||
| const deleteUser = React.useCallback( | ||
| (id: GridRowId) => () => { | ||
| setTimeout(() => { | ||
| setRows((prevRows) => prevRows.filter((row) => row.id !== id)); | ||
| }); | ||
| }, | ||
| [], | ||
| ); | ||
|
|
||
| const columns = React.useMemo<GridColDef<Row>[]>( | ||
| () => [ | ||
| { field: 'name', type: 'string' }, | ||
| { | ||
| field: 'actions', | ||
| type: 'actions', | ||
| width: 80, | ||
| getActions: (params) => [ | ||
| <DeleteUserActionItem | ||
| label="Delete" | ||
| showInMenu | ||
| icon={<DeleteIcon />} | ||
| deleteUser={deleteUser(params.id)} | ||
| closeMenuOnClick={false} | ||
| />, | ||
| ], | ||
| }, | ||
| ], | ||
| [deleteUser], | ||
| ); | ||
|
|
||
| return ( | ||
| <div style={{ height: 300, width: '100%' }}> | ||
| <DataGrid columns={columns} rows={rows} /> | ||
| </div> | ||
| ); | ||
| } |
1 change: 1 addition & 0 deletions
1
docs/data/data-grid/column-definition/ActionsWithModalGrid.tsx.preview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <DataGrid columns={columns} rows={rows} /> |
Oops, something went wrong.