# SettingField

A component designed to render a single setting within a settings list. It handles fetching contextual data (like reference data via `useRefdata` or templates via `useTemplates` based on the setting's configuration), displays the setting's name, help text (`InfoPopover`), and value, and manages the switch between display mode (using `RenderSettingValue`) and edit mode (using `EditSettingValue`).

It is typically used as the `component` prop for a `react-final-form` `<Field>` within the structure provided by `EditableSettingsListFieldArray` and `EditableSettingsList`. It utilizes `@folio/stripes/components` (`Card`, `Button`, `InfoPopover`) for its UI structure and relies on `SettingsContext` to determine API endpoints for fetching related data.

## Basic Usage

`SettingField` is usually rendered internally by the `DefaultField` implementation within `EditableSettingsListField`. It receives props from `react-final-form`'s `<Field>` (like `input`, `meta`) and custom props from `EditableSettingsListField` (like `editing`, `setEditing`, `settingData`, `onSave`).

```jsx
// SettingField is typically used internally by EditableSettingsListField.
// The default implementation within EditableSettingsListField looks
// somewhat like this:

import { Field } from 'react-final-form';

// Inside EditableSettingsListField's render logic (simplified):
<Field
  // Props passed down:
  allowEdit={props.allowEdit}
  component={SettingField} // <-- Usage of SettingField
  editing={props.editing}
  intlKey={props.intlKey}
  intlNS={props.intlNS}
  labelOverrides={props.labelOverrides}
  onSave={props.onSave} // Specific save handler for this row
  setEditing={props.setEditing} // Function to toggle editing state for this row
  settingData={props.settingData} // Object containing currentSetting etc.

  // Props provided by Field:
  name={settingIdentifier} // The name/path for this field within the form
  // 'input' and 'meta' props are also automatically passed by Field
/>

// Direct usage is less common but possible if customizing the `render` prop
// of EditableSettingsListFieldArray or EditableSettingsList.

// Note: The actual rendering of the setting's value in view or edit mode
// is delegated to the RenderSettingValue and EditSettingValue components,
// respectively, based on the 'editing' prop and the setting's configuration
// (currentSetting.settingType).
```

**Note:** This component requires `SettingsContext` to be available higher up in the component tree to provide `refdataEndpoint` and `templateEndpoint`.

## Props

| Name                         | Type      | Description                                                                                                                                                                                                                                                                                                       | default     | required   |
|------------------------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|------------|
| `allowEdit`                  | `boolean` | Controls whether the "Edit"/"Save" button is displayed and if editing is permitted. Passed down from parent components.                                                                                                                                                                                           | `true`      | ✕          |
| `editing`                    | `boolean` | Determines if the field should render in display mode (`RenderSettingValue`) or edit mode (`EditSettingValue`). This state is typically managed by the parent `EditableSettingsListField`.                                                                                                                        | `undefined` | ✓          |
| `input`                      | `object`  | Provided by `react-final-form`'s `<Field>`. Contains field state like `value`, `name`, and callbacks like `onChange`, `onBlur`. Crucial for connecting to the form state, passed down to `EditSettingValue`.                                                                                                      | `undefined` | ✓ (by RFF) |
| `intlKey`                    | `string`  | Base key for internationalization, used by the internal `useKintIntl` hook for fetching labels and messages.                                                                                                                                                                                                      | `undefined` | ✕          |
| `intlNS`                     | `string`  | Namespace for internationalization, used by the internal `useKintIntl` hook.                                                                                                                                                                                                                                      | `undefined` | ✕          |
| `labelOverrides`             | `object`  | An object potentially used to override default labels, passed down to `RenderSettingValue`/`EditSettingValue`.                                                                                                                                                                                                    | `{}`        | ✕          |
| `meta`                       | `object`  | Provided by `react-final-form`'s `<Field>`. Contains metadata about the field state, such as `touched`, `error`, `dirty`, `valid`, etc.                                                                                                                                                                           | `undefined` | ✓ (by RFF) |
| `onSave`                     | `func`    | Callback function triggered when the "Save" button is clicked (while `editing` is true). It should handle the persistence logic for this *single setting* and is expected to return a `Promise`. The success of the promise determines whether the component switches back to display mode (`setEditing(false)`). | `undefined` | ✓          |
| `setEditing`                 | `func`    | A function, provided by the parent component (e.g., `EditableSettingsListField`), used to signal a change in the editing state (e.g., `setEditing(true)` when "Edit" is clicked, or `setEditing(false)` after a successful save).                                                                                 | `undefined` | ✓          |
| `settingData`                | `object`  | An object containing data pertinent to the specific setting being rendered.                                                                                                                                                                                                                                       | `undefined` | ✓          |
| `settingData.currentSetting` | `object`  | The core configuration object for the setting currently being rendered. Contains properties like `key`, `section`, `settingType`, `vocab`, etc., which drive the component's behavior (fetching data, rendering labels, choosing input types via `EditSettingValue`).                                             | `undefined` | ✓          |