-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Improve Toolpad Core docs (#43796)
- Loading branch information
1 parent
bd3bc3b
commit 1719ed4
Showing
19 changed files
with
479 additions
and
156 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
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
120 changes: 120 additions & 0 deletions
120
docs/data/material/components/dialogs/ToolpadDialogsNoSnap.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,120 @@ | ||
| import * as React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs'; | ||
| import Button from '@mui/material/Button'; | ||
| import LoadingButton from '@mui/lab/LoadingButton'; | ||
| import Dialog from '@mui/material/Dialog'; | ||
| import Alert from '@mui/material/Alert'; | ||
| import DialogTitle from '@mui/material/DialogTitle'; | ||
| import DialogContent from '@mui/material/DialogContent'; | ||
| import DialogActions from '@mui/material/DialogActions'; | ||
|
|
||
| function MyCustomDialog({ open, onClose, payload }) { | ||
| return ( | ||
| <Dialog fullWidth open={open} onClose={() => onClose()}> | ||
| <DialogTitle>Custom Error Handler</DialogTitle> | ||
| <DialogContent> | ||
| <Alert severity="error"> | ||
| {`An error occurred while deleting item "${payload.id}":`} | ||
| <pre>{payload.error}</pre> | ||
| </Alert> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button onClick={() => onClose()}>Close me</Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| ); | ||
| } | ||
|
|
||
| MyCustomDialog.propTypes = { | ||
| /** | ||
| * A function to call when the dialog should be closed. If the dialog has a return | ||
| * value, it should be passed as an argument to this function. You should use the promise | ||
| * that is returned to show a loading state while the dialog is performing async actions | ||
| * on close. | ||
| * @param result The result to return from the dialog. | ||
| * @returns A promise that resolves when the dialog can be fully closed. | ||
| */ | ||
| onClose: PropTypes.func.isRequired, | ||
| /** | ||
| * Whether the dialog is open. | ||
| */ | ||
| open: PropTypes.bool.isRequired, | ||
| /** | ||
| * The payload that was passed when the dialog was opened. | ||
| */ | ||
| payload: PropTypes.shape({ | ||
| error: PropTypes.string, | ||
| id: PropTypes.string, | ||
| }).isRequired, | ||
| }; | ||
|
|
||
| const mockApiDelete = async (id) => { | ||
| return new Promise((resolve, reject) => { | ||
| setTimeout(() => { | ||
| if (!id) { | ||
| reject(new Error('ID is required')); | ||
| } else if (parseInt(id, 10) % 2 === 0) { | ||
| console.log('id', parseInt(id, 10)); | ||
| resolve(true); | ||
| } else if (parseInt(id, 10) % 2 === 1) { | ||
| reject(new Error('Can not delete odd numbered elements')); | ||
| } else if (Number.isNaN(parseInt(id, 10))) { | ||
| reject(new Error('ID must be a number')); | ||
| } else { | ||
| reject(new Error('Unknown error')); | ||
| } | ||
| }, 1000); | ||
| }); | ||
| }; | ||
|
|
||
| function DemoContent() { | ||
| const dialogs = useDialogs(); | ||
| const [isDeleting, setIsDeleting] = React.useState(false); | ||
|
|
||
| const handleDelete = async () => { | ||
| const id = await dialogs.prompt('Enter the ID to delete', { | ||
| okText: 'Delete', | ||
| cancelText: 'Cancel', | ||
| }); | ||
|
|
||
| if (id) { | ||
| const deleteConfirmed = await dialogs.confirm( | ||
| `Are you sure you want to delete "${id}"?`, | ||
| ); | ||
| if (deleteConfirmed) { | ||
| try { | ||
| setIsDeleting(true); | ||
| await mockApiDelete(id); | ||
| dialogs.alert('Deleted!'); | ||
| } catch (error) { | ||
| const message = error instanceof Error ? error.message : 'Unknown error'; | ||
| await dialogs.open(MyCustomDialog, { id, error: message }); | ||
| } finally { | ||
| setIsDeleting(false); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| return ( | ||
| <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}> | ||
| <div style={{ display: 'flex', gap: 16 }}> | ||
| <LoadingButton | ||
| variant="contained" | ||
| loading={isDeleting} | ||
| onClick={handleDelete} | ||
| > | ||
| Delete | ||
| </LoadingButton> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function ToolpadDialogsNoSnap() { | ||
| return ( | ||
| <DialogsProvider> | ||
| <DemoContent /> | ||
| </DialogsProvider> | ||
| ); | ||
| } |
101 changes: 101 additions & 0 deletions
101
docs/data/material/components/dialogs/ToolpadDialogsNoSnap.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,101 @@ | ||
| import * as React from 'react'; | ||
| import { DialogsProvider, useDialogs, DialogProps } from '@toolpad/core/useDialogs'; | ||
| import Button from '@mui/material/Button'; | ||
| import LoadingButton from '@mui/lab/LoadingButton'; | ||
| import Dialog from '@mui/material/Dialog'; | ||
| import Alert from '@mui/material/Alert'; | ||
| import DialogTitle from '@mui/material/DialogTitle'; | ||
| import DialogContent from '@mui/material/DialogContent'; | ||
| import DialogActions from '@mui/material/DialogActions'; | ||
|
|
||
| interface DeleteError { | ||
| id: string | null; | ||
| error: string | null; | ||
| } | ||
|
|
||
| function MyCustomDialog({ open, onClose, payload }: DialogProps<DeleteError>) { | ||
| return ( | ||
| <Dialog fullWidth open={open} onClose={() => onClose()}> | ||
| <DialogTitle>Custom Error Handler</DialogTitle> | ||
| <DialogContent> | ||
| <Alert severity="error"> | ||
| {`An error occurred while deleting item "${payload.id}":`} | ||
| <pre>{payload.error}</pre> | ||
| </Alert> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button onClick={() => onClose()}>Close me</Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| ); | ||
| } | ||
|
|
||
| const mockApiDelete = async (id: string | null) => { | ||
| return new Promise((resolve, reject) => { | ||
| setTimeout(() => { | ||
| if (!id) { | ||
| reject(new Error('ID is required')); | ||
| } else if (parseInt(id, 10) % 2 === 0) { | ||
| console.log('id', parseInt(id, 10)); | ||
| resolve(true); | ||
| } else if (parseInt(id, 10) % 2 === 1) { | ||
| reject(new Error('Can not delete odd numbered elements')); | ||
| } else if (Number.isNaN(parseInt(id, 10))) { | ||
| reject(new Error('ID must be a number')); | ||
| } else { | ||
| reject(new Error('Unknown error')); | ||
| } | ||
| }, 1000); | ||
| }); | ||
| }; | ||
|
|
||
| function DemoContent() { | ||
| const dialogs = useDialogs(); | ||
| const [isDeleting, setIsDeleting] = React.useState(false); | ||
|
|
||
| const handleDelete = async () => { | ||
| const id = await dialogs.prompt('Enter the ID to delete', { | ||
| okText: 'Delete', | ||
| cancelText: 'Cancel', | ||
| }); | ||
|
|
||
| if (id) { | ||
| const deleteConfirmed = await dialogs.confirm( | ||
| `Are you sure you want to delete "${id}"?`, | ||
| ); | ||
| if (deleteConfirmed) { | ||
| try { | ||
| setIsDeleting(true); | ||
| await mockApiDelete(id); | ||
| dialogs.alert('Deleted!'); | ||
| } catch (error) { | ||
| const message = error instanceof Error ? error.message : 'Unknown error'; | ||
| await dialogs.open(MyCustomDialog, { id, error: message }); | ||
| } finally { | ||
| setIsDeleting(false); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| return ( | ||
| <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}> | ||
| <div style={{ display: 'flex', gap: 16 }}> | ||
| <LoadingButton | ||
| variant="contained" | ||
| loading={isDeleting} | ||
| onClick={handleDelete} | ||
| > | ||
| Delete | ||
| </LoadingButton> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function ToolpadDialogsNoSnap() { | ||
| return ( | ||
| <DialogsProvider> | ||
| <DemoContent /> | ||
| </DialogsProvider> | ||
| ); | ||
| } |
3 changes: 3 additions & 0 deletions
3
docs/data/material/components/dialogs/ToolpadDialogsNoSnap.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,3 @@ | ||
| <DialogsProvider> | ||
| <DemoContent /> | ||
| </DialogsProvider> |
Oops, something went wrong.