react-form-with-layout

<FormWithLayout />

<FormWithLayout /> is a React component to facilitate building of the form fields with a fixed layout.

Usage

$ yarn add react-form-with-layout

import FormWithLayout from 'react-form-with-layout';

PropTypes

Argument	Type	Example
renderLayout	function(builder)	required. renders layout
getFieldProps	function(name)	required. retrieves field props
renderField	function(name, props)	required. renders field
defaultValues	object	required. values of the form fields
onSubmit	function(e)	required. handles form submission
renderExpandedLayout	function(builder)	similar to renderLayout, for layout with more fields
showAll	boolean	hide/show fields. if it's false, use renderLayout. otherwise, use renderExpandedLayout
renderButtons	function(props)	renders buttons at the bottom of form

Example

import React from 'react';
import FormWithLayout from 'react-form-with-layout';
import {formSerialize} from 'react-form-utils';

class FormContainer extends React.Component {
    constructor(props){
        super(props);
        this._handleSubmit = this._handleSubmit.bind(this);
        this.state = {
            values: null,
            errorMessage: null
        };
    }

    render(){
        return (
            <div>
                {this.state.errorMessage}
                <FeedbackForm onSubmit={this._handleSubmit} defaultValues={this.state.defaultValues} />
            </div>);
    }

    _handleSubmit(e){
        if(e) e.preventDefault();

        const values = formSerialize(e.target);
        this.setState({defaultValues: values});

        this.props.postToServer(
            values
        ).then((res) => {
            // navigateToSummary();
        }).catch((err) => {
            this.setState({errorMessage: err.message});
        }});
    }
}

const FeedbackForm = (props) => {
    const renderlayout = (builder) => {
        const {layout, section} = builder;
        const col = (type, ...children) => builder.col(`col-xs-${type}`, ...children);

        return layout(
            section('Section 1',
                [col(6, 'first_name', 'last_name')], // first row: two 6 cols
                [col(5, 'email', 'id_no'), col(2, 'age')], // second row: two 5 cols, one 2 cols
                <button key="submit" onClick={this.submit}>Submit</button>
            )
        );
    };

    const getFieldProps = (name) => {
        return {
            first_name: { type: 'text' },
            last_name: { type: 'text' },
            email: { type: 'email' },
            id_no: { type: 'text' },
            age: { type: 'number' }
        }[name];
    };

    const renderField = (name, fieldProps) => {
        return <input
              key={name}
              type={fieldProps.type}
              name={fieldProps.name}
              defaultValue={fieldProps.defaultValue} />;
    };

    const {defaultValues, onSubmit} = props;
    const formProps = {
        renderLayout,
        getFieldProps,
        renderField,
        defaultValues,
        onSubmit
    };

    return <FormWithLayout {...formProps} />;
}

FeedbackForm.propTypes = {
    defaultValues: PropTypes.object.isRequired,
    onSubmit: PropTypes.func.isRequired
}

DSL for layout

builder provides {layout, section, col} as helpers. e.g.

const {layout, section} = builder;
const col = (type, ...children) =>
    builder.column(`col-${type}`, ...children);

return layout(
    section('Section 1',
        [col(6, 'first_name', 'last_name')], // first row
        [col(5, 'email', 'id_no'), col(2, 'age')], // second row
        <button key="submit" onClick={this.submit}>Submit</button> // regular
    )
);

builder.layout

/*
 * @param {node} mainHeader
 * @param {node} section
 * @return {node}
 */
layout(mainHeader, section, section, ...)
// <div className="layout">{sections}</div>

builder.section

/*
 * @param {node} sectionHeader
 * @param {node} row
 * @return {node}
 */
section(sectionHeader, row, row, row, ...)
// <section className="section">{rows}</section>

builder.col

/*
 * @param {string} className - the group identifier for all columns within.
 * @param {string} fieldName - the name for lookup with `getFieldProps`+`renderField`
 * @return {node}
 */
builder.col(className, fieldName, fieldName, fieldName, ...)

// override the default arguments
const col = (type, ...children) =>
    builder.column(`col-${type}`, ...children);

col('6', fieldName, fieldName, fieldName, ...)
// <div className="col-6">
//   {renderField(fieldName, getFieldProps(name))}
// </div>