useSideDialogsController

Hook per ottenere il controller dei dialoghi laterali. Questo hook ti permette di aprire e chiudere pannelli laterali in modo programmatico.

Questo è il meccanismo di basso livello utilizzato da FireCMS per aprire:

• Formulari di entità (Side Entity Controller)
• Dialoghi di selezione dei riferimenti

Puoi usarlo per aprire i tuoi pannelli laterali personalizzati.

Consiglio

Se vuoi solo aprire un formulario di entità, usa invece useSideEntityController.

Utilizzo

import React from "react";
import { useSideDialogsController } from "@firecms/core";
import { Button } from "@firecms/ui";

export function CustomSidePanelExample() {
    const sideDialogsController = useSideDialogsController();

    const openPanel = () => {
        sideDialogsController.open({
            key: "custom_panel",
            width: "500px",
            component: (
                <div className="p-8">
                    <h2 className="text-2xl font-bold mb-4">Pannello personalizzato</h2>
                    <p>Questo è un pannello laterale personalizzato.</p>
                    <Button onClick={() => sideDialogsController.close()}>
                        Chiudi
                    </Button>
                </div>
            )
        });
    };

    return <Button onClick={openPanel}>Apri pannello personalizzato</Button>;
}

Interfaccia

export interface SideDialogsController {
    /**
     * Chiudere l'ultimo pannello
     */
    close: () => void;

    /**
     * Lista dei pannelli laterali attualmente aperti
     */
    sidePanels: SideDialogPanelProps[];

    /**
     * Aprire uno o più pannelli laterali
     */
    open: (panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => void;

    /**
     * Sostituire l'ultimo pannello aperto con quello dato
     */
    replace: (panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => void;
}

SideDialogPanelProps

export interface SideDialogPanelProps {
    key: string;
    component: React.ReactNode;
    width?: string;
    urlPath?: string;
    parentUrlPath?: string;
    onClose?: () => void;
    additional?: any;
}