DropdownButton

DropdownButton combina un botón disparador (ya sea un botón de ícono o un botón completo) con un menú emergente que lista elementos DropdownOption. Cada opción puede ejecutar un callback local o disparar una petición HTTP remota (incluyendo exportaciones de archivos). Úsalo como reemplazo flexible de ActionsMenuButton cuando necesites soporte para acciones remotas o un botón disparador con etiqueta.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | options | DropdownOption[] | Sí | — | Array de elementos del dropdown. Ver la definición de DropdownOption a continuación. | | buttonVariant | "icon" \| "button" | No | "icon" | Si el disparador se renderiza como botón de ícono o botón con etiqueta. | | buttonSize | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Tamaño del botón disparador. | | buttonType | "clear" \| "outline" \| "solid" | No | "clear" | Variante visual del botón disparador. | | buttonIcon | string | No | "moreVertical" | Identificador del ícono para el botón disparador. | | buttonTitle | string | No | "" | Etiqueta del botón disparador cuando buttonVariant es "button". | | buttonStyle | React.CSSProperties | No | — | Estilos en línea aplicados al botón disparador. | | buttonClassName | string | No | — | Clase CSS aplicada al botón disparador (solo cuando buttonVariant es "button"). | | popoverStyle | React.CSSProperties | No | — | Estilos en línea aplicados al contenedor del popover. | | popoverZIndex | number | No | 9999 | Z-index del popover. | | onItemSelect | (actionName: string) => void | No | — | Manejador global llamado con el name del elemento cuando se selecciona (se usa cuando el elemento no tiene su propio manejador). | | closeOnSelect | boolean | No | true | Si el popover se cierra después de seleccionar un elemento. |

DropdownOption

| Campo | Tipo | Requerido | Descripción | |-------|------|-----------|-------------| | name | string | Sí | Clave única que identifica la opción. | | label | string | Sí | Texto que se muestra en el dropdown. | | config.icon | string | No | Identificador del ícono mostrado antes de la etiqueta. | | config.color | string | No | Color del botón de la opción. | | config.style | React.CSSProperties | No | Estilos en línea para el botón de la opción. | | config.onClick | (actionName: string) => void | No | Manejador de clic por elemento. Tiene prioridad sobre onItemSelect. | | config.mode | "local" \| "remote" | No | Cuando es "remote", el elemento usa ActionButton para hacer una petición HTTP. | | config.path | string | No | Ruta del endpoint de la API (requiere mode: "remote"). | | config.method | "GET" \| "POST" \| "PUT" \| "DELETE" | No | Método HTTP (requiere mode: "remote"). | | config.useAuthToken | boolean | No | Usa el cliente HTTP autenticado (requiere mode: "remote"). | | config.apiBaseUrl | string | No | Sobreescritura de la URL base (requiere mode: "remote"). | | config.data | Record<string, any> | No | Cuerpo de la petición (requiere mode: "remote"). | | config.onSuccess | (response: any) => void | No | Callback al éxito de la petición (requiere mode: "remote"). | | config.onError | (error: any) => void | No | Callback al fallo de la petición (requiere mode: "remote"). | | config.isExport | boolean | No | Usa getBlob() en lugar de la petición estándar para descargas de archivos. | | config.closeOnSelect | boolean | No | Sobreescritura por elemento para closeOnSelect. |

Uso

Disparador de ícono básico

import DropdownButton from '@/components/buttons/DropdownButton';

export default function Example() {
  return (
    <DropdownButton
      options={[
        { name: 'edit', label: 'Editar', config: { icon: 'edit' } },
        { name: 'delete', label: 'Eliminar', config: { icon: 'trash', color: 'danger' } },
      ]}
      onItemSelect={(name) => console.log('Seleccionado:', name)}
    />
  );
}

Botón disparador con etiqueta

import DropdownButton from '@/components/buttons/DropdownButton';

export default function Example() {
  return (
    <DropdownButton
      buttonVariant="button"
      buttonTitle="Acciones"
      buttonIcon="chevronDown"
      buttonType="outline"
      options={[
        { name: 'export', label: 'Exportar CSV' },
        { name: 'archive', label: 'Archivar' },
      ]}
      onItemSelect={(name) => console.log(name)}
    />
  );
}

Acción remota con exportación de archivo

import DropdownButton from '@/components/buttons/DropdownButton';

export default function Example({ orderId }: { orderId: string }) {
  return (
    <DropdownButton
      options={[
        {
          name: 'pdf',
          label: 'Descargar PDF',
          config: {
            mode: 'remote',
            method: 'GET',
            path: `/v1/orders/${orderId}/pdf`,
            useAuthToken: true,
            isExport: true,
            onSuccess: (blob) => {
              const url = URL.createObjectURL(blob);
              window.open(url);
            },
          },
        },
      ]}
    />
  );
}