Christian Alfoni
commit
4814fdbe79
|
|
@ -77,6 +77,8 @@ The main concept is that forms, inputs and validation is done very differently a
|
|||
|
||||
## <a name="howtouse">How to use</a>
|
||||
|
||||
See `examples` folder for live examples.
|
||||
|
||||
#### Formsy gives you a form straight out of the box
|
||||
|
||||
```javascript
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
Formsy React Examples
|
||||
=====================
|
||||
|
||||
To run and development examples:
|
||||
|
||||
1. Clone this repo
|
||||
2. Run `npm install`
|
||||
3. Start the development server with `npm run examples`
|
||||
4. Point your browser to http://localhost:8080
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
body {
|
||||
font-family: "Helvetica Neue", Arial;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
a {
|
||||
color: hsl(200, 50%, 50%);
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: hsl(20, 50%, 50%);
|
||||
}
|
||||
|
||||
.breadcrumbs a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 15px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #555;
|
||||
background-color: #FFF;
|
||||
background-image: none;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.validation-error {
|
||||
color: red;
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Formsy React Examples</title>
|
||||
<link href="global.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formsy React Examples</h1>
|
||||
<ul>
|
||||
<li><a href="login/index.html">Login Page</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.login {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
var React = require('react');
|
||||
var Formsy = require('./../..');
|
||||
|
||||
var App = React.createClass({
|
||||
getInitialState: function() {
|
||||
return { canSubmit: false };
|
||||
},
|
||||
submit: function (data) {
|
||||
alert(JSON.stringify(data, null, 4));
|
||||
},
|
||||
enableButton: function () {
|
||||
this.setState({
|
||||
canSubmit: true
|
||||
});
|
||||
},
|
||||
disableButton: function () {
|
||||
this.setState({
|
||||
canSubmit: false
|
||||
});
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<Formsy.Form onSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton} className="login">
|
||||
<MyOwnInput name="email" title="Email" validations="isEmail" validationError="This is not a valid email" required />
|
||||
<MyOwnInput name="password" title="Password" type="password" required />
|
||||
<button type="submit" disabled={!this.state.canSubmit}>Submit</button>
|
||||
</Formsy.Form>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var MyOwnInput = React.createClass({
|
||||
|
||||
// Add the Formsy Mixin
|
||||
mixins: [Formsy.Mixin],
|
||||
|
||||
// setValue() will set the value of the component, which in
|
||||
// turn will validate it and the rest of the form
|
||||
changeValue: function (event) {
|
||||
this.setValue(event.currentTarget.value);
|
||||
},
|
||||
render: function () {
|
||||
|
||||
// Set a specific className based on the validation
|
||||
// state of this component. showRequired() is true
|
||||
// when the value is empty and the required prop is
|
||||
// passed to the input. showError() is true when the
|
||||
// value typed is invalid
|
||||
var className = this.props.className + ' ' + (this.showRequired() ? 'required' : this.showError() ? 'error' : null);
|
||||
|
||||
// An error message is returned ONLY if the component is invalid
|
||||
// or the server has returned an error message
|
||||
var errorMessage = this.getErrorMessage();
|
||||
|
||||
return (
|
||||
<div className='form-group'>
|
||||
<label htmlFor={this.props.name}>{this.props.title}</label>
|
||||
<input type={this.props.type || 'text'} name={this.props.name} onChange={this.changeValue} value={this.getValue()}/>
|
||||
<span className='validation-error'>{errorMessage}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<App/>, document.getElementById('example'));
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Login Example</title>
|
||||
<link href="../global.css" rel="stylesheet"/>
|
||||
<link href="app.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="breadcrumbs"><a href="../index.html">Formsy React Examples</a> / Login</h1>
|
||||
<div id="example"/>
|
||||
<script src="/__build__/shared.js"></script>
|
||||
<script src="/__build__/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
|
||||
function isDirectory(dir) {
|
||||
return fs.lstatSync(dir).isDirectory();
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
|
||||
devtool: 'inline-source-map',
|
||||
|
||||
entry: fs.readdirSync(__dirname).reduce(function (entries, dir) {
|
||||
var isDraft = dir.charAt(0) === '_';
|
||||
|
||||
if (!isDraft && isDirectory(path.join(__dirname, dir)))
|
||||
entries[dir] = path.join(__dirname, dir, 'app.js');
|
||||
|
||||
return entries;
|
||||
}, {}),
|
||||
|
||||
output: {
|
||||
path: 'examples/__build__',
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[id].chunk.js',
|
||||
publicPath: '/__build__/'
|
||||
},
|
||||
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.js$/, exclude: /node_modules/, loader: 'jsx-loader' }
|
||||
]
|
||||
},
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
'react-router': '../../modules/index'
|
||||
}
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin('shared.js'),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
|
||||
})
|
||||
]
|
||||
|
||||
};
|
||||
12
package.json
12
package.json
|
|
@ -3,12 +3,13 @@
|
|||
"version": "0.9.0",
|
||||
"description": "A form input builder and validator for React JS",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/christianalfoni/formsy-react.git"
|
||||
"type": "git",
|
||||
"url": "https://github.com/christianalfoni/formsy-react.git"
|
||||
},
|
||||
"main": "src/main.js",
|
||||
"scripts": {
|
||||
"test": "./node_modules/.bin/jasmine-node ./specs"
|
||||
"test": "./node_modules/.bin/jasmine-node ./specs",
|
||||
"examples": "webpack-dev-server --config examples/webpack.config.js --content-base examples"
|
||||
},
|
||||
"author": "Christian Alfoni",
|
||||
"license": "MIT",
|
||||
|
|
@ -24,10 +25,13 @@
|
|||
"gulp-streamify": "0.0.5",
|
||||
"gulp-uglify": "^0.3.1",
|
||||
"gulp-util": "^3.0.0",
|
||||
"jsx-loader": "^0.12.2",
|
||||
"phantomjs": "^1.9.12",
|
||||
"reactify": "^1.1.0",
|
||||
"vinyl-source-stream": "^0.1.1",
|
||||
"watchify": "^2.1.1"
|
||||
"watchify": "^2.1.1",
|
||||
"webpack": "^1.7.3",
|
||||
"webpack-dev-server": "^1.7.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.12.2 || ^0.13.1"
|
||||
|
|
|
|||
Loading…
Reference in New Issue