EditableConfigurationGroupField

EditableConfigurationGroupField manages structured configuration arrays such as form fields, slots, filters, header actions, list actions, divider groups, import columns, and export columns. In both read and edit modes the component displays the item count. In edit mode an "Abrir armador" button opens a full-screen ConfigurationGroupBuilderModal where items can be added, reordered, and configured. On save the updated 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 | any | Yes | [] | Current configuration array. | | configurationGroup | "fields" \| "slots" \| "filters" \| "headerActions" \| "listActions" \| "dividerGroups" \| "importCols" \| "exportCols" | Yes | — | Type of configuration group to edit. Determines which builder is rendered inside the modal. | | 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 configuration builder modal. | | modalSubtitle | string | No | "" | Subtitle of the configuration builder modal. | | apiBaseUrl | string | No | — | Base URL prepended to updatePath. | | useAuthToken | boolean | No | false | When true, the request includes the authorization token. | | onChange | (items: any[]) => void | No | — | Called locally when the configuration 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. | | headerStyle | React.CSSProperties | No | — | Style for the field header. | | bodyStyle | React.CSSProperties | No | — | Style for the field body. | | itemStyle | React.CSSProperties | No | — | Style for individual items in the list. | | labelStyle | React.CSSProperties | No | — | Style for the <label> element. | | descriptionStyle | React.CSSProperties | No | — | Style for the description <p> element. |

Usage

Basic — editing form fields

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

export default function Example() {
  const [fields, setFields] = useState([]);

  return (
    <EditableConfigurationGroupField
      label="Form Fields"
      name="fields"
      value={fields}
      configurationGroup="fields"
      updatePath="/v1/components/5"
      apiBaseUrl="https://api.example.com"
      modalTitle="Edit Form Fields"
      useAuthToken
      onEditSuccess={(updated) => setFields(updated)}
    />
  );
}

Editing list actions

<EditableConfigurationGroupField
  label="List Actions"
  name="listActions"
  value={listActions}
  configurationGroup="listActions"
  updatePath="/v1/components/5"
  apiBaseUrl="https://api.example.com"
  modalTitle="Edit List Actions"
  useAuthToken
  onEditSuccess={(updated) => setListActions(updated)}
/>