Added reset-values example.

Moved examples to es2015
christianalfoni · Sep 10, 2015 · 6a0d23c · 6a0d23c
1 parent 7ab78f9
commit 6a0d23c
Show file tree

Hide file tree

Showing 10 changed files with 205 additions and 111 deletions.
diff --git a/examples/components/Input.js b/examples/components/Input.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import Formsy from 'formsy-react';
+
+const MyInput = 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(event) {
+    this.setValue(event.currentTarget[this.props.type === 'checkbox' ? 'checked' : 'value']);
+  },
+  render() {
+
+    // 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
+    const 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
+    const 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()}
+          checked={this.props.type === 'checkbox' && this.getValue() ? 'checked' : null}
+        />
+        <span className='validation-error'>{errorMessage}</span>
+      </div>
+    );
+  }
+});
+
+export default MyInput;
diff --git a/examples/components/Select.js b/examples/components/Select.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import Formsy from 'formsy-react';
+
+const MySelect = React.createClass({
+  mixins: [Formsy.Mixin],
+
+  changeValue(event) {
+    this.setValue(event.currentTarget.value);
+  },
+
+  render() {
+    const className = this.props.className + ' ' + (this.showRequired() ? 'required' : this.showError() ? 'error' : null);
+    const errorMessage = this.getErrorMessage();
+
+    const value = this.getValue();
+    const options = this.props.options.map(option => (
+      <option value={option.value} selected={value === option.value ? 'selected' : null}>
+        {option.title}
+      </option>
+    ));
+
+    return (
+      <div className='form-group'>
+        <label htmlFor={this.props.name}>{this.props.title}</label>
+        <select name={this.props.name} onChange={this.changeValue}>
+          {options}
+        </select>
+        <span className='validation-error'>{errorMessage}</span>
+      </div>
+    );
+  }
+
+});
+
+export default MySelect;
diff --git a/examples/custom-validation/app.js b/examples/custom-validation/app.js
@@ -1,10 +1,12 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-var Formsy = require('formsy-react');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Formsy from 'formsy-react';
 
-var currentYear = new Date().getFullYear();
+import MyInput from './../components/Input';
 
-var validators = {
+const currentYear = new Date().getFullYear();
+
+const validators = {
   time: {
     regexp: /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/,
     message: 'Not valid time'
@@ -19,102 +21,80 @@ var validators = {
   }
 };
 
-Formsy.addValidationRule('isYearOfBirth', function (values, value) {
+Formsy.addValidationRule('isYearOfBirth', (values, value) => {
   value = parseInt(value);
-  if (typeof value !== 'number' || value !== value) {
+  if (typeof value !== 'number') {
     return false;
   }
   return value < currentYear && value > currentYear - 130;
 });
 
-var App = React.createClass({
-  submit: function (data) {
+const App = React.createClass({
+  submit(data) {
     alert(JSON.stringify(data, null, 4));
   },
-  render: function () {
+  render() {
     return (
       <Formsy.Form onSubmit={this.submit} className="custom-validation">
-        <MyOwnInput name="year" title="Year of Birth" type="number" validations="isYearOfBirth" validationError="Please type your year of birth" />
-        <DynamicInput name="dynamic" title="..." type="text" />
+        <MyInput name="year" title="Year of Birth" type="number" validations="isYearOfBirth" validationError="Please type your year of birth" />
+        <DynamicInput name="dynamic" title="..." />
         <button type="submit">Submit</button>
       </Formsy.Form>
     );
   }
 });
 
-var MyOwnInput = React.createClass({
-  mixins: [Formsy.Mixin],
-  changeValue: function (event) {
-    this.setValue(event.currentTarget.value);
-  },
-  render: function () {
-    var className = this.props.className + ' ' + (this.showError() ? 'error' : null);
-    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>
-    );
-  }
-});
-
-var DynamicInput = React.createClass({
+const DynamicInput = React.createClass({
   mixins: [Formsy.Mixin],
-  getInitialState: function() {
-    return {
-      validationType: 'time'
-    };
+  getInitialState() {
+    return { validationType: 'time' };
   },
-  changeValue: function (event) {
+  changeValue(event) {
     this.setValue(event.currentTarget.value);
   },
-  changeValidation: function(validationType) {
-    this.setState({
-      validationType: validationType
-    });
+  changeValidation(validationType) {
+    this.setState({ validationType: validationType });
     this.setValue(this.getValue());
   },
-  validate: function () {
-    var value = this.getValue();
-    return value === '' ? true : validators[this.state.validationType].regexp.test(value);
+  validate() {
+    const value = this.getValue();
+    return value !== '' ? validators[this.state.validationType].regexp.test(value) : true;
   },
-  getCustomErrorMessage: function() {
+  getCustomErrorMessage() {
     return this.showError() ? validators[this.state.validationType].message : '';
   },
-  render: function () {
-    var className = this.props.className + ' ' + (this.showError() ? 'error' : null);
-    var errorMessage = this.getCustomErrorMessage();
+  render() {
+    const className = this.props.className + ' ' + (this.showError() ? 'error' : null);
+    const errorMessage = this.getCustomErrorMessage();
 
     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()}/>
+        <input type='text' name={this.props.name} onChange={this.changeValue} value={this.getValue()}/>
         <span className='validation-error'>{errorMessage}</span>
         <Validations validationType={this.state.validationType} changeValidation={this.changeValidation}/>
       </div>
     );
   }
 });
 
-var Validations = React.createClass({
-  changeValidation: function(e) {
+const Validations = React.createClass({
+  changeValidation(e) {
     this.props.changeValidation(e.target.value);
   },
-  render: function() {
+  render() {
+    const { validationType } = this.props;
     return (
       <fieldset onChange={this.changeValidation}>
         <legend>Validation Type</legend>
         <div>
-          <input name='validationType' type='radio' value='time' defaultChecked={this.props.validationType === 'time'}/>Time
+          <input name='validationType' type='radio' value='time' defaultChecked={validationType === 'time'}/>Time
         </div>
         <div>
-          <input name='validationType' type='radio' value='decimal' defaultChecked={this.props.validationType === 'decimal'}/>Decimal
+          <input name='validationType' type='radio' value='decimal' defaultChecked={validationType === 'decimal'}/>Decimal
         </div>
         <div>
-          <input name='validationType' type='radio' value='binary' defaultChecked={this.props.validationType === 'binary'}/>Binary
+          <input name='validationType' type='radio' value='binary' defaultChecked={validationType === 'binary'}/>Binary
         </div>
       </fieldset>
     );

diff --git a/examples/global.css b/examples/global.css
@@ -38,7 +38,8 @@ form {
 .form-group input[type='text'],
 .form-group input[type='email'],
 .form-group input[type='number'],
-.form-group input[type='password'] {
+.form-group input[type='password'],
+.form-group select {
   display: block;
   width: 100%;
   height: 34px;
@@ -62,4 +63,11 @@ form {
 button {
   padding: 10px 15px;
   border-radius: 4px;
-}
+}
+
+.buttons button {
+  margin-left: 10px;
+}
+.buttons button:first-child {
+  margin-left: 0;
+}
diff --git a/examples/index.html b/examples/index.html
@@ -9,6 +9,7 @@ <h1>Formsy React Examples</h1>
     <ul>
       <li><a href="login/index.html">Login Page</a></li>
       <li><a href="custom-validation/index.html">Custom Validation</a></li>
+      <li><a href="reset-values/index.html">Reset Values</a></li>
     </ul>
   </body>
-</html>
+</html>
diff --git a/examples/login/app.js b/examples/login/app.js
@@ -1,64 +1,29 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-var Formsy = require('formsy-react');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Form } from 'formsy-react';
 
-var App = React.createClass({
-  getInitialState: function() {
+import MyInput from './../components/Input';
+
+const App = React.createClass({
+  getInitialState() {
     return { canSubmit: false };
   },
-  submit: function (data) {
+  submit(data) {
     alert(JSON.stringify(data, null, 4));
   },
-  enableButton: function () {
-    this.setState({
-      canSubmit: true
-    });
+  enableButton() {
+    this.setState({ canSubmit: true });
   },
-  disableButton: function () {
-    this.setState({
-      canSubmit: false
-    });
+  disableButton() {
+    this.setState({ canSubmit: false });
   },
-  render: function () {
+  render() {
     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 />
+      <Form onSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton} className="login">
+        <MyInput name="email" title="Email" validations="isEmail" validationError="This is not a valid email" required />
+        <MyInput 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>
+      </Form>
     );
   }
 });

diff --git a/examples/reset-values/app.css b/examples/reset-values/app.css
@@ -0,0 +1,4 @@
+.form {
+  width: 400px;
+  margin: 0 auto;
+}
diff --git a/examples/reset-values/app.js b/examples/reset-values/app.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Form } from 'formsy-react';
+
+import MyInput from './../components/Input';
+import MySelect from './../components/Select';
+
+const user = {
+  name: 'Sam',
+  free: true,
+  hair: 'brown'
+};
+
+const App = React.createClass({
+  submit(data) {
+    alert(JSON.stringify(data, null, 4));
+  },
+  resetForm() {
+    this.refs.form.reset();
+  },
+  render() {
+    return (
+      <Formsy.Form ref="form" onSubmit={this.submit} className="form">
+        <MyInput name="name" title="Name" value={user.name} />
+        <MyInput name="free" title="Free to hire" type="checkbox" value={user.free} />
+        <MySelect name="hair" title="Hair" value={user.hair}
+          options={[
+            { value: "black", title: "Black" },
+            { value: "brown", title: "Brown" },
+            { value: "blonde", title: "Blonde" },
+            { value: "red", title: "Red" }
+          ]}
+        />
+
+        <div className="buttons">
+          <button type="reset" onClick={this.resetForm}>Reset</button>
+          <button type="submit">Submit</button>
+        </div>
+      </Formsy.Form>
+    );
+  }
+});
+
+ReactDOM.render(<App/>, document.getElementById('example'));