# EditableSettingsListFieldArray

A component designed to render an array of settings fields, typically used within a `react-final-form` and `react-final-form-arrays` context. It iterates over an array of settings provided by `react-final-form-arrays`' `fields` object, rendering each setting using an internal `EditableSettingsListField` component. This internal component manages the display/edit state for each individual setting and uses a `SettingField` component (passed via render prop) for the actual input rendering. The component facilitates saving individual settings within the array and allows for customization of how each setting row is rendered via a `render` prop.

## Basic Usage

This component is intended to be used as the `component` prop for `react-final-form-arrays`'s `<FieldArray>` component.

```jsx
import { FieldArray } from 'react-final-form-arrays';

const MyForm = (props) => {
  // Example save handler - should interact with your backend/state management
  // It's often async and should return a Promise for react-final-form
  const handleSettingSave = (setting) => {
    console.log('Saving setting:', setting);
    return Promise.resolve(); // Indicate success to react-final-form
  };

  return (
    <form onSubmit={props.handleSubmit}>
      {/* Other form fields */}

      <FieldArray
        name="yourSettingsArrayFieldName" // The name matching your form's initialValues structure
        component={({ fields }) => (
          <EditableSettingsListFieldArray
            fields={fields}
            onSave={handleSettingSave}
            // Optional: Pass contextual data if SettingField needs it
            // data={{ refdatavalues: [...] }}
            // Optional: Customize rendering per row
            // render={({ DefaultField, editing, index, setting, ...rest }) => (
            //   <div>
            //     Custom Row {index}: {editing ? 'Editing' : 'Displaying'}
            //     <DefaultField />
            //   </div>
            // )}
          />
        )}
      />

      {/* Submit button etc. */}
      <button type="submit" disabled={props.pristine || props.submitting}>
        Submit All Changes
      </button>
    </form>
  );
};

// Remember to wrap MyForm with reduxForm or ReactFinalForm as appropriate
```

**Note:** This component relies heavily on the structure provided by `react-final-form` and `react-final-form-arrays`. The `fields` prop is expected to be the object passed by `<FieldArray>` to its `component`. The `onSave` handler should integrate with your application's data persistence logic and ideally return a `Promise` to manage submission state correctly with `react-final-form`. The actual rendering of the setting input depends on the `SettingField` component used internally (or overridden via the `render` prop).

## Props

| Name             | Type      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | default                    | required |
|------------------|-----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------|----------|
| `allowEdit`      | `boolean` | Controls whether the edit/save functionality is enabled for the settings in the list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `true`                     | ✕        |
| `data`           | `object`  | Arbitrary data passed down through the render prop and potentially used by the underlying `SettingField`. The example `propTypes` show a shape `{ refdatavalues: PropTypes.arrayOf(PropTypes.object) }`, often used for dropdown options.                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined`                | ✕        |
| `fields`         | `object`  | The `fields` object provided by `react-final-form-arrays`' `<FieldArray>` component. Contains the array values and methods (`map`, `value`, `push`, `remove`, etc.).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |                            | ✓        |
| `intlKey`        | `string`  | A base key used for generating internationalization keys/labels, passed down to `SettingField`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined`                | ✕        |
| `intlNS`         | `string`  | The internationalization namespace used for resolving labels, passed down to `SettingField`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`                | ✕        |
| `labelOverrides` | `object`  | An object where keys are setting names/paths and values are custom labels, allowing override of default labels generated by `SettingField`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `{}`                       | ✕        |
| `onSave`         | `func`    | A callback function triggered when the save action is initiated for an individual setting row. It receives the specific setting object (`fields.value[index]`) being saved as its argument. Should typically return a `Promise` for `react-final-form` integration.                                                                                                                                                                                                                                                                                                                                                                                             |                            | ✓        |
| `render`         | `func`    | A render prop function allowing customization of the rendering for *each* setting row. It receives an object containing: `allowEdit`, `data`, `DefaultField` (a pre-configured component rendering the standard `SettingField`), `editing` (boolean state of the row), `fields` (the top-level fields object), `handleSave` (the save handler for the specific row), `index`, `intlKey`, `intlNS`, `setEditing` (function to toggle edit state), `setting` (the field name/identifier for the current row), `settingData` (memoized object with `currentSetting` and `fields`), and `SettingFieldComponent` (reference to the `SettingField` component itself). | Renders `<DefaultField />` | ✕        |
| `initialValues`  | `object`  | The initial values object for the entire form. Passed down but not directly used by `EditableSettingsListFieldArray` itself; may be needed by the underlying `SettingField`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`                | ✕        |