# 5e-UI 组件库

## Button

```javascript
<Button type="primary" disabled>
  Primary
</Button>
```

| 参数      | 说明             | 类型                                | 默认值 |
| --------- | ---------------- | ----------------------------------- | ------ |
| type      | 设置按钮类型     | primary \| danger \| ghost \| black | \-     |
| size      | 设置按钮大小     | large \| small                      | large  |
| disabled  | 按钮失效状态     | boolean                             | false  |
| className | 自定义 className | string                              | \-     |
| onClick   | 点击按钮时的回调 | (event) => void                     | \-     |

---

## Icon

#### Icon 组件操作流程

- 进入阿里巴巴图标库 - https://www.iconfont.cn/，通过git账号密码登录
- 资源管理 - 我的项目（需要项目管理员提前添加项目成员）
- 并且复制 Symbol 在线代码，复制代码(图标库在线 js 文件路径)，粘贴代码（路径）到 app.html
- 使用< Icon name="图标库的名称" />

```html
<script src="//at.alicdn.com/t/font_2552364_41dw50uttv.js"></script>
```

```javascript
<Icon name="close" />
```

| 参数      | 说明             | 类型            | 默认值 |
| --------- | ---------------- | --------------- | ------ |
| name      | 内置 icon 名称   | string          | \-     |
| className | 自定义 className | string          | \-     |
| onClick   | 点击按钮时的回调 | (event) => void | \-     |

---

## Tag

```javascript
<Tag name='测试tag' />
<Tag name='测试tag' closable />
```

| 参数       | 说明                     | 类型           | 默认值 |
| ---------- | ------------------------ | -------------- | ------ |
| name       | tag 内容                 | string         | \-     |
| color      | tag 字体颜色以及边框颜色 | string         | \-     |
| background | tag 背景颜色             | string         | \-     |
| closable   | 是否显示关闭 icon        | false          | \-     |
| afterClose | 点击关闭 icon 后的回调   | (name) => void | \-     |
| className  | 自定义 className         | string         | \-     |
| onClick    | 点击 tag 时的回调        | (name) => void | \-     |

---

## Toast

#### 每个 Toast.loading 方法需要被 Toast.hide()消费掉才能继续使用 Toast 的方法，如果 loading 方法未消费就使用其他 Api 会导致其他 Api 失效并且 loading 关闭。

[具体演示代码请到对应组件查看](/components/toast)

### Api

- Toast.success({content, duration, onClose, mask})

- Toast.fail({content, duration, onClose, mask})

- Toast.info({content, duration, onClose, mask, contentStyle, position, top})

- Toast.loading({content, duration, onClose, mask})

- Toast.hide()

| 参数         | 说明                                                      | 类型                    | 默认值 |
| ------------ | --------------------------------------------------------- | ----------------------- | ------ |
| content      | 提示内容                                                  | React.Element or String | \-     |
| duration     | 自动关闭的延时，单位秒                                    | number                  | 3      |
| mask         | 是否显示透明蒙层，防止触摸穿透                            | Boolean                 | true   |
| position     | 消息位置                                                  | bottom \| middle \| top | middle |
| contentStyle | 消息弹窗样式                                              | {}                      | \-     |
| top          | 距离顶部的距离(当 position 为 top 时生效) ｜ number ｜ 36 |
| onClose      | toast 关闭回调 ｜ () => void                              | \-                      |

---

## Message - Toast 的特殊实现

[具体演示代码请到对应组件查看](/components/message)

### Api

- message.info({content, duration, onClose, top})

| 参数     | 说明                                                      | 类型                    | 默认值 |
| -------- | --------------------------------------------------------- | ----------------------- | ------ |
| content  | 提示内容                                                  | React.Element or String | \-     |
| duration | 自动关闭的延时，单位秒                                    | number                  | 3      |
| top      | 距离顶部的距离(当 position 为 top 时生效) ｜ number ｜ 36 |
| onClose  | toast 关闭回调 ｜ () => void                              | \-                      |

---

## WrapperCenter

[具体演示代码请到对应组件查看](/components/wrapper_center)

| 参数      | 说明             | 类型          | 默认值 |
| --------- | ---------------- | ------------- | ------ |
| children  | 居中内容         | React.Element | \-     |
| className | 自定义 className | string        | \-     |

---

## TreeSelect

#### 目前选中状态是外层传递选中的树节点数组，每次递归遍历的时候判断是否选中 - 选中的树节点数组.includes(当前节点 value)。

#### todo disabled 属性应该在每个节点上

[具体演示代码请到对应组件查看](/components/tree_select)

| 参数         | 说明                                     | 类型                                           | 默认值 |
| ------------ | ---------------------------------------- | ---------------------------------------------- | ------ |
| data         | treeNodes 数据(value 在整个树范围内唯一) | array<{value, title, children,departInfoList}> | \-     |
| multi        | 支持点选多个节点                         | boolean                                        | false  |
| selected     | 选中的树节点数组                         | number[]                                       | []     |
| onSelect     | 点击选中的回调                           | function                                       | \-     |
| levelPadding | 层级节点外边距                           | number                                         | 24     |

## SelectPeople

[具体演示代码请到对应组件查看](/components/select_people)

| 参数         | 说明                                     | 类型                                           | 默认值 |
| ------------ | ---------------------------------------- | ---------------------------------------------- | ------ |
| title        | 通讯录名称                               | string                                         | \-     |
| isPcClient   | 是否客户端                               | boolean                                        | false  |
| renderNode   | 自定义渲染节点                           | (nodeData) => ReactNode                        | \-     |
| footer       | 自定义底部按钮                           | ReactNode                                      | \-     |
| onConfirm    | 点击确定回调                             | function(e)                                    | \-     |
| onCancel     | 点击取消回调                             | function(e)                                    | \-     |
| data         | treeNodes 数据(value 在整个树范围内唯一) | array<{value, title, children,departInfoList}> | \-     |
| multi        | 支持点选多个节点                         | boolean                                        | false  |
| selectedIds  | 选中的树节点数组                         | number[]                                       | []     |
| handleSelect | 点击选中的回调                           | function                                       | \-     |
| levelPadding | 层级节点外边距                           | number                                         | 24     |

---

## TODO

- 蒙板组件
- toast 组件的 mask 效果使用蒙板组件
- 弹窗组件
- 结果页组件
- 树选择组件样式优化
- menu 组件样式优化
<!-- * 引入@storybook/addon-info插件生成组件库文档 -->