import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';

import ErrorText from './ErrorText';
import HelpText from './HelpText';

class ValidationText extends PureComponent {
  render() {
    const { error, help, inverse } = this.props;

    return (
      <Fragment>
        {error ? (
          <ErrorText inverse={inverse}>{error}</ErrorText>
        ) : (
          help && <HelpText inverse={inverse}>{help}</HelpText>
        )}
      </Fragment>
    );
  }
}

ValidationText.propTypes = {
  error: PropTypes.node,
  help: PropTypes.node,
  inverse: PropTypes.bool,
};

export default ValidationText;

@@ -26,18 +26,8 @@
 nent
-, Fragment
  %7D f
@@ -147,16 +147,57 @@
 lpText';
+%0Aimport WarningText from './WarningText';
 %0A%0Aclass 
@@ -271,97 +271,77 @@
 or, 
-help, inverse %7D = this.props;%0A%0A    return (%0A      %3CFragment%3E%0A        %7Berror ? (%0A         
+inverse, help, warning %7D = this.props;%0A%0A    if (error) %7B%0A      return
  %3CEr
@@ -389,40 +389,140 @@
 ext%3E
+;
 %0A    
+%7D%0A%0A
     
-) : (
+if (warning) %7B%0A      return %3CWarningText inverse=%7Binverse%7D%3E%7Bwarning%7D%3C/WarningText%3E;
 %0A    
+%7D%0A%0A
     
-  help &&
+if (help) %7B%0A      return
  %3CHe
@@ -567,43 +567,32 @@
 ext%3E
+;
 %0A
-   
     
- )
 %7D%0A
- 
+%0A
     
- %3C/Fragment%3E%0A    )
+return null
 ;%0A  
@@ -701,16 +701,43 @@
 s.bool,%0A
+  warning: PropTypes.node,%0A
 %7D;%0A%0Aexpo

add 'warning' prop & implement WarningText