Skip to content

Commit 8b29b0c

Browse files
author
Jiaqi Liu
committed
add d.ts && support <ToggleButtonGroup />
1 parent 952b069 commit 8b29b0c

16 files changed

+201
-28
lines changed

‎.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
docs/
22
src/
3+
jsconfig.json

‎README.md

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ Happy to use react-formutil in the project based on `react-bootstrap` ^\_^
1010
>
1111
> 1. ant-design [`react-antd-formutil`](https://github.com/qiqiboy/react-antd-formutil) [![npm](https://img.shields.io/npm/v/react-antd-formutil.svg?style=flat)](https://npm.im/react-antd-formutil)
1212
> 1. react-md [`react-md-formutil`](https://github.com/qiqiboy/react-md-formutil) [![npm](https://img.shields.io/npm/v/react-md-formutil.svg?style=flat)](https://npm.im/react-md-formutil)
13-
> - Material-UI [`react-material-formutil`](https://github.com/qiqiboy/react-material-formutil) [![npm](https://img.shields.io/npm/v/react-material-formutil.svg?style=flat)](https://npm.im/react-material-formutil)
13+
>
14+
> - Material-UI [`react-material-formutil`](https://github.com/qiqiboy/react-material-formutil) [![npm](https://img.shields.io/npm/v/react-material-formutil.svg?style=flat)](https://npm.im/react-material-formutil)
1415
1516
<!-- vim-markdown-toc GFM -->
1617

@@ -37,7 +38,8 @@ Happy to use react-formutil in the project based on `react-bootstrap` ^\_^
3738
* [`Checkbox`](#checkbox)
3839
* [`Radio`](#radio)
3940
* [`InputGroup`](#inputgroup)
40-
* [`Checkbox` `Radio`](#checkbox-radio)
41+
* [`ToggleButtonGroup`](#togglebuttongroup)
42+
* [`CheckboxGroup` `RadioGroup`](#checkboxgroup-radiogroup)
4143
- [FAQ](#faq)
4244
+ [`给组件设置的 onChange、onFocus 等方法无效、不执行`](#给组件设置的-onchangeonfocus-等方法无效不执行)
4345

@@ -117,14 +119,14 @@ class MyForm extends Component {
117119

118120
> 同 react-formutil 的 EasyField，FormControl 也内置了同样的校验规则：
119121
120-
> * `required` 必填 `required`
121-
> * `maxLength` 。最大输入长度，有效输入时才会校验 `maxLength="100"`
122-
> * `minLength` 最小输入长度，有效输入时才会校验 `minLength="10"`
123-
> * `max` 最大输入数值，仅支持 Number 比较。有效输入时才会校验 `max="100"`
124-
> * `min` 最小输入数值，仅支持 Number 比较。有效输入时才会校验 `min="10"`
125-
> * `pattern` 正则匹配。有效输入时才会校验 `pattern={/^\d+$/}`
126-
> * `enum` 枚举值检测。有效输入时才会校验 `enum={[1,2,3]}`
127-
> * `checker` 自定义校验函数。`checker={value => value > 10 && value < 100 || ' 输入比如大于 10 小与 100'}`
122+
> - `required` 必填 `required`
123+
> - `maxLength` 。最大输入长度，有效输入时才会校验 `maxLength="100"`
124+
> - `minLength` 最小输入长度，有效输入时才会校验 `minLength="10"`
125+
> - `max` 最大输入数值，仅支持 Number 比较。有效输入时才会校验 `max="100"`
126+
> - `min` 最小输入数值，仅支持 Number 比较。有效输入时才会校验 `min="10"`
127+
> - `pattern` 正则匹配。有效输入时才会校验 `pattern={/^\d+$/}`
128+
> - `enum` 枚举值检测。有效输入时才会校验 `enum={[1,2,3]}`
129+
> - `checker` 自定义校验函数。`checker={value => value > 10 && value < 100 || ' 输入比如大于 10 小与 100'}`
128130
129131
注：校验属性的值为 `null` 时表示不进行该校验
130132

@@ -358,6 +360,19 @@ class MyForm extends Component {
358360
</FormGroup>
359361
```
360362

363+
##### [`ToggleButtonGroup`](https://react-bootstrap.github.io/components/button-group/#btn-groups-checkbox-radio)
364+
365+
```javascript
366+
<FormGroup
367+
name="hobbies"}>
368+
<ToggleButtonGroup type="checkbox">
369+
<ToggleButton value={1}>option 1</ToggleButton>
370+
<ToggleButton value={2}>option 2</ToggleButton>
371+
<ToggleButton value={3}>option 3</ToggleButton>
372+
</ToggleButtonGroup>
373+
</FormGroup>
374+
```
375+
361376
##### [`CheckboxGroup`](#checkboxgroup-) [`RadioGroup`](#radiogroup-)
362377

363378
**注意**：这两个组件并不是`react-bootstrap`提供的组件，而是`react-bootstrap-formutil`提供的。

‎docs/app/modules/App.js

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
import React, { Component } from 'react';
2-
import { withForm, FormGroup, CheckboxGroup, RadioGroup } from 'app/../../src';
3-
import { Grid, Row, Col, Form, FormControl, Checkbox, Radio, Button, InputGroup } from 'react-bootstrap';
2+
import { withForm, FormGroup, CheckboxGroup, RadioGroup } from '../../../src';
3+
import {
4+
Grid,
5+
Row,
6+
Col,
7+
Form,
8+
FormControl,
9+
Checkbox,
10+
Radio,
11+
Button,
12+
InputGroup,
13+
ToggleButtonGroup,
14+
ToggleButton
15+
} from 'react-bootstrap';
416

517
@withForm
618
class App extends Component {
@@ -80,7 +92,7 @@ class App extends Component {
8092
checked="yes"
8193
unchecked="no"
8294
required
83-
label="Agreement"
95+
label="Checkbox"
8496
wrapperCol={{
8597
xs: 12,
8698
md: 10
@@ -92,6 +104,23 @@ class App extends Component {
92104
<Checkbox>Checkbox</Checkbox>
93105
</FormGroup>
94106

107+
<FormGroup
108+
name="radio"
109+
checked="yes"
110+
unchecked="no"
111+
required
112+
label="Radio"
113+
wrapperCol={{
114+
xs: 12,
115+
md: 10
116+
}}
117+
labelCol={{
118+
xs: 12,
119+
md: 2
120+
}}>
121+
<Radio>Radio</Radio>
122+
</FormGroup>
123+
95124
<FormGroup
96125
name="group.checkbox"
97126
required
@@ -135,6 +164,46 @@ class App extends Component {
135164
<Radio value="3">3</Radio>
136165
</RadioGroup>
137166
</FormGroup>
167+
168+
<FormGroup
169+
name="group.buttonCheckbox"
170+
required
171+
label="ButtonGroup"
172+
$defaultValue={[1, 2]}
173+
wrapperCol={{
174+
xs: 12,
175+
md: 10
176+
}}
177+
labelCol={{
178+
xs: 12,
179+
md: 2
180+
}}>
181+
<ToggleButtonGroup type="checkbox">
182+
<ToggleButton value={1}>option 1</ToggleButton>
183+
<ToggleButton value={2}>option 2</ToggleButton>
184+
<ToggleButton value={3}>option 3</ToggleButton>
185+
</ToggleButtonGroup>
186+
</FormGroup>
187+
188+
<FormGroup
189+
name="group.buttonRadio"
190+
required
191+
$defaultValue={3}
192+
label="ButtonGroup"
193+
wrapperCol={{
194+
xs: 12,
195+
md: 10
196+
}}
197+
labelCol={{
198+
xs: 12,
199+
md: 2
200+
}}>
201+
<ToggleButtonGroup type="radio">
202+
<ToggleButton value={1}>option 1</ToggleButton>
203+
<ToggleButton value={2}>option 2</ToggleButton>
204+
<ToggleButton value={3}>option 3</ToggleButton>
205+
</ToggleButtonGroup>
206+
</FormGroup>
138207
</div>
139208

140209
<Button block bsStyle="primary" type="submit">

‎docs/demo/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,shrink-to-fit=no"><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><title>react-bootstrap-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/index.chunk.7ee60285.js"}</script></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.ab94bb50.js"></script><script type="text/javascript" src="./static/js/index.7ee60285.js"></script></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,shrink-to-fit=no"><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><title>react-bootstrap-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/index.chunk.3f53b29b.js"}</script></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.a29ed6cf.js"></script><script type="text/javascript" src="./static/js/index.3f53b29b.js"></script></body></html>

‎docs/demo/service-worker.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo/static/js/index.3f53b29b.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo/static/js/index.7ee60285.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/demo/static/js/vendor.a29ed6cf.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo/static/js/vendor.ab94bb50.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/jsconfig.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"checkJs": true,
5+
"experimentalDecorators": true,
6+
"allowSyntheticDefaultImports": true,
7+
"jsx": "react",
8+
"module": "commonjs",
9+
"baseUrl": ".",
10+
"paths": {
11+
"*": ["*", "app/*"]
12+
}
13+
},
14+
"exclude": [
15+
"node_modules",
16+
"demo"
17+
]
18+
}

0 commit comments

Comments
 (0)