EditableColorField

EditableColorField muestra el color actual como una muestra de 80×80 píxeles en ambos modos (lectura y edición). Al hacer clic en el ícono de edición se habilita la muestra; al tocarla se abre un popover con una paleta de 10 colores base × 5 niveles de tonalidad, una fila de escala de grises complementaria, 5 colores semánticos (primary, danger, warning, success, info) y un input de color hex personalizado. Al hacer clic en la muestra cuando ya hay un color seleccionado, este se limpia. Al guardar, el valor del color (hex o nombre semántico) se persiste mediante la API.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | name | string | Sí | — | Nombre del campo enviado como clave en el payload de actualización. | | value | string | Sí | "" | Valor de color actual (hex como "#0046BF" o nombre semántico como "primary"). | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio. | | label | string | No | — | Etiqueta mostrada sobre la muestra. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | disablePrimary | boolean | No | — | Cuando es true, la opción de color semántico primary está deshabilitada. | | apiBaseUrl | string | No | — | URL base que se antepone a updatePath. | | useAuthToken | boolean | No | false | Cuando es true, el request incluye el token de autorización. | | onChange | (newValue?: string \| null) => void | No | — | Llamado localmente cada vez que el color cambia (antes de guardar). | | onEditStart | () => void | No | — | Llamado cuando comienza el modo edición. | | onEditSuccess | (updatedValue: string, newFormData: any) => void | No | — | Llamado tras un guardado exitoso. | | onEditError | (error: any) => void | No | — | Llamado al fallar el request; el valor se revierte. | | onEditCancel | () => void | No | — | Llamado al cancelar; el valor se revierte. | | editIcon | string | No | "pencil" | Nombre del ícono para el botón de edición. | | saveIcon | string | No | "check" | Nombre del ícono para el botón de guardar. | | cancelIcon | string | No | "close" | Nombre del ícono para el botón de cancelar. | | containerStyle | React.CSSProperties | No | — | Estilo del contenedor externo. | | inputStyle | React.CSSProperties | No | — | Estilo del input interno. | | labelStyle | React.CSSProperties | No | — | Estilo del elemento <label>. | | descriptionStyle | React.CSSProperties | No | — | Estilo del <p> de descripción. | | headerStyle | React.CSSProperties | No | — | Estilo pasado al encabezado del FieldContainer. | | bodyStyle | React.CSSProperties | No | — | Estilo de la sección body que envuelve la muestra. |

Uso

Básico

import React, { useState } from 'react';
import EditableColorField from '@/components/editable-fields/EditableColorField';

export default function Example() {
  const [brandColor, setBrandColor] = useState('#0046BF');

  return (
    <EditableColorField
      label="Brand Color"
      name="brand_color"
      value={brandColor}
      updatePath="/v1/organizations/3"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setBrandColor(updated)}
    />
  );
}

Deshabilitando el color primary

<EditableColorField
  label="Accent Color"
  name="accent_color"
  value={accentColor}
  disablePrimary
  updatePath="/v1/organizations/3"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditSuccess={(updated) => setAccentColor(updated)}
/>