# Switch

开关组件，用于在两种状态（开/关）之间切换。支持 loading 状态、文字/图标标签和异步变更前确认。

## 适用场景

- 功能的启用/禁用切换
- 设置项的开关控制
- 需要 loading 状态等待异步操作的开关
- 需要在切换前进行异步确认的场景

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| size | `"xs" \| "sm" \| "md"` | 取 config context `baseSize` | 否 | 尺寸 |
| checked | `boolean` | `-` | 否 | on/off 状态控制值 |
| defaultChecked | `boolean` | `false` | 否 | on/off 状态默认值 |
| iconLabel | `boolean` | `-` | 否 | 是否使用内建的 icon label |
| checkedLabel | `ReactNode` | `-` | 否 | on 状态的内容 |
| uncheckedLabel | `ReactNode` | `-` | 否 | off 状态的内容 |
| disabled | `boolean` | `-` | 否 | 是否禁用 |
| loading | `boolean` | `-` | 否 | 控制是否处于 loading 状态。loading 状态 click 立刻无效，但无 disabled 样式 |
| loadingDelay | `number` | `300` | 否 | loading 图标的延迟响应时间（ms），0 为立即显示 |
| beforeChange | `(checked: boolean, e?) => boolean \| void \| Promise` | `-` | 否 | checked 变化前的回调。返回 `false` 阻止变化，返回 Promise 则 resolve 后变化，reject 则不变化 |
| onChange | `(checked: boolean, e?) => void` | `-` | 否 | checked 变化时的回调 |

## 典型用法

### 基础状态

```tsx
import { useState } from 'react'
import { Switch } from '@befe/brick'

function Demo() {
    const [checked, setChecked] = useState(true)

    const handleChange = (checked: boolean) => {
        setChecked(!checked)
    }

    return (
        <div>
            <Switch checked={checked} onChange={handleChange} />
            <Switch checked={checked} disabled />
            <Switch size="md" checkedLabel="启用" uncheckedLabel="停用" />
            <Switch size="md" iconLabel />
        </div>
    )
}
```

### Loading 状态

```tsx
import { useState } from 'react'
import { Switch, Button } from '@befe/brick'

function Demo() {
    const [loading, setLoading] = useState(true)

    return (
        <div>
            <Button onClick={() => setLoading(!loading)}>Toggle Loading</Button>
            <Switch size="xs" loading={loading} />
            <Switch loading={loading} />
            <Switch size="md" loading={loading} />
        </div>
    )
}
```

### 异步确认（beforeChange）

```tsx
import { useState } from 'react'
import { Switch } from '@befe/brick'

function Demo() {
    const [checked, setChecked] = useState(false)

    const beforeChange = (checked: boolean) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve 后切换，reject 则不切换
                resolve(checked)
            }, 3000)
        })
    }

    return (
        <Switch checked={checked} onChange={setChecked} beforeChange={beforeChange} />
    )
}
```

## 注意事项

- `checkedLabel` 和 `uncheckedLabel` 只有 `size` 为 `md` 时才能显示文本
- `iconLabel` 设为 `true` 时，未设置 `checkedLabel`/`uncheckedLabel` 的状态会显示图标
- `loading` 状态下 click 立刻无效，但视觉上不同于 `disabled`（无灰色禁用样式）
- `beforeChange` 返回 Promise 时，resolve 后才切换，reject 则不切换；这段等待期间会进入 loading 状态
- `props.loadingDelayInMS` 已废弃，改用 `props.loadingDelay`