Diálogo

Componentes de diálogo de la RCL

Tabla de contenidos

• PanBasicDialog
• PanAdvancedDialog
  • Comportamiento en pantallas pequeñas
• PanDialogActionsArray
• Ejemplos

PanBasicDialog

Un cuadro de diálogo modal con el tamaño de su contenido (ancho mínimo de 280 px, ancho máximo sm). Muestra un título, su contenido y una fila de botones de acción en la parte inferior. Es la opción adecuada para confirmaciones y formularios cortos.

Hacer clic en el fondo o pulsar Escape llama a closeFn. La superficie del diálogo se renderiza como un elemento HTML form.

Propiedad	Tipo	Valor por defecto	Qué hace
titleLabel	string	obligatorio	Texto mostrado como título del diálogo. Tradúzcalo antes de pasarlo.
isOpen	boolean	obligatorio	Indica si el diálogo es visible. El componente padre gestiona este estado.
closeFn	() => void	obligatorio	Función llamada para cerrar el diálogo. Se llama cuando el usuario hace clic en el fondo o pulsa Escape. Su código debe usarla para poner isOpen en false.
children	ReactNode	ninguno	El contenido del diálogo: cualquier nodo de React (texto, campos de formulario, listas…).
actionsButtonArray	ReactElement[]	ninguno	Matriz de botones mostrados en el pie, en orden. Normalmente el resultado de PanDialogActionsArray(...), pero sirve cualquier matriz de elementos de React.
requiredFieldsLabel	boolean	false	Si es true, se muestra una nota sobre el contenido que explica que los campos obligatorios están marcados (clave de traducción library:pankosmia-rcl:required_field). Úselo cuando el diálogo contenga un formulario con campos obligatorios.
dividers	boolean	false	Si es true, se dibuja un separador horizontal entre el título y el contenido, y entre el contenido y los botones.

PanAdvancedDialog

Un cuadro de diálogo modal con una barra de título coloreada (color primario del tema), de ancho completo hasta el punto de corte sm, y un separador sobre los botones. Está pensado para contenidos y formularios más largos.

Comportamiento en pantallas pequeñas

Por debajo del punto de corte sm el diálogo pasa a pantalla completa. Aparece un icono de cierre al inicio de la barra de título que llama a closeFn. El pie se oculta y el segundo botón de actionsButtonArray (el botón de acción creado por PanDialogActionsArray) se mueve al final de la barra de título. Mantenga la acción principal en segunda posición para que siga accesible en móvil. A diferencia de PanBasicDialog, hacer clic en el fondo o pulsar Escape no cierra este diálogo.

Propiedad	Tipo	Valor por defecto	Qué hace
titleLabel	string	obligatorio	Texto mostrado como título del diálogo. Tradúzcalo antes de pasarlo.
isOpen	boolean	obligatorio	Indica si el diálogo es visible. El componente padre gestiona este estado.
closeFn	() => void	obligatorio	Función llamada cuando el usuario hace clic en el icono de cierre mostrado en la barra de título en pantallas pequeñas. Su código debe usarla para poner isOpen en false. No se llama desde el fondo ni con Escape.
children	ReactNode	ninguno	El contenido del diálogo: cualquier nodo de React (texto, campos de formulario, listas…).
actionsButtonArray	ReactElement[]	ninguno	Matriz de botones mostrados en el pie, en orden. Normalmente el resultado de PanDialogActionsArray(...), pero sirve cualquier matriz de elementos de React.
requiredFieldsLabel	boolean	false	Si es true, se muestra una nota sobre el contenido que explica que los campos obligatorios están marcados (clave de traducción library:pankosmia-rcl:required_field). Úselo cuando el diálogo contenga un formulario con campos obligatorios.

PanDialogActionsArray

A pesar de su nombre, es una función simple y no un componente: llámela como PanDialogActionsArray({ ... }). Devuelve una matriz de dos elementos, [botónCerrar, botónAcción], para pasar a la propiedad actionsButtonArray de PanBasicDialog o PanAdvancedDialog. El botón de cierre siempre va primero. El botón de acción va segundo; cuando onlyCloseButton es true, esa posición es null.

Propiedad	Tipo	Valor por defecto	Qué hace
actionFn	() => void	obligatorio	Función ejecutada al hacer clic en el botón de acción. No se usa cuando onlyCloseButton es true.
actionLabel	string	obligatorio	Etiqueta del botón de acción. Tradúzcala antes de pasarla.
closeFn	() => void	obligatorio	Función ejecutada al hacer clic en el botón de cierre. También se llama después de actionFn cuando closeOnAction es true.
closeLabel	string	obligatorio	Etiqueta del botón de cierre (por ejemplo Cancelar o Cerrar). Tradúzcala antes de pasarla.
isDisabled	boolean	ninguno	Si es true, el botón de acción está desactivado. Se usa normalmente mientras un formulario no es válido. Esta propiedad nunca desactiva el botón de cierre.
closeOnAction	boolean	true	Si es true, closeFn se llama justo después de actionFn. Póngalo en false cuando la acción sea asíncrona o pueda fallar y su código deba cerrar el diálogo por sí mismo.
onlyCloseButton	boolean	false	Si es true, solo se crea el botón de cierre (para diálogos meramente informativos). La segunda posición de la matriz es null.
actionVariant	string	ninguno	Variante de MUI Button del botón de acción: text, outlined o contained. Si se omite, se usa el valor por defecto de MUI (text).
closeVariant	string	ninguno	Variante de MUI Button del botón de cierre: text, outlined o contained. Si se omite, se usa el valor por defecto de MUI (text).
isLoading	boolean	ninguno	Si es true, el botón de cierre se desactiva y muestra un pequeño indicador de carga. Tenga en cuenta que esto se aplica solo al botón de cierre, no al botón de acción.
loadingLabel	string	ninguno	Etiqueta que sustituye a la del botón de cierre mientras isLoading es true. Si se omite, se mantiene la etiqueta normal.

Ejemplos

Un diálogo con una acción de confirmación. El mismo patrón sirve para PanAdvancedDialog:

const [open, setOpen] = useState(false);

<PanBasicDialog
  titleLabel="Delete this item?"
  isOpen={open}
  closeFn={() => setOpen(false)}
  actionsButtonArray={PanDialogActionsArray({
    actionLabel: "Delete",
    actionFn: () => deleteItem(),
    closeLabel: "Cancel",
    closeFn: () => setOpen(false),
    actionVariant: "contained",
  })}
>
  <Typography>This cannot be undone.</Typography>
</PanBasicDialog>

Hay demostraciones funcionales en src/componentDemos/V1.0 del repositorio core-client-rcl.