Merge branch 'master' into dev

# Conflicts: # src/js/Inputs/Checkbox.tsx # src/js/Inputs/Textarea.tsx # src/js/Inputs/Textbox.tsx
edwardfxiao · Mar 7, 2019 · 513d7bf · 513d7bf
2 parents dcc7659 + 92e693c
commit 513d7bf
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 # react-inputs-validation
-[![npm version](https://badge.fury.io/js/react-inputs-validation.svg)](https://badge.fury.io/js/react-inputs-validation) [![Build Status](https://travis-ci.org/edwardfhsiao/react-inputs-validation.svg?branch=master)](https://travis-ci.org/edwardfhsiao/react-inputs-validation) [![react-inputs-validation](http://img.shields.io/npm/dm/react-inputs-validation.svg)](https://www.npmjs.com/package/react-inputs-validation) [![Package Quality](http://npm.packagequality.com/shield/react-inputs-validation.svg)](http://packagequality.com/#?package=react-inputs-validation) [![Coverage Status](https://coveralls.io/repos/github/edwardfhsiao/react-inputs-validation/badge.svg?branch=master)](https://coveralls.io/github/edwardfhsiao/react-inputs-validation?branch=master) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-inputs-validation.svg) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/edwardfhsiao/react-inputs-validation/master/LICENSE)
+[![npm version](https://badge.fury.io/js/react-inputs-validation.svg)](https://badge.fury.io/js/react-inputs-validation) [![Build Status](https://travis-ci.org/edwardfhsiao/react-inputs-validation.svg?branch=master)](https://travis-ci.org/edwardfhsiao/react-inputs-validation) [![react-inputs-validation](http://img.shields.io/npm/dm/react-inputs-validation.svg)](https://www.npmjs.com/package/react-inputs-validation) [![Package Quality](https://npm.packagequality.com/shield/react-inputs-validation.svg)](http://packagequality.com/#?package=react-inputs-validation) [![Coverage Status](https://coveralls.io/repos/github/edwardfhsiao/react-inputs-validation/badge.svg?branch=master)](https://coveralls.io/github/edwardfhsiao/react-inputs-validation?branch=master) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-inputs-validation.svg) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/edwardfhsiao/react-inputs-validation/master/LICENSE)
 [![Join the chat at https://gitter.im/react-inputs-validation/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-inputs-validation/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 A react inputs validation component.
-# <img src="https://edwardxiao.com/react-inputs-validation.gif" />
+# <img src="https://raw.githubusercontent.com/edwardfhsiao/react-inputs-validation/master/react-inputs-validation.gif" />
 
 # Online Demo
 <a href="https://edwardfhsiao.github.io/react-inputs-validation/">Online demo example</a>
@@ -171,10 +171,10 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
 |customStyleWrapper                |  Opt  |  Obj   |                                             |  {}        |
 |customStyleContainer              |  Opt  |  Obj   |                                             |  {}        |
 |customStyleOptionListItem         |  Opt  |  Obj   |                                             |  {}        |
-|**onBlur**                       |**Opt.**|**Func**                  |**In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.**                                                                                                            |**none**     |
-|**onChange**                      |**Req.**|**Func**                  |**(val, e) => {}. Will return the value.**|**(val, e)=>{}**   |
-|onFocus                           |*Opt.*  |Func                      |                                                                                                            |none     |
-|onClick                           |*Opt.*  |Func                      |                                                                                                            |none     |
+|**onBlur**                       |**Opt**|**Func**                  |**In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.**                                                                                                            |**none**     |
+|**onChange**                      |**Req**|**Func**                  |**(val, e) => {}. Will return the value.**|**(val, e)=>{}**   |
+|onFocus                           |Opt  |Func                      |                                                                                                            |none     |
+|onClick                           |Opt  |Func                      |                                                                                                            |none     |
 |**validationOption**              |**Opt**|**obj** |**validationOption object, see below**|**{}**      |
 |**validationOption.name**         |**Opt**|**Str** |**To display in the Error message. i.e Please enter your ${name}.**|**""**      |
 |**validationOption.check**        |**Opt**|**Bool**|**To determin if you need to validate.**|**true**    |
@@ -242,7 +242,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
 |id                                |  Opt  |  Str   |                                             |  ""        |
 |name                              |  Opt  |  Str   |                                             |  ""        |
 |value                             |  Opt  |  Str   |                                             |  ""        |
-|checked                           |  Opt  |  Bool  |                                             |  false      |
+|**checked**                       |**Req**|**Bool**|**Recommend using the value returned from ```onChange``` callback, which is ```isChecked```.**                                            |**false**   |
 |disabled                          |  Opt  |  Bool  |                                             |  false     |
 |**validate**                      |**Opt**|**Bool**|**If you have a submit button and trying to validate all the inputs of your form at once, toggle it to true, then it will validate the field and pass the result via the "validationCallback" you provide.**|**false**   |
 |**validationCallback**           |**Opt**|**Func**|**Return the validation result.**|**none**    |
@@ -252,11 +252,11 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
 |customStyleWrapper                |  Opt  |  Obj   |                                             |  {}        |
 |customStyleInputBox               |  Opt  |  Obj   |                                             |  {}        |
 |customStyleContainer              |  Opt  |  Obj   |                                             |  {}        |
-|**onBlur**                       |**Opt.**|**Func**                  |**In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.**                                                                                                            |**none**     |
-|**onChange**                      |**Req.**|**Func**                  |**(isChecked, e) => {}. Will return the value.**|**(val, e)=>{}**   |
-|onFocus                           |*Opt.*  |Func                      |                                                                                                            |none     |
-|onClick                           |*Opt.*  |Func                      |                                                                                                            |none     |
-|**labelHtml**                     |*Req.*  |Html                      |                                                                                                            |none     |
+|**onBlur**                       |**Opt**|**Func**                  |**In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.**                                                                                                            |**none**     |
+|**onChange**                      |**Req**|**Func**                  |**(isChecked, e) => {}. Will return the value.**|**(val, e)=>{}**   |
+|onFocus                           |Opt  |Func                      |                                                                                                            |none     |
+|onClick                           |Opt  |Func                      |                                                                                                            |none     |
+|**labelHtml**                     |Req  |Html                      |                                                                                                            |none     |
 |**validationOption**              |**Opt**|**obj** |**validationOption object, see below**|**{}**      |
 |**validationOption.name**         |**Opt**|**Str** |**To display in the Error message. i.e Please enter your ${name}.**|**""**      |
 |**validationOption.check**        |**Opt**|**Bool**|**To determin if you need to validate.**|**true**    |
@@ -274,7 +274,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
   id={'agreement'} //Optional.[String].Default: "".  Input ID.
   name={'agreement'} //Optional.[String].Default: "". Input name
   value={agreement} //Required.[String].Default: "".
-  checked={false} //Optional.[Bool].Default: false.
+  checked={isAgreementChecked} //Required.[Bool].Default: false.
   disabled={false} //Optional.[Bool].Default: false.
   validate={validate} //Optional.[Bool].Default: false. If you have a submit button and trying to validate all the inputs of your form at once, toggle it to true, then it will validate the field and pass the result via the "validationCallback" you provide.
   validationCallback={res =>
@@ -338,7 +338,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
 |customStyleContainer              |  Opt  |  Obj   |                                             |  {}        |
 |customStyleOptionListContainer    |  Opt  |  Obj   |                                             |  {}        |
 |customStyleOptionListItem         |  Opt  |  Obj   |                                             |  {}        |
-|**onBlur**                       |**Opt.**|**Func**                  |**In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.**                                                                                                            |**none**     |
+|**onBlur**                       |**Opt**|**Func**                  |**In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.**                                                                                                            |**none**     |
 |**onChange**                      |**Req**|**Func**|                                             |**(val, e) => {}**|
 |onFocus                           |  Opt  |  Func  |                                             |  none      |
 |onClick                           |  Opt  |  Func  |                                             |  none      |

diff --git a/lib/components/Checkbox.js b/lib/components/Checkbox.js
@@ -134,7 +134,7 @@ function (_React$Component) {
   _createClass(Index, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (this.state.validate === true && prevState.validate === false) {
+      if (this.state.validate !== prevState.validate) {
         this.check();
       }
     }
@@ -193,7 +193,6 @@ function (_React$Component) {
       var onFocus = this.props.onFocus;
 
       if (onFocus) {
-        this.check();
         onFocus(e);
       }
     }
@@ -280,10 +279,10 @@ function (_React$Component) {
           msg = _this$state.msg,
           checked = _this$state.checked,
           successMsg = _this$state.successMsg;
-      var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss['checkbox__wrapper'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
-      var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss['checkbox__container'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
-      var boxClass = "".concat(classNameInputBox, " ").concat(reactInputsValidationCss['checkbox__box'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
-      var labelClass = "".concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
+      var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss['checkbox__wrapper'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
+      var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss['checkbox__container'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
+      var boxClass = "".concat(classNameInputBox, " ").concat(reactInputsValidationCss['checkbox__box'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
+      var labelClass = "".concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
       var errMsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(err && reactInputsValidationCss['error']);
       var successMsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(!err && reactInputsValidationCss['success']);
       var msgHtml;
@@ -297,7 +296,7 @@ function (_React$Component) {
         }, msg);
       }
 
-      if (showMsg && !err && successMsg) {
+      if (showMsg && !err && typeof successMsg !== 'undefined') {
         msgHtml = React.createElement("div", {
           className: successMsgClass
         }, successMsg);
@@ -324,7 +323,7 @@ function (_React$Component) {
         type: "checkbox",
         className: reactInputsValidationCss['checkbox__input'],
         value: String(value),
-        checked: checked,
+        defaultChecked: checked,
         disabled: disabled,
         onChange: this.onChange,
         ref: this.input
@@ -335,16 +334,18 @@ function (_React$Component) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      // TODO: This was from componentWillReceiveProps()
-      // if (this.props.checked != nextProps.checked) {
-      //   this.setState({ checked: nextProps.checked });
-      // }
-      if (nextProps.validate === true && prevState.validate === false) {
+      if (nextProps.validate !== prevState.validate) {
         return {
           validate: nextProps.validate
         };
       }
 
+      if (nextProps.checked !== prevState.checked) {
+        return {
+          checked: nextProps.checked
+        };
+      }
+
       return null;
     }
   }]);