propTypes changes

Ggayane · Nov 8, 2016 · 1e16b6c · 1e16b6c
1 parent e7df4ba
commit 1e16b6c
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,4 @@ To build, watch and serve the examples (which will also watch the component sour
 
 ## License
 
-__PUT LICENSE HERE__
-
-Copyright (c) 2016 Gayane Gasparyan.
-
+[MIT] (https://github.com/Ggayane/react-input-validation/blob/master/license.md)
diff --git a/example/src/example.js b/example/src/example.js
@@ -1,16 +1,105 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-// var ReactInputValidation = require('react-input-validation'); 
+import React from 'react'
+import ReactDOM from 'react-dom'
+import FormInput from 'react-input-validation'
+export default class App extends React.Component {
+	constructor () {
+		super()
+		this.state = {
+			email: '',
+			name: '',
+			age: '',
+			password: '',
+			re_password: '',
+			error: false,
+			btn_text: 'Check'
+		}
+		this._onChangeValue = this._onChangeValue.bind(this)
+		this.checkValidation = this.checkValidation.bind(this)
+	}
+
+	_onChangeValue (prop, param) {
+		var state = {}
+    state[param] = prop.prop
+    this.setState(state)
+  }
+
+	checkValidation () {
+		var error = false
+		if (this._isAllValuesTrue(this.refs)) {
+      var btn_text = 'Done!'
+    } else {
+			var btn_text = 'Not Valid!'
+			error = true
+		}
+    this.setState({
+			error,
+			btn_text
+		})
+	}
+
+	_isAllValuesTrue (obj) {
+    return Object.keys(obj).every(elem => (typeof obj[elem].isValid === 'function' && obj[elem].isValid() === true))
+  }
 
-var App = React.createClass({
 	render () {
-		console.log('aaaaaa');
 		return (
-			<div>
-
+			<div className='row'>
+				<div className='col-md-6 col-md-offset-3'>
+					<FormInput
+						text='Check Email'
+						emptyMessage='email is required'
+						errorMessage='Not valid email'
+						type='email'
+						value={this.state.email || ''}
+						onChange={prop => this._onChangeValue({prop}, 'email')}
+						validateType='email'
+						onKeyPress={this.handleKeyPress}
+						ref='email'/>
+					<FormInput
+						text='Name'
+						emptyMessage='Name is required'
+						type='text'
+						value={this.state.name || ''}
+						onChange={prop => this._onChangeValue({prop}, 'name')}
+						validateType='required'
+						onKeyPress={this.handleKeyPress}
+						ref='name'/>
+					<FormInput
+	          text='Age'
+	          emptyMessage='Age is required'
+	          errorMessage='Please enter a positive number'
+	          type='number'
+	          value={this.state.age || ''}
+	          onChange={prop => this._onChangeValue({prop}, 'age')}
+	          validateType='onlyPositiveNumbers'
+	          ref='age' />
+					<FormInput
+	          text='Password'
+	          emptyMessage='Password is required'
+	          errorMessage='Password should contain at least 6 digits.'
+	          type='password'
+	          value={this.state.password || ''}
+	          onChange={prop => this._onChangeValue({prop}, 'password')}
+	          passwordMinLength={6}
+	          validateType='password'
+	          onKeyPress={this.handleKeyPress}
+	          ref='password' />
+					<FormInput
+	          text='Repeat Password'
+	          emptyMessage='Repeat Password is required'
+	          errorMessage='Not matching'
+	          type='password'
+	          value={this.state.re_password || ''}
+	          onChange={prop => this._onChangeValue({prop}, 're_password')}
+	          validateType='re_password'
+	          relValue={this.state.password || ''}
+	          onKeyPress={this.handleKeyPress}
+	          ref='re_password' />
+						<button type='button' className={'btn btn-md btn-block ' + (this.state.error ? 'btn-danger' : 'btn-success')} onClick={this.checkValidation}>{this.state.btn_text}</button>
+					</div>
 			</div>
-		);
+		)
 	}
-});
+}
 
-ReactDOM.render(<App />, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'))
diff --git a/example/src/example.less b/example/src/example.less
@@ -1,4 +1,4 @@
-/* 
+/*
 // Examples Stylesheet
 // -------------------
 */

diff --git a/example/src/index.html b/example/src/index.html
@@ -1,16 +1,16 @@
 <!doctype html>
 <head>
 	<title>react-input-validation</title>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 	<link rel="stylesheet" href="example.css">
 </head>
 <body>
 	<div class="container">
 		<h1>react-input-validation</h1>
 		<h2><a href="https://github.com/ggayane/react-input-validation">View project on GitHub</a></h2>
-		<!-- the example app is rendered into this div -->
+		<p>An example of react-input-validation using Bootstrap</p>
 		<div id="app"></div>
 		<div class="hint">
-			<!-- put any hints about your component example here -->
 		</div>
 		<div class="footer">
 			Copyright &copy; 2016 Gayane Gasparyan.

diff --git a/src/ReactInputValidation.js b/src/ReactInputValidation.js
@@ -11,7 +11,11 @@ export default class ReactInputValidation extends React.Component {
       empty: this.isEmpty(this.props.value),
       valid: null
     }
-    utils._bind('handleChange', 'handlekeyPress')
+    this._bind('handleChange', 'handlekeyPress')
+  }
+
+  _bind (...methods) {
+    methods.forEach((method) => this[method] = this[method].bind(this))
   }
 
   isEmpty (value) {
@@ -151,12 +155,12 @@ ReactInputValidation.propTypes = {
   className: React.PropTypes.string,
   placeholder: React.PropTypes.string,
   type: React.PropTypes.string, // input type, by default this is 'text'
-  value: React.PropTypes.isRequired,
-  validateType: React.PropTypes.oneOf(['checkEmail', 'checkNumberPositive', 'checkUrl', 'checkPassword', 'checkRePassword', 'positiveNumberWithLimit']),
+  value: React.PropTypes.string.isRequired,
+  validateType: React.PropTypes.oneOf(['email', 'required', 'onlyPositiveNumbers', 'url', 'password', 're_password', 'positiveNumberWithLimit']),
   passwordMinLength: React.PropTypes.number, // use if your validateType = 'password'
   limitNumber: React.PropTypes.number, // use if your validateType = 'positiveNumberWithLimit'
   relValue: React.PropTypes.string, // use if your validateType = 're_password'
   withAddon: React.PropTypes.string, // optional, text of addon, use in case you want to have bootstrap inputs with addon icons
   addonPos: React.PropTypes.string, // position of addon, default is 'right'
-  ref: React.PropTypes.isRequired // always use this for validating (must be unique)
+  ref: React.PropTypes.string // always use this for validating (must be unique)
 }