- 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,37 +57,43 @@ export const renderGroupField = ({
     isActionAvailable,
     removeField,
     meta: { touched, error },
-}) => (
+    normalizeOnBlur,
-    <Fragment>
+}) => {
-        <div className="input-group">
+    const onBlur = event => createOnBlurHandler(event, input, normalizeOnBlur);
-            <input
+
-                {...input}
+    return (
-                id={id}
+        <Fragment>
-                placeholder={placeholder}
+            <div className="input-group">
-                type={type}
+                <input
-                className={className}
+                    {...input}
-                disabled={disabled}
+                    id={id}
-                autoComplete={autoComplete}
+                    placeholder={placeholder}
-            />
+                    type={type}
-            {isActionAvailable &&
+                    className={className}
-            <span className="input-group-append">
+                    disabled={disabled}
-                    <button
+                    autoComplete={autoComplete}
-                        type="button"
+                    onBlur={onBlur}
-                        className="btn btn-secondary btn-icon"
+                />
-                        onClick={removeField}
+                {isActionAvailable &&
-                    >
+                <span className="input-group-append">
-                        <svg className="icon icon--close">
+                        <button
-                            <use xlinkHref="#cross" />
+                            type="button"
-                        </svg>
+                            className="btn btn-secondary btn-icon"
-                    </button>
+                            onClick={removeField}
-                </span>
+                        >
-            }
+                            <svg className="icon icon--close">
-        </div>
+                                <use xlinkHref="#cross" />
-        {!disabled &&
+                            </svg>
-        touched &&
+                        </button>
-        (error && <span className="form__message form__message--error">{error}</span>)}
+                    </span>
-    </Fragment>
+                }
-);
+            </div>
+            {!disabled &&
+            touched &&
+            (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());