EditableComponentTemplateField

EditableComponentTemplateField wraps ComponentTemplateField in the editable pattern. In read mode it displays a summary showing the number of items in the template (Cantidad de items: N). Clicking the edit icon activates the full ComponentTemplateField editor. On save the template configuration array is persisted via API.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | name | string | Yes | — | Field name sent as the key in the update payload. | | value | string | Yes | "" | Current template value (typically a serialized array/object). | | updatePath | string | Yes | — | API endpoint path used to persist the change. | | label | string | No | — | Label shown in the field header. | | description | string | No | — | Helper text shown below the label. | | modalTitle | string | No | "" | Title of the template editor modal. | | modalSubtitle | string | No | "" | Subtitle of the template editor modal. | | modalZIndex | number | No | 99999999 | z-index of the template editor modal. | | apiBaseUrl | string | No | — | Base URL prepended to updatePath. | | useAuthToken | boolean | No | false | When true, the request includes the authorization token. | | onChange | (newValue?: string) => void | No | — | Called locally when the template changes. | | onEditStart | () => void | No | — | Called when edit mode begins. | | onEditSuccess | (updatedValue: any, newFormData: any) => void | No | — | Called after successful save. | | onEditError | (error: any) => void | No | — | Called on API error; value is reverted. | | onEditCancel | () => void | No | — | Called when the user cancels; value is reverted. | | editIcon | string | No | "pencil" | Icon name for the edit button. | | saveIcon | string | No | "check" | Icon name for the save button. | | cancelIcon | string | No | "close" | Icon name for the cancel button. | | containerStyle | React.CSSProperties | No | — | Style for the outermost wrapper. | | inputStyle | React.CSSProperties | No | — | Style for the inner input element. | | labelStyle | React.CSSProperties | No | — | Style for the <label> element. | | descriptionStyle | React.CSSProperties | No | — | Style for the description <p> element. |

Usage

Basic

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

export default function Example() {
  const [template, setTemplate] = useState('');

  return (
    <EditableComponentTemplateField
      label="Component Template"
      name="template"
      value={template}
      updatePath="/v1/components/5"
      apiBaseUrl="https://api.example.com"
      modalTitle="Edit Template"
      modalSubtitle="Configure the component layout"
      useAuthToken
      onEditSuccess={(updated) => setTemplate(updated)}
    />
  );
}