Form Field Error

Description

A react component for form fields errors.

Props

• isVisible - (Boolean, Required) - Determines if the component is visible.
• position - (String, Required) - The position of the component.
• onClick - (Function, Optional) - The function to invoke when it's clicked.
• text - (Node, Required) - The text to display.
• textStyle - (Object, Optional) - Extra styles to apply to the text element.
• containerStyle - (Object, Optional) - Extra style to apply to the container element.
• containerClassName - (String, Optional) - An alternative className to use on the container element,

Usage

import React from "react"
import PropTypes from "prop-types"
import FormFieldError from "@alexseitsinger/form-field-error"
import { connect } from "react-redux"

import { Form, FormField, Input, SubmitButton } from "./elements"
import {
	setFormSubmitted,
	setNameFieldEmpty,
	onFormCompleted
} from "../../actions/form"

function Form({ dispatch, nameFieldEmpty, formSubmitted }) {
	return (
		<Form
			onSubmit={(event) => {
				event.stopPropagation()
				event.preventDefault()
				const form = event.target
				const input = form.querySelector("input[name=name")
				dispatch(setFormSubmitted(true))
				if (!input.value.length) {
					dispatch(setNameFieldEmpty(true))
					return
				}
				dispatch(onFormCompleted(input.value))
			}}>
			<FormField>
				<FormFieldError
					isVisible={formSubmitted && nameFieldEmpty}
					text={"Field empty"}
					position={"inside"}
					setVisible={() => {
						dispatch(setNameFieldEmpty(!nameFieldEmpty))
					}}
				/>
				<Input
					type={"text"}
					name={"name"}
					placeholder={"Text"}
					onChange={(event) => {
						if (event.target.value.length) {
							dispatch(setFormSubmitted(false))
							dispatch(setNameFieldEmpty(false))
						}
					}}
					onFocus={() => {
						dispatch(setFormSubmitted(false))
						dispatch(setNameFieldEmpty(false))
					}}
				/>
			</FormField>
			<SubmitButton>Submit</SubmitButton>
		</Form>
	)
}

const mapStateToProps = (state) => {
	return {
		nameFieldEmpty: state.form.nameFieldEmpty,
		formSubmitted: state.form.formSubmitted
	}
}

Form.propTypes = {
	dispatch: PropTypes.func.isRequired,
	nameFieldEmpty: PropTypes.bool.isRequired,
	formSubmitted: PropTypes.bool.isRequired
}

export default connect(mapStateToProps)(Form)