Skip to content

Commit e443520

Browse files
prograpeprogrape
committed
Merge pull request #57 from progrape/master
new component
2 parents 09e3cf8 + 2b18d8d commit e443520

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+14220
-96
lines changed

‎.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@
22
coverage
33
lib
44
node_modules
5-
npm-debug.log
5+
npm-debug.log
6+
.DS_Store
7+
dist
8+
publish.sh

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ npm start
7474
- [Button](./docs/button.md)
7575
- [Cell](./docs/cell.md)
7676
- [Dialog](./docs/dialog.md)
77-
- [Form](./docs/form.md) (TODO)
77+
- [Form](./docs/form.md)
7878
- [Icon](./docs/icon.md)
7979
- [Mask](./docs/mask.md)
8080
- [Msg](./docs/msg.md)

‎docs/cell.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
属性名|类型|默认值|可选值|备注
1111
------|----|------|------|----|
1212
access|bool|false | true, false| 控制Cell是否显示小箭头以及点击的Active态
13-
form |bool|false | true, false| 当Cell内有表单元素时使用
1413

1514
#### CellsTitle
1615

‎docs/form.md

Lines changed: 257 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,259 @@
11

2-
### 表单
2+
### Form
33

4-
coming soon......
4+
表单，可以分成“输入型”和“选择型”两种。输入型包括单行文本（文本、数值、电话、密码等）、多行文本；选择型包括下拉选择、单选、多选、开关、日期时间等。
5+
6+
Form组件是对`div.weui_cells`和`weui_cells_form`的封装，作为Form集合的容器。`Form`可以包含多个属性，用于扩展Form组件的实用场景。
7+
8+
属性名|类型|默认值|可选值|备注
9+
------|----|------|------|----|
10+
radio|bool|false | true, false| 控制容器是否用于Radio单选模式
11+
checkbox|bool|false | true, false| 控制容器是否用于checkbox多选模式
12+
13+
#### FormCell
14+
Cell组件用于表单的单独封装，`FormCell`可以包含多个属性，用于扩展Form组件的实用场景, 默认用法参考`Cell`, 可包含CellHeader`、`CellBody`以及`CellFooter`，分别表示Cell的头部、主体部分和尾部。
15+
16+
属性名|类型|默认值|可选值|备注
17+
------|----|------|------|----|
18+
vcode|bool|false | true, false| 控制Cell是否用于vcode验证码/图片
19+
warn|bool|false | true, false| 控制Cell是否显示错误
20+
radio|bool|false | true, false| 控制Cell是否用于Radio单选
21+
checkbox|bool|false | true, false| 控制Cell是否用于checkbox多选
22+
select|bool|false | true, false| 控制Cell是否用于select多选
23+
selectPos|string|undefined | 'before','after'| 控制Cell显示select的位置分为前选before,后选after,单独则不需要使用selectPos
24+
25+
#### Input
26+
27+
是对`weui_input`的封装，组件继承所有属性，可直接参考默认input,
28+
`react默认值属性为defaultValue`.
29+
30+
### 示例：
31+
32+
```javascript
33+
<Form>
34+
<FormCell>
35+
<CellHeader>
36+
<Label>qq</Label>
37+
</CellHeader>
38+
<CellBody>
39+
<Input type="tel" placeholder="请输入qq号"/>
40+
</CellBody>
41+
</FormCell>
42+
<FormCell vcode={true}>
43+
<CellHeader>
44+
<Label>验证码</Label>
45+
</CellHeader>
46+
<CellBody>
47+
<Input type="number" placeholder="请输入验证码"/>
48+
</CellBody>
49+
<CellFooter>
50+
<img src={vcodeSrc} />
51+
</CellFooter>
52+
</FormCell>
53+
<FormCell vcode={true} warn={true}>
54+
<CellHeader>
55+
<Label>验证码</Label>
56+
</CellHeader>
57+
<CellBody>
58+
<Input type="number" placeholder="请输入验证码"/>
59+
</CellBody>
60+
<CellFooter>
61+
<Icon value="warn" />
62+
<img src={vcodeSrc} />
63+
</CellFooter>
64+
</FormCell>
65+
</Form>
66+
```
67+
#### Switch
68+
69+
是对`weui_switch`的封装，组件继承所有属性，可直接参考默认checkbox.
70+
71+
### 示例：
72+
```javascript
73+
<Form>
74+
<FormCell switch>
75+
<CellBody>标题文字</CellBody>
76+
<CellFooter>
77+
<Switch/>
78+
</CellFooter>
79+
</FormCell>
80+
</Form>
81+
```
82+
83+
#### Radio
84+
85+
是对`weui_radio`的封装，组件继承所有属性，可直接参考默认radio,
86+
87+
### 示例：
88+
```javascript
89+
<Form radio>
90+
<FormCell radio>
91+
<CellBody>标题文字</CellBody>
92+
<CellFooter>
93+
<Radio name="radio1" value="1" defaultChecked/>
94+
</CellFooter>
95+
</FormCell>
96+
<FormCell radio>
97+
<CellBody>标题文字</CellBody>
98+
<CellFooter>
99+
<Radio name="radio1" value="2"/>
100+
</CellFooter>
101+
</FormCell>
102+
</Form>
103+
```
104+
#### Checkbox
105+
106+
是对`weui_checkbox`的封装，组件继承所有属性，可直接参考默认checkbox,
107+
108+
### 示例：
109+
```javascript
110+
<Form checkbox>
111+
<FormCell checkbox>
112+
<CellHeader>
113+
<Checkbox name="checkbox1" value="1"/>
114+
</CellHeader>
115+
<CellBody>标题文字</CellBody>
116+
</FormCell>
117+
<FormCell checkbox>
118+
<CellHeader>
119+
<Checkbox name="checkbox2" value="2" defaultChecked/>
120+
</CellHeader>
121+
<CellBody>标题文字</CellBody>
122+
</FormCell>
123+
</Form>
124+
```
125+
#### Select
126+
127+
是对`weui_select`的封装，组件继承所有属性，可直接参考默认select. 位置需要配合FormCell的selectPos属性来定位. 提供一个快捷属性`data`用于直接渲染选项数据组.
128+
129+
属性名|类型|默认值|可选值|备注
130+
------|----|------|------|----|
131+
data | array | [] | [{value,label},...]|数据组，个体数值至少包含value和label
132+
133+
### 示例：
134+
```javascript
135+
<Form>
136+
<FormCell select selectPos="before">
137+
<CellHeader>
138+
<Select>
139+
<option value="1">+86</option>
140+
<option value="2">+80</option>
141+
<option value="3">+84</option>
142+
<option value="4">+87</option>
143+
</Select>
144+
</CellHeader>
145+
<CellBody>
146+
<Input type="tel" placeholder="请输入号码"/>
147+
</CellBody>
148+
</FormCell>
149+
<FormCell select>
150+
<CellBody>
151+
<Select defaultValue="2">
152+
<option value="1">微信号</option>
153+
<option value="2">QQ号</option>
154+
<option value="3">Email</option>
155+
</Select>
156+
</CellBody>
157+
</FormCell>
158+
<FormCell select selectPos="after">
159+
<CellHeader>国家/地区</CellHeader>
160+
<CellBody>
161+
<Select data={[
162+
{
163+
value: 1,
164+
label: '中国'
165+
},
166+
{
167+
value: 2,
168+
label: '美国'
169+
},
170+
{
171+
value: 3,
172+
label: '英国'
173+
}
174+
]} />
175+
</CellBody>
176+
</FormCell>
177+
</Form>
178+
```
179+
180+
#### TextArea
181+
182+
是对`weui_textarea`的封装，包含`showCounter`属性用于是否显示字数条, 组件继承所有属性，可使用`maxlength`来限制字数，其余用法参考默认textarea,
183+
184+
属性名|类型|默认值|可选值|备注
185+
------|----|------|------|----|
186+
showCounter|bool|true | true, false| 控制容器是显示字数条
187+
188+
```javascript
189+
<Form>
190+
<FormCell>
191+
<CellBody>
192+
<TextArea placeholder="请输入评论" rows="3" maxlength="200"></TextArea>
193+
</CellBody>
194+
</FormCell>
195+
</Form>
196+
```
197+
198+
#### Uploader
199+
200+
是对`weui_uploader`的封装，包含多个属性, `files`属性用于控制组件图片的显示. `files`数据组，个体数值至少包含`url`属性和`error`, `status`两个可选属性. 预览容器继承其他所有属性,可使用onClick来实现图片全屏预览.
201+
202+
用户通过选择图片后会通过canvas压缩然后使用`onChange`属性返回图片的数据. 返回数据包括`file`对象和react本身的`event`事件.
203+
`file`对象包括以下属性：
204+
- `data`: base64加码之后的图片数据,
205+
- `lastModified`
206+
- `lastModifiedDate`
207+
- `name`
208+
- `size`
209+
- `type`
210+
211+
属性名|类型|默认值|可选值|备注
212+
------|----|------|------|----|
213+
title|string|'图片上传' | '标题' | 控制容器标题
214+
maxCount|number|4 | 4,5...| 上传组件的最大文件数
215+
maxWidth|number|500 | 400,500...| canvas的最大图片压缩宽度
216+
onChange|func|true | (file,e)=>{}| 用于接收压缩后图片的方法.
217+
onError|func|undefined | (msg)=>{}| 用于接收错误信息的方法
218+
files|array|[] | [{url, *error, *status},...]| 显示的图片预览数据组
219+
220+
```javascript
221+
const demoFiles = [
222+
{
223+
url: '图片地址/图片base64码',
224+
onClick: e=>alert('事件测试')
225+
},
226+
{
227+
url: '图片地址/图片base64码'
228+
},
229+
{
230+
url: '图片地址/图片base64码'
231+
},
232+
{
233+
url: '图片地址/图片base64码',
234+
error: true
235+
},
236+
{
237+
url: '图片地址/图片base64码',
238+
status: '50%'
239+
}
240+
]
241+
<Form>
242+
<FormCell>
243+
<CellBody>
244+
<Uploader
245+
title="图片上传"
246+
maxCount={6}
247+
files={this.state.demoFiles}
248+
onError={msg => alert(msg)}
249+
onChange={file => {
250+
let newFiles = [...this.state.demoFiles, {url:file.data}];
251+
this.setState({
252+
demoFiles: newFiles
253+
});
254+
}}
255+
/>
256+
</CellBody>
257+
</FormCell>
258+
</Form>
259+
```

‎docs/grid.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
### Gird 九宫格
2+
3+
Grid 九宫格，功能类似于微信钱包界面中的九宫格，用于展示有多个相同级别的入口。包含功能的图标和简洁的文字描述。
4+
5+
### Grids
6+
是对div.weui_grids的封装，作为grids集合的容器。Grids拥有一个快捷属性data，在不需要而外修改的情况下直接渲染九宫格。
7+
8+
属性名称 | 类型 | 默认值 | 可选值
9+
------------- | ------------- | --------| -------------
10+
data | array | [] | 数据组，个体数值至少包含icon和label
11+
12+
### Grid, GridIcon, GridLabel
13+
是对div.weui_grid的封装，作为grid集合的容器。Grid拥有两个快捷属性icon,label，在不需要而外修改的情况下直接渲染。 在不使用快捷属性情况下，Grid需要包含GridIcon和GridLabel两个组件， 分别表示图标和文字
14+
15+
属性名称 | 类型 | 默认值 | 可选值
16+
------------- | ------------- | --------| -------------
17+
icon | any | false | 快捷图标植入，接受任何形式
18+
label | string | '' | 快捷label植入
19+
20+
### 快捷示例：
21+
22+
```javascript
23+
import React from 'react';
24+
import ReactDOM from 'react-dom';
25+
import {Grids, Icon} from 'react-weui';
26+
27+
let demoItems = [
28+
{
29+
icon: <Icon/>,
30+
label: 'Button',
31+
href: '#button'
32+
}, {
33+
icon: <Icon/>,
34+
label: 'Cell',
35+
href: '#cell'
36+
}, {
37+
icon: <Icon/>,
38+
label: 'Toast',
39+
href: '#toast'
40+
}];
41+
42+
ReactDOM.render((
43+
<Grids data={demoItems} />
44+
), document.getElementById('container'));
45+
```
46+
47+
### 全带入示例：
48+
```javascript
49+
import React from 'react';
50+
import ReactDOM from 'react-dom';
51+
import {Grids, Grid, GridIcon, GridLabel, Icon} from 'react-weui';
52+
53+
ReactDOM.render((
54+
<Grids>
55+
<Grid>
56+
<GridIcon><Icon/></GridIcon>
57+
<GridLabel>Item 1</GridLabel>
58+
</Grid>
59+
<Grid>
60+
<GridIcon><Icon/></GridIcon>
61+
<GridLabel>Item 2</GridLabel>
62+
</Grid>
63+
<Grid>
64+
<GridIcon><Icon/></GridIcon>
65+
<GridLabel>Item 3</GridLabel>
66+
</Grid>
67+
<Grid>
68+
<GridIcon><Icon/></GridIcon>
69+
<GridLabel>Item 4</GridLabel>
70+
</Grid>
71+
<Grid>
72+
<GridIcon><Icon/></GridIcon>
73+
<GridLabel>Item 5</GridLabel>
74+
</Grid>
75+
<Grid>
76+
<GridIcon><Icon/></GridIcon>
77+
<GridLabel>Item 6</GridLabel>
78+
</Grid>
79+
</Grids>
80+
), document.getElementById('container'));
81+
```

0 commit comments

Comments
 (0)