LockToggleButton

LockToggleButton muestra un ícono de candado que refleja un value booleano — un ícono de candado cerrado cuando es true, un ícono de candado abierto cuando es false. Al hacer clic envía una petición POST al path configurado con el valor alternado. Un spinner reemplaza al ícono mientras la petición está en curso.

Úsalo para interfaces de control de acceso, como bloquear un registro publicado, restringir la edición o alternar una función de seguridad.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | boolean | Sí | — | Estado actual. true muestra el ícono de bloqueado; false muestra el ícono de desbloqueado. | | path | string | Sí | — | Endpoint de la API que recibe un POST con { value: boolean } al alternar. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla el tamaño del botón y del spinner. | | apiBaseUrl | string | No | — | Sobreescritura de la URL base para la petición HTTP. | | useAuthToken | boolean | No | false | Cuando es true, usa el cliente HTTP autenticado. | | onChangeSuccess | (newValue: boolean) => void | No | — | Callback que se dispara con el nuevo valor booleano tras una petición exitosa. | | onChangeError | (error: any) => void | No | — | Callback que se dispara cuando la petición falla. | | className | string | No | — | Clase CSS aplicada al elemento contenedor. | | style | React.CSSProperties | No | — | Estilos en línea aplicados al elemento contenedor. |

Uso

Básico

import LockToggleButton from '@/components/buttons/LockToggleButton';
import { useState } from 'react';

export default function Example() {
  const [locked, setLocked] = useState(true);

  return (
    <LockToggleButton
      value={locked}
      path="/v1/records/42/lock"
      useAuthToken
      onChangeSuccess={(val) => setLocked(val)}
      onChangeError={(err) => console.error(err)}
    />
  );
}

En una fila de tabla de datos

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

export default function TableRow({ record }: { record: { id: string; locked: boolean } }) {
  return (
    <tr>
      <td>{record.id}</td>
      <td>
        <LockToggleButton
          value={record.locked}
          path={`/v1/records/${record.id}/lock`}
          useAuthToken
          size="sm"
          onChangeSuccess={(val) => console.log('Estado de bloqueo:', val)}
        />
      </td>
    </tr>
  );
}