improve handleBlur function

packages/strapi-plugin-setings-manager/admin/src/components/InputText/index.js

@@ -1,7 +1,26 @@
 /**
 *
 * InputText
+* Customization
+*   - deactivateErrorHighlight: bool
+*     allow the user to remove bootstrap class 'has-danger' on the inputText
+*   - customBootstrapClass : string
+*     overrides the default 'col-md-6' on the inputText
+*   - handleBlur: function
+*     overrides the default input validations
+*   - errors : array
+*     custom errors if set to false it deactivate error display
 *
+* Required
+*  - name : string
+*  - handleChange : function
+*  - value : string
+*  - validations : object
+*
+* Optionnal
+* - description : input description
+* - handleFocus : function
+* - placeholder : string if set to "" nothing will display
 */
 
 import React from 'react';
@@ -10,27 +29,22 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import styles from './styles.scss';
 
-/*
-* InputText
-* A customizable input
-* Settings :
-* - deactivateErrorHighlight
-* - noBootstrap // remove bootStrapClass
-* - overrideBootstrapGrid
-* - overrideBootstrapCol
-* - handleBur : override default handleBlur function
-*/
-
-
 
 class InputText extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
     this.state = {
       errors: false,
+      hasInitialValue: false,
     };
   }
 
+  componentDidMount() {
+    if (this.props.value.length > 0) {
+      this.setState({ hasInitialValue: true });
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.errors !== nextProps.errors) {
       const errors = _.isEmpty(nextProps.errors) ? nextProps.errors === true ? [] : false : nextProps.errors;
@@ -39,10 +53,13 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
   }
 
   handleBlur = ({ target }) => {
-    // validates basic string validations
-    // add custom logic here such as alerts...
-    const errors = this.validate(target.value);
-    this.setState({ errors });
+    // prevent error display if input is initially empty
+    if (target.value.length > 0 || this.state.hasInitialValue) {
+      // validates basic string validations
+      // add custom logic here such as alerts...
+      const errors = this.validate(target.value);
+      this.setState({ errors });
+    }
   }
 
   // Basic string validations
@@ -88,13 +105,9 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
     // override default onBlur
     const handleBlur = this.props.handleBlur || this.handleBlur;
     // override bootStrapClass
-    const bootStrapClass = !this.props.noBootstrap ?
-      `col-${this.props.overrideBootstrapGrid || 'md'}-${this.props.overrideBootstrapCol || '6'}`
-      : '';
+    const bootStrapClass = this.props.customBootstrapClass ? this.props.customBootstrapClass : 'col-md-6';
     // set error class with override possibility
-    const bootStrapClassDanger = !this.props.noBootstrap && !this.props.deactivateErrorHighlight && this.state.errors ? 'has-danger' : '';
-    // use bootstrap class to display error
-    const formError = !this.props.noBootstrap ? 'form-control-feedback' : '';
+    const bootStrapClassDanger = !this.props.deactivateErrorHighlight && this.state.errors ? 'has-danger' : '';
     const placeholder = this.props.placeholder || `Change ${this.props.name} field`;
     return (
       <div className={`${styles.inputText} ${bootStrapClass} ${bootStrapClassDanger}`}>
@@ -102,7 +115,7 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
         <input
           name={this.props.name}
           onBlur={handleBlur}
-          onFocus={this.props.onFocus}
+          onFocus={this.props.handleFocus}
           onChange={this.props.handleChange}
           value={inputValue}
           type="text"
@@ -111,7 +124,7 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
         />
         <small>{this.props.inputDescription}</small>
         {_.map(this.state.errors, (error, key) => (
-          <div key={key} className={formError}>{error}</div>
+          <div key={key} className="form-control-feedback">{error}</div>
         ))}
       </div>
     );
@@ -126,11 +139,10 @@ InputText.propTypes = {
   deactivateErrorHighlight: React.PropTypes.bool,
   handleBlur: React.PropTypes.func,
   handleChange: React.PropTypes.func.isRequired,
+  handleFocus: React.PropTypes.func,
   inputDescription: React.PropTypes.string,
   name: React.PropTypes.string.isRequired,
-  noBootstrap: React.PropTypes.bool,
-  overrideBootstrapGrid: React.PropTypes.string,
-  overrideBootstrapCol: React.PropTypes.string,
+  customBootstrapClass: React.PropTypes.string,
   placeholder: React.PropTypes.string,
   value: React.PropTypes.string.isRequired,
   validations: React.PropTypes.object.isRequired,