Moved to prop-types packages. Ability to handle errorText. Readme upd…

…ated.
NewOldMax · Apr 19, 2017 · 655ae7d · 655ae7d
1 parent 2e2682c
commit 655ae7d
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 38 deletions.
diff --git a/Readme.md b/Readme.md
@@ -7,11 +7,11 @@
 Simple form validation component for material-ui library inspired by [formsy-react](https://github.com/christianalfoni/formsy-react)
 
 Supported types:
-+ Text
-+ Select
-+ AutoComplete
-+ Date
-+ Time
++ Text ([TextValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/TextValidator.jsx))
++ Select ([SelectValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/SelectValidator.jsx))
++ AutoComplete ([AutoCompleteValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/AutoCompleteValidator.jsx))
++ Date ([DateValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/DateValidator.jsx))
++ Time ([TimeValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/TimeValidator.jsx))
 
 Default validation rules:
 + matchRegexp
@@ -30,7 +30,7 @@ Default validation rules:
 
 ### Usage
 
-You can pass any props of field components except ``errorText``, use ``errorMessages`` instead.
+You can pass any props of field components, but note that ``errorText`` prop will be replaced when validation errors occurred.
 Your component must [provide a theme](http://www.material-ui.com/#/get-started/usage).
 
 ````javascript
@@ -151,24 +151,63 @@ class ResetPasswordForm extends React.Component {
 Currently material-ui [doesn't support](https://github.com/callemall/material-ui/issues/3771) error messages for switches, but you can easily add your own:
 ````javascript
 import React from 'react';
+import { red300 } from 'material-ui/styles/colors';
 import Checkbox from 'material-ui/Checkbox';
 import { ValidatorComponent } from 'react-material-ui-form-validator';
 
-export default class CustomCheckboxValidator extends ValidatorComponent {
+class CheckboxValidatorElement extends ValidatorComponent {
 
     render() {
-        const { errorMessages, validators, requiredError, ...rest } = this.props;
-        const { isValid } = this.state;
-        const errorMessage = !isValid && this.getErrorMessage();
+        const { errorMessages, validators, requiredError, value, ...rest } = this.props;
+
         return (
             <div>
-                <Checkbox {...rest} />
-                {errorMessage}
+                <Checkbox
+                    {...rest}
+                    ref={(r) => { this.input = r; }}
+                />
+                {this.errorText()}
+            </div>
+        );
+    }
+
+    errorText() {
+        const { isValid } = this.state;
+
+        if (isValid) {
+            return null;
+        }
+
+        const style = {
+            right: 0,
+            fontSize: '12px',
+            color: red300,
+            position: 'absolute',
+            marginTop: '-25px',
+        };
+
+        return (
+            <div style={style}>
+                {this.getErrorMessage()}
             </div>
         );
     }
 }
 
+export default CheckboxValidatorElement;
+````
+````javascript
+    componentWillMount() {
+        ValidatorForm.addValidationRule('isTruthy', value => value);
+    }
+...
+    <CheckboxValidatorElement
+        ...
+        validators=['isTruthy']
+        errorMessages=['this field is required']
+        checked={value}
+        value={value} <---- you must provide this prop, it will be used only for validation
+    />
 ````
 
 ##### [Advanced usage](https://github.com/NewOldMax/react-material-ui-form-validator/wiki)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-material-ui-form-validator",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Simple validator for forms designed with material-ui components.",
   "main": "./lib/index.js",
   "scripts": {
@@ -13,7 +13,7 @@
     "url": "git+https://github.com/NewOldMax/react-material-ui-form-validator.git"
   },
   "keywords": [
-    "materia-ui",
+    "material-ui",
     "form",
     "validation"
   ],
@@ -26,7 +26,8 @@
   "peerDependencies": {
     "material-ui": ">=0.16.0 <1",
     "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "react-dom": "^15.0.0",
+    "prop-types": "^15.0.0"
   },
   "devDependencies": {
     "babelify": "7.3.0",

diff --git a/src/AutoCompleteValidator.jsx b/src/AutoCompleteValidator.jsx
@@ -8,13 +8,13 @@ export default class AutoCompleteValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <AutoComplete
                 {...rest}
                 ref={(r) => { this.input = r; }}
-                errorText={!isValid && this.getErrorMessage()}
+                errorText={(!isValid && this.getErrorMessage()) || errorText}
             />
         );
     }

diff --git a/src/DateValidator.jsx b/src/DateValidator.jsx
@@ -8,13 +8,13 @@ export default class DateValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <DatePicker
                 {...rest}
                 ref={(r) => { this.input = r; }}
-                errorText={!isValid && this.getErrorMessage()}
+                errorText={(!isValid && this.getErrorMessage()) || errorText}
             />
         );
     }

diff --git a/src/SelectValidator.jsx b/src/SelectValidator.jsx
@@ -8,13 +8,13 @@ export default class SelectValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <SelectField
                 {...rest}
                 ref={(r) => { this.input = r; }}
-                errorText={!isValid && this.getErrorMessage()}
+                errorText={(!isValid && this.getErrorMessage()) || errorText}
             />
         );
     }

diff --git a/src/TextValidator.jsx b/src/TextValidator.jsx
@@ -8,13 +8,13 @@ export default class TextValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <TextField
                 {...rest}
                 ref={(r) => { this.input = r; }}
-                errorText={!isValid && this.getErrorMessage()}
+                errorText={(!isValid && this.getErrorMessage()) || errorText}
             />
         );
     }

diff --git a/src/TimeValidator.jsx b/src/TimeValidator.jsx
@@ -8,13 +8,13 @@ export default class TimeValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <TimePicker
                 {...rest}
                 ref={(r) => { this.input = r; }}
-                errorText={!isValid && this.getErrorMessage()}
+                errorText={(!isValid && this.getErrorMessage()) || errorText}
             />
         );
     }

diff --git a/src/ValidatorComponent.jsx b/src/ValidatorComponent.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable */
 import React from 'react';
+import PropTypes from 'prop-types';
 /* eslint-enable */
 import ValidatorForm from './ValidatorForm';
 
@@ -98,19 +99,19 @@ class ValidatorComponent extends React.Component {
 }
 
 ValidatorComponent.contextTypes = {
-    form: React.PropTypes.object,
+    form: PropTypes.object,
 };
 
 ValidatorComponent.propTypes = {
-    errorMessages: React.PropTypes.oneOfType([
-        React.PropTypes.array,
-        React.PropTypes.string,
+    errorMessages: PropTypes.oneOfType([
+        PropTypes.array,
+        PropTypes.string,
     ]),
-    validators: React.PropTypes.array,
-    name: React.PropTypes.string,
-    value: React.PropTypes.oneOfType([
-        React.PropTypes.string,
-        React.PropTypes.number,
+    validators: PropTypes.array,
+    name: PropTypes.string,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
     ]),
 };
 

diff --git a/src/ValidatorForm.jsx b/src/ValidatorForm.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable */
 import React from 'react';
+import PropTypes from 'prop-types';
 /* eslint-enable */
 import Rules from './ValidationRules';
 
@@ -143,13 +144,13 @@ ValidatorForm.addValidationRule = (name, callback) => {
 };
 
 ValidatorForm.childContextTypes = {
-    form: React.PropTypes.object,
+    form: PropTypes.object,
 };
 
 ValidatorForm.propTypes = {
-    onSubmit: React.PropTypes.func.isRequired,
-    instantValidate: React.PropTypes.bool,
-    children: React.PropTypes.node,
+    onSubmit: PropTypes.func.isRequired,
+    instantValidate: PropTypes.bool,
+    children: PropTypes.node,
 };
 
 export default ValidatorForm;