aligned with established project structure

src/app/components/molecules/common/FormFieldContainer/FormFieldContainer.js

@@ -0,0 +1,181 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import InputField from '../../../atoms/InputField'
+import SelectOption from '../../../atoms/SelectOption'
+
+/**
+ * INSERT_DESCRIPTION_HERE
+ */
+
+class FormFieldContainer extends React.Component {
+    constructor(props) {
+        super(props)
+        const componentKey = this.props.propsData && this.props.propsData.id
+        const passedValue = this.props.value || (this.props.propsData && this.props.propsData.value)
+        this.state = {
+            error: false,
+            errorMessage: null
+        }
+        this.props.updateFormValues({
+            formValues: {
+                // ...this.props.formValues,
+                [componentKey]: passedValue ? passedValue : ''
+            }
+        })
+        this.props.updateFormErrors({
+            formErrors: {
+                // ...this.props.formErrors,
+                [componentKey]: ''
+            }
+        })
+        this.onChangeHandler = this.onChangeHandler.bind(this)
+        this.onBlurHandler = this.onBlurHandler.bind(this)
+        this.onFocusHandler = this.onFocusHandler.bind(this)
+    }
+
+    /**
+     * validateFormField - validates the input field values
+     * @param  {object} event js event object
+     * @param  {object} validationObj fieldinput data as props
+     */
+    validateFormField(e, validationObj) {
+        const {propsData, formErrors, formValues, updateFormErrors, updateFormValues} = this.props
+        const inputValue = e.target.value && e.target.value
+        let error = false
+        let errorMessage = ''
+        const componentKey = propsData.id
+        const validRegex =
+            validationObj.dataRuleRegex &&
+            new RegExp(validationObj.dataRuleRegex.regex).test(inputValue)
+        const poValidRegex =
+            e.target.id === 'address1' &&
+            validationObj.dataRuleRegex.po_regex &&
+            new RegExp(validationObj.dataRuleRegex.po_regex, 'i').test(inputValue)
+
+        if (e.target.tagName && e.target.tagName === 'SELECT') {
+            if (
+                validationObj.required.isRequired &&
+                e.target.selectedIndex === 0 &&
+                !validationObj.required.preSelected
+            ) {
+                error = true
+                errorMessage = validationObj.required.error_message
+            }
+        } else if (e.target.tagName && e.target.tagName === 'INPUT') {
+            if (validationObj.required.isRequired) {
+                if (inputValue.trim('') === '') {
+                    error = true
+                    errorMessage = validationObj.required.error_message
+                } else if (validationObj.dataRuleRegex && !validRegex) {
+                    error = true
+                    errorMessage = validationObj.dataRuleRegex.error_message
+                } else if (validationObj.dataRuleRegex && poValidRegex) {
+                    error = true
+                    errorMessage = validationObj.dataRuleRegex.po_error_message
+                }
+            }
+        } else {
+            error = false
+            errorMessage = null
+        }
+
+        this.setState({
+            error
+        })
+
+        updateFormErrors({
+            formErrors: {
+                ...formErrors,
+                [componentKey]: errorMessage
+            }
+        })
+
+        updateFormValues({
+            formValues: {
+                ...formValues,
+                [componentKey]: inputValue
+            }
+        })
+
+        return error
+    }
+
+    onChangeHandler(event) {
+        const value = event.target.value
+        this.setState({
+            value
+        })
+    }
+
+    onFocusHandler(event) {
+        this.setState({
+            oldValue: event.target.value
+        })
+    }
+
+    onBlurHandler(validation, customBlurHandler, e) {
+        e.oldValue = this.state.oldValue
+        const {customBlurFormatter} = this.props
+        const isError = this.validateFormField(e, validation)
+        if (!isError) {
+            if (customBlurHandler && typeof customBlurHandler === 'function') {
+                customBlurHandler(e)
+            }
+            if (customBlurFormatter && typeof customBlurFormatter === 'function') {
+                this.setState({value: customBlurFormatter(e)})
+            }
+        }
+    }
+
+    render() {
+        const {customBlurHandler, formErrors, propsData} = this.props
+        const {elementType} = propsData
+        const errorMessage = formErrors && formErrors[propsData.id]
+        const meta = {
+            ...this.props.propsData,
+            className: this.state.error ? 'error' : '',
+            error: this.state.error || errorMessage,
+            errorMessage,
+            handlers: {
+                onBlurHandler: this.onBlurHandler,
+                customBlurHandler,
+                onChangeHandler: this.onChangeHandler,
+                onFocusHandler: this.onFocusHandler
+            },
+            fieldValues: {
+                propsValue: this.props.value,
+                stateValue: this.state.value
+            }
+        }
+
+        /**
+         * switch function - returns HTML Tag depending upon the requirement
+         * @param  {string} elementType - element type e.g. input,select
+         */
+        switch (elementType) {
+            case 'input':
+                return <InputField meta={meta} />
+            case 'select':
+                return <SelectOption meta={meta} />
+            default:
+                return <input />
+        }
+    }
+}
+
+FormFieldContainer.propTypes = {
+    propsData: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    customBlurHandler: PropTypes.func,
+    customBlurFormatter: PropTypes.func,
+    onFocus: PropTypes.func,
+    value: PropTypes.string,
+    formValues: PropTypes.object,
+    formErrors: PropTypes.object,
+    selectedCreditCard: PropTypes.object,
+    updateFormValues: PropTypes.func,
+    updateFormErrors: PropTypes.func
+}
+
+export default FormFieldContainer