# rn-editable-value
URL: /docs/native/docyrus/editable-value

Field-aware inline editor — renders the value, then edits it with the field's own control (inline input or picker sheet).

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-editable-value
```

## Usage

```tsx
import { EditableValue } from '@/components/docyrus-native/editable-value';

<EditableValue
  field={{ id: 'stage', slug: 'stage', name: 'Stage', type: 'field-select' }}
  value={record.stage}
  record={record}
  enumOptions={stageOptions}
  onValueChange={value => save({ stage: value })}
  editHint="visible" />

{/* Money: the currency companion arrives through onCompanionChange */}
<EditableValue
  field={{ id: 'budget', slug: 'budget', name: 'Budget', type: 'field-money' }}
  value={record.budget}
  record={record}
  onValueChange={value => save({ budget: value })}
  onCompanionChange={changes => save(changes)} />

{/* Legacy plain-text mode (no field) */}

```

## Behaviour

| Field kind | Tap | Commit |
|---|---|---|
| `field-checkbox`, `field-switch` | Toggles in place | Immediately |
| `field-rating` | Opens the stars | On change |
| Single pickers (`select`, `enum`, `status`, `relation`, `userSelect`, `date`, `dateRange`, `color`, `icon`, `locationSelect`, `queryBuilder`) | Opens the field's sheet straight away (`autoOpen`) | On selection; dismissing cancels |
| Multi pickers (`multiSelect`, `tagSelect`, `userMultiSelect`) and compound fields (`money`, `phone`, `duration`, `currency`, `dateTime`, `time`) | Opens the editor | Explicit ✓ / ✕ (forced) |
| Text-like (`text`, `number`, `email`, `password`, `url`, `percent`, `code`) | Inline input | Blur / return (or ✓ with `showActions`) |

## API Reference

### EditableValueProps

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `field` | `IField` | — | Field definition — picks the renderer and the editor. Omit for legacy plain-text mode |
| `value` | `unknown` | — | Current value (required) |
| `onValueChange` | `(value: unknown) => void` | — | Committed value |
| `onCompanionChange` | `(changes: Record<string, unknown>) => void` | — | Companion changes on commit (`{ __budget_currency: 'EUR' }`) |
| `record` | `Record<string, unknown>` | — | Full record (companion values) |
| `enumOptions` | `EnumOption[]` | — | Options for select-based fields |
| `disabled` | `boolean` | `false` | Prevent entering edit mode |
| `readOnly` | `boolean` | `false` | Show the value without an edit affordance |
| `editHint` | `'progressive' \| 'visible'` | `'progressive'` | `visible` always shows a pencil hint |
| `children` | `ReactNode` | — | Custom display content (overrides `DocyValueDynamic`) |
| `showActions` | `boolean` | text: `false`, others: `true` | ✓ / ✕ buttons while editing (forced for multi / compound fields) |
| `explicitSave` | `boolean` | `false` | Blur does not save (forced for multi / compound fields) |
| `editing` | `boolean` | — | Controlled editing state |
| `onEditingChange` | `(editing: boolean) => void` | — | Editing state change |
| `trackChanges` | `boolean` | `false` | Apply changed styling |
| `changed` | `boolean` | `false` | Mark as changed |
| `appSlug` / `dataSourceSlug` | `string` | — | Dynamic enum loading context |
| `client` | `RestApiClient` | — | Threaded into renderer / editor |
| `variant` | `'default' \| 'ghost'` | `'default'` | Row chrome |
| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | Row size |
| `placeholder` | `string` | `ui.editableValue.placeholder` | Legacy mode: empty placeholder |
| `multiline` | `boolean` | `false` | Legacy mode: multiline input |
| `onLoadMore` / `hasMore` / `onSearch` / `searching` | — | — | Picker pagination / remote search |
| `onCreateRecord` / `renderCreateForm` / `itemTemplate` | — | — | Relation create / option template |
| `onImageUpload` / `onFileUpload` | `FieldUploadHandler` | — | Upload handlers |
| `onExpand` / `renderExpandContent` / `expandIcon` | — | — | Relation expand |
| `onComposeEmail` / `onSendMessage` | `(address: string) => void` | — | Email / phone actions |
| `className` | `string` | — | Additional classes |

Not ported from web: the external TanStack `form` prop (native fields are controlled) and the `ref` prop.

## Exports

| Export | Description |
|------|-------------|
| `EditableValue` | Component |
| `editableValueVariants` | `tv()` variants |
| `EditableValueProps` | Props type |

## Breaking changes (web-parity release)

- `value` / `onValueChange` are `unknown` (were `string`); pass `field` for typed editing.
- `showActions` defaults to `false` for text-like fields (was `true` for everything); legacy mode keeps actions on.
- Default placeholder copy comes from `ui.editableValue.placeholder` (“Tap to edit...”).