ObjectField

ObjectField renderiza una lista de inputs de par clave/valor. El usuario puede agregar nuevos pares con el botón "Agregar item", editar tanto la clave como el valor de cada par como texto libre, y eliminar cualquier par con un ícono de papelera. El componente emite un Record<string, any> via onChange cuando los pares cambian.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | Record<string, any> | Sí | — | Objeto actual. Cada propiedad propia se convierte en una fila clave-valor. | | onChange | (newValue: Record<string, any>) => void | Sí | — | Llamado con el objeto actualizado cuando se agrega, edita o elimina cualquier par. | | label | string | No | — | Etiqueta mostrada en el encabezado del campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo. | | containerStyle | React.CSSProperties | No | — | Estilos del FieldContainer exterior. | | headerStyle | React.CSSProperties | No | — | Estilos del área de encabezado del campo. | | bodyStyle | React.CSSProperties | No | — | Estilos del área de cuerpo del campo. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor exterior. |

Uso

Básico

import React, { useState } from 'react';
import ObjectField from '@/components/fields/ObjectField';

export default function Example() {
  const [meta, setMeta] = useState<Record<string, any>>({});

  return (
    <ObjectField
      label="Metadatos"
      value={meta}
      onChange={setMeta}
    />
  );
}

Pre-cargado con datos existentes

<ObjectField
  label="Atributos personalizados"
  value={{ color: 'rojo', talle: 'M', peso: '200' }}
  onChange={setAttributes}
  description="Agregá atributos adicionales del producto como pares clave-valor."
/>