- client: add wrapper for input normalization on blur

Close #1314

* commit '600781bb8096e814ad0671af28be94061453c3a8':
  - client: add wrapper for input normalization on blur

client/src/components/Settings/Clients/Form.js

@@ -78,7 +78,7 @@ const renderFieldsWrapper = (placeholder, buttonTitle) =>
                             placeholder={placeholder}
                             isActionAvailable={index !== 0}
                             removeField={() => fields.remove(index)}
-                            normalize={data => data && data.trim()}
+                            normalizeOnBlur={data => data.trim()}
                         />
                     </div>
                 ))}
@@ -127,7 +127,7 @@ let Form = (props) => {
                             type="text"
                             className="form-control"
                             placeholder={t('form_client_name')}
-                            normalize={data => data && data.trim()}
+                            normalizeOnBlur={data => data.trim()}
                         />
                     </div>
 

client/src/helpers/form.js

@@ -2,13 +2,16 @@ import React, { Fragment } from 'react';
 import { Trans } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { R_IPV4, R_MAC, R_HOST, R_IPV6, R_CIDR, UNSAFE_PORTS } from '../helpers/constants';
+import { createOnBlurHandler } from './helpers';
 
 export const renderField = (props, elementType) => {
     const {
-        input, id, className, placeholder, type, disabled,
+        input, id, className, placeholder, type, disabled, normalizeOnBlur,
         autoComplete, meta: { touched, error },
     } = props;
 
+    const onBlur = event => createOnBlurHandler(event, input, normalizeOnBlur);
+
     const element = React.createElement(elementType, {
         ...input,
         id,
@@ -17,6 +20,7 @@ export const renderField = (props, elementType) => {
         autoComplete,
         disabled,
         type,
+        onBlur,
     });
     return (
         <Fragment>
@@ -35,6 +39,7 @@ renderField.propTypes = {
     type: PropTypes.string,
     disabled: PropTypes.bool,
     autoComplete: PropTypes.bool,
+    normalizeOnBlur: PropTypes.func,
 };
 
 export const renderTextareaField = props => renderField(props, 'textarea');
@@ -52,7 +57,11 @@ export const renderGroupField = ({
     isActionAvailable,
     removeField,
     meta: { touched, error },
-}) => (
+    normalizeOnBlur,
+}) => {
+    const onBlur = event => createOnBlurHandler(event, input, normalizeOnBlur);
+
+    return (
         <Fragment>
             <div className="input-group">
                 <input
@@ -63,6 +72,7 @@ export const renderGroupField = ({
                     className={className}
                     disabled={disabled}
                     autoComplete={autoComplete}
+                    onBlur={onBlur}
                 />
                 {isActionAvailable &&
                 <span className="input-group-append">
@@ -83,6 +93,7 @@ export const renderGroupField = ({
             (error && <span className="form__message form__message--error">{error}</span>)}
         </Fragment>
     );
+};
 
 export const renderRadioField = ({
     input, placeholder, disabled, meta: { touched, error },

client/src/helpers/helpers.js

@@ -373,3 +373,19 @@ export const getParamsForClientsSearch = (data, param) => {
             return acc;
         }, {});
 };
+
+/**
+ * Creates onBlur handler that can normalize input if normalization function is specified
+ *
+ * @param {Object} event
+ * @param {Object} event.target
+ * @param {string} event.target.value
+ * @param {Object} input
+ * @param {function} input.onBlur
+ * @param {function} [normalizeOnBlur]
+ * @returns {function}
+ */
+export const createOnBlurHandler = (event, input, normalizeOnBlur) => (
+    normalizeOnBlur
+        ? input.onBlur(normalizeOnBlur(event.target.value))
+        : input.onBlur());