- nextProps.validate === true && prevState.validate === false -> nextProps.validate !== prevState.validate. Fix for issue #17.

Edward Xiao · Edward Xiao · commit 57a06c13af84 · 2019-01-31T21:40:23.000+08:00
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();
       }
     }
@@ -335,7 +335,7 @@ function (_React$Component) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      if (nextProps.validate === true && prevState.validate === false) {
+      if (nextProps.validate !== prevState.validate) {
         return {
           validate: nextProps.validate
         };
diff --git a/lib/components/Radiobox.js b/lib/components/Radiobox.js
@@ -140,7 +140,8 @@ 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) {
+        debugger;
         this.check();
       }
     }
@@ -336,7 +337,7 @@ function (_React$Component) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      if (nextProps.validate === true && prevState.validate === false) {
+      if (nextProps.validate !== prevState.validate) {
         return {
           validate: nextProps.validate
         };
diff --git a/lib/components/Select.js b/lib/components/Select.js
@@ -202,7 +202,7 @@ function (_React$Component) {
         }
       }
 
-      if (this.state.validate === true && prevState.validate === false) {
+      if (this.state.validate !== prevState.validate) {
         this.check();
       }
     }
@@ -731,7 +731,7 @@ function (_React$Component) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      if (nextProps.validate === true && prevState.validate === false) {
+      if (nextProps.validate !== prevState.validate) {
         return {
           validate: nextProps.validate
         };
diff --git a/lib/components/Textarea.js b/lib/components/Textarea.js
@@ -164,7 +164,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();
       }
     }
@@ -431,7 +431,7 @@ function (_React$Component) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      if (nextProps.validate === true && prevState.validate === false) {
+      if (nextProps.validate !== prevState.validate) {
         return {
           validate: nextProps.validate
         };
diff --git a/lib/components/Textbox.js b/lib/components/Textbox.js
@@ -166,7 +166,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();
       }
     }
@@ -526,7 +526,7 @@ function (_React$Component) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      if (nextProps.validate === true && prevState.validate === false) {
+      if (nextProps.validate !== prevState.validate) {
         return {
           validate: nextProps.validate
         };
diff --git a/lib/react-inputs-validation.js b/lib/react-inputs-validation.js
diff --git a/lib/react-inputs-validation.js.map b/lib/react-inputs-validation.js.map
diff --git a/lib/react-inputs-validation.min.js b/lib/react-inputs-validation.min.js
diff --git a/lib/react-inputs-validation.min.js.map b/lib/react-inputs-validation.min.js.map
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "react-inputs-validation",
-    "version": "2.1.5",
-    "description": "a react inputs validation component",
+    "version": "2.1.6",
+    "description": "React inputs validation component",
     "main": "index.js",
     "repository": {
         "type": "git",
diff --git a/src/__tests__/Radiobox.js b/src/__tests__/Radiobox.js
@@ -136,7 +136,7 @@ describe('Radiobox component', () => {
     const wrapper = mount(<Radiobox optionList={OPTION_LIST} />);
     const instance = wrapper.instance();
     instance.check = jest.fn();
-    wrapper.setState({ validate: true });
+    wrapper.setProps({ validate: true });
     expect(instance.check).toHaveBeenCalled();
   });
 
diff --git a/src/js/Inputs/Checkbox.tsx b/src/js/Inputs/Checkbox.tsx
@@ -127,7 +127,7 @@ class Index extends React.Component<Props, State> {
     this.input = React.createRef();
   }
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    if (nextProps.validate === true && prevState.validate === false) {
+    if (nextProps.validate !== prevState.validate) {
       return {
         validate: nextProps.validate,
       };
@@ -140,7 +140,7 @@ class Index extends React.Component<Props, State> {
     return null;
   }
   componentDidUpdate(prevProps: Props, prevState: State) {
-    if (this.state.validate === true && prevState.validate === false) {
+    if (this.state.validate !== prevState.validate) {
       this.check();
     }
   }
@@ -243,13 +243,13 @@ class Index extends React.Component<Props, State> {
     const containerClass = `${classNameContainer} ${reactInputsValidationCss['checkbox__container']} ${checked && reactInputsValidationCss['checked']} ${err &&
       reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;
 
-    const boxClass = `${classNameInputBox} ${reactInputsValidationCss['checkbox__box']} ${err && reactInputsValidationCss['error']} ${checked && reactInputsValidationCss['checked']} ${typeof successMsg !== 'undefined' &&
+    const boxClass = `${classNameInputBox} ${reactInputsValidationCss['checkbox__box']} ${err && reactInputsValidationCss['error']} ${checked &&
+      reactInputsValidationCss['checked']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;
+
+    const labelClass = `${checked && reactInputsValidationCss['checked']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
       !err &&
       reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;
 
-    const labelClass = `${checked && reactInputsValidationCss['checked']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled &&
-      reactInputsValidationCss['disabled']}`;
-
     const errMsgClass = `${reactInputsValidationCss['msg']} ${err && reactInputsValidationCss['error']}`;
     const successMsgClass = `${reactInputsValidationCss['msg']} ${!err && reactInputsValidationCss['success']}`;
 
diff --git a/src/js/Inputs/Radiobox.tsx b/src/js/Inputs/Radiobox.tsx
@@ -136,7 +136,7 @@ class Index extends React.Component<Props, State> {
   }
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    if (nextProps.validate === true && prevState.validate === false) {
+    if (nextProps.validate !== prevState.validate) {
       return {
         validate: nextProps.validate,
       };
@@ -154,7 +154,8 @@ class Index extends React.Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
-    if (this.state.validate === true && prevState.validate === false) {
+    if (this.state.validate !== prevState.validate) {
+      debugger;
       this.check();
     }
   }
@@ -257,8 +258,9 @@ class Index extends React.Component<Props, State> {
       reactInputsValidationCss['radiobox__input']
     } ${disabled && reactInputsValidationCss['disabled']}`;
 
-    const labelClass = `${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${reactInputsValidationCss['radiobox__label']} ${disabled &&
-      reactInputsValidationCss['disabled']}`;
+    const labelClass = `${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${
+      reactInputsValidationCss['radiobox__label']
+    } ${disabled && reactInputsValidationCss['disabled']}`;
 
     const optionListItemClass = `${classNameOptionListItem} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${
       reactInputsValidationCss['radiobox__item']
diff --git a/src/js/Inputs/Select.tsx b/src/js/Inputs/Select.tsx
@@ -182,7 +182,7 @@ class Index extends React.Component<Props, State> {
   }
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    if (nextProps.validate === true && prevState.validate === false) {
+    if (nextProps.validate !== prevState.validate) {
       return {
         validate: nextProps.validate,
       };
@@ -210,7 +210,7 @@ class Index extends React.Component<Props, State> {
         this.resetCurrentFocus();
       }
     }
-    if (this.state.validate === true && prevState.validate === false) {
+    if (this.state.validate !== prevState.validate) {
       this.check();
     }
   }
@@ -519,8 +519,9 @@ class Index extends React.Component<Props, State> {
     const containerClass = `${classNameContainer} ${reactInputsValidationCss['select__container']} ${err && reactInputsValidationCss['error']} ${show &&
       reactInputsValidationCss['show']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;
 
-    const inputClass = `${reactInputsValidationCss['select__input']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled &&
-      reactInputsValidationCss['disabled']};`;
+    const inputClass = `${reactInputsValidationCss['select__input']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
+      !err &&
+      reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;
 
     const selectClass = `${classNameSelect} ${reactInputsValidationCss['ellipsis']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
       !err &&
diff --git a/src/js/Inputs/Textarea.tsx b/src/js/Inputs/Textarea.tsx
@@ -155,7 +155,7 @@ class Index extends React.Component<Props, State> {
   }
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    if (nextProps.validate === true && prevState.validate === false) {
+    if (nextProps.validate !== prevState.validate) {
       return {
         validate: nextProps.validate,
       };
@@ -164,7 +164,7 @@ class Index extends React.Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
-    if (this.state.validate === true && prevState.validate === false) {
+    if (this.state.validate !== prevState.validate) {
       this.check();
     }
   }
diff --git a/src/js/Inputs/Textbox.tsx b/src/js/Inputs/Textbox.tsx
@@ -157,7 +157,7 @@ class Index extends React.Component<Props, State> {
   }
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    if (nextProps.validate === true && prevState.validate === false) {
+    if (nextProps.validate !== prevState.validate) {
       return {
         validate: nextProps.validate,
       };
@@ -166,7 +166,7 @@ class Index extends React.Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
-    if (this.state.validate === true && prevState.validate === false) {
+    if (this.state.validate !== prevState.validate) {
       this.check();
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -202,7 +202,7 @@ function (_React$Component) {`
`202`	`202`	`}`
`203`	`203`	`}`
`204`	`204`
`205`		`- if (this.state.validate === true && prevState.validate === false) {`
	`205`	`+ if (this.state.validate !== prevState.validate) {`
`206`	`206`	`this.check();`
`207`	`207`	`}`
`208`	`208`	`}`
`@@ -731,7 +731,7 @@ function (_React$Component) {`
`731`	`731`	`}], [{`
`732`	`732`	`key: "getDerivedStateFromProps",`
`733`	`733`	`value: function getDerivedStateFromProps(nextProps, prevState) {`
`734`		`- if (nextProps.validate === true && prevState.validate === false) {`
	`734`	`+ if (nextProps.validate !== prevState.validate) {`
`735`	`735`	`return {`
`736`	`736`	`validate: nextProps.validate`
`737`	`737`	`};`