# ConfigProvider

全局配置提供者组件，为子孙组件提供 i18n、主题、响应判断等全局配置。一般应用在页面的 app root node。

## 适用场景

- 应用根节点提供全局主题配置（基础尺寸、对齐方式等）
- 国际化语言切换与自定义词库
- 统一配置组件的基础尺寸
- 样式隔离方案（wrapClassName）

## Props - ConfigProvider

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| locale | `string` | `"zh_cn"` | 否 | 指定使用的语言地区 |
| localeDict | `LocaleDict` | `-` | 否 | 语言地区词库集合，用以覆写各组件的内建词库或自定义语言地区词库 |
| theme | `ThemeConfig` | `-` | 否 | 主题相关基础配置 |
| isResponseSuccess | `(respJson: Json, respText: string) => boolean` | `-` | 否 | request 响应成功的判断函数 |
| getResponseMessage | `(respJson: Json, respText: string) => string` | `-` | 否 | request 响应的消息提取器 |
| textCounter | `(text: string) => number` | `-` | 否 | 字数计数函数 |
| wrapClassName | `string` | `-` | 否 | 包裹容器的类名，用于样式隔离方案 |

## Props - ThemeConfig

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| baseSize | `BaseSize` | `-` | 否 | 基础尺寸 |
| loadingDelay | `number` | `-` | 否 | loading 延迟显示时间 |
| fontSize | `FontSize` | `-` | 否 | 字体尺寸 map |
| selectedSeparator | `string` | `-` | 否 | 多项选择的分隔符 |
| buttonFontSize | `FontSize` | `-` | 否 | button 字体尺寸 map |
| buttonLoadingIcon | `SvgFC` | `-` | 否 | button 默认 loading 图标 |
| buttonLoadingType | `"normal" \| "icon-only"` | `-` | 否 | button 默认 loading 类型 |
| buttonDefaultShape | `"normal" \| "capsule"` | `-` | 否 | button 默认形状 |
| checkboxMarkChecked | `SvgFC` | `-` | 否 | checkbox 选中图标 |
| checkboxMarkIndeterminate | `SvgFC` | `-` | 否 | checkbox 半选图标 |
| alertIconInfo | `SvgFC` | `-` | 否 | alert info 图标 |
| alertIconSuccess | `SvgFC` | `-` | 否 | alert success 图标 |
| alertIconWarning | `SvgFC` | `-` | 否 | alert warning 图标 |
| alertIconError | `SvgFC` | `-` | 否 | alert error 图标 |
| dialogActionsAlign | `"right" \| "center" \| "left"` | `-` | 否 | dialog 操作按钮对齐方式 |
| dialogMaxHeight | `number` | `-` | 否 | dialog 最大高度 |
| dialogMinHeight | `number` | `-` | 否 | dialog 最小高度 |
| dialogTopDistance | `number` | `-` | 否 | dialog 顶部距离 |
| drawerMinWidth | `number` | `-` | 否 | drawer 最小宽度 |
| drawerMaxWidth | `number` | `-` | 否 | drawer 最大宽度 |
| drawerMinHeight | `number` | `-` | 否 | drawer 最小高度 |
| drawerMaxHeight | `number` | `-` | 否 | drawer 最大高度 |
| popoverActionsAlign | `"right" \| "center" \| "left"` | `-` | 否 | popover 操作按钮对齐方式 |
| tableExpandButtonMargin | `number` | `-` | 否 | table 展开按钮边距 |

## 典型用法

### 基础主题与国际化配置

```tsx
import {render} from 'react-dom'
import {ConfigProvider, PopoverConfirm, Pagination, Upload} from '@befe/brick'

const locale = 'en_us'
const localeDict = {
    // 扁平化配置（推荐）
    'en_us.popover.cancel': 'No',
    // 组件词库内部结构
    'en_us': {
        'popover': {
            'confirm': 'OK',
        },
        'pagination': {
            'total_suffix': (total: number) => (total > 1 ? 'Records' : 'Record'),
        },
    },
}
const theme = {
    baseSize: 'sm',
    dialogActionsAlign: 'center',
}

function App() {
    return (
        <ConfigProvider locale={locale} localeDict={localeDict} theme={theme}>
            <PopoverConfirm message={'Hello, Stranger'}>
                <Button>I am sm size</Button>
            </PopoverConfirm>
            <Pagination total={5} />
        </ConfigProvider>
    )
}
```

### 样式隔离（wrapClassName）

> 提供 `wrapClassName` 可启用样式隔离，子组件与 portal 会被包裹到相应的 div.wrap-name 中

```tsx
import {ConfigProvider, PopoverConfirm, createConfirm} from '@befe/brick'

// off-board 渲染的组件也需传入相同的 wrapClassName
const confirm = createConfirm({wrapClassName: 'awesome-one'})

<ConfigProvider wrapClassName={'awesome-one'}>
    <PopoverConfirm message={'确认？'} onConfirm={handleConfirm}>
        <Button>Click me</Button>
    </PopoverConfirm>
    <Button onClick={() => confirm.info('确认一下', '已被 .awesome-one 包裹')}>
        Dialog Confirm
    </Button>
</ConfigProvider>
```

## 注意事项

- 2021 BREAKING CHANGES：`theme.defaultSize` 改为 `theme.baseSize`；`dialogActionsAlign` 和 `popoverActionsAlign` 默认值从 `'center'` 改为 `'right'`
- 使用 `wrapClassName` 样式隔离时，`confirm()`、`alert()` 等 off-board 渲染的组件需搭配 `createConfirm()`、`createMessage()`、`createNotification()` 并传入相同的 `wrapClassName`
- `localeDict` 支持扁平化结构（推荐）和组件词库内部结构两种格式
- 应在应用根节点使用，不要在局部组件中嵌套多层 ConfigProvider