Add clear method

src/components/Validation.js

@@ -43,6 +43,10 @@ export default class Validation extends Component {
         return true
     }
 
+    clear() {
+        this.renderChild(this.props.children)
+    }
+
     renderChild(child, error, helper, hint) {
         this.setState({
             child: hint === undefined ? child : cloneElement(child, {

src/core.js

@@ -9,3 +9,9 @@ export const validate = (group, mute = false) => {
 
     return result
 }
+
+export const clear = group => {
+    for (const element of elements)
+        if (element.props.groups.includes(group))
+            element.clear()
+}

src/index.js

@@ -1,3 +1,3 @@
+export { clear, validate } from './core'
 export { default as ValidationIn } from './components/ValidationIn'
 export { default as ValidationOut } from './components/ValidationOut'
-export { validate } from './core'

test/components/ValidationIn.test.js

@@ -5,9 +5,9 @@ import ValidationIn from '../../src/components/ValidationIn'
 
 const Select = () => <div>select</div>
 
-const ValidationInWrapper = props => (
-    <ValidationIn {...props}>
-        <Select name={props.name} val={props.childValue} />
+const ValidationInWrapper = ({ name, childValue, ...other }) => (
+    <ValidationIn {...other}>
+        <Select name={name} val={childValue} />
     </ValidationIn>
 )
 

test/components/ValidationOut.test.js

@@ -5,9 +5,9 @@ import ValidationOut from '../../src/components/ValidationOut'
 
 const Input = () => <div>input</div>
 
-const ValidationOutWrapper = props => (
-    <ValidationOut {...props}>
-        <Input disabled={props.disabled} />
+const ValidationOutWrapper = ({ disabled, ...other }) => (
+    <ValidationOut {...other}>
+        <Input disabled={disabled} />
     </ValidationOut>
 )
 

test/core.test.js

@@ -1,14 +1,14 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { mount } from 'enzyme'
 
 import ValidationIn from '../src/components/ValidationIn'
 import ValidationOut from '../src/components/ValidationOut'
-import { elements, validate } from '../src/core'
+import { clear, elements, validate } from '../src/core'
 
 const Textarea = () => <div>textarea</div>
 
 const CoreWrapper = props => (
-    <div>
+    <Fragment>
         <ValidationOut
             groups={props.groups0}
             validators={props.validators0}
@@ -31,7 +31,7 @@ const CoreWrapper = props => (
             validators={props.validators3}>
             <Textarea value={props.childValue3} />
         </ValidationIn>
-    </div>
+    </Fragment>
 )
 
 describe('core', () => {
@@ -559,7 +559,7 @@ describe('core', () => {
     })
 
     it('should not validate anything because nothing uses groupZ', () => {
-        const wrapper = mount(
+        mount(
             <CoreWrapper
                 groups0={['groupC']}
                 groups1={['groupA']}
@@ -590,4 +590,116 @@ describe('core', () => {
 
         expect(validate('groupZ')).toBe(true)
     })
+
+    it('should clear groups', () => {
+        const wrapper = mount(
+            <CoreWrapper
+                groups0={['groupA']}
+                groups1={['groupB']}
+                groups2={['groupA']}
+                groups3={['groupB']}
+                validators0={[{
+                    rule: value => value.length < 4,
+                    hint: 'Too long'
+                }]}
+                validators1={[{
+                    rule: value => value.startsWith('K'),
+                    hint: 'Must start with K'
+                }]}
+                validators2={[{
+                    rule: value => /^\d+$/.test(value),
+                    hint: 'Only numbers'
+                }]}
+                validators3={[{
+                    rule: value => value,
+                    hint: 'Required'
+                }]}
+                value0="Vientiane"
+                childValue1="Beirut"
+                value2="Havana"
+                childValue3=""
+            />
+        )
+
+        let textarea0 = wrapper.find(Textarea).at(0)
+        let textarea1 = wrapper.find(Textarea).at(1)
+        let textarea2 = wrapper.find(Textarea).at(2)
+        let textarea3 = wrapper.find(Textarea).at(3)
+
+        expect(textarea0.prop('error')).toBeUndefined()
+        expect(textarea0.prop('helperText')).toBeUndefined()
+
+        expect(textarea1.prop('error')).toBeUndefined()
+        expect(textarea1.prop('helperText')).toBeUndefined()
+
+        expect(textarea2.prop('error')).toBeUndefined()
+        expect(textarea2.prop('helperText')).toBeUndefined()
+
+        expect(textarea3.prop('error')).toBeUndefined()
+        expect(textarea3.prop('helperText')).toBeUndefined()
+
+        validate('groupA')
+        validate('groupB')
+
+        wrapper.update()
+
+        textarea0 = wrapper.find(Textarea).at(0)
+        textarea1 = wrapper.find(Textarea).at(1)
+        textarea2 = wrapper.find(Textarea).at(2)
+        textarea3 = wrapper.find(Textarea).at(3)
+
+        expect(textarea0.prop('error')).toBe(true)
+        expect(textarea0.prop('helperText')).toBe('Too long')
+
+        expect(textarea1.prop('error')).toBe(true)
+        expect(textarea1.prop('helperText')).toBe('Must start with K')
+
+        expect(textarea2.prop('error')).toBe(true)
+        expect(textarea2.prop('helperText')).toBe('Only numbers')
+
+        expect(textarea3.prop('error')).toBe(true)
+        expect(textarea3.prop('helperText')).toBe('Required')
+
+        clear('groupA')
+
+        wrapper.update()
+
+        textarea0 = wrapper.find(Textarea).at(0)
+        textarea1 = wrapper.find(Textarea).at(1)
+        textarea2 = wrapper.find(Textarea).at(2)
+        textarea3 = wrapper.find(Textarea).at(3)
+
+        expect(textarea0.prop('error')).toBeUndefined()
+        expect(textarea0.prop('helperText')).toBeUndefined()
+
+        expect(textarea1.prop('error')).toBe(true)
+        expect(textarea1.prop('helperText')).toBe('Must start with K')
+
+        expect(textarea2.prop('error')).toBeUndefined()
+        expect(textarea2.prop('helperText')).toBeUndefined()
+
+        expect(textarea3.prop('error')).toBe(true)
+        expect(textarea3.prop('helperText')).toBe('Required')
+
+        clear('groupB')
+
+        wrapper.update()
+
+        textarea0 = wrapper.find(Textarea).at(0)
+        textarea1 = wrapper.find(Textarea).at(1)
+        textarea2 = wrapper.find(Textarea).at(2)
+        textarea3 = wrapper.find(Textarea).at(3)
+
+        expect(textarea0.prop('error')).toBeUndefined()
+        expect(textarea0.prop('helperText')).toBeUndefined()
+
+        expect(textarea1.prop('error')).toBeUndefined()
+        expect(textarea1.prop('helperText')).toBeUndefined()
+
+        expect(textarea2.prop('error')).toBeUndefined()
+        expect(textarea2.prop('helperText')).toBeUndefined()
+
+        expect(textarea3.prop('error')).toBeUndefined()
+        expect(textarea3.prop('helperText')).toBeUndefined()
+    })
 })

test/index.test.js

@@ -1,16 +1,17 @@
 import * as module from '../src'
 import ValidationIn from '../src/components/ValidationIn'
 import ValidationOut from '../src/components/ValidationOut'
-import { validate } from '../src/core'
+import { clear, validate } from '../src/core'
 
 describe('index', () => {
-    it('should have 3 members in module', () => {
-        expect(Object.keys(module)).toHaveLength(3)
+    it('should have 4 members in module', () => {
+        expect(Object.keys(module)).toHaveLength(4)
     })
 
-    it('should have ValidationIn, ValidationOut & validate', () => {
+    it('should have ValidationIn, ValidationOut, clear & validate', () => {
         expect(module.ValidationIn).toBe(ValidationIn)
         expect(module.ValidationOut).toBe(ValidationOut)
+        expect(module.clear).toBe(clear)
         expect(module.validate).toBe(validate)
     })
 })