@gmfe/react 2.14.30-alpha.0 → 2.14.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +179 -0
- package/package.json +4 -4
- package/src/component/affix/README.md +54 -0
- package/src/component/box/README.md +142 -0
- package/src/component/box/box_table.js +11 -18
- package/src/component/button/README.md +90 -0
- package/src/component/calendar/README.md +98 -0
- package/src/component/carousel/README.md +51 -0
- package/src/component/cascader/README.md +139 -0
- package/src/component/checkbox/README.md +120 -0
- package/src/component/collapse/README.md +80 -0
- package/src/component/color_picker/README.md +50 -0
- package/src/component/date_picker/README.md +144 -0
- package/src/component/date_range_picker/README.md +126 -0
- package/src/component/dialog/README.md +149 -0
- package/src/component/divider/README.md +41 -0
- package/src/component/drawer/README.md +83 -0
- package/src/component/drop_down/README.md +105 -0
- package/src/component/drop_select/README.md +146 -0
- package/src/component/dropper/README.md +55 -0
- package/src/component/editable_text/README.md +68 -0
- package/src/component/filter_select/README.md +104 -0
- package/src/component/flex/README.md +88 -0
- package/src/component/flip_number/README.md +53 -0
- package/src/component/form/README.md +199 -0
- package/src/component/function_set/README.md +93 -0
- package/src/component/grid/README.md +93 -0
- package/src/component/icon_down_up/README.md +43 -0
- package/src/component/image_preview/README.md +57 -0
- package/src/component/img_uploader/README.md +91 -0
- package/src/component/input/README.md +49 -0
- package/src/component/input_number/README.md +93 -0
- package/src/component/layout_root/README.md +181 -0
- package/src/component/lazy_img/README.md +59 -0
- package/src/component/level_list/README.md +75 -0
- package/src/component/level_select/README.md +78 -0
- package/src/component/list/README.md +96 -0
- package/src/component/loading/README.md +116 -0
- package/src/component/mask/README.md +62 -0
- package/src/component/modal/README.md +155 -0
- package/src/component/more_select/README.md +185 -0
- package/src/component/nav/README.md +101 -0
- package/src/component/nprogress/README.md +135 -0
- package/src/component/pagination/README.md +87 -0
- package/src/component/picture_preview/README.md +50 -0
- package/src/component/popover/README.md +146 -0
- package/src/component/popup/README.md +121 -0
- package/src/component/price/README.md +72 -0
- package/src/component/progress/README.md +98 -0
- package/src/component/progress_circle/README.md +92 -0
- package/src/component/radio/README.md +101 -0
- package/src/component/recommend_input/README.md +75 -0
- package/src/component/select/README.md +120 -0
- package/src/component/selection/README.md +87 -0
- package/src/component/sheet/README.md +176 -0
- package/src/component/steps/README.md +55 -0
- package/src/component/storage/README.md +83 -0
- package/src/component/switch/README.md +85 -0
- package/src/component/table_select/README.md +92 -0
- package/src/component/tabs/README.md +85 -0
- package/src/component/time_span/README.md +112 -0
- package/src/component/tip/README.md +105 -0
- package/src/component/tool_tip/README.md +84 -0
- package/src/component/transfer/README.md +98 -0
- package/src/component/transfer_v2/README.md +85 -0
- package/src/component/tree/README.md +99 -0
- package/src/component/tree/index.js +1 -1
- package/src/component/tree_v2/README.md +99 -0
- package/src/component/uploader/README.md +104 -0
- package/src/index.js +1 -3
- package/LICENSE +0 -16
- package/src/hoc/sticky_layout.js +0 -157
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# Tip
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
提示信息组件 - 用于显示全局轻量级提示消息,支持 success、info、warning、danger 四种类型,提供组件和静态方法两种使用方式
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { Tip } from '@gmfe/react'
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## API
|
|
15
|
+
|
|
16
|
+
### 组件 Props
|
|
17
|
+
|
|
18
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
19
|
+
|------|------|------|--------|------|
|
|
20
|
+
| title | 标题 | `string` | `''` | 否 |
|
|
21
|
+
| type | 提示类型,对应不同图标和颜色 | `'success' \| 'info' \| 'warning' \| 'danger'` | `'info'` | 否 |
|
|
22
|
+
| onClose | 关闭回调 | `func` | `_.noop` | 否 |
|
|
23
|
+
| children | 提示内容 | `any` | - | 否 |
|
|
24
|
+
|
|
25
|
+
### TipOverlay Props(静态方法内部使用)
|
|
26
|
+
|
|
27
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
28
|
+
|------|------|------|--------|------|
|
|
29
|
+
| title | 标题 | `string` | - | 否 |
|
|
30
|
+
| type | 提示类型 | `string` | - | 否 |
|
|
31
|
+
| onClose | 关闭回调 | `func` | - | 否 |
|
|
32
|
+
| time | 自动关闭时间(毫秒),设为 0 则不自动关闭 | `number` | `3000` | 否 |
|
|
33
|
+
| children | 提示内容 | `any` | - | 否 |
|
|
34
|
+
|
|
35
|
+
### 静态方法
|
|
36
|
+
|
|
37
|
+
| 方法 | 说明 | 参数 | 返回值 |
|
|
38
|
+
|------|------|------|--------|
|
|
39
|
+
| `Tip.tip(options)` | 显示提示信息 | `options: Object` | `id: string` |
|
|
40
|
+
| `Tip.success(options)` | 显示成功提示,参数可为字符串或对象 | `string \| Object` | `id: string` |
|
|
41
|
+
| `Tip.info(options)` | 显示信息提示,参数可为字符串或对象 | `string \| Object` | `id: string` |
|
|
42
|
+
| `Tip.warning(options)` | 显示警告提示,参数可为字符串或对象 | `string \| Object` | `id: string` |
|
|
43
|
+
| `Tip.danger(options)` | 显示危险提示,参数可为字符串或对象 | `string \| Object` | `id: string` |
|
|
44
|
+
| `Tip.clear(id)` | 关闭指定 id 的提示 | `id: string` | - |
|
|
45
|
+
| `Tip.clearAll()` | 关闭所有提示 | - | - |
|
|
46
|
+
|
|
47
|
+
#### 静态方法 Options
|
|
48
|
+
|
|
49
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
50
|
+
|------|------|------|--------|------|
|
|
51
|
+
| children | 提示内容 | `any` | - | 否 |
|
|
52
|
+
| type | 提示类型(由快捷方法自动设置) | `string` | - | 否 |
|
|
53
|
+
| title | 标题 | `string` | - | 否 |
|
|
54
|
+
| time | 自动关闭时间(毫秒),设为 0 则需手动关闭 | `number` | `3000` | 否 |
|
|
55
|
+
| onClose | 关闭回调 | `func` | - | 否 |
|
|
56
|
+
|
|
57
|
+
## 示例
|
|
58
|
+
|
|
59
|
+
### 基础用法 - 组件形式
|
|
60
|
+
|
|
61
|
+
```jsx
|
|
62
|
+
<Tip type='success'>操作成功</Tip>
|
|
63
|
+
<Tip type='info'>这是一条提示信息</Tip>
|
|
64
|
+
<Tip type='warning'>这是警告信息</Tip>
|
|
65
|
+
<Tip type='danger'>操作失败</Tip>
|
|
66
|
+
<Tip type='success' title='成功'>操作已完成</Tip>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### 静态方法 - 简写字符串
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
// 默认 3 秒后自动关闭
|
|
73
|
+
Tip.info('这是一条提示信息')
|
|
74
|
+
Tip.success('操作成功')
|
|
75
|
+
Tip.warning('请注意')
|
|
76
|
+
Tip.danger('操作失败')
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 静态方法 - 完整配置
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
// 显示成功提示,不自动关闭
|
|
83
|
+
const tipId = Tip.success({
|
|
84
|
+
children: '需要用户自行关闭的提示',
|
|
85
|
+
time: 0,
|
|
86
|
+
onClose: () => console.log('提示已关闭')
|
|
87
|
+
})
|
|
88
|
+
|
|
89
|
+
// 手动关闭指定提示
|
|
90
|
+
Tip.clear(tipId)
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### 关闭所有提示
|
|
94
|
+
|
|
95
|
+
```jsx
|
|
96
|
+
Tip.clearAll()
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## 注意事项
|
|
100
|
+
|
|
101
|
+
- 静态方法支持字符串简写和对象两种参数形式。传入字符串时,会自动将其作为 `children` 使用。
|
|
102
|
+
- 静态方法返回一个唯一 `id`,可通过 `Tip.clear(id)` 关闭指定的提示消息。
|
|
103
|
+
- 设置 `time: 0` 可以禁用自动关闭,此时需要用户手动点击关闭按钮或调用 `Tip.clear(id)` 来关闭。
|
|
104
|
+
- 多条提示会依次排列显示在页面右上角。
|
|
105
|
+
- 组件形式的 Tip 适合嵌入到页面固定位置,静态方法适合在操作后临时弹出全局提示。
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# ToolTip
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
文字提示组件 - 基于Popover封装的悬浮提示气泡,鼠标悬停时显示提示内容,默认显示问号图标
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { ToolTip } from '@gmfe/react'
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## API
|
|
15
|
+
|
|
16
|
+
### Props
|
|
17
|
+
|
|
18
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
19
|
+
|------|------|------|--------|------|
|
|
20
|
+
| popup | 提示气泡内容 | `element` | - | 否 |
|
|
21
|
+
| children | 自定义触发元素,不传时默认显示问号图标 | `element` | - | 否 |
|
|
22
|
+
| right | 是否右对齐弹出 | `bool` | `false` | 否 |
|
|
23
|
+
| top | 是否向上弹出 | `bool` | `false` | 否 |
|
|
24
|
+
| center | 是否居中弹出 | `bool` | `false` | 否 |
|
|
25
|
+
| showArrow | 是否显示三角箭头 | `bool` | `true` | 否 |
|
|
26
|
+
| className | 自定义类名(作用于默认问号图标) | `string` | - | 否 |
|
|
27
|
+
| style | 自定义样式(作用于默认问号图标) | `object` | - | 否 |
|
|
28
|
+
|
|
29
|
+
## 示例
|
|
30
|
+
|
|
31
|
+
### 基础用法 - 默认问号图标
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
<ToolTip popup={<div>这是一段提示文字</div>} />
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### 自定义触发元素
|
|
38
|
+
|
|
39
|
+
```jsx
|
|
40
|
+
<ToolTip popup={<div style={{ width: '100px', height: '100px' }}>详细说明内容</div>}>
|
|
41
|
+
<span>悬浮查看提示</span>
|
|
42
|
+
</ToolTip>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### 右对齐弹出
|
|
46
|
+
|
|
47
|
+
```jsx
|
|
48
|
+
<ToolTip
|
|
49
|
+
right
|
|
50
|
+
popup={<div>右对齐的提示内容</div>}
|
|
51
|
+
>
|
|
52
|
+
<span>右对齐提示</span>
|
|
53
|
+
</ToolTip>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 居中弹出
|
|
57
|
+
|
|
58
|
+
```jsx
|
|
59
|
+
<ToolTip
|
|
60
|
+
center
|
|
61
|
+
popup={<div>居中的提示内容</div>}
|
|
62
|
+
>
|
|
63
|
+
<span>居中提示</span>
|
|
64
|
+
</ToolTip>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### 向上弹出
|
|
68
|
+
|
|
69
|
+
```jsx
|
|
70
|
+
<ToolTip
|
|
71
|
+
top
|
|
72
|
+
popup={<div>向上弹出的提示</div>}
|
|
73
|
+
>
|
|
74
|
+
<span>上方提示</span>
|
|
75
|
+
</ToolTip>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## 注意事项
|
|
79
|
+
|
|
80
|
+
- ToolTip 底层基于 `Popover` 组件,默认使用 `type='hover'`(鼠标悬浮触发)和 `offset={-8}` 的配置。
|
|
81
|
+
- 不传 `children` 时,组件会渲染一个默认的问号图标(带 `gm-text-desc` 样式类)。
|
|
82
|
+
- 传 `children` 时会使用自定义元素作为触发器,替代默认的问号图标。
|
|
83
|
+
- `popup` 属性支持传入任意 React 元素作为气泡内容。
|
|
84
|
+
- ToolTip 使用 `forwardRef` 实现,支持通过 `ref` 获取组件实例并调用 `apiDoSetActive` 等底层方法。
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# Transfer
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
穿梭框组件 - 用于在左右两栏之间转移选项,支持普通列表和分组树形列表
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { Transfer, TransferGroup } from '@gmfe/react'
|
|
12
|
+
|
|
13
|
+
// 普通穿梭框
|
|
14
|
+
<Transfer
|
|
15
|
+
list={list}
|
|
16
|
+
selectedValues={selectedValues}
|
|
17
|
+
onSelect={values => setSelectedValues(values)}
|
|
18
|
+
/>
|
|
19
|
+
|
|
20
|
+
// 分组穿梭框
|
|
21
|
+
<TransferGroup
|
|
22
|
+
list={groupList}
|
|
23
|
+
selectedValues={selectedValues}
|
|
24
|
+
onSelect={values => setSelectedValues(values)}
|
|
25
|
+
/>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## API
|
|
29
|
+
|
|
30
|
+
### Transfer Props
|
|
31
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
32
|
+
|------|------|------|--------|------|
|
|
33
|
+
| list | 数据源,格式:`[{value, name}]` | `array` | - | 是 |
|
|
34
|
+
| selectedValues | 已选中的 value 数组 | `array` | - | 是 |
|
|
35
|
+
| onSelect | 选中值变化回调 | `function` | - | 是 |
|
|
36
|
+
| listStyle | 左右两栏的样式 | `object` | `{width: '250px', height: '350px'}` | 否 |
|
|
37
|
+
| leftTitle | 左栏标题 | `string` | `'待选择'` | 否 |
|
|
38
|
+
| leftWithFilter | 左栏搜索过滤函数 | `func \| bool` | `true` | 否 |
|
|
39
|
+
| leftPlaceHolder | 左栏搜索框占位文本 | `string` | `'搜索'` | 否 |
|
|
40
|
+
| rightTitle | 右栏标题 | `string` | `'已选择'` | 否 |
|
|
41
|
+
| rightWithFilter | 右栏搜索过滤函数 | `func \| bool` | `true` | 否 |
|
|
42
|
+
| rightPlaceHolder | 右栏搜索框占位文本 | `string` | `'搜索'` | 否 |
|
|
43
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
44
|
+
| style | 自定义样式 | `object` | - | 否 |
|
|
45
|
+
| disabled | 是否禁用 | `bool` | - | 否 |
|
|
46
|
+
| isVirtual | 是否使用虚拟滚动 | `bool` | `false` | 否 |
|
|
47
|
+
| itemSize | 虚拟滚动时每项的高度 | `number` | `25` | 否 |
|
|
48
|
+
|
|
49
|
+
### TransferGroup Props
|
|
50
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
51
|
+
|------|------|------|--------|------|
|
|
52
|
+
| list | 树形数据源,格式:`[{value, name, children: [{value, name, children: []}]}]` | `array` | - | 是 |
|
|
53
|
+
| selectedValues | 已选中的叶子节点 value 数组 | `array` | - | 是 |
|
|
54
|
+
| onSelect | 选中值变化回调 | `function` | - | 是 |
|
|
55
|
+
| listStyle | 左右两栏的样式 | `object` | `{width: '250px', height: '350px'}` | 否 |
|
|
56
|
+
| leftTitle | 左栏标题 | `string` | `'待选择'` | 否 |
|
|
57
|
+
| leftWithFilter | 左栏搜索过滤函数 | `func \| bool` | `true` | 否 |
|
|
58
|
+
| leftPlaceHolder | 左栏搜索框占位文本 | `string` | `'搜索'` | 否 |
|
|
59
|
+
| rightTitle | 右栏标题 | `string` | `'已选择'` | 否 |
|
|
60
|
+
| rightWithFilter | 右栏搜索过滤函数 | `func \| bool` | `true` | 否 |
|
|
61
|
+
| rightPlaceHolder | 右栏搜索框占位文本 | `string` | `'搜索'` | 否 |
|
|
62
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
63
|
+
| style | 自定义样式 | `object` | - | 否 |
|
|
64
|
+
|
|
65
|
+
## 示例
|
|
66
|
+
|
|
67
|
+
### 基础穿梭框
|
|
68
|
+
```jsx
|
|
69
|
+
<Transfer
|
|
70
|
+
list={list}
|
|
71
|
+
selectedValues={selectedValues}
|
|
72
|
+
onSelect={values => setSelectedValues(values)}
|
|
73
|
+
/>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### 虚拟滚动
|
|
77
|
+
```jsx
|
|
78
|
+
<Transfer
|
|
79
|
+
isVirtual
|
|
80
|
+
list={largeList}
|
|
81
|
+
selectedValues={selectedValues}
|
|
82
|
+
onSelect={values => setSelectedValues(values)}
|
|
83
|
+
/>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### 分组穿梭框
|
|
87
|
+
```jsx
|
|
88
|
+
<TransferGroup
|
|
89
|
+
list={groupList}
|
|
90
|
+
selectedValues={selectedValues}
|
|
91
|
+
onSelect={values => setSelectedValues(values)}
|
|
92
|
+
/>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## 注意事项
|
|
96
|
+
- `Transfer` 适用于扁平列表数据
|
|
97
|
+
- `TransferGroup` 适用于树形分组数据,左侧为 Tree 组件,右侧为普通列表
|
|
98
|
+
- 启用虚拟滚动 (`isVirtual`) 后可处理大量数据
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# TransferV2
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
穿梭框组件 V2 - 基于虚拟化树形控件的新版穿梭框,支持左右栏独立搜索过滤和自定义渲染
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { TransferV2 } from '@gmfe/react'
|
|
12
|
+
|
|
13
|
+
<TransferV2
|
|
14
|
+
list={data}
|
|
15
|
+
selectedValues={selectedValues}
|
|
16
|
+
onSelectValues={selected => setSelectedValues(selected)}
|
|
17
|
+
/>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## API
|
|
21
|
+
|
|
22
|
+
### Props
|
|
23
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
24
|
+
|------|------|------|--------|------|
|
|
25
|
+
| list | 数据源(支持树形数据和平铺数据) | `array` | - | 是 |
|
|
26
|
+
| selectedValues | 已选中的 value 数组 | `array` | - | 是 |
|
|
27
|
+
| onSelectValues | 选中值变化回调 | `function` | - | 是 |
|
|
28
|
+
| rightTree | 右边是否以树状结构展示 | `bool` | - | 否 |
|
|
29
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
30
|
+
| style | 自定义样式 | `object` | - | 否 |
|
|
31
|
+
| leftTitle | 左栏标题 | `string` | `'待选择'` | 否 |
|
|
32
|
+
| leftPlaceholder | 左栏搜索框占位文本 | `string` | - | 否 |
|
|
33
|
+
| leftWithFilter | 左栏过滤函数 | `func \| bool` | - | 否 |
|
|
34
|
+
| leftRenderLeafItem | 左栏叶子节点自定义渲染 | `function` | - | 否 |
|
|
35
|
+
| leftRenderGroupItem | 左栏分组节点自定义渲染 | `function` | - | 否 |
|
|
36
|
+
| leftStyle | 左栏自定义样式 | `object` | `{width: '300px', height: '500px'}` | 否 |
|
|
37
|
+
| leftClassName | 左栏自定义类名 | `string` | - | 否 |
|
|
38
|
+
| rightTitle | 右栏标题 | `string` | `'已选择'` | 否 |
|
|
39
|
+
| rightPlaceholder | 右栏搜索框占位文本 | `string` | - | 否 |
|
|
40
|
+
| rightWithFilter | 右栏过滤函数 | `func \| bool` | - | 否 |
|
|
41
|
+
| rightRenderLeafItem | 右栏叶子节点自定义渲染 | `function` | - | 否 |
|
|
42
|
+
| rightRenderGroupItem | 右栏分组节点自定义渲染 | `function` | - | 否 |
|
|
43
|
+
| rightStyle | 右栏自定义样式 | `object` | `{width: '300px', height: '500px'}` | 否 |
|
|
44
|
+
| rightClassName | 右栏自定义类名 | `string` | - | 否 |
|
|
45
|
+
|
|
46
|
+
## 示例
|
|
47
|
+
|
|
48
|
+
### 基础用法
|
|
49
|
+
```jsx
|
|
50
|
+
<TransferV2
|
|
51
|
+
list={flatData}
|
|
52
|
+
selectedValues={selected}
|
|
53
|
+
onSelectValues={selected => setSelectedValues(selected)}
|
|
54
|
+
rightTree
|
|
55
|
+
/>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### 树形数据
|
|
59
|
+
```jsx
|
|
60
|
+
<TransferV2
|
|
61
|
+
list={treeData}
|
|
62
|
+
selectedValues={selected}
|
|
63
|
+
onSelectValues={selected => setSelectedValues(selected)}
|
|
64
|
+
/>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### 自定义标题和渲染
|
|
68
|
+
```jsx
|
|
69
|
+
<TransferV2
|
|
70
|
+
list={treeData}
|
|
71
|
+
selectedValues={selected}
|
|
72
|
+
onSelectValues={selected => setSelectedValues(selected)}
|
|
73
|
+
leftTitle="修改左边的标题"
|
|
74
|
+
rightTitle="修改右边的标题"
|
|
75
|
+
rightStyle={{ width: '500px', height: '500px' }}
|
|
76
|
+
rightRenderLeafItem={data => (
|
|
77
|
+
<div>{data.parent.text} -- {data.text}</div>
|
|
78
|
+
)}
|
|
79
|
+
/>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## 注意事项
|
|
83
|
+
- 左右栏默认尺寸为 `300px x 500px`
|
|
84
|
+
- 内部基于 `TreeV2` 组件,支持大数据量虚拟化渲染
|
|
85
|
+
- 设置 `rightTree` 后右侧会以树状结构展示,否则为扁平列表
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# Tree
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
树形选择组件 - 支持多级嵌套、搜索过滤、全选、自定义渲染的树形控件
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { Tree } from '@gmfe/react'
|
|
12
|
+
|
|
13
|
+
<Tree
|
|
14
|
+
list={data}
|
|
15
|
+
selectedValues={selectedValues}
|
|
16
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
17
|
+
/>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## API
|
|
21
|
+
|
|
22
|
+
### Props
|
|
23
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
24
|
+
|------|------|------|--------|------|
|
|
25
|
+
| list | 树形数据,格式:`[{value, name, children: []}]` | `array` | - | 是 |
|
|
26
|
+
| selectedValues | 已选中的叶子节点 value 数组 | `array` | - | 是 |
|
|
27
|
+
| onSelectValues | 选择值变化回调 | `function` | - | 是 |
|
|
28
|
+
| disabled | 是否禁用 | `bool` | - | 否 |
|
|
29
|
+
| title | 标题 | `string` | - | 否 |
|
|
30
|
+
| withFilter | 过滤函数,默认自带拼音搜索,不需要则传 `false` | `func \| bool` | `true` | 否 |
|
|
31
|
+
| placeholder | 搜索框占位文本 | `string` | `'搜索'` | 否 |
|
|
32
|
+
| disableSelectAll | 是否禁用全选 | `bool` | `false` | 否 |
|
|
33
|
+
| showGroupCheckbox | 控制分组节点是否显示 checkbox,传入函数 `(group) => boolean` | `function` | `() => true` | 否 |
|
|
34
|
+
| onClickCheckbox | 勾选 checkbox 时的通知回调,纯通知 | `function` | - | 否 |
|
|
35
|
+
| onClickExpand | 点击展开/收起时的通知回调,纯通知 | `function` | - | 否 |
|
|
36
|
+
| onClickLeafName | 点击叶子节点名称的回调 | `function` | - | 否 |
|
|
37
|
+
| onClickGroupName | 点击分组节点名称的回调 | `function` | - | 否 |
|
|
38
|
+
| renderLeafItem | 自定义叶子节点渲染,参数为 `(item)` | `function` | - | 否 |
|
|
39
|
+
| renderGroupItem | 自定义分组节点渲染,参数为 `(item, next)`,`next` 为切换展开收起的函数 | `function` | - | 否 |
|
|
40
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
41
|
+
| style | 自定义样式,默认 `{width: '250px', height: '350px'}` | `object` | `{width: '250px', height: '350px'}` | 否 |
|
|
42
|
+
| isForManage | 是否用于分类管理模式 | `bool` | - | 否 |
|
|
43
|
+
|
|
44
|
+
## 示例
|
|
45
|
+
|
|
46
|
+
### 基础用法
|
|
47
|
+
```jsx
|
|
48
|
+
<Tree
|
|
49
|
+
list={data}
|
|
50
|
+
selectedValues={selectedValues}
|
|
51
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
52
|
+
/>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### 带标题
|
|
56
|
+
```jsx
|
|
57
|
+
<Tree
|
|
58
|
+
title="我是标题"
|
|
59
|
+
list={data}
|
|
60
|
+
selectedValues={selectedValues}
|
|
61
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
62
|
+
/>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 禁用全选
|
|
66
|
+
```jsx
|
|
67
|
+
<Tree
|
|
68
|
+
disableSelectAll
|
|
69
|
+
list={data}
|
|
70
|
+
selectedValues={selectedValues}
|
|
71
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### 自定义渲染
|
|
76
|
+
```jsx
|
|
77
|
+
<Tree
|
|
78
|
+
list={data}
|
|
79
|
+
selectedValues={selectedValues}
|
|
80
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
81
|
+
renderGroupItem={item => `group ${item.name}`}
|
|
82
|
+
renderLeafItem={item => <div>leaf {item.name}</div>}
|
|
83
|
+
/>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### 纯树(无搜索、无全选)
|
|
87
|
+
```jsx
|
|
88
|
+
<Tree
|
|
89
|
+
withFilter={false}
|
|
90
|
+
disableSelectAll
|
|
91
|
+
list={data}
|
|
92
|
+
selectedValues={selectedValues}
|
|
93
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
94
|
+
/>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## 注意事项
|
|
98
|
+
- 默认搜索使用拼音过滤,搜索有 300ms 的防抖
|
|
99
|
+
- `isForManage` 模式下会添加管理样式的类名
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# TreeV2
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
树形选择组件 V2 - 基于 `react-window` 的虚拟化树形控件,支持大数据量、搜索过滤、定位功能和半选状态
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { TreeV2 } from '@gmfe/react'
|
|
12
|
+
|
|
13
|
+
<TreeV2
|
|
14
|
+
list={data}
|
|
15
|
+
selectedValues={selectedValues}
|
|
16
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
17
|
+
/>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## API
|
|
21
|
+
|
|
22
|
+
### Props
|
|
23
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
24
|
+
|------|------|------|--------|------|
|
|
25
|
+
| list | 树形数据,格式:`[{value, name/text, children: []}]`,支持平铺数据和多级嵌套 | `array` | - | 是 |
|
|
26
|
+
| selectedValues | 已选中的叶子节点 value 数组 | `array` | - | 是 |
|
|
27
|
+
| onSelectValues | 选择值变化回调 | `function` | - | 是 |
|
|
28
|
+
| onActiveValues | 激活项变化回调 | `function` | `() => []` | 否 |
|
|
29
|
+
| activeValue | 当前激活的 value | `string` | `null` | 否 |
|
|
30
|
+
| title | 标题 | `string` | - | 否 |
|
|
31
|
+
| withFilter | 过滤函数,默认自带,不需要则传 `false` | `func \| bool` | `true` | 否 |
|
|
32
|
+
| renderLeafItem | 自定义叶子节点渲染 | `function` | - | 否 |
|
|
33
|
+
| renderGroupItem | 自定义分组节点渲染 | `function` | - | 否 |
|
|
34
|
+
| placeholder | 搜索框占位文本 | `string` | `'搜索'` | 否 |
|
|
35
|
+
| showAllCheck | 全选开关是否显示 | `bool` | `true` | 否 |
|
|
36
|
+
| indeterminateList | 半勾选状态的 value 数组 | `array` | `[]` | 否 |
|
|
37
|
+
| withFindFilter | 定位过滤函数,默认自带,不需要则传 `false` | `func \| bool` | `false` | 否 |
|
|
38
|
+
| findPlaceholder | 定位输入框占位文本 | `string` | `'输入定位信息'` | 否 |
|
|
39
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
40
|
+
| style | 自定义样式 | `object` | - | 否 |
|
|
41
|
+
|
|
42
|
+
### 静态方法
|
|
43
|
+
| 方法 | 说明 |
|
|
44
|
+
|------|------|
|
|
45
|
+
| `TreeV2.filterGroupList(list, filter)` | 按条件过滤叶子节点 |
|
|
46
|
+
| `TreeV2.selectedValues2SelectedList(list, selectValues)` | 将选中的 value 数组转换为选中的节点列表 |
|
|
47
|
+
|
|
48
|
+
## 示例
|
|
49
|
+
|
|
50
|
+
### 基础用法
|
|
51
|
+
```jsx
|
|
52
|
+
<TreeV2
|
|
53
|
+
list={data}
|
|
54
|
+
selectedValues={selectedValues}
|
|
55
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
56
|
+
/>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 平铺数据
|
|
60
|
+
```jsx
|
|
61
|
+
<TreeV2
|
|
62
|
+
list={flatData}
|
|
63
|
+
selectedValues={selectedValues}
|
|
64
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
65
|
+
/>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### 自定义渲染
|
|
69
|
+
```jsx
|
|
70
|
+
<TreeV2
|
|
71
|
+
list={data}
|
|
72
|
+
selectedValues={selectedValues}
|
|
73
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
74
|
+
renderLeafItem={data => (
|
|
75
|
+
<div>
|
|
76
|
+
<span style={{backgroundColor: '#56a3f2', color: 'white', padding: '1px', borderRadius: '2px'}}>
|
|
77
|
+
上架
|
|
78
|
+
</span>
|
|
79
|
+
{data.text}
|
|
80
|
+
</div>
|
|
81
|
+
)}
|
|
82
|
+
/>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### 定位功能
|
|
86
|
+
```jsx
|
|
87
|
+
<TreeV2
|
|
88
|
+
list={data}
|
|
89
|
+
selectedValues={selectedValues}
|
|
90
|
+
onSelectValues={values => setSelectedValues(values)}
|
|
91
|
+
withFindFilter={handleFind}
|
|
92
|
+
withFilter={false}
|
|
93
|
+
/>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## 注意事项
|
|
97
|
+
- 搜索输入有 300ms 防抖
|
|
98
|
+
- 支持单层数据(平铺列表)和多级嵌套数据
|
|
99
|
+
- 使用了虚拟化渲染,适合大数据量场景
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# Uploader
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
文件上传组件 - 提供文件选择和上传触发功能,支持自定义上传区域和图片上传占位。
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { Uploader } from '@gmfe/react'
|
|
12
|
+
|
|
13
|
+
<Uploader
|
|
14
|
+
onUpload={(files, e) => console.log(files)}
|
|
15
|
+
accept='image/*'
|
|
16
|
+
/>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## API
|
|
20
|
+
|
|
21
|
+
### Uploader Props
|
|
22
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
23
|
+
|------|------|------|--------|------|
|
|
24
|
+
| onUpload | 上传回调,参数为 (files, event),files 为 File 对象数组 | `func` | - | 是 |
|
|
25
|
+
| disabled | 是否禁用 | `bool` | - | 否 |
|
|
26
|
+
| accept | 接受的文件类型 | `string` | - | 否 |
|
|
27
|
+
| multiple | 是否支持多文件选择 | `bool` | - | 否 |
|
|
28
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
29
|
+
| style | 自定义样式 | `object` | - | 否 |
|
|
30
|
+
| children | 自定义上传区域内容 | `any` | - | 否 |
|
|
31
|
+
|
|
32
|
+
### Uploader.Default Props
|
|
33
|
+
默认上传区域占位组件,显示 `+` 图标。
|
|
34
|
+
|
|
35
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
36
|
+
|------|------|------|--------|------|
|
|
37
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
38
|
+
|
|
39
|
+
### Uploader.DefaultImage Props
|
|
40
|
+
图片上传占位组件,显示 `+ 加图` 文字。
|
|
41
|
+
|
|
42
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
43
|
+
|------|------|------|--------|------|
|
|
44
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
45
|
+
|
|
46
|
+
## 示例
|
|
47
|
+
|
|
48
|
+
### 默认上传
|
|
49
|
+
```jsx
|
|
50
|
+
<Uploader
|
|
51
|
+
onUpload={(files, e) => console.log(files)}
|
|
52
|
+
accept='image/*'
|
|
53
|
+
/>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 禁用状态
|
|
57
|
+
```jsx
|
|
58
|
+
<Uploader
|
|
59
|
+
disabled
|
|
60
|
+
onUpload={(files, e) => console.log(files)}
|
|
61
|
+
accept='image/*'
|
|
62
|
+
/>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 自定义触发按钮
|
|
66
|
+
```jsx
|
|
67
|
+
<Uploader onUpload={(files, e) => console.log(files)} accept='.xlsx'>
|
|
68
|
+
<Button>上传 Excel</Button>
|
|
69
|
+
</Uploader>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### 图片上传占位
|
|
73
|
+
```jsx
|
|
74
|
+
const { DefaultImage } = Uploader
|
|
75
|
+
|
|
76
|
+
<Uploader
|
|
77
|
+
onUpload={(files, e) => console.log(files)}
|
|
78
|
+
accept='image/*'
|
|
79
|
+
>
|
|
80
|
+
<DefaultImage />
|
|
81
|
+
</Uploader>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### 替换图片上传
|
|
85
|
+
```jsx
|
|
86
|
+
const { DefaultImage } = Uploader
|
|
87
|
+
|
|
88
|
+
<Uploader
|
|
89
|
+
onUpload={handleUpload}
|
|
90
|
+
accept='image/*'
|
|
91
|
+
>
|
|
92
|
+
<DefaultImage>
|
|
93
|
+
{imageUrl && <img src={imageUrl} style={{ width: '100%', height: '100%' }} />}
|
|
94
|
+
</DefaultImage>
|
|
95
|
+
</Uploader>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## 注意事项
|
|
99
|
+
- `onUpload` 的第一个参数 `files` 是 File 对象数组,每个 File 对象会附带 `preview` 属性(通过 `URL.createObjectURL` 创建)
|
|
100
|
+
- 在微信环境下 `multiple` 属性会被强制设为 `false`
|
|
101
|
+
- 不传 `children` 时,默认使用 `+` 图标作为上传区域
|
|
102
|
+
- `accept` 属性遵循原生 input 的 accept 属性格式,如 `image/*`、`.xlsx` 等
|
|
103
|
+
- 上传文件的验证(大小、类型等)需在 `onUpload` 回调中自行处理
|
|
104
|
+
- 禁用状态下点击不会触发文件选择
|
package/src/index.js
CHANGED
|
@@ -103,7 +103,6 @@ import Selection from './component/selection'
|
|
|
103
103
|
import TreeV2 from './component/tree_v2'
|
|
104
104
|
import RecommendInput from './component/recommend_input'
|
|
105
105
|
import PicturePreview from './component/picture_preview'
|
|
106
|
-
import StickyLayout from './hoc/sticky_layout'
|
|
107
106
|
|
|
108
107
|
Object.assign(Sheet, {
|
|
109
108
|
SheetColumn,
|
|
@@ -234,6 +233,5 @@ export {
|
|
|
234
233
|
Selection,
|
|
235
234
|
TreeV2,
|
|
236
235
|
RecommendInput,
|
|
237
|
-
PicturePreview
|
|
238
|
-
StickyLayout
|
|
236
|
+
PicturePreview
|
|
239
237
|
}
|