@gmfe/react 2.14.30-alpha.0 → 2.14.31
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 +295 -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,126 @@
|
|
|
1
|
+
# DateRangePicker
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
日期范围选择组件 - 提供双日历弹出层选择日期段,支持日期范围限制、时间选择、快速选择列表等功能。
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { DateRangePicker } from '@gmfe/react'
|
|
12
|
+
|
|
13
|
+
<DateRangePicker
|
|
14
|
+
begin={beginDate}
|
|
15
|
+
end={endDate}
|
|
16
|
+
onChange={(begin, end) => {
|
|
17
|
+
setBeginDate(begin)
|
|
18
|
+
setEndDate(end)
|
|
19
|
+
}}
|
|
20
|
+
/>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## API
|
|
24
|
+
|
|
25
|
+
### Props
|
|
26
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
27
|
+
|------|------|------|--------|------|
|
|
28
|
+
| begin | 开始日期,Date 对象 | `object` | - | 否 |
|
|
29
|
+
| end | 结束日期,Date 对象 | `object` | - | 否 |
|
|
30
|
+
| onChange | 日期变化回调,参数为 (begin, end) | `func` | `_.noop` | 否 |
|
|
31
|
+
| disabled | 是否禁用 | `bool` | - | 否 |
|
|
32
|
+
| min | 可选的最小日期,Date 对象 | `object` | - | 否 |
|
|
33
|
+
| max | 可选的最大日期,Date 对象 | `object` | - | 否 |
|
|
34
|
+
| disabledDate | 自定义日期是否可选,参数为 Date 对象,返回 bool。设置后 min/max 无效 | `func` | - | 否 |
|
|
35
|
+
| renderDate | 自定义日期展示格式,参数为 (begin, end) 两个 Date 对象 | `func` | - | 否 |
|
|
36
|
+
| canClear | 是否可清除已选日期 | `bool` | - | 否 |
|
|
37
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
38
|
+
| enabledTimeSelect | 是否启用时间选择 | `bool` | `false` | 否 |
|
|
39
|
+
| timeSpan | 时间间隔,默认 30 分钟 | `number` | `1800000`(30分钟) | 否 |
|
|
40
|
+
| beginTimeSelect | 开始时间选择限制配置 | `object` | - | 否 |
|
|
41
|
+
| beginTimeSelect.defaultTime | 默认开始时间,HH:mm 格式 | `object` | - | 否 |
|
|
42
|
+
| beginTimeSelect.disabledSpan | 禁用时间段函数,参数为 Date 对象,返回时间段 | `func` | - | 否 |
|
|
43
|
+
| endTimeSelect | 结束时间选择限制配置 | `object` | - | 否 |
|
|
44
|
+
| endTimeSelect.defaultTime | 默认结束时间 | `object` | - | 否 |
|
|
45
|
+
| endTimeSelect.disabledSpan | 禁用时间段函数 | `func` | - | 否 |
|
|
46
|
+
| customQuickSelectList | 自定义左侧快速选择列表 | `array` | - | 否 |
|
|
47
|
+
| children | 自定义触发元素 | `any` | - | 否 |
|
|
48
|
+
|
|
49
|
+
### 方法(通过 ref 调用)
|
|
50
|
+
| 方法 | 说明 |
|
|
51
|
+
|------|------|
|
|
52
|
+
| apiDoFocus | 聚焦到日期范围选择框 |
|
|
53
|
+
|
|
54
|
+
## 示例
|
|
55
|
+
|
|
56
|
+
### 基础用法
|
|
57
|
+
```jsx
|
|
58
|
+
<DateRangePicker
|
|
59
|
+
begin={beginDate}
|
|
60
|
+
end={endDate}
|
|
61
|
+
onChange={(begin, end) => {
|
|
62
|
+
setBeginDate(begin)
|
|
63
|
+
setEndDate(end)
|
|
64
|
+
}}
|
|
65
|
+
/>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### 带清除功能
|
|
69
|
+
```jsx
|
|
70
|
+
<DateRangePicker
|
|
71
|
+
begin={beginDate}
|
|
72
|
+
end={endDate}
|
|
73
|
+
canClear
|
|
74
|
+
onChange={(begin, end) => {
|
|
75
|
+
setBeginDate(begin)
|
|
76
|
+
setEndDate(end)
|
|
77
|
+
}}
|
|
78
|
+
/>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 启用时间选择
|
|
82
|
+
```jsx
|
|
83
|
+
<DateRangePicker
|
|
84
|
+
begin={beginDate}
|
|
85
|
+
end={endDate}
|
|
86
|
+
enabledTimeSelect
|
|
87
|
+
onChange={(begin, end) => {
|
|
88
|
+
setBeginDate(begin)
|
|
89
|
+
setEndDate(end)
|
|
90
|
+
}}
|
|
91
|
+
/>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### 自定义快速选择列表
|
|
95
|
+
```jsx
|
|
96
|
+
const quickList = [
|
|
97
|
+
{
|
|
98
|
+
range: [[0, 'day'], [0, 'day']],
|
|
99
|
+
text: '今天'
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
range: [[-7, 'day'], [0, 'day']],
|
|
103
|
+
text: '最近7天'
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
|
|
107
|
+
<DateRangePicker
|
|
108
|
+
begin={beginDate}
|
|
109
|
+
end={endDate}
|
|
110
|
+
customQuickSelectList={quickList}
|
|
111
|
+
onChange={(begin, end) => {
|
|
112
|
+
setBeginDate(begin)
|
|
113
|
+
setEndDate(end)
|
|
114
|
+
}}
|
|
115
|
+
/>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## 注意事项
|
|
119
|
+
- `begin` 和 `end` 属性接收 JavaScript 原生 `Date` 对象
|
|
120
|
+
- 不设置 `renderDate` 时,默认展示格式为 `YYYY-MM-DD ~ YYYY-MM-DD`
|
|
121
|
+
- 启用 `enabledTimeSelect` 时,展示格式自动带上时间部分
|
|
122
|
+
- `disabledDate` 设置后,`min` 和 `max` 将失效
|
|
123
|
+
- `customQuickSelectList` 的 `range` 数组项格式为 `[距离天数, 'day']`,从当前日期推算
|
|
124
|
+
- 选择日期后需要点击"确定"按钮才会触发 `onChange`
|
|
125
|
+
- 点击"取消"会关闭弹窗且不触发回调
|
|
126
|
+
- `canClear` 为 true 时,选中状态下可以通过清除按钮清空日期范围
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
# Dialog
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
对话框组件 - 用于显示模态对话框,支持 alert、confirm、prompt 三种类型,提供 Promise 风格的 API 调用方式
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { Dialog } from '@gmfe/react'
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## API
|
|
15
|
+
|
|
16
|
+
### 静态方法
|
|
17
|
+
|
|
18
|
+
| 方法 | 说明 | 参数 | 返回值 |
|
|
19
|
+
|------|------|------|--------|
|
|
20
|
+
| `Dialog.alert(options)` | 显示警告对话框,只有确认按钮 | `options: Object` | `Promise` |
|
|
21
|
+
| `Dialog.confirm(options)` | 显示确认对话框,有取消和确认按钮 | `options: Object` | `Promise` |
|
|
22
|
+
| `Dialog.prompt(options)` | 显示输入对话框,包含输入框 | `options: Object` | `Promise` |
|
|
23
|
+
|
|
24
|
+
### 静态方法 Options
|
|
25
|
+
|
|
26
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
27
|
+
|------|------|------|--------|------|
|
|
28
|
+
| title | 对话框标题 | `string` | `'提示'` | 否 |
|
|
29
|
+
| children | 对话框内容 | `any` | - | 否 |
|
|
30
|
+
| type | 对话框类型 | `'alert' \| 'confirm' \| 'prompt'` | `'confirm'` | 否 |
|
|
31
|
+
| size | 对话框尺寸 | `'lg' \| 'md' \| 'sm'` | `'sm'` | 否 |
|
|
32
|
+
| OKBtn | 确认按钮文字,传 `false` 则不显示 | `string \| false` | `'确定'` | 否 |
|
|
33
|
+
| cancelBtn | 取消按钮文字,传 `false` 则不显示 | `string \| false` | `'取消'` | 否 |
|
|
34
|
+
| onOK | 点击确认按钮的回调,`prompt` 类型下会接收输入框的值作为参数;返回 `false` 可阻止关闭,返回 `Promise` 可显示 loading 状态 | `function(value?: string)` | - | 否 |
|
|
35
|
+
| disableMaskClose | 是否禁止点击遮罩关闭 | `bool` | `false` | 否 |
|
|
36
|
+
| promptDefaultValue | prompt 类型下输入框的默认值 | `string` | - | 否 |
|
|
37
|
+
| promptPlaceholder | prompt 类型下输入框的占位文字 | `string` | - | 否 |
|
|
38
|
+
|
|
39
|
+
### 组件 Props
|
|
40
|
+
|
|
41
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
42
|
+
|------|------|------|--------|------|
|
|
43
|
+
| show | 是否显示 | `bool` | `false` | 是 |
|
|
44
|
+
| title | 对话框标题 | `string` | `'提示'` | 否 |
|
|
45
|
+
| type | 对话框类型 | `string` | `'confirm'` | 否 |
|
|
46
|
+
| size | 对话框尺寸 | `string` | `'md'` | 否 |
|
|
47
|
+
| children | 对话框内容 | `any` | - | 否 |
|
|
48
|
+
| onCancel | 取消回调 | `func` | - | 否 |
|
|
49
|
+
| onOK | 确认回调 | `func` | - | 否 |
|
|
50
|
+
| promptDefaultValue | prompt 类型下输入框的默认值 | `string` | - | 否 |
|
|
51
|
+
| promptPlaceholder | prompt 类型下输入框的占位文字 | `string` | - | 否 |
|
|
52
|
+
| cancelBtn | 取消按钮文字 | `string \| bool` | `'取消'` | 否 |
|
|
53
|
+
| OKBtn | 确认按钮文字 | `string \| bool` | `'确定'` | 否 |
|
|
54
|
+
| disableMaskClose | 是否禁止点击遮罩关闭 | `bool` | `false` | 否 |
|
|
55
|
+
|
|
56
|
+
## 示例
|
|
57
|
+
|
|
58
|
+
### 基础用法 - Alert
|
|
59
|
+
|
|
60
|
+
```jsx
|
|
61
|
+
Dialog.alert({
|
|
62
|
+
children: '操作成功!'
|
|
63
|
+
}).then(() => {
|
|
64
|
+
console.log('确认')
|
|
65
|
+
})
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### 确认对话框
|
|
69
|
+
|
|
70
|
+
```jsx
|
|
71
|
+
Dialog.confirm({
|
|
72
|
+
title: '确认删除',
|
|
73
|
+
children: '删除后数据将无法恢复,是否继续?'
|
|
74
|
+
}).then(
|
|
75
|
+
() => console.log('确认'),
|
|
76
|
+
() => console.log('取消')
|
|
77
|
+
)
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### 输入对话框
|
|
81
|
+
|
|
82
|
+
```jsx
|
|
83
|
+
Dialog.prompt({
|
|
84
|
+
title: '请输入名称',
|
|
85
|
+
promptDefaultValue: '默认值',
|
|
86
|
+
onOK: value => {
|
|
87
|
+
console.log('输入值:', value)
|
|
88
|
+
}
|
|
89
|
+
}).then(
|
|
90
|
+
value => console.log('确认:', value),
|
|
91
|
+
() => console.log('取消')
|
|
92
|
+
)
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### 异步 Loading 状态
|
|
96
|
+
|
|
97
|
+
```jsx
|
|
98
|
+
Dialog.confirm({
|
|
99
|
+
title: '提交确认',
|
|
100
|
+
children: '确定要提交吗?',
|
|
101
|
+
onOK: () => {
|
|
102
|
+
return new Promise(resolve => {
|
|
103
|
+
setTimeout(() => resolve(), 1000)
|
|
104
|
+
})
|
|
105
|
+
}
|
|
106
|
+
}).then(() => {
|
|
107
|
+
console.log('提交成功')
|
|
108
|
+
})
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### 嵌套对话框
|
|
112
|
+
|
|
113
|
+
```jsx
|
|
114
|
+
// 同步嵌套
|
|
115
|
+
const openDialog1 = () => {
|
|
116
|
+
Dialog.confirm({
|
|
117
|
+
title: '对话框1',
|
|
118
|
+
children: '对话框1内容'
|
|
119
|
+
}).then(() => {
|
|
120
|
+
openDialog2()
|
|
121
|
+
})
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// 异步嵌套(需要 setTimeout)
|
|
125
|
+
const openAsyncDialog1 = () => {
|
|
126
|
+
Dialog.confirm({
|
|
127
|
+
title: '对话框1',
|
|
128
|
+
children: '对话框1内容',
|
|
129
|
+
onOK() {
|
|
130
|
+
return new Promise(resolve => {
|
|
131
|
+
setTimeout(() => resolve(), 2000)
|
|
132
|
+
}).then(() => {
|
|
133
|
+
setTimeout(() => {
|
|
134
|
+
// 必须加 setTimeout
|
|
135
|
+
openDialog2()
|
|
136
|
+
})
|
|
137
|
+
})
|
|
138
|
+
}
|
|
139
|
+
})
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## 注意事项
|
|
144
|
+
|
|
145
|
+
- **推荐使用静态方法调用**:建议始终使用 `Dialog.alert()`、`Dialog.confirm()`、`Dialog.prompt()` 静态方法,而非以组件形式使用。以组件形式调用时会产生警告信息。
|
|
146
|
+
- **Promise 风格**:静态方法返回 `Promise`,`.then()` 对应确认操作,`.catch()` 或第二个参数对应取消操作。
|
|
147
|
+
- **阻止关闭**:`onOK` 回调返回 `false` 可以阻止对话框关闭。
|
|
148
|
+
- **异步操作**:`onOK` 回调返回 `Promise` 时,确认按钮会自动显示 loading 状态,等待 Promise resolve 后关闭对话框。如果 Promise reject,loading 状态会取消。
|
|
149
|
+
- **嵌套对话框**:异步嵌套打开下一个对话框时,必须在 Promise resolve 后使用 `setTimeout` 包裹,否则可能出现渲染问题。
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# Divider
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
分割线组件 - 用于在内容区域之间插入带文字或不带文字的水平分割线。
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import Divider from '@gmfe/react/lib/divider'
|
|
12
|
+
|
|
13
|
+
<Divider>分割文字</Divider>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
### Props
|
|
19
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
20
|
+
|------|------|------|--------|------|
|
|
21
|
+
| children | 分割线中的内容,传入字符串时使用默认字号,传入 React 元素时自定义渲染 | `any` | - | 否 |
|
|
22
|
+
|
|
23
|
+
## 示例
|
|
24
|
+
|
|
25
|
+
### 基础用法
|
|
26
|
+
```jsx
|
|
27
|
+
// 带文字的分割线
|
|
28
|
+
<Divider>文字内容</Divider>
|
|
29
|
+
|
|
30
|
+
// 不带文字的分割线
|
|
31
|
+
<Divider />
|
|
32
|
+
|
|
33
|
+
// 自定义内容
|
|
34
|
+
<Divider>
|
|
35
|
+
<span style={{ color: 'red' }}>自定义内容</span>
|
|
36
|
+
</Divider>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 注意事项
|
|
40
|
+
- children 传入字符串时,会使用 `gm-text-16` 样式类渲染
|
|
41
|
+
- children 传入非字符串(React 元素等)时,会直接渲染原始内容
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# Drawer
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
抽屉组件 - 从页面底部滑出的全宽内容面板,支持自定义样式和遮罩层
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { Drawer } from '@gmfe/react'
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## API
|
|
15
|
+
|
|
16
|
+
### 组件 Props
|
|
17
|
+
|
|
18
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
19
|
+
|------|------|------|--------|------|
|
|
20
|
+
| children | 抽屉内容 | `any` | - | 否 |
|
|
21
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
22
|
+
| style | 自定义样式 | `object` | - | 否 |
|
|
23
|
+
| onHide | 关闭回调 | `func` | `_.noop` | 否 |
|
|
24
|
+
| opacityMask | 是否使用半透明遮罩 | `bool` | `false` | 否 |
|
|
25
|
+
|
|
26
|
+
### 静态方法
|
|
27
|
+
|
|
28
|
+
| 方法 | 说明 | 参数 | 返回值 |
|
|
29
|
+
|------|------|------|--------|
|
|
30
|
+
| `Drawer.render(props)` | 命令式渲染抽屉 | `props: Object` | - |
|
|
31
|
+
| `Drawer.hide()` | 隐藏抽屉 | - | - |
|
|
32
|
+
|
|
33
|
+
## 示例
|
|
34
|
+
|
|
35
|
+
### 基础用法 - 命令式渲染
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
38
|
+
import { Drawer } from '@gmfe/react'
|
|
39
|
+
|
|
40
|
+
// 显示抽屉
|
|
41
|
+
Drawer.render({
|
|
42
|
+
children: (
|
|
43
|
+
<div style={{ padding: 20 }}>
|
|
44
|
+
<h3>抽屉标题</h3>
|
|
45
|
+
<p>抽屉内容区域</p>
|
|
46
|
+
<button onClick={() => Drawer.hide()}>关闭</button>
|
|
47
|
+
</div>
|
|
48
|
+
)
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
// 隐藏抽屉
|
|
52
|
+
Drawer.hide()
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### 自定义样式
|
|
56
|
+
|
|
57
|
+
```jsx
|
|
58
|
+
Drawer.render({
|
|
59
|
+
style: {
|
|
60
|
+
maxHeight: '50vh'
|
|
61
|
+
},
|
|
62
|
+
className: 'custom-drawer',
|
|
63
|
+
children: <div>自定义样式的抽屉</div>,
|
|
64
|
+
onHide: () => Drawer.hide()
|
|
65
|
+
})
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### 半透明遮罩
|
|
69
|
+
|
|
70
|
+
```jsx
|
|
71
|
+
Drawer.render({
|
|
72
|
+
opacityMask: true,
|
|
73
|
+
children: <div>带半透明遮罩的抽屉</div>
|
|
74
|
+
})
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## 注意事项
|
|
78
|
+
|
|
79
|
+
- Drawer 推荐使用静态方法 `Drawer.render()` 和 `Drawer.hide()` 进行命令式调用,而非作为 React 组件直接使用。
|
|
80
|
+
- 按下 `Esc` 键可以关闭抽屉(通过 `onHide` 回调)。
|
|
81
|
+
- 点击遮罩层区域也会触发关闭操作。
|
|
82
|
+
- `opacityMask` 设置为 `true` 时,遮罩变为半透明样式,同时抽屉内容区域会显示边框和底部阴影。
|
|
83
|
+
- Drawer 内容区域滚动时会触发 `DRAWER_SCROLL` 事件,可用于联动其他组件。
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# DropDown
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
下拉菜单组件 - 点击触发弹出下拉列表,支持普通模式和分割按钮模式。
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { DropDown, DropDownItem, DropDownItems } from '@gmfe/react/lib/drop_down'
|
|
12
|
+
|
|
13
|
+
<DropDown
|
|
14
|
+
popup={
|
|
15
|
+
<DropDownItems>
|
|
16
|
+
<DropDownItem onClick={() => console.log('选项1')}>选项1</DropDownItem>
|
|
17
|
+
<DropDownItem onClick={() => console.log('选项2')}>选项2</DropDownItem>
|
|
18
|
+
</DropDownItems>
|
|
19
|
+
}
|
|
20
|
+
>
|
|
21
|
+
<Button>下拉菜单</Button>
|
|
22
|
+
</DropDown>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## API
|
|
26
|
+
|
|
27
|
+
### DropDown Props
|
|
28
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
29
|
+
|------|------|------|--------|------|
|
|
30
|
+
| popup | 弹出层内容 | `ReactElement` | - | 是 |
|
|
31
|
+
| split | 是否为分割按钮模式 | `bool` | `false` | 否 |
|
|
32
|
+
| right | 弹出层是否右对齐(非 split 模式有效) | `bool` | - | 否 |
|
|
33
|
+
| cartClassName | 分割按钮的触发按钮类名(split 模式有效) | `string` | - | 否 |
|
|
34
|
+
| children | 触发下拉菜单的元素 | `any` | - | 否 |
|
|
35
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
36
|
+
| style | 自定义样式 | `object` | - | 否 |
|
|
37
|
+
|
|
38
|
+
### DropDownItem Props
|
|
39
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
40
|
+
|------|------|------|--------|------|
|
|
41
|
+
| active | 是否激活状态 | `bool` | - | 否 |
|
|
42
|
+
| disabled | 是否禁用 | `bool` | - | 否 |
|
|
43
|
+
| onClick | 点击回调 | `() => void` | - | 是 |
|
|
44
|
+
| children | 菜单项内容 | `any` | - | 否 |
|
|
45
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
46
|
+
| style | 自定义样式 | `object` | - | 否 |
|
|
47
|
+
|
|
48
|
+
### DropDownItems Props
|
|
49
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
50
|
+
|------|------|------|--------|------|
|
|
51
|
+
| children | 菜单项列表(DropDownItem 组件) | `any` | - | 否 |
|
|
52
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
53
|
+
| style | 自定义样式 | `object` | - | 否 |
|
|
54
|
+
|
|
55
|
+
## 示例
|
|
56
|
+
|
|
57
|
+
### 基础用法
|
|
58
|
+
```jsx
|
|
59
|
+
<DropDown
|
|
60
|
+
popup={
|
|
61
|
+
<DropDownItems>
|
|
62
|
+
<DropDownItem onClick={() => console.log('选项1')}>选项1</DropDownItem>
|
|
63
|
+
<DropDownItem onClick={() => console.log('选项2')}>选项2</DropDownItem>
|
|
64
|
+
</DropDownItems>
|
|
65
|
+
}
|
|
66
|
+
>
|
|
67
|
+
<span>下拉菜单</span>
|
|
68
|
+
</DropDown>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### 分割按钮模式
|
|
72
|
+
```jsx
|
|
73
|
+
<DropDown
|
|
74
|
+
split
|
|
75
|
+
popup={
|
|
76
|
+
<DropDownItems>
|
|
77
|
+
<DropDownItem onClick={() => console.log('选项1')}>选项1</DropDownItem>
|
|
78
|
+
<DropDownItem onClick={() => console.log('选项2')}>选项2</DropDownItem>
|
|
79
|
+
</DropDownItems>
|
|
80
|
+
}
|
|
81
|
+
>
|
|
82
|
+
<Button>主要操作</Button>
|
|
83
|
+
</DropDown>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### 禁用菜单项
|
|
87
|
+
```jsx
|
|
88
|
+
<DropDown
|
|
89
|
+
popup={
|
|
90
|
+
<DropDownItems>
|
|
91
|
+
<DropDownItem onClick={() => {}}>正常选项</DropDownItem>
|
|
92
|
+
<DropDownItem disabled onClick={() => {}}>禁用选项</DropDownItem>
|
|
93
|
+
<DropDownItem active onClick={() => {}}>激活选项</DropDownItem>
|
|
94
|
+
</DropDownItems>
|
|
95
|
+
}
|
|
96
|
+
>
|
|
97
|
+
<Button>下拉菜单</Button>
|
|
98
|
+
</DropDown>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## 注意事项
|
|
102
|
+
- DropDown 底层使用 Popover 组件实现
|
|
103
|
+
- 普通模式下,点击弹出层内的内容会自动关闭弹出层
|
|
104
|
+
- 分割按钮模式下,触发按钮和下拉箭头是分开的
|
|
105
|
+
- DropDownItem 设置 `disabled` 后,点击不会触发 onClick 回调
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
# DropSelect
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
下拉选择面板组件 - 带表格结构的下拉选择组件,支持多列展示、自定义渲染、键盘导航和操作按钮等功能。
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import DropSelect from '@gmfe/react/lib/drop_select'
|
|
12
|
+
|
|
13
|
+
<DropSelect
|
|
14
|
+
show={isVisible}
|
|
15
|
+
data={{
|
|
16
|
+
loading: false,
|
|
17
|
+
list: [{ id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 }],
|
|
18
|
+
columns: [
|
|
19
|
+
{ field: 'name', name: '姓名' },
|
|
20
|
+
{ field: 'age', name: '年龄' }
|
|
21
|
+
],
|
|
22
|
+
actions: [{ text: '删除', onClick: (row) => handleDelete(row) }]
|
|
23
|
+
}}
|
|
24
|
+
onHide={() => setVisible(false)}
|
|
25
|
+
onEnter={(index) => handleEnter(index)}
|
|
26
|
+
>
|
|
27
|
+
<input type="text" placeholder="请输入..." />
|
|
28
|
+
</DropSelect>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## API
|
|
32
|
+
|
|
33
|
+
### Props
|
|
34
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
35
|
+
|------|------|------|--------|------|
|
|
36
|
+
| show | 是否显示下拉面板 | `bool` | - | 是 |
|
|
37
|
+
| data | 下拉面板数据 | `object` | - | 否 |
|
|
38
|
+
| onEnter | 键盘回车回调,参数为当前激活的列表索引 | `(index: number) => void` | `() => console.log(...)` | 否 |
|
|
39
|
+
| onHide | 隐藏下拉面板回调(点击外部区域或按 Esc 键时触发) | `() => void` | - | 否 |
|
|
40
|
+
| children | 触发元素(如 input) | `any` | - | 否 |
|
|
41
|
+
| className | 自定义类名 | `string` | - | 否 |
|
|
42
|
+
|
|
43
|
+
### data 对象结构
|
|
44
|
+
|
|
45
|
+
| 字段 | 说明 | 类型 | 默认值 |
|
|
46
|
+
|------|------|------|--------|
|
|
47
|
+
| loading | 是否加载中 | `bool` | `false` |
|
|
48
|
+
| list | 数据列表 | `array` | `[]` |
|
|
49
|
+
| columns | 列配置 | `array` | `[]` |
|
|
50
|
+
| actions | 操作按钮配置 | `array` | `[]` |
|
|
51
|
+
|
|
52
|
+
#### columns 数组项
|
|
53
|
+
|
|
54
|
+
| 字段 | 说明 | 类型 | 必填 |
|
|
55
|
+
|------|------|------|------|
|
|
56
|
+
| field | 对应 list 中的字段名 | `string` | 否 |
|
|
57
|
+
| name | 列标题 | `string` | 否 |
|
|
58
|
+
| render | 自定义单元格渲染,参数为 `(value, rowData, rowIndex)` | `(value, rowData, rowIndex) => ReactNode` | 否 |
|
|
59
|
+
|
|
60
|
+
#### actions 数组项
|
|
61
|
+
|
|
62
|
+
| 字段 | 说明 | 类型 | 必填 |
|
|
63
|
+
|------|------|------|------|
|
|
64
|
+
| text | 按钮文字 | `string` | 否 |
|
|
65
|
+
| onClick | 点击回调,参数为当前行数据 | `(rowData) => void` | 否 |
|
|
66
|
+
| getDisabled | 判断按钮是否禁用 | `(rowData, rowIndex) => bool` | 否 |
|
|
67
|
+
| className | 按钮自定义类名 | `string` | 否 |
|
|
68
|
+
|
|
69
|
+
## 示例
|
|
70
|
+
|
|
71
|
+
### 基础用法
|
|
72
|
+
```jsx
|
|
73
|
+
const [visible, setVisible] = useState(false)
|
|
74
|
+
|
|
75
|
+
<DropSelect
|
|
76
|
+
show={visible}
|
|
77
|
+
data={{
|
|
78
|
+
list: [
|
|
79
|
+
{ id: 1, name: '张三', age: 25 },
|
|
80
|
+
{ id: 2, name: '李四', age: 30 }
|
|
81
|
+
],
|
|
82
|
+
columns: [
|
|
83
|
+
{ field: 'name', name: '姓名' },
|
|
84
|
+
{ field: 'age', name: '年龄' }
|
|
85
|
+
]
|
|
86
|
+
}}
|
|
87
|
+
onHide={() => setVisible(false)}
|
|
88
|
+
onEnter={(index) => {
|
|
89
|
+
const item = list[index]
|
|
90
|
+
// 处理回车选中
|
|
91
|
+
}}
|
|
92
|
+
>
|
|
93
|
+
<input type="text" placeholder="请输入..." />
|
|
94
|
+
</DropSelect>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### 带操作按钮
|
|
98
|
+
```jsx
|
|
99
|
+
<DropSelect
|
|
100
|
+
show={visible}
|
|
101
|
+
data={{
|
|
102
|
+
list: dataList,
|
|
103
|
+
columns: [
|
|
104
|
+
{ field: 'name', name: '姓名' },
|
|
105
|
+
{ field: 'age', name: '年龄' }
|
|
106
|
+
],
|
|
107
|
+
actions: [
|
|
108
|
+
{
|
|
109
|
+
text: '查看',
|
|
110
|
+
onClick: (rowData) => viewDetail(rowData)
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
text: '删除',
|
|
114
|
+
onClick: (rowData) => handleDelete(rowData),
|
|
115
|
+
getDisabled: (rowData) => rowData.isDefault
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
}}
|
|
119
|
+
onHide={() => setVisible(false)}
|
|
120
|
+
>
|
|
121
|
+
<input type="text" />
|
|
122
|
+
</DropSelect>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### 加载状态
|
|
126
|
+
```jsx
|
|
127
|
+
<DropSelect
|
|
128
|
+
show={true}
|
|
129
|
+
data={{
|
|
130
|
+
loading: true,
|
|
131
|
+
list: [],
|
|
132
|
+
columns: []
|
|
133
|
+
}}
|
|
134
|
+
onHide={() => {}}
|
|
135
|
+
>
|
|
136
|
+
<input type="text" />
|
|
137
|
+
</DropSelect>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## 注意事项
|
|
141
|
+
- 点击下拉面板外部区域会自动隐藏面板并触发 `onHide`
|
|
142
|
+
- 按 Esc 键也会触发 `onHide`
|
|
143
|
+
- 支持键盘导航:上/下方向键切换激活项,回车键确认选择
|
|
144
|
+
- 当前列表项为空时,键盘导航无效
|
|
145
|
+
- 激活的列表项会自动滚动到可视区域(`scrollIntoViewIfNeeded`)
|
|
146
|
+
- `onEnter` 默认只会在控制台打印 index,建议传入自定义处理函数
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Dropper
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
文件拖放组件 - 支持拖放上传和点击选择文件
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
已包含在 `@gmfe/react` 中,无需额外安装。
|
|
8
|
+
|
|
9
|
+
## 使用
|
|
10
|
+
```jsx
|
|
11
|
+
import { Dropper } from '@gmfe/react'
|
|
12
|
+
|
|
13
|
+
<Dropper
|
|
14
|
+
onDrop={(files, e) => console.log(files)}
|
|
15
|
+
accept="image/*"
|
|
16
|
+
>
|
|
17
|
+
<div>点击或拖拽文件到此处上传</div>
|
|
18
|
+
</Dropper>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## API
|
|
22
|
+
|
|
23
|
+
### Props
|
|
24
|
+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
|
|
25
|
+
|------|------|------|--------|------|
|
|
26
|
+
| multiple | 是否支持多文件选择 | `bool` | `false` | 否 |
|
|
27
|
+
| onDrop | 文件放置/选择后的回调,参数为 `(files, event)`,`files` 数组中每项包含 `preview` 属性(blob URL) | `function` | - | 是 |
|
|
28
|
+
| accept | 接受的文件类型,同 `<input type="file">` 的 accept 属性 | `string` | - | 否 |
|
|
29
|
+
| children | 自定义内容区域 | `any` | - | 否 |
|
|
30
|
+
| className | 自定义内容区域的类名,默认使用 `gm-dropper-default` | `string` | - | 否 |
|
|
31
|
+
|
|
32
|
+
## 示例
|
|
33
|
+
|
|
34
|
+
### 基础用法
|
|
35
|
+
```jsx
|
|
36
|
+
<Dropper onDrop={(files) => handleFiles(files)}>
|
|
37
|
+
<div>点击或拖拽文件到此处</div>
|
|
38
|
+
</Dropper>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 多文件上传
|
|
42
|
+
```jsx
|
|
43
|
+
<Dropper
|
|
44
|
+
multiple
|
|
45
|
+
onDrop={(files) => handleFiles(files)}
|
|
46
|
+
accept="image/*"
|
|
47
|
+
>
|
|
48
|
+
<div>支持多文件图片上传</div>
|
|
49
|
+
</Dropper>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## 注意事项
|
|
53
|
+
- 在微信浏览器中 `multiple` 属性无效,会自动禁用
|
|
54
|
+
- 每个文件对象会自动添加 `preview` 属性,值为 `URL.createObjectURL(file)` 生成的 blob URL
|
|
55
|
+
- 使用完毕后建议手动释放 blob URL 以避免内存泄漏
|