Skip to content

Commit

Permalink
release 0.0.9
Browse files Browse the repository at this point in the history
  • Loading branch information
wangtao0101 committed Mar 3, 2018
2 parents 42fe764 + 096a04a commit ac0a22a
Show file tree
Hide file tree
Showing 11 changed files with 364 additions and 19 deletions.
42 changes: 30 additions & 12 deletions .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,34 @@
"react",
"stage-0",
],
"plugins": [
[
"import",
[
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style": "css"
}
]
],
],
"env": {
"production": {
"plugins": [
[
"import",
[
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style": false
}
]
],
],
},
"development": {
"plugins": [
[
"import",
[
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style": "css"
}
]
],
],
}
}
}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# react-form-antd
[![Build Status](https://img.shields.io/travis/wangtao0101/react-form-antd.svg?style=flat)](https://travis-ci.org/wangtao0101/react-form-antd)
[![Coverage Status](https://coveralls.io/repos/github/wangtao0101/react-form-antd/badge.svg?branch=master&dummy=no_cache_please_1)](https://coveralls.io/github/wangtao0101/react-form-antd?branch=master)
[![Coverage Status](https://coveralls.io/repos/github/wangtao0101/react-form-antd/badge.svg?branch=master)](https://coveralls.io/github/wangtao0101/react-form-antd?branch=master)

An easy form component based on ant design.

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-form-antd",
"version": "0.0.5",
"version": "0.0.9",
"description": "react-form-antd",
"main": "lib/index.js",
"repository": {
Expand Down
17 changes: 15 additions & 2 deletions src/Form.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,21 @@ export default class Form extends Component {
});
return result;
}
invariant(this.components[name], `component with id: ${name} is not exist in form.`);
return this.components[name].state.value;
}

setValue(name, value) {
if (typeof name === 'string') {
invariant(this.components[name], `component with id: ${name} is not exist in form.`);
this.components[name].setValue(value);
return;
}
Object.keys(name).forEach((n) => {
this.components[n].setValue(name[n]);
});
}

register = (component) => {
invariant(typeof component.props.id === 'string', 'should add id props for FormItem');
invariant(this.components[component.props.id] === undefined,
Expand All @@ -69,6 +81,7 @@ export default class Form extends Component {
});
return result;
}
invariant(this.components[name], `component with id: ${name} is not exist in form.`);
return this.components[name].validate();
}

Expand All @@ -93,12 +106,12 @@ export default class Form extends Component {
Form.defaultProps = {
prefixCls: 'ant-form',
layout: 'horizontal',
className: {},
className: '',
};

Form.propTypes = {
children: PropTypes.any.isRequired,
prefixCls: PropTypes.string,
layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
className: PropTypes.object,
className: PropTypes.string,
};
19 changes: 17 additions & 2 deletions src/FormItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ import { Col, Row } from 'antd';
import { getValueFromEvent, normalizeValidateTrigger } from './utils';
import rules from './rules';

const nomolizeValue = (value, initValue) => {
if (value !== undefined) {
return value;
}
return initValue;
};

export default class FormItem extends React.Component {
static contextTypes = {
register: PropTypes.func.isRequired,
Expand All @@ -16,7 +23,7 @@ export default class FormItem extends React.Component {
super(props, context);

this.state = {
value: this.props.value,
value: nomolizeValue(props.value, props.initValue),
validateStatus: undefined,
explain: undefined,
};
Expand Down Expand Up @@ -66,6 +73,12 @@ export default class FormItem extends React.Component {
return ownHandle;
}

setValue = (value) => {
this.setState({
value,
});
}

validate = () => {
const result = this.validateValue(this.state.value);
this.setState({
Expand Down Expand Up @@ -191,7 +204,8 @@ FormItem.defaultProps = {
hasFeedback: false,
validateStatus: undefined,
style: {},
value: '',
value: undefined,
initValue: undefined,
trigger: 'onChange',
valuePropName: 'value',
getValueFromEvent,
Expand All @@ -212,6 +226,7 @@ FormItem.propTypes = {
validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
style: PropTypes.object,
value: PropTypes.any,
initValue: PropTypes.any,
trigger: PropTypes.string,
valuePropName: PropTypes.string,
getValueFromEvent: PropTypes.func,
Expand Down
2 changes: 1 addition & 1 deletion stories/TestInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default class TestInput extends React.Component { // eslint-disable-line
return (
<div>
<Form style={{ width: '600px' }} ref={(form) => { this.form = form; }}>
<FormItem label="Username:" id="username" {...formItemLayout} value="wang tao">
<FormItem label="Username:" id="username" {...formItemLayout} value="">
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
</FormItem>
<FormItem
Expand Down
64 changes: 64 additions & 0 deletions stories/TestSetValue.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react';
import { Input, Icon, Button } from 'antd';

import Form from '../src/Form';
import FormItem from '../src/FormItem';

export default class TestSetValue extends React.Component { // eslint-disable-line

constructor(props) {
super(props);
this.state = {
a: 'a',
b: 'b',
};
}

render() {
return (
<div>
<Form style={{ width: '600px' }} ref={(form) => { this.form = form; }}>
<FormItem
id="a"
hasFeedback
value={this.state.a}
validateTrigger="onBlur"
>
<Input
prefix={<Icon type="mail" style={{ fontSize: 13 }} />}
placeholder="Email"
type="email"
onChange={() => console.log('safadf')} // eslint-disable-line
/>
</FormItem>
<FormItem
id="b"
hasFeedback
value={this.state.b}
validateTrigger="onBlur"
>
<Input
prefix={<Icon type="mail" style={{ fontSize: 13 }} />}
placeholder="Email"
type="email"
onChange={() => console.log('safadf')} // eslint-disable-line
/>
</FormItem>
<Button
onClick={() => {
this.form.setValue('a', `${this.form.getValue('a')}a`);
}}
>set first</Button>
<Button
onClick={() => {
this.form.setValue({
a: `${this.form.getValue('a')}a`,
b: `${this.form.getValue('b')}b`,
});
}}
>set all</Button>
</Form>
</div>
);
}
}
2 changes: 2 additions & 0 deletions stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import TestInput from './TestInput';
import TestLayout from './TestLayout';
import TestTextArea from './TestTextArea';
import TestInputNumber from './TestInputNumber';
import TestSetValue from './TestSetValue';

storiesOf('Components', module)
.add('setValue', () => <TestSetValue />)
.add('Layout', () => <TestLayout />)
.add('Input', () => <TestInput />)
.add('Area', () => <TestTextArea />)
Expand Down
48 changes: 48 additions & 0 deletions test/getValue.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import { mount } from 'enzyme';
import { Input } from 'antd';
import FormItem from '../src/FormItem';
import Form from '../src/Form';

describe('getValue from form', () => {
it('getValue by name success', () => {
const wrapper = mount(
<Form>
<FormItem id="test" value="test" >
<Input />
</FormItem>
</Form>);
const form = wrapper.instance();
expect(form.getValue('test')).toBe('test');
});

it('getValue by all', () => {
const wrapper = mount(
<Form>
<FormItem id="test" value="test" >
<Input />
</FormItem>
<FormItem id="test1" value="test1" >
<Input />
</FormItem>
</Form>);
const form = wrapper.instance();
expect(form.getValue()).toEqual({
test: 'test',
test1: 'test1',
});
});

it('check id when getValue', () => {
expect(() => {
const wrapper = mount(
<Form>
<FormItem id="test">
<Input />
</FormItem>
</Form>);
const form = wrapper.instance();
form.getValue('test1');
}).toThrow(/component with id: test1 is not exist in form./);
});
});
53 changes: 53 additions & 0 deletions test/setValue.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React from 'react';
import { mount } from 'enzyme';
import { Input } from 'antd';
import FormItem from '../src/FormItem';
import Form from '../src/Form';

describe('setValue from form', () => {
it('setValue by name success', () => {
const wrapper = mount(
<Form>
<FormItem id="test" value="test" >
<Input />
</FormItem>
</Form>);
const form = wrapper.instance();
form.setValue('test', 'a');
expect(form.getValue('test')).toBe('a');
});

it('setValue all', () => {
const wrapper = mount(
<Form>
<FormItem id="test" value="test" >
<Input />
</FormItem>
<FormItem id="test1" value="test1" >
<Input />
</FormItem>
</Form>);
const form = wrapper.instance();
form.setValue({
test: 'a',
test1: 'b',
});
expect(form.getValue()).toEqual({
test: 'a',
test1: 'b',
});
});

it('check id when setValue', () => {
expect(() => {
const wrapper = mount(
<Form>
<FormItem id="test">
<Input />
</FormItem>
</Form>);
const form = wrapper.instance();
form.setValue('test1');
}).toThrow(/component with id: test1 is not exist in form./);
});
});

0 comments on commit ac0a22a

Please sign in to comment.