Skip to content

Commit 6d48cb9

Browse files
youlunayouluna
authored
Merge pull request alibaba-fusion#12 from zhoukekestar/master
radio & form component
2 parents 88171c2 + f04adc8 commit 6d48cb9

File tree

9 files changed

+92
-30
lines changed

9 files changed

+92
-30
lines changed

‎docs/radio/demo/button.md

+15-7
Original file line numberDiff line numberDiff line change
@@ -37,38 +37,46 @@ class ControlApp extends React.Component {
3737

3838
this.state = {
3939
value1: 'apple',
40-
value2: ''
40+
value2: 'apple',
41+
value3: ''
4142
};
4243

4344
this.onNestChange = this.onNestChange.bind(this);
44-
this.onNormalChange = this.onNormalChange.bind(this);
45+
this.onSmallChange = this.onSmallChange.bind(this);
46+
this.onMediumChange = this.onMediumChange.bind(this);
4547
}
4648

47-
onNormalChange(value) {
49+
onSmallChange(value) {
4850
this.setState({
4951
value1: value
5052
});
5153
}
5254

53-
onNestChange(value) {
55+
onMediumChange(value) {
5456
this.setState({
5557
value2: value
5658
});
5759
}
5860

61+
onNestChange(value) {
62+
this.setState({
63+
value3: value
64+
});
65+
}
66+
5967
render() {
6068
return (
6169
<div>
6270
<h4>Small size</h4>
63-
<RadioGroup dataSource={list} shape="button" size="small" value={this.state.value1} onChange={this.onNormalChange} />
71+
<RadioGroup dataSource={list} shape="button" size="small" value={this.state.value1} onChange={this.onSmallChange} />
6472
<br/>
6573
<br/>
6674
<h4>Medium size (default)</h4>
67-
<RadioGroup dataSource={list} shape="button" size="medium" value={this.state.value1} onChange={this.onNormalChange} />
75+
<RadioGroup dataSource={list} shape="button" size="medium" value={this.state.value2} onChange={this.onMediumChange} />
6876
<br/>
6977
<br/>
7078
<h4>Large size</h4>
71-
<RadioGroup shape="button" size="large" value={this.state.value2} onChange={this.onNestChange}>
79+
<RadioGroup shape="button" size="large" value={this.state.value3} onChange={this.onNestChange}>
7280
<Radio id="banana" value="banana">Banana</Radio>
7381
<Radio id="watermelon" value="watermelon">Watermelon</Radio>
7482
<Radio id="peach" value="peach">Peach</Radio>

‎docs/radio/demo/useWithGrid.md

+20-6
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ class ControlApp extends React.Component {
3030

3131
this.onChange = this.onChange.bind(this);
3232
}
33+
3334
onChange(value) {
3435
this.setState({
3536
value: value
@@ -40,20 +41,33 @@ class ControlApp extends React.Component {
4041
onClick(e) {
4142
console.log('onClick', e);
4243
}
44+
4345
render() {
4446
return (
4547
<div >
4648
<h4>Grid Layout</h4>
4749
<RadioGroup onChange={this.onChange} style={{ width: '1000px'}} >
4850
<Row>
49-
<Col span="8"><Radio value="apple1" onClick={this.onClick} >Apple</Radio></Col>
50-
<Col span="8"><Radio value="pear1" onClick={this.onClick} >Pear</Radio></Col>
51-
<Col span="8"><Radio value="banana1" onClick={this.onClick} >Banana</Radio></Col>
51+
<Col span="8">
52+
<Radio value="apple1" onClick={this.onClick} >Apple</Radio>
53+
</Col>
54+
<Col span="8">
55+
<Radio value="pear1" onClick={this.onClick} >Pear</Radio>
56+
</Col>
57+
<Col span="8">
58+
<Radio value="banana1" onClick={this.onClick} >Banana</Radio>
59+
</Col>
5260
</Row>
5361
<Row>
54-
<Col span="8"><Radio value="peach" onClick={this.onClick} >Peach</Radio></Col>
55-
<Col span="8"><Radio value="watermelon" onClick={this.onClick} >Watermelon</Radio></Col>
56-
<Col span="8"><Radio value="strawberry" onClick={this.onClick} >Strawberry</Radio></Col>
62+
<Col span="8">
63+
<Radio value="peach" onClick={this.onClick} >Peach</Radio>
64+
</Col>
65+
<Col span="8">
66+
<Radio value="watermelon" onClick={this.onClick} >Watermelon</Radio>
67+
</Col>
68+
<Col span="8">
69+
<Radio value="strawberry" onClick={this.onClick} >Strawberry</Radio>
70+
</Col>
5771
</Row>
5872
</RadioGroup>
5973
</div>

‎docs/radio/index.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
- category: Components
44
- family: DataEntry
5-
- chinese: 单按钮
5+
- chinese: 单选框
66
- type: 表单
77

88
---
@@ -13,17 +13,17 @@
1313

1414
### 何时使用
1515

16-
单选按钮允许用户从一个数据集中选择单个选项。如果你觉得用户需要并排看到所有的可选项，使用单选按钮进行排他操作。此外，考虑使用下拉列表，相对于显示所有的选项占用更少的空间。
16+
单选框允许用户从一个数据集中选择单个选项。如果你觉得用户需要并排看到所有的可选项，使用单选框进行排他操作。此外，考虑使用下拉列表，相对于显示所有的选项占用更少的空间。
1717

1818
## API
1919

2020
### Radio
2121

2222
| 参数 | 说明 | 类型 | 默认值 |
2323
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------- | --------- |
24-
| id | id 组件input的id | String | - |
24+
| id | 组件input的id | String | - |
2525
| checked | 设置radio是否选中 | Boolean | - |
26-
| defaultChecked | radio的默认选中 | Boolean | - |
26+
| defaultChecked | 设置radio是否默认选中 | Boolean | - |
2727
| label | 通过属性配置label | String | - |
2828
| onChange | 状态变化时触发的事件<br><br>**签名**:<br>Function(checked: Boolean, e: Event) => void<br>**参数**:<br>_checked_: {Boolean} 是否选中<br>_e_: {Event} Dom 事件对象 | Function | func.noop |
2929
| onMouseEnter | 鼠标进入enter事件<br><br>**签名**:<br>Function(e: Event) => void<br>**参数**:<br>_e_: {Event} Dom 事件对象 | Function | func.noop |
@@ -37,7 +37,7 @@
3737
| value | radio group的选中项的值 | String/Number/Boolean | - |
3838
| size | 与 `shape` 属性配套使用，shape设为button时有效<br><br>**可选值**:<br>'large'(大)<br>'medium'(中)<br>'small'(小) | Enum | 'medium' |
3939
| shape | 可以设置成 button 展示形状<br><br>**可选值**:<br>'button'(按钮状) | Enum | - |
40-
| defaultValue | radio group的默认值 | String/Number/Boolean | - |
40+
| defaultValue | radio group 默认值 | String/Number/Boolean | - |
4141
| onChange | 选中值改变时的事件<br><br>**签名**:<br>Function(value: String/Number, e: Event) => void<br>**参数**:<br>_value_: {String/Number} 选中项的值<br>_e_: {Event} Dom 事件对象 | Function | () => { } |
4242
| disabled | 表示radio被禁用 | Boolean | - |
4343
| dataSource | 可选项列表, 数据项可为 String 或者 Object, 如 `['apple', 'pear', 'orange']` | Array&lt;any> | \[] |

‎site/en-us/quick-start.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,17 @@ import '@alifd/next/dist/next.css';
4343
import { Button, Input } from '@alifd/next';
4444
```
4545

46-
### Import Modular with Plugin
46+
### Import module with plugin
4747

4848

49-
#### 1.Import Modular Manually
49+
#### 1. Import module manually
5050

5151
``` js
5252
import Button from '@alifd/next/lib/button';
5353
import '@alifd/next/lib/button/style';
5454
```
5555

56-
#### 2.Use with [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) ( Recommend )
56+
#### 2. Use with [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) ( Recommend )
5757

5858
``` js
5959
// webpack babel loader option or .babelrc
@@ -68,7 +68,7 @@ import '@alifd/next/lib/button/style';
6868
}
6969
```
7070

71-
It will transform below code
71+
It will transform code as below
7272

7373
``` js
7474
import { Button } from '@alifd/next';
@@ -84,10 +84,10 @@ import '@alifd/next/lib/button/style';
8484

8585
## Release Schedule
8686

87-
Follow [Semantic Versioning 2.0.0](https://semver.org/) Semantic Version Strategy:
87+
Follow [Semantic Versioning 2.0.0](https://semver.org/) Semantic Version Strategy.
8888

8989
Patch Version: Every Monday release of a bugfix version(anytime for urgent bugfix).
9090

91-
Minor Version: Monthly release of a backward compatible version with new features
91+
Minor Version: Monthly release of a backward compatible version with new features.
9292

9393
Major version: contains some break changes, usually one to two years release of a version.

‎src/form/form.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default class Form extends React.Component {
3131
*/
3232
inline: PropTypes.bool,
3333
/**
34-
* 单个Item的size自定义，优先级高于Form的size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。
34+
* 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。
3535
* @enumdesc 大, 中, 小
3636
*/
3737
size: PropTypes.oneOf(['large', 'medium', 'small']),

‎src/form/item.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default class Item extends React.Component {
5454
*/
5555
extra: PropTypes.node,
5656
/**
57-
* 单个Item的size自定义，优先级高于Form的size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。
57+
* 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。
5858
*/
5959
size: PropTypes.oneOf(['large', 'small', 'medium']),
6060
/**
@@ -170,7 +170,7 @@ export default class Item extends React.Component {
170170
*/
171171
getNames() {
172172
const children = React.Children.toArray(this.props.children);
173-
return children.filter((c) => {
173+
return children.filter(c => {
174174
return c.props && ('name' in c.props || 'data-meta' in c.props);
175175
}).map(c => {
176176
return c.props.name || c.props.id;

‎src/radio/radio.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ class Radio extends UIState {
2222
*/
2323
className: PropTypes.string,
2424
/**
25-
* id 组件input的id
25+
* 组件input的id
2626
*/
2727
id: PropTypes.string,
2828
/**
@@ -34,7 +34,7 @@ class Radio extends UIState {
3434
*/
3535
checked: PropTypes.bool,
3636
/**
37-
* radio的默认选中
37+
* 设置radio是否默认选中
3838
*/
3939
defaultChecked: PropTypes.bool,
4040
/**
@@ -58,7 +58,7 @@ class Radio extends UIState {
5858
*/
5959
onMouseLeave: PropTypes.func,
6060
/**
61-
* 表示radio被禁用
61+
* radio是否被禁用
6262
*/
6363
disabled: PropTypes.bool,
6464
}
@@ -120,6 +120,7 @@ class Radio extends UIState {
120120
this.resetUIState();
121121
}
122122
}
123+
123124
shouldComponentUpdate(nextProps, nextState, nextContext) {
124125
const { shallowEqual } = obj;
125126
return !shallowEqual(this.props, nextProps) ||

‎test/form/index-spec.js

+7
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,13 @@ describe('form', () => {
9191
assert(onSubmit.calledOnce);
9292
done();
9393
});
94+
it('should deprecated direction', () => {
95+
const wrapper1 = mount(<Form></Form>);
96+
const wrapper2 = mount(<Form direction={'hoz'}></Form>);
97+
98+
assert(!wrapper1.instance()._instance.props.inline);
99+
assert(wrapper2.instance()._instance.props.inline);
100+
})
94101
});
95102
describe('FormItem', () => {
96103
it('should supoort props', () => {

‎test/form/validate-spec.js

+32
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Adapter from 'enzyme-adapter-react-16';
44
import assert from 'power-assert';
55
import Input from '../../src/input';
66
import Form from '../../src/form/index';
7+
import Field from '../../src/field';
78

89
const FormItem = Form.Item;
910
const Submit = Form.Submit;
@@ -150,4 +151,35 @@ describe('Reset', () => {
150151
wrapper.find('button').simulate('click');
151152
assert(wrapper.find('input#first').prop('value') === 'test');
152153
});
154+
155+
it('should support custom filed', () => {
156+
class Demo extends React.Component {
157+
field = new Field(this, {forceUpdate: true});
158+
159+
render() {
160+
const { init, setValue, reset } = this.field;
161+
162+
return (<div>
163+
<Input {...init('input', {initValue: 'test'})} />
164+
<Reset field={this.field} onClick={reset}>click</Reset>
165+
</div>);
166+
}
167+
}
168+
169+
const wrapper = mount(<Demo />);
170+
171+
assert(wrapper.find('input').prop('value') === 'test');
172+
wrapper.find('button').simulate('click');
173+
assert(wrapper.find('input').prop('value') === '');
174+
})
175+
176+
it('should warn & callback if field not exist', () => {
177+
178+
let warnFlag = false;
179+
180+
const wrapper = mount(<Reset onClick={() => warnFlag = true} />);
181+
182+
wrapper.find('button').simulate('click');
183+
assert(warnFlag);
184+
})
153185
});

0 commit comments

Comments
 (0)