├── .editorconfig
├── .gitignore
├── Gulpfile.js
├── README.md
├── package.json
└── src
├── css
└── styles.css
├── index.html
└── js
├── app.js
├── components
├── Form.js
├── Input.js
├── Progress.js
└── Submit.js
├── datas
└── InputDatas.js
└── utils
└── classSet.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig is awesome: http://EditorConfig.org
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | # Unix-style newlines with a newline ending every file
7 | [*]
8 | indent_style = space
9 | indent_size = 2
10 | end_of_line = lf
11 | charset = utf-8
12 | insert_final_newline = true
13 |
14 | [*.md]
15 | trim_trailing_whitespace = false
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/Gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp'),
2 | autoprefixer = require('gulp-autoprefixer'),
3 | live = require('gulp-livereload'),
4 | browserify = require('gulp-browserify');
5 |
6 | gulp.task('browserify', function() {
7 | gulp.src('src/js/app.js')
8 | .pipe(browserify({ transform:['reactify']}))
9 | .pipe(gulp.dest('dist/js'));
10 | });
11 |
12 | gulp.task('styles', function() {
13 | gulp.src('src/css/styles.css')
14 | .pipe(autoprefixer())
15 | .pipe(gulp.dest('dist/css'));
16 | });
17 |
18 | gulp.task('watch', function() {
19 | live.listen();
20 | gulp.watch( 'src/**/**', [ 'browserify', 'styles' ]).on('change', live.changed);
21 | });
22 |
23 | gulp.task('copy', function() {
24 | gulp.src('src/index.html')
25 | .pipe(gulp.dest('dist'));
26 | });
27 |
28 | gulp.task('default', ['browserify','styles','copy']);
29 |
30 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Form Progress with React
2 |
3 | An example utilizing [React](http://facebook.github.io/react/).
4 |
5 | # How to use ?
6 |
7 | From the root project directory run these commands from the command line:
8 |
9 | ``npm install``
10 |
11 | This will install all dependencies.
12 |
13 | To build the project run this command:
14 |
15 | ``npm run build``
16 |
17 | This will create a ``dist`` directory.
18 |
19 | Finally you have to open the file ``dist/index.html`` with your favorite browser.
20 |
21 | ### Demo
22 | Look the [example page](http://expalmer.github.io/react-progress-form/)
23 |
24 | ### Contribute
25 | I need help to improvements, because together we learn more :)
26 |
27 | ### License
28 | It's simply [MIT](http://opensource.org/licenses/MIT).
29 |
30 |
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-progress-form",
3 | "description": "react progress form example",
4 | "version": "0.1.0",
5 | "scripts": {
6 | "build": "gulp"
7 | },
8 | "devDependencies": {
9 | "gulp": "^3.8.11",
10 | "gulp-autoprefixer": "^2.1.0",
11 | "gulp-browserify": "^0.5.1",
12 | "gulp-livereload": "^3.8.0",
13 | "react": "^0.12.2",
14 | "reactify": "^1.0.0",
15 | "validatorjs": "^1.3.2"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/css/styles.css:
--------------------------------------------------------------------------------
1 | *, *:after, *:before { box-sizing: border-box; }
2 | .clearfix:before, .clearfix:after { content: ''; display: table; }
3 | .clearfix:after { clear: both; }
4 | html {
5 | background: #FFF;
6 | }
7 | body {
8 | background: #f9f9f9;
9 | color: #62706c;
10 | font-size: 100%;
11 | line-height: 1.25;
12 | padding: 25px;
13 | margin: 25px 0 ;
14 | border-right: 25px solid #fff;
15 | border-left: 25px solid #fff;
16 | font-family: Arial, sans-serif;
17 | }
18 |
19 | label {
20 | display: block;
21 | font-size: 1.3em;
22 | }
23 |
24 | .form {
25 | margin: 60px auto 30px;
26 | max-width: 400px;
27 | text-align: center;
28 | }
29 |
30 | .form--group {
31 | margin: 10px auto 40px;
32 | position: relative;
33 | overflow: hidden;
34 | height: 100px;
35 | }
36 |
37 | .form--focus {
38 | position: absolute;
39 | bottom: 25px;
40 | left: 0;
41 | width: 100%;
42 | background: #1ECD97;
43 | height: 2px;
44 | -webkit-transform: translate3d(-100%, 0, 0);
45 | transform: translate3d(-100%, 0, 0);
46 | -webkit-transition: -webkit-transform 0.3s;
47 | transition: transform 0.3s;
48 | }
49 |
50 | .form--control:focus + .form--focus {
51 | -webkit-transform: translate3d(0, 0, 0);
52 | transform: translate3d(0, 0, 0);
53 | }
54 |
55 | .form--control {
56 | display: block;
57 | padding: 5px;
58 | width: 100%;
59 | border: none;
60 | border-bottom: solid 2px #eee;
61 | background: #f9f9f9;
62 | text-align: center;
63 | font-size: 2em;
64 | outline: none;
65 | font-family: Arial, sans-serif;
66 | }
67 |
68 | .form--error {
69 | display: none;
70 | color: #FB797E;
71 | font-size: 1em;
72 | padding: 4px;
73 | border-radius: 20px;
74 | }
75 |
76 | .has--error .form--focus {
77 | background: #FB797E;
78 | }
79 | .has--error .form--error {
80 | display: block;
81 | }
82 |
83 | .form--submit {
84 | display: block;
85 | margin: 0 auto;
86 | padding: 0;
87 | width: 250px;
88 | height: 70px;
89 | border: 2px solid #1ECD97;
90 | border-radius: 40px;
91 | background: transparent;
92 | color: #1ECD97;
93 | letter-spacing: 1px;
94 | font-size: 18px;
95 | font-family: Arial, sans-serif;
96 | outline: none;
97 | cursor: pointer;
98 | -webkit-tap-highlight-color: transparent;
99 | -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
100 | transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
101 | }
102 | .form--submit:hover {
103 | background-color: #1ECD97;
104 | color: #fff;
105 | }
106 |
107 | .form--submit-disabled, .form--submit-disabled:hover {
108 | cursor: not-allowed;
109 | background: #FB797E;
110 | border-color: #F0797E;
111 | color: #fff;
112 | }
113 |
114 | .progress {
115 | position: fixed!important;
116 | top: 50%;
117 | margin-top: -100px;
118 | }
119 |
120 | .progress-pie-chart {
121 | width: 200px;
122 | height: 200px;
123 | border-radius: 50%;
124 | background-color: #E5E5E5;
125 | position: relative;
126 | }
127 | .progress-pie-chart.gt-50 {
128 | background-color: #1ECD97;
129 | }
130 |
131 | .ppc-progress {
132 | content: "";
133 | position: absolute;
134 | border-radius: 50%;
135 | left: calc(50% - 100px);
136 | top: calc(50% - 100px);
137 | width: 200px;
138 | height: 200px;
139 | clip: rect(0, 200px, 200px, 100px);
140 | }
141 | .ppc-progress .ppc-progress-fill {
142 | content: "";
143 | position: absolute;
144 | border-radius: 50%;
145 | left: calc(50% - 100px);
146 | top: calc(50% - 100px);
147 | width: 200px;
148 | height: 200px;
149 | clip: rect(0, 100px, 200px, 0);
150 | background: #1ECD97;
151 | transition: all 1s ease;
152 | -webkit-transition: all 1s ease;
153 | -webkit-transform: rotate(0deg);
154 | -ms-transform: rotate(0deg);
155 | transform: rotate(0deg);
156 | }
157 | .gt-50 .ppc-progress {
158 | clip: rect(0, 100px, 200px, 0);
159 | }
160 | .gt-50 .ppc-progress .ppc-progress-fill {
161 | clip: rect(0, 200px, 200px, 100px);
162 | background: #E5E5E5;
163 | }
164 |
165 | .ppc-percents {
166 | content: "";
167 | position: absolute;
168 | border-radius: 50%;
169 | left: calc(50% - 173.91304px/2);
170 | top: calc(50% - 173.91304px/2);
171 | width: 173.91304px;
172 | height: 173.91304px;
173 | background: #fff;
174 | text-align: center;
175 | display: table;
176 | }
177 | .ppc-percents span {
178 | display: block;
179 | font-size: 2.6em;
180 | font-weight: bold;
181 | color: #1ECD97;
182 | }
183 |
184 | .pcc-percents-wrapper {
185 | display: table-cell;
186 | vertical-align: middle;
187 | }
188 |
189 | @media (max-width: 924px) {
190 | .progress {
191 | position: relative!important;
192 | top: 0;
193 | left: 50%;
194 | margin: 0 0 0 -100px;
195 | }
196 | }
197 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React Progress Form
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/js/app.js:
--------------------------------------------------------------------------------
1 |
2 | var React = require('react');
3 | var Validator = require('validatorjs');
4 | var classSet = require('./utils/classSet');
5 | var ProgressElement = require('./components/Progress');
6 | var FormElement = require('./components/Form');
7 | var inputDatas = require('./datas/inputDatas');
8 |
9 | var Content = React.createClass({
10 | getInitialState: function () {
11 |
12 | return {
13 | inputDatas: [],
14 | progressPercent: 0
15 | }
16 |
17 | },
18 | componentDidMount: function () {
19 |
20 | var inputDatas = this.props.inputDatas;
21 | this.setState( { inputDatas: inputDatas } );
22 | this._initialInputVerification();
23 |
24 | },
25 | render: function () {
26 |
27 | return (
28 |
36 | );
37 |
38 | },
39 | _initialInputVerification: function () {
40 |
41 | var self = this;
42 | this.state.inputDatas.forEach( function ( item, index ) {
43 | self._setAndValidateInput( index, item.value );
44 | });
45 | this._calculatePercent();
46 |
47 | },
48 | _resetInputDatas: function () {
49 |
50 | var inputDatas = this.state.inputDatas.map( function ( item ) {
51 | item.value = '';
52 | item.pristine = true;
53 | item.hasError = false;
54 | return item;
55 | });
56 | this.setState( { inputDatas: inputDatas } );
57 | this._initialInputVerification();
58 |
59 | },
60 | _calculatePercent: function () {
61 |
62 | var total = this.state.inputDatas.length;
63 | var done = 0;
64 | var progressPercent;
65 | this.state.inputDatas.forEach( function( item ) {
66 | if( item.hasError === false ) {
67 | done += 1;
68 | }
69 | });
70 | progressPercent = done/total*100;
71 | this.setState( { progressPercent: progressPercent } );
72 |
73 | },
74 | _setAndValidateInput: function ( index, value, noMorePristine ) {
75 |
76 | var pristine = noMorePristine ? false : true;
77 | var inputDatas = this.state.inputDatas;
78 | var item = inputDatas[index];
79 | var data = {};
80 | var validation;
81 |
82 | inputDatas[index].value = value;
83 | inputDatas[index].pristine = pristine;
84 | inputDatas[index].hasError = false;
85 | inputDatas[index].errorMessage = '';
86 |
87 | data[item.id] = value || '';
88 |
89 | validation = new Validator( data, item.validation.rules, item.validation.messages );
90 | if( validation.fails() ) {
91 | inputDatas[index].hasError = true;
92 | inputDatas[index].errorMessage = validation.errors.first( item.id );
93 | }
94 | this.setState( { inputDatas: inputDatas } );
95 |
96 | },
97 | _onChangeInputHandler: function ( index, value ) {
98 |
99 | this._setAndValidateInput( index, value, true );
100 | this._calculatePercent();
101 |
102 | },
103 | _onSubmitFormHandler: function () {
104 |
105 | if ( this.state.progressPercent >= 100 ) {
106 | this._resetInputDatas();
107 | this._calculatePercent();
108 | }
109 |
110 | }
111 |
112 | });
113 |
114 | React.render( , document.body );
115 |
--------------------------------------------------------------------------------
/src/js/components/Form.js:
--------------------------------------------------------------------------------
1 |
2 | var React = require('react');
3 | var classSet = require('../utils/classSet');
4 | var InputElement = require('./Input');
5 | var SubmitElement = require('./Submit');
6 |
7 | var FormElement = React.createClass({
8 | render: function() {
9 | var props = this.props;
10 | var inputNodes = props.inputs.map( function ( item, index ) {
11 | return ;
16 | });
17 | return (
18 |
22 | );
23 | },
24 | _onSubmit: function (e) {
25 | e.preventDefault();
26 | this.props.onSubmitFormHandler();
27 | }
28 | });
29 |
30 | module.exports = FormElement;
31 |
--------------------------------------------------------------------------------
/src/js/components/Input.js:
--------------------------------------------------------------------------------
1 |
2 | var React = require('react');
3 | var classSet = require('../utils/classSet');
4 |
5 | var InputElement = React.createClass({
6 | render: function() {
7 | var item = this.props.item;
8 | var classes = classSet({
9 | "form--group": true,
10 | "has--error": item.hasError && !item.pristine
11 | });
12 | return (
13 |
14 |
15 |
16 |
17 | {item.errorMessage}
18 |
19 | );
20 | },
21 | _onChange: function(e) {
22 | var value = e.target.value;
23 | this.props.onChangeInputHandler( this.props.index, value );
24 | }
25 | });
26 |
27 | module.exports = InputElement;
28 |
--------------------------------------------------------------------------------
/src/js/components/Progress.js:
--------------------------------------------------------------------------------
1 |
2 | var React = require('react');
3 | var classSet = require('../utils/classSet');
4 |
5 | var ProgressElement = React.createClass({
6 | componentDidUpdate: function() {
7 | var percent = parseInt(this.props.percent);
8 | var deg = 360*percent/100 ;
9 | var element = this.refs.progress.getDOMNode();
10 | element.style.transform = 'rotate(-'+ deg +'deg)';
11 | },
12 | render: function() {
13 | var percent = Math.floor(this.props.percent);
14 | var classes = classSet({
15 | "progress-pie-chart": true,
16 | "gt-50": percent > 50
17 | });
18 | return (
19 |
20 |
21 |
24 |
25 |
26 | {percent + '%'}
27 |
28 |
29 |
30 |
15 |
16 |
17 | );
18 | }
19 | });
20 |
21 | module.exports = SubmitElement;
22 |
--------------------------------------------------------------------------------
/src/js/datas/InputDatas.js:
--------------------------------------------------------------------------------
1 |
2 | var datas = [
3 | {
4 | id: "name",
5 | label: "Nome Completo",
6 | value: "",
7 | validation: {
8 | rules: { name: [ "required", "regex:/^([a-zA-z]{3,10} [a-zA-z ]{3,})$/" ] },
9 | messages: { "required.name": 'Informe seu nome e sobrenome!', 'regex.name': 'Nome e sobrenome rapaz!' }
10 | },
11 | pristine: true,
12 | hasError: false,
13 | errorMessage: ''
14 | },
15 | {
16 | id: "age",
17 | label: "Sua Idade",
18 | value: "",
19 | validation: {
20 | rules: { age: [ "required", "integer" ] },
21 | messages: { "required.age": 'Informe sua idade!', 'integer.age': 'Só números aqui ok' }
22 | },
23 | pristine: true,
24 | hasError: false,
25 | errorMessage: ''
26 | },
27 | {
28 | id: "email",
29 | label: "Seu E-mail",
30 | value: "",
31 | validation: {
32 | rules: { email: [ "required", "email" ] },
33 | messages: { "required.email": 'Informe seu e-mail!', 'email.email': 'E-mail inválido rapa!' }
34 | },
35 | pristine: true,
36 | hasError: false,
37 | errorMessage: ''
38 | },
39 | {
40 | id: "lang",
41 | label: "Linguagem de programação poderosa!",
42 | value: "",
43 | validation: {
44 | rules: { lang: [ "required", "regex:/^javascript$/" ] },
45 | messages: { "required.lang": 'Digite a linguagem!', 'regex.lang': 'Dica: começa com "java" terminha com "script"' }
46 | },
47 | pristine: true,
48 | hasError: false,
49 | errorMessage: ''
50 | }
51 | ];
52 |
53 | module.exports = datas;
54 |
--------------------------------------------------------------------------------
/src/js/utils/classSet.js:
--------------------------------------------------------------------------------
1 |
2 | function classSet ( classes ) {
3 | return typeof classes !== 'object' ?
4 | Array.prototype.join.call(arguments, ' ') :
5 | Object.keys(classes).filter(function(className){
6 | return classes[className];
7 | }).join(' ');
8 | }
9 |
10 | module.exports = classSet;
11 |
--------------------------------------------------------------------------------