Diálogo (Dialog)

Los componentes de Diálogo (Dialog) se utilizan para presentar contenido en una capa por encima del contenido principal de la aplicación y, a menudo, solicitan una respuesta del usuario. Son un componente crítico para los diálogos modales, las cajas de luz (lightboxes), las ventanas emergentes de notificaciones y las ventanas emergentes de contenido personalizado.

Uso

Para usar el Dialog, impórtalo desde tus componentes y pasa las props necesarias, incluyendo open (abrir), onOpenChange (al cambiar apertura), y el contenido del diálogo como elementos secundarios (children). Opcionalmente, puedes personalizar su apariencia con las props className, fullWidth (ancho completo), fullHeight (alto completo), fullScreen (pantalla completa), scrollable (desplazable), maxWidth (ancho máximo), modal y onOpenAutoFocus.

Diálogo básico

Un ejemplo básico del uso del componente de diálogo para mostrar una ventana emergente simple.

import React, { useState } from "react";
import {
    Button,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    SearchIcon,
    TextField,
    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}>
                <DialogTitle variant={"h6"} className={"flex flex-row gap-4 items-center"}>
                    <SearchIcon size={"small"}/>
                    Search
                </DialogTitle>
                <DialogContent>
                    <Typography variant={"body2"}>
                        Search in your documents
                    </Typography>
                    <TextField size={"small"}/>
                </DialogContent>
                <DialogActions>
                    <Button
                        color={"primary"}
                        onClick={() => setOpen(false)} variant={"text"}>
                        Close
                    </Button>
                    <Button
                        color={"primary"}
                        onClick={() => setOpen(false)}
                        variant={"filled"}>
                        Got it!
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
}

Diálogo a pantalla completa

Un ejemplo de un diálogo que cubre toda la pantalla.

import React, { useState } from "react";
import { Button, CenteredView, Dialog, DialogActions, DialogContent, DialogTitle, 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
                    includeMargin={false}>
                    <CenteredView>
                        <DialogTitle variant={"h3"} includeMargin={false}>
                            Your dialog
                        </DialogTitle>
                        <Typography gutterBottom>
                            Full-Screen Dialog Content
                        </Typography>
                        <Button variant={"outlined"}>
                            Click me
                        </Button>
                    </CenteredView>
                </DialogContent>
                <DialogActions>
                    <Button
                        color={"primary"}
                        onClick={() => setOpen(false)}
                        variant={"filled"}>
                        Done
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
}

Diálogo desplazable

Ilustra cómo hacer que el contenido de un diálogo sea desplazable.

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-100 text-red-800"} style={{ height: "200vh" }}>Scrollable Dialog Content
                </div>

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

Diálogo con ancho personalizado

Demuestra el uso de la prop maxWidth para personalizar el ancho del diálogo.

import React, { useState } from "react";
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } 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"
            >
                <DialogTitle variant={"h5"} gutterBottom>
                    Your dialog
                </DialogTitle>
                <DialogContent>
                    Dialog with Custom Width
                </DialogContent>
                <DialogActions>
                    <Button
                        color={"primary"}
                        onClick={() => setOpen(false)}
                        variant={"filled"}>
                        Close
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
}