Skip to content

Commit

Permalink
support Pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
Jiaqi Liu committed Aug 30, 2018
1 parent d584739 commit 874ef33
Show file tree
Hide file tree
Showing 11 changed files with 143 additions and 63 deletions.
51 changes: 32 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Happy to use react-formutil in the project based on ant-design ^\_^

在 [ant-design](https://github.com/ant-design/ant-design) 项目，结合 [react-formutil](https://github.com/qiqiboy/react-formutil) 来快速构建表单。**支持所有的`antd-design`输入组件。**
在 [ant-design](https://github.com/ant-design/ant-design) 项目，结合 [react-formutil](https://github.com/qiqiboy/react-formutil) 来快速构建表单。**支持所有的`ant-design`输入型（`data-entry`）组件。**

<!-- vim-markdown-toc GFM -->

Expand All @@ -28,6 +28,7 @@ Happy to use react-formutil in the project based on ant-design ^\_^
* [`InputNumber`](#inputnumber)
* [`Input`](#input)
* [`Mention`](#mention)
* [`Pagination`](#pagination)
* [`Rate`](#rate)
* [`Radio`](#radio)
* [`Switch`](#switch)
Expand Down Expand Up @@ -170,7 +171,7 @@ class MyForm extends Component {

##### `checked` `unchecked`

对于 `<Switch />` `<Checkbox />` `<Radio />` 这三种组件，其值默认是 checked 属性，为布尔值。可以通过`checked` `unchecked`来设置 checked 状态时说要映射的值：
对于 `<Switch />` `<Checkbox />` `<Radio />` 这三种组件，其值默认是 checked 属性，为布尔值。可以通过`checked` `unchecked`来设置 checked 状态时所要映射的值：

```javascript
<FormItem checked="yes" unchecked="no">
Expand Down Expand Up @@ -210,15 +211,15 @@ class MyForm extends Component {

#### `支持的组件`

##### `AutoComplete`
##### [`AutoComplete`](https://ant.design/components/auto-complete-cn/)

##### `Checkbox`
##### [`Checkbox`](https://ant.design/components/checkbox-cn/)

支持`Checkbox.Group`。

##### `Cascader`
##### [`Cascader`](https://ant.design/components/cascader-cn/)

##### `DatePicker`
##### [`DatePicker`](https://ant.design/components/date-picker-cn/)

`DatePicker` `TimePicker` `DatePicker.WeekPicker` `DatePicker.MonthPicker` `DatePicker.RangePicker` 等几个日期类组件，都是深度结合了`moment`使用的。如果希望收集到表单中的值是格式化好的时间字符串，可以通过`$parser` `$formatter`实现：

Expand All @@ -239,19 +240,31 @@ class MyForm extends Component {
</FormItem>
```

##### `InputNumber`
##### [`InputNumber`](https://ant.design/components/input-number-cn/)

##### `Input`
##### [`Input`](https://ant.design/components/input-cn/)

##### `Mention`
##### [`Mention`](https://ant.design/components/mention-cn/)

##### `Rate`
参考 [`Mention 为未非受控组件？`](#mention-为未非受控组件)

##### `Radio`
##### [`Pagination`](https://ant.design/components/pagination-cn/)

`Pagination` 并非`antd`所归纳的`data entry`组件，但是其接口设计也可以支持`FormItem`：

```javascript
<FormItem name="page" $defaultValue={2}>
<Pagination pageSize={10} total={100} />
</FormItem>
```

##### [`Rate`](https://ant.design/components/rate-cn/)

##### [`Radio`](https://ant.design/components/radio-cn/)

支持`Radio.Group`。

##### `Switch`
##### [`Switch`](https://ant.design/components/switch-cn/)

`Switch` `Checkbox`(不包括`Checkbox.Group`) `Radio`(不包括`Radio.Group`)三个组件，可以通过给`FormItem`传递`checked` `unchecked`属性来改变被勾选时所映射到表单状态中的值：

Expand All @@ -261,21 +274,21 @@ class MyForm extends Component {
</FormItem>
```

##### `Slider`
##### [`Slider`](https://ant.design/components/slider-cn/)

##### `Select`
##### [`Select`](https://ant.design/components/select-cn/)

##### `TreeSelect`
##### [`TreeSelect`](https://ant.design/components/tree-select-cn/)

##### `Transfer`
##### [`Transfer`](https://ant.design/components/transfer-cn/)

`Transfer`收集到表单状态中的是`targetKeys`。

##### `TimePicker`
##### [`TimePicker`](https://ant.design/components/time-picker-cn/)

参考 [`DatePicker`](#datepicker)

##### `Upload`
##### [`Upload`](https://ant.design/components/upload-cn/)

`Upload` 组件会将 onChange 回调的对象同步到表单状态中，所以如果仅仅需要拿到上传成功后的服务端返回信息（比如上传后保存在服务器的 url），可以通过$parser 进行过滤：

Expand Down Expand Up @@ -320,4 +333,4 @@ class MyForm extends Component {

#### `Mention 为未非受控组件？`

由于`Mention`的 `onChange` 会频繁触发，所以为了性能考虑，针对该组件使用了非受控组件。即，只能在初次调用时传入 value，后期不可通过`react-formutil`提供的`$setValues`等方法去动态的设置该项的值。
由于`Mention`的 `onChange` 会异常触发（[issues 11619](https://github.com/ant-design/ant-design/issues/11619)、失去焦点也会触发等），所以为了性能考虑，针对该组件使用了非受控组件。即，只能在初次调用时传入 value，后期不可通过`react-formutil`提供的`$setValues`等方法去动态的设置该项的值。
40 changes: 28 additions & 12 deletions docs/app/modules/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
import moment from 'moment';
import {
Icon,
Row,
Expand All @@ -14,11 +15,13 @@ import {
Slider,
Switch,
DatePicker,
TimePicker,
Cascader,
Mention,
TreeSelect,
Upload,
Transfer,
Pagination,
Button
} from 'antd';
import { FormItem, withForm } from 'app/../../src';
Expand Down Expand Up @@ -54,7 +57,7 @@ class App extends Component {
<Row>
<Col lg={12}>
<Form onSubmit={this.submit} style={{ padding: 20 }}>
<FormItem name="autocomplete" itemProps={{ ...formItemLayout, label: 'AutoComplete' }}>
<FormItem name="autocomplete" itemProps={{ ...formItemLayout, label: 'AutoComplete' }} required>
<AutoComplete
dataSource={this.state.acDataSource}
onSearch={value =>
Expand All @@ -67,7 +70,7 @@ class App extends Component {
</FormItem>
<FormItem
name="email"
itemProps={{ ...formItemLayout, label: 'E-mail' }}
itemProps={{ ...formItemLayout, label: 'Input' }}
isEmail
required
$validators={{
Expand All @@ -78,24 +81,21 @@ class App extends Component {
<Input placeholder="Your email" />
</FormItem>

<FormItem name="currency" itemProps={{ ...formItemLayout, label: 'Currency' }} required>
<FormItem name="currency" itemProps={{ ...formItemLayout, label: 'InputNumber' }} required>
<InputNumber
style={{ width: 200 }}
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
parser={value => value.replace(/\$\s?|(,*)/g, '')}
/>
</FormItem>

<FormItem
name="checkbox.single"
itemProps={{ ...formItemLayout, label: 'Checkbox.single' }}
required>
<FormItem name="checkbox.single" itemProps={{ ...formItemLayout, label: 'Checkbox' }} required>
<Checkbox>I agree</Checkbox>
</FormItem>

<FormItem
name="checkbox.multiple"
itemProps={{ ...formItemLayout, label: 'Checkbox.multiple' }}
itemProps={{ ...formItemLayout, label: 'Checkbox.Group' }}
required>
<Checkbox.Group options={hobbiesOptions} />
</FormItem>
Expand Down Expand Up @@ -171,23 +171,31 @@ class App extends Component {
<FormItem
name="datepicker.single"
required
itemProps={{ ...formItemLayout, label: 'DatePicker.single' }}>
itemProps={{ ...formItemLayout, label: 'DatePicker' }}>
<DatePicker />
</FormItem>
<FormItem
name="datepicker.month"
required
itemProps={{ ...formItemLayout, label: 'DatePicker.month' }}>
itemProps={{ ...formItemLayout, label: 'MonthPicker' }}>
<DatePicker.MonthPicker />
</FormItem>
<FormItem
name="datepicker.range"
required
focusPropName={null}
blurPropName={null}
itemProps={{ ...formItemLayout, label: 'DatePicker.range' }}>
itemProps={{ ...formItemLayout, label: 'RangePicker' }}>
<DatePicker.RangePicker />
</FormItem>
<FormItem
name="timepicker"
required
$parser={moment => moment.format('HH:mm:ss')}
$formatter={time => time && moment(time, 'HH:mm:ss')}
itemProps={{ ...formItemLayout, label: 'TimePicker' }}>
<TimePicker />
</FormItem>

<FormItem name="cascader" itemProps={{ ...formItemLayout, label: 'Cascader' }} required>
<Cascader options={cascaderOptions} placeholder="Please select" />
Expand Down Expand Up @@ -242,7 +250,7 @@ class App extends Component {
</Upload>
</FormItem>

<FormItem name="transfer" itemProps={{ ...formItemLayout, label: 'Trasnfer' }} required>
<FormItem name="transfer" itemProps={{ ...formItemLayout, label: 'Transfer' }} required>
<Transfer
dataSource={transferData}
titles={['Source', 'Target']}
Expand All @@ -252,6 +260,14 @@ class App extends Component {
/>
</FormItem>

<FormItem
name="page"
itemProps={{ ...formItemLayout, label: 'Pagination' }}
$defaultValue={5}
valuePropName="current">
<Pagination pageSize={10} total={100} />
</FormItem>

<Row>
<Col sm={{ offset: 8 }}>
<Button type="primary" block htmlType="submit">
Expand Down
2 changes: 1 addition & 1 deletion docs/demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -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"><title>react-antd-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/index.chunk.7b5be6f5.js"}</script><link href="./static/css/vendor.08131b69.css" rel="stylesheet"></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.74c94b0b.js"></script><script type="text/javascript" src="./static/js/index.7b5be6f5.js"></script></body></html>
<!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"><title>react-antd-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/index.chunk.b2a331d3.js"}</script><link href="./static/css/vendor.08131b69.css" rel="stylesheet"></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.8fab84f6.js"></script><script type="text/javascript" src="./static/js/index.b2a331d3.js"></script></body></html>
2 changes: 1 addition & 1 deletion docs/demo/service-worker.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 874ef33

Please sign in to comment.