@gmfe/react 2.14.30 → 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 +117 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -24,7 +24,123 @@ function App() {
|
|
|
24
24
|
}
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
##
|
|
27
|
+
## 示例
|
|
28
|
+
|
|
29
|
+
### 表单提交
|
|
30
|
+
|
|
31
|
+
```jsx
|
|
32
|
+
import { Form, FormItem, FormButton, Button } from '@gmfe/react'
|
|
33
|
+
|
|
34
|
+
function App() {
|
|
35
|
+
return (
|
|
36
|
+
<Form
|
|
37
|
+
labelWidth="100px"
|
|
38
|
+
onSubmit={(values) => console.log('提交数据', values)}
|
|
39
|
+
>
|
|
40
|
+
<FormItem label="名称" required>
|
|
41
|
+
<input name="name" placeholder="请输入名称" />
|
|
42
|
+
</FormItem>
|
|
43
|
+
<FormItem label="数量">
|
|
44
|
+
<input name="quantity" type="number" />
|
|
45
|
+
</FormItem>
|
|
46
|
+
<FormButton>
|
|
47
|
+
<Button type="primary" htmlType="submit">提交</Button>
|
|
48
|
+
<Button htmlType="reset">重置</Button>
|
|
49
|
+
</FormButton>
|
|
50
|
+
</Form>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### 多栏表单布局
|
|
56
|
+
|
|
57
|
+
```jsx
|
|
58
|
+
import { Form, FormItem, FormButton, FormBlock, Button, Select } from '@gmfe/react'
|
|
59
|
+
|
|
60
|
+
function App() {
|
|
61
|
+
return (
|
|
62
|
+
<Form labelWidth="100px">
|
|
63
|
+
<FormBlock col={2}>
|
|
64
|
+
<FormItem label="名称" required>
|
|
65
|
+
<input name="name" />
|
|
66
|
+
</FormItem>
|
|
67
|
+
<FormItem label="地区">
|
|
68
|
+
<Select data={areaList} />
|
|
69
|
+
</FormItem>
|
|
70
|
+
</FormBlock>
|
|
71
|
+
<FormButton>
|
|
72
|
+
<Button type="primary" htmlType="submit">提交</Button>
|
|
73
|
+
</FormButton>
|
|
74
|
+
</Form>
|
|
75
|
+
)
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 弹窗交互
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
import { Button, Dialog, Drawer } from '@gmfe/react'
|
|
83
|
+
|
|
84
|
+
function App() {
|
|
85
|
+
return (
|
|
86
|
+
<div>
|
|
87
|
+
<Button onClick={() => Dialog.alert('操作成功')}>提示</Button>
|
|
88
|
+
|
|
89
|
+
<Button onClick={() => {
|
|
90
|
+
Dialog.confirm({
|
|
91
|
+
title: '确认删除',
|
|
92
|
+
children: '删除后不可恢复，是否继续？',
|
|
93
|
+
onOK: async () => {
|
|
94
|
+
await deleteApi()
|
|
95
|
+
}
|
|
96
|
+
})
|
|
97
|
+
}}>确认对话框</Button>
|
|
98
|
+
|
|
99
|
+
<Button onClick={() => {
|
|
100
|
+
Drawer.open({
|
|
101
|
+
title: '详情',
|
|
102
|
+
children: <div>抽屉内容</div>
|
|
103
|
+
})
|
|
104
|
+
}}>打开抽屉</Button>
|
|
105
|
+
</div>
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Sheet 底部弹出表格
|
|
111
|
+
|
|
112
|
+
```jsx
|
|
113
|
+
import { Sheet, SheetColumn, SheetSelect, SheetAction, Button } from '@gmfe/react'
|
|
114
|
+
|
|
115
|
+
function App() {
|
|
116
|
+
const [data, setData] = useState(listData)
|
|
117
|
+
const [selected, setSelected] = useState([])
|
|
118
|
+
|
|
119
|
+
return (
|
|
120
|
+
<Sheet list={data}>
|
|
121
|
+
<SheetColumn field="id" name="ID" />
|
|
122
|
+
<SheetColumn field="name" name="名称" />
|
|
123
|
+
<SheetColumn field="name" name="描述">
|
|
124
|
+
{(name, index, record) => `商品：${name}，编号：${record.id}`}
|
|
125
|
+
</SheetColumn>
|
|
126
|
+
<SheetSelect
|
|
127
|
+
onSelect={(checked, index) => {
|
|
128
|
+
const next = data.slice()
|
|
129
|
+
next[index]._gm_select = checked
|
|
130
|
+
setData(next)
|
|
131
|
+
}}
|
|
132
|
+
/>
|
|
133
|
+
<SheetAction>
|
|
134
|
+
{(checkedList) => (
|
|
135
|
+
<Button onClick={() => console.log('已选', checkedList)}>批量操作</Button>
|
|
136
|
+
)}
|
|
137
|
+
</SheetAction>
|
|
138
|
+
</Sheet>
|
|
139
|
+
)
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### 组件列表
|
|
28
144
|
|
|
29
145
|
### 表单组件
|
|
30
146
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gmfe/react",
|
|
3
|
-
"version": "2.14.
|
|
3
|
+
"version": "2.14.31",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "liyatang <liyatang@qq.com>",
|
|
6
6
|
"homepage": "https://github.com/gmfe/gmfe#readme",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@gm-common/tool": "^2.15.8",
|
|
30
|
-
"@gmfe/locales": "^2.14.
|
|
30
|
+
"@gmfe/locales": "^2.14.31",
|
|
31
31
|
"big.js": "^5.2.2",
|
|
32
32
|
"classnames": "^2.2.5",
|
|
33
33
|
"lodash": "^4.17.14",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"prop-types": "^15.7.2",
|
|
36
36
|
"react-window": "^1.8.5"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "cdfc6a63aad5a239973e58070febc5b82d2010b2"
|
|
39
39
|
}
|