diff --git a/src/components/Validation.js b/src/components/Validation.js
index 260768a..d78c3e3 100644
--- a/src/components/Validation.js
+++ b/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, {
diff --git a/src/core.js b/src/core.js
index 6393f75..33beb4a 100644
--- a/src/core.js
+++ b/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()
+}
diff --git a/src/index.js b/src/index.js
index 22cfb6e..cd416f7 100644
--- a/src/index.js
+++ b/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'
diff --git a/test/components/ValidationIn.test.js b/test/components/ValidationIn.test.js
index b01c2c7..3e4ea95 100644
--- a/test/components/ValidationIn.test.js
+++ b/test/components/ValidationIn.test.js
@@ -5,9 +5,9 @@ import ValidationIn from '../../src/components/ValidationIn'
const Select = () =>
select
-const ValidationInWrapper = props => (
-
-
+const ValidationInWrapper = ({ name, childValue, ...other }) => (
+
+
)
diff --git a/test/components/ValidationOut.test.js b/test/components/ValidationOut.test.js
index 207d179..b77b969 100644
--- a/test/components/ValidationOut.test.js
+++ b/test/components/ValidationOut.test.js
@@ -5,9 +5,9 @@ import ValidationOut from '../../src/components/ValidationOut'
const Input = () => input
-const ValidationOutWrapper = props => (
-
-
+const ValidationOutWrapper = ({ disabled, ...other }) => (
+
+
)
diff --git a/test/core.test.js b/test/core.test.js
index 3631ed1..e99d629 100644
--- a/test/core.test.js
+++ b/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 = () => textarea
const CoreWrapper = props => (
-
+
(
validators={props.validators3}>
-
+
)
describe('core', () => {
@@ -559,7 +559,7 @@ describe('core', () => {
})
it('should not validate anything because nothing uses groupZ', () => {
- const wrapper = mount(
+ mount(
{
expect(validate('groupZ')).toBe(true)
})
+
+ it('should clear groups', () => {
+ const wrapper = mount(
+ 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()
+ })
})
diff --git a/test/index.test.js b/test/index.test.js
index 592c641..8ff716d 100644
--- a/test/index.test.js
+++ b/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)
})
})