# editable-field LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/editable-field` 的使用方式。

## 模块定位

可编辑字段组件

## 导入方式

```ts
import { EditableField } from '@flatbiz/antd/editable-field';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `EditableField` - 可编辑字段组件
- `EditableFieldProps`
- `* from ./editable-field.jsx`

## 依赖的 antd 能力

`Space`

## Props / 配置要点

### EditableFieldProps

- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `editRender`（可选）：: | ReactElement | ((data: { value?: TAny; onChange?: (data?: TAny) => void; }) => ReactElement)
- `viewRender`（可选）：: (value?: TAny) => ReactNode
- `value`（可选）：: TAny
- `onChange`（可选）：: (data?: TAny) => void
- `placeholderValue`（可选）：: string
- `isEditFull`（可选）：: boolean；edit 区域是否铺满，showEditableIcon=false 无效
- `readonly`（可选）：: boolean；只读状态
- `showEditable`（可选）：: boolean；显示为编辑状态
- `showEditableIcon`（可选）：: boolean；是否显示编辑、确认、取消操作icon，默认值：true
- `onClickEditIconPre`（可选）：: (value?: TAny) => Promise<void>；点击编辑按钮，操作前，返回reject不会开启编辑效果
- `onEditCallback`（可选）：: (value?: TAny) => void
- `onClickConfirmIconPre`（可选）：: (value?: TAny, preValue?: TAny) => Promise<void>；点击确定按钮，操作前，返回reject不会执行确定功能
- `onConfirmCallback`（可选）：: (value?: TAny, preValue?: TAny) => void
- `iconConfig`（可选）：: { editIcon?: (options: { onClick: () => void }) => ReactElement; confirmIcon?: (options: { onClick: () => void }) => ReactElement; cancelIcon?: (options: { o…；组件操作Icon配置

## 使用规则与行为

- edit 区域是否铺满，showEditableIcon=false 无效
- 只读状态
- 显示为编辑状态
- 是否显示编辑、确认、取消操作icon，默认值：true
- 点击编辑按钮，操作前，返回reject不会开启编辑效果
- 点击确定按钮，操作前，返回reject不会执行确定功能
- 组件操作Icon配置
- 可编辑字段组件 @param props @returns
- 为了处理 Input、TextArea等onChange取值

## 默认值线索

- `showEditableIcon => true`
- `showEditableIcon => ctx.showEditableIcon`
- `readonly => ctx.readonly`
- `showEditable => ctx.showEditable`

## 基础示例

```tsx
import { EditableField, type EditableFieldProps } from '@flatbiz/antd/editable-field';

const props: EditableFieldProps = {
  // 按业务传入必要参数
};

<EditableField {...props} />;
```

## 源码索引

- `src/editable-field/editable-field.tsx`
- `src/editable-field/index.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/editable-field` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。