# ActionCustomDialog - 自定义内容弹窗

## 说明

带标题和底部按钮的自定义内容弹窗。与 `CommonDialog` 类似，但标题无默认文案，适合在标题与按钮之间放置任意自定义 `children`（如表单、列表、说明图文等）。基于 `BaseDialog` 实现，遮罩、动画、按钮布局、键盘避让行为与其他 HyperOS 弹窗一致。

`InputDialog`、`PickerDialog` 均在此组件之上封装而成。

下表中标注「继承自 BaseDialog」的属性为 Dialog 体系公共属性。类型为 `Omit<BaseDialogPropsType, 'showTitle' | 'showButton'>`，即标题和按钮固定展示，不可隐藏。

## 属性

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **visible** | 是否显示弹窗 | `boolean` | - | 是 |
| **children** | 标题与按钮之间的自定义内容 | `ReactNode` | - | 否 |
| **title** | 标题文案（继承自 BaseDialog） | `string` | - | 否 |
| **buttons** | 底部按钮，1~3 个，数量越界则不渲染按钮组（继承自 BaseDialog） | `AbstractDialogButtonType[]` | `[取消, 确定]` | 否 |
| **titleIcon** | 标题上方图标（继承自 BaseDialog） | `ReactNode` | - | 否 |
| **titleIconStyle** | 标题图标容器样式，可覆盖 width/height（取值钳制在 32~120）（继承自 BaseDialog） | `StyleProp<ViewStyle>` | `80×80` | 否 |
| **colorDepth** | 弹窗底色深度（继承自 BaseDialog） | `'base' \| 'low'` | `'base'` | 否 |
| **canDismiss** | 点击遮罩是否可关闭（继承自 BaseDialog） | `boolean` | `true` | 否 |
| **cancelable** | 返回键及无 callback 按钮是否可关闭弹窗（继承自 BaseDialog） | `boolean` | `true` | 否 |
| **hasShade** | 是否显示半透明遮罩背景（继承自 BaseDialog） | `boolean` | `true` | 否 |
| **onDismiss** | 非点击按钮方式（遮罩、返回键）关闭时回调（继承自 BaseDialog） | `() => void` | - | 否 |
| **onModalShow** | 弹窗显示时回调（继承自 BaseDialog） | `() => void` | - | 否 |
| **onModalHide** | 弹窗隐藏时回调（继承自 BaseDialog） | `() => void` | - | 否 |
| **accessible** | 无障碍：是否启用（继承自 BaseDialog） | `boolean` | `true` | 否 |
| **accessibilityLabel** | 无障碍标签（继承自 BaseDialog） | `string` | - | 否 |
| **layerDismissAccessibilityHint** | 遮罩可点击区域的无障碍标签（继承自 BaseDialog） | `string` | - | 否 |

### buttons 项（AbstractDialogButtonType）

| 字段 | 说明 | 类型 | 必填 |
|------|------|------|------|
| **title** | 按钮文案，缺省时首个为「取消」、其余为「确定」 | `string` | 否 |
| **type** | 按钮类型 | `'primary' \| 'warning' \| 'normal'` | 否 |
| **colorType** | 按钮色系（仅 primary 系生效） | `ColorType` | 否 |
| **disabled** | 是否禁用 | `boolean` | 否 |
| **callback** | 点击回调；不传时点击按钮会按 `cancelable` 决定是否关闭弹窗 | `(...args: any[]) => any` | 否 |
| **accessibilityHint** | 按钮无障碍提示 | `string` | 否 |

## 使用示例

```tsx
import { ActionCustomDialog } from 'miot/ui/hyperOSUI';
import { View, Text } from 'react-native';

<ActionCustomDialog
  visible={visible}
  title="选择操作"
  buttons={[
    { title: '取消', callback: () => setVisible(false) },
    { title: '确定', type: 'primary', callback: onConfirm },
  ]}
  onDismiss={() => setVisible(false)}
>
  <View style={{ paddingHorizontal: 24 }}>
    <Text>这里放自定义内容</Text>
  </View>
</ActionCustomDialog>
```

## 注意事项

- 按钮数量必须为 1~3 个，否则按钮组不渲染（控制台会打印 `只允许设置1～3个按钮` 警告）。
- 1~2 个按钮横向排列，3 个按钮纵向排列。
- 标题和底部按钮固定展示（类型已 `Omit` 掉 `showTitle` / `showButton`）；如需无标题、仅右上角关闭按钮的弹窗，请使用 `CustomDialog`。
- `children` 自身的横向内边距需自行处理（组件未对 children 添加统一水平 padding）。

## 修改记录

| 日期 | 版本 | 修改内容 | 修改原因 | 关联 |
|------|------|----------|----------|------|
| 2026-04-13 | v1.18.5-alpha.0 | 菜单类弹窗改造，完善自定义内容弹窗能力 | — | 7d954052 |
| 2026-04-06 | v1.18.5-alpha.0 | 组件更名为 ActionCustomDialog，调用方需同步更新引用名 | — | fc8dee02 |