Dialog

Dialog components are used to present content in a layer above the app's main content, and they often request a user response. They are a critical component for modal dialogs, lightboxes, notification pop-ups, and custom content popups.

Usage

To use the Dialog, import it from your components and pass the necessary props including open, onOpenChange, and the dialog's content as children. Optionally, you can customize its appearance with className, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, and onOpenAutoFocus props.

Basic Dialog

A basic example of using the dialog component to show a simple pop-up.

import React, { useState } from "react";
import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";

export default function DialogBasicDemo() {
    const [open, setOpen] = useState(false);

    return (
        <>
            <Button onClick={() => setOpen(true)}>Open Dialog</Button>
            <Dialog
                open={open}
                onOpenChange={setOpen}>
                <DialogContent className="p-8 flex flex-col space-y-2">
                    <Typography variant={"h5"} gutterBottom>
                        Your dialog
                    </Typography>
                    <Typography gutterBottom>
                        Basic Dialog Content
                    </Typography>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setOpen(false)} variant={"text"}>
                        Close
                    </Button>
                    <Button onClick={() => setOpen(false)}
                            variant={"filled"}>
                        Got it!
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
}

Full-Screen Dialog

An example of a dialog that covers the entire screen.

import React, { useState } from "react";
import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";

export default function DialogFullScreenDemo() {
    const [open, setOpen] = useState(false);

    return (
        <>
            <Button onClick={() => setOpen(true)}>Open Full-Screen Dialog</Button>
            <Dialog
                open={open}
                onOpenChange={setOpen}
                fullScreen={true}
            >
                <DialogContent className="p-8 flex flex-col space-y-2">
                    <Typography variant={"h5"} gutterBottom>
                        Your dialog
                    </Typography>
                    <Typography gutterBottom>
                        Full-Screen Dialog Content
                    </Typography>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setOpen(false)}
                            variant={"filled"}>
                        Done
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
}

Scrollable Dialog

Illustrates how to make a dialog's content scrollable.

import React, { useState } from "react";
import { Button, Dialog, DialogActions } from "@firecms/ui";

export default function DialogScrollableDemo() {
    const [open, setOpen] = useState(false);

    return (
        <>
            <Button onClick={() => setOpen(true)}>Open Scrollable Dialog</Button>
            <Dialog
                open={open}
                onOpenChange={setOpen}
                scrollable={true}
            >
                <div className={"p-8 bg-red-500 text-white"} style={{ height: "200vh" }}>Scrollable Dialog Content</div>

                <DialogActions>
                    <Button onClick={() => setOpen(false)}
                            variant={"filled"}>
                        Got it!
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
}

Dialog with Custom Width

Demonstrates usage of the maxWidth prop to customize the dialog's width.

import React, { useState } from "react";
import { Button, Dialog, DialogActions, DialogContent } from "@firecms/ui";

export default function DialogCustomWidthDemo() {
    const [open, setOpen] = useState(false);

    return (
        <>
            <Button onClick={() => setOpen(true)}>Open Custom Width Dialog</Button>
            <Dialog
                open={open}
                onOpenChange={setOpen}
                maxWidth="5xl"
            >
                <DialogContent className="p-8">
                    Dialog with Custom Width
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setOpen(false)}
                            variant={"filled"}>
                        Close
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
}