@new-knowledge/make-form

makeForm - it makes a form, in React.

Main purposes:

• Keep track of form state
• Expose getter/setter methods to the form state
• Allow developers to declaratively specify form behavior
• Validate form fields
• Mask user input

The FormFields object

The behavior of your form is determined by a defining a FormFields object. Each key is the name of a field in your form, each value is an object describing that field. For example, if we wanted a field named "age" with a default value of 20, our FormFields object would be created like so:

const ageFormFields ={
	age: {value: 20}
};

Options that can be passed in to makeForm include:

• value - String or number. Initial value for the field. Defaults to empty string.
• validator - Function. Receives input value and returns an error message. Returns empty string by default.
• accept - Function. Receives input value and returns boolean. Return true to allow input. Returns true by default.
• reject - Function. Opposite of accept, return true to block input.
• maskInput - String. Formats user output. "(xxx) xxx-xxxx" turns "1234567890" into "[phone]".

The makeForm function

Pass your handwritten form component into the makeForm function, along with a FormFields object created by setupFields, and it will return your component decorated with the following functions as props:

• setSubmit - Takes in your submit handler to be called after form validations pass. You should call it in componentWillMount to register your submit handler:

componentWillMount() {
    this.props.setHandler(this.handleSubmit);	
}

• handleSubmit - If all fields are valid, this will call the handler you (hopefully) set when the component mounted.
• resetForm - Resets the form to its initial state.
• prefillForm - Takes in an object where the keys are field names and the values are field values, and prefills the form with those values. A form can only be prefilled once until it is reset.
• setFields - Manually update the fields inside of the form state.
• setFieldValue - Takes in a field name and new value.

The formContext object

The formContext object is provided as a prop to your form component, it contains methods which access the state of the form. These methods include:

• getFields - The fields of the form state, which contain current values, error messages, etc.
• getShowErrors - Is true after a submission is attempted, false after reset.
• getHandleChange - Takes in field name, returns its change handler.
• getValue - Takes in field name.
• get Error - Take in field name.

By passing in a "name" prop and the form context, you can write a stateless input component that is connected to the form state:

const TextInput = ({name, formContext}) => {
	const { getHandleChange, getValue, getShowErrors, getError } = formContext;
	const handleChange = getHandleChange(name);
    const showErrors = getShowErrors();
    const value = getValue(name);
    const error = getError(name);
    
	return (
    	<div>
		    <input name={name} value={value} type={text}/>
            {showErrors && error &&
            	<p>{error}</p>
            }
        </div>
    )
}