# SelectList - 选择列表

## 说明

单选列表组件，支持左对勾和右对勾两种选中样式，支持分组和子选项。常放在 Drawer 内使用。

## 属性

### SelectListProps

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **options** | 选项数据 | `SelectItemOption[]` | - | 是 |
| **value** | 当前选中值 | `string \| number` | - | 否 |
| **onChange** | 选中回调，传 value | `(value: string \| number) => void` | - | 否 |
| **onSelect** | 点击回调，传完整 item | `(item: SelectItemOption) => void` | - | 否 |
| **selectedAlign** | 选中标记位置 | `'left' \| 'right'` | `'right'` | 否 |
| **isGroup** | 是否聚合 | `boolean` | `false` | 否 |
| **colorType** | 选中色系 | `ColorType` | `'green'` | 否 |

### SelectItemOption

| 属性 | 说明 | 类型 | 必填 |
|------|------|------|------|
| **value** | 唯一标识 | `string \| number` | 是 |
| **title** | 标题 | `string` | 是 |
| **subtitle** | 副标题（仅右对勾） | `string` | 否 |
| **leadingIcon** | 左侧图标（仅右对勾） | `ReactElement` | 否 |
| **disabled** | 禁用 | `boolean` | 否 |
| **subItems** | 子选项（仅左对勾+非聚合时展开） | `SelectSubItemOption[]` | 否 |

### SelectSubItemOption

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **key** | 唯一标识，用于列表 key | `string \| number` | - | 否 |
| **title** | 标题 | `string` | - | 是 |
| **value** | 右侧附属文字 | `string` | - | 否 |
| **actionType** | 右侧操作类型 | `'navigate' \| 'select' \| 'custom' \| 'none'` | `'navigate'` | 否 |
| **customRender** | 自定义右侧渲染（actionType='custom' 时生效） | `ReactElement` | - | 否 |
| **badge** | 是否显示小红点 | `boolean` | - | 否 |
| **disabled** | 禁用 | `boolean` | - | 否 |
| **onPress** | 点击回调 | `() => void` | - | 否 |

## 使用示例

```tsx
import { SelectList } from 'mhui-rn';

// 右对勾（默认）
<SelectList
  options={[
    { value: 1, title: '选项一' },
    { value: 2, title: '选项二', subtitle: '描述' },
  ]}
  value={1}
  onChange={setValue}
/>

// 左对勾 + 子选项
<SelectList
  selectedAlign="left"
  options={[
    { value: 'a', title: '分组A', subItems: [
      { title: '制冷', value: '26°C', actionType: 'navigate', onPress: () => {} },
      { title: '制热', value: '28°C', actionType: 'select', badge: true, onPress: () => {} },
    ]},
    { value: 'b', title: '分组B' },
  ]}
  value="a"
  onChange={setValue}
/>

// 色系
<SelectList options={options} value={1} onChange={setValue} colorType="blue" />

// 聚合模式
<SelectList options={options} value={1} onChange={setValue} isGroup />
```

## 注意事项

- `colorType` 影响选中态的文字色和勾选图标色
- 子项禁用态合并了父级 `item.disabled` 和自身 `sub.disabled`
- `options` 中的 null/undefined 元素会被自动过滤
- 子项的 `actionType` 默认为 `'navigate'`（显示箭头）
