TouchInstinct
/
formsy-react
302
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #192 from davidblurton/react-0.14 

React 0.14
This commit is contained in:
Christian Alfoni 2015-08-31 15:24:33 +02:00
parent dda96c46f6 87f14ae418
commit 3dcfb90044
9 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
API.md
View File

@ -212,7 +212,7 @@ You should always use the [**getValue()**](#getvalue) method inside your formsy
}
}}/>
```
An comma seperated list with validation rules. Take a look at [**Validators**](#validators) to see default rules. Use ":" to separate argument passed to the validator. The argument will go through a **JSON.parse** converting them into correct JavaScript types. Meaning:
An comma separated list with validation rules. Take a look at [**Validators**](#validators) to see default rules. Use ":" to separate argument passed to the validator. The argument will go through a **JSON.parse** converting them into correct JavaScript types. Meaning:
```html
<MyInputComponent name="fruit" validations="isIn:['apple', 'orange']"/>

2
README.md
View File

@ -1,4 +1,4 @@
formsy-react [![GitHub release](https://img.shields.io/github/release/christianalfoni/formsy-react.svg)](https://github.com/christianalfoni/formsy-react/releases) ![build](https://travis-ci.org/christianalfoni/formsy-react.svg)
formsy-react [![GitHub release](https://img.shields.io/github/release/christianalfoni/formsy-react.svg)](https://github.com/christianalfoni/formsy-react/releases) [![Build Status](https://travis-ci.org/christianalfoni/formsy-react.svg?branch=master)](https://travis-ci.org/christianalfoni/formsy-react)
============
A form input builder and validator for React JS

9
examples/custom-validation/app.js
View File

@ -1,4 +1,5 @@
var React = require('react');
var ReactDOM = require('react-dom');
var Formsy = require('formsy-react');
var currentYear = new Date().getFullYear();
@ -107,17 +108,17 @@ var Validations = React.createClass({
<fieldset onChange={this.changeValidation}>
<legend>Validation Type</legend>
<div>
<input name='validationType' type='radio' value='time' checked={this.props.validationType === 'time'}/>Time
<input name='validationType' type='radio' value='time' defaultChecked={this.props.validationType === 'time'}/>Time
</div>
<div>
<input name='validationType' type='radio' value='decimal' checked={this.props.validationType === 'decimal'}/>Decimal
<input name='validationType' type='radio' value='decimal' defaultChecked={this.props.validationType === 'decimal'}/>Decimal
</div>
<div>
<input name='validationType' type='radio' value='binary' checked={this.props.validationType === 'binary'}/>Binary
<input name='validationType' type='radio' value='binary' defaultChecked={this.props.validationType === 'binary'}/>Binary
</div>
</fieldset>
);
}
});
React.render(<App/>, document.getElementById('example'));
ReactDOM.render(<App/>, document.getElementById('example'));

3
examples/login/app.js
View File

@ -1,4 +1,5 @@
var React = require('react');
var ReactDOM = require('react-dom');
var Formsy = require('formsy-react');
var App = React.createClass({
@ -62,4 +63,4 @@ var MyOwnInput = React.createClass({
}
});
React.render(<App/>, document.getElementById('example'));
ReactDOM.render(<App/>, document.getElementById('example'));

10
package.json
View File

@ -25,18 +25,18 @@
"dependencies": {
"form-data-to-object": "^0.1.0"
},
"peerDependencies": {
"react": "^0.14.0-beta1"
},
"devDependencies": {
"babel": "^5.6.4",
"babel-core": "^5.1.11",
"babel-loader": "^5.0.0",
"jasmine-node": "^1.14.5",
"jsdom": "^3.1.2",
"react": "^0.14.0-beta1",
"react-dom": "^0.14.0-beta1",
"react": "^0.14.0-beta3",
"react-dom": "^0.14.0-beta3",
"webpack": "^1.7.3",
"webpack-dev-server": "^1.7.0"
},
"peerDependencies": {
"react": "^0.14.0-beta3"
}
}

17
specs/Element-spec.jsx
View File

@ -198,8 +198,11 @@ describe('Element', function() {
it('should allow an undefined value to be updated to a value', function (done) {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
changeValue: function (event) {
this.setValue(event.target.value);
},
render: function () {
return <input value={this.getValue()}/>
return <input value={this.getValue()} onChange={this.changeValue}/>
}
});
var TestForm = React.createClass({
@ -237,7 +240,7 @@ it('should allow an undefined value to be updated to a value', function (done) {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({
@ -264,7 +267,7 @@ it('should allow an undefined value to be updated to a value', function (done) {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({
@ -368,7 +371,7 @@ it('should allow an undefined value to be updated to a value', function (done) {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({
@ -394,7 +397,7 @@ it('should allow an undefined value to be updated to a value', function (done) {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({
@ -428,7 +431,7 @@ it('should allow an undefined value to be updated to a value', function (done) {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({
@ -459,7 +462,7 @@ it('should allow an undefined value to be updated to a value', function (done) {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({

14
specs/Formsy-spec.jsx
View File

@ -84,7 +84,7 @@ describe('Formsy', function () {
// Wait before adding the input
setTimeout(function () {
inputs.push(<TestInput name="test" value=""/>);
inputs.push(<TestInput key={inputs.length} name="test" value=""/>);
forceUpdate(function () {
// Wait for next event loop, as that does the form
@ -135,7 +135,7 @@ describe('Formsy', function () {
// Wait before adding the input
setTimeout(function () {
inputs.push(<TestInput name="test"/>);
inputs.push(<TestInput key={inputs.length} name="test"/>);
forceUpdate(function () {
@ -378,7 +378,7 @@ describe('Formsy', function () {
);
// Wait before adding the input
inputs.push(<TestInput name='test'/>);
inputs.push(<TestInput key={inputs.length} name='test'/>);
forceUpdate(function () {
@ -401,7 +401,7 @@ describe('Formsy', function () {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({
@ -439,7 +439,7 @@ describe('Formsy', function () {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>;
return <input/>;
}
});
var TestForm = React.createClass({
@ -494,7 +494,7 @@ describe('Formsy', function () {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>;
return <input/>;
}
});
var TestForm = React.createClass({
@ -524,7 +524,7 @@ describe('Formsy', function () {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>;
return <input/>;
}
});
var TestForm = React.createClass({

8
specs/Validation-spec.jsx
View File

@ -160,7 +160,7 @@ describe('Validation', function() {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({
@ -191,7 +191,7 @@ describe('Validation', function() {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({
@ -223,7 +223,7 @@ describe('Validation', function() {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({
@ -253,7 +253,7 @@ describe('Validation', function() {
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input value={this.getValue()}/>
return <input/>
}
});
var TestForm = React.createClass({

8
src/main.js
View File

@ -393,17 +393,15 @@ Formsy.Form = React.createClass({
// Validate the form by going through all child input components
// and check their state
validateForm: function () {
var allIsValid = true;
var allIsValid;
var inputs = this.inputs;
var inputKeys = Object.keys(inputs);
// We need a callback as we are validating all inputs again. This will
// run when the last component has set its state
var onValidationComplete = function () {
inputKeys.forEach(function (name) {
if (!inputs[name].state._isValid) {
allIsValid = false;
}
allIsValid = inputKeys.every(function (name) {
return inputs[name].state._isValid;
}.bind(this));
this.setState({