README

Contact Form

Package for Contact Form component. Contains generic Form component and presets: Short

Installation

npm i @simpozio/contact-form

Usage

You can use generic component Form and construct your own view for it:

import {Form, Field} from '@simpozio/contact-form';

const Component = () => {
    const initialValues = {
        name: ''
    }

    const onChange = () => Promise.resolve(console.log('Form Updated'));

    const onValidate = ({fields}) => {
        return Promise.resolve(_.mapValues(fields, value => (value => !!value));
    }

    const onValid = ({fields}) => console.log('Form is valid!', fields);

    const onSubmit = ({values, resetForm}) => {
            return new Promise((resolve, reject) => {
                try {
                   api.post(values)
                    .then(resolve)
                    .then(() => {
                        resetForm()
                    })
                } catch(e) {
                   reject(e);
                };
            }
        }

    const onError = ({error, resetForm}) => {
        console.log(error);
        resetForm();
    };

    return (
        <Form
            initialValues={initialValues}
            onChange={onChange}
            onValid={onValid}
            onValidate={onValidate}
            onSubmit={onSubmit}
            onError={onError}
        >
            {({
                fields,
                formError,
                onChange,
                isValid,
                isSubmitting,
                updateForm,
                submitForm,
                resetForm
            }) => (
                <Field
                    label="name"
                    name="name"
                    field={fields["name"]}
                    onChange={onChange}
                    onBlur={updateForm}
                />

                {formError && <p>{formError}</p>}

                <button onClick={submitForm} disabled={!isValid || isSubmitting}>Submit</button>
                <button onClick={resetForm}>Reset</button>
            )}
        </Form>
    )
}

Or you can you preset with predefined structure, e.g. Short:

import {ShortForm} from '.@simpozio/contact-form/dist/presets';

const StyledShortForm = styled(ShortForm)`
  min-height: 750px;

  @media (max-width: 767px) {
    min-height: 580px;
  }
`;

const Component = () => {
    const fields = {
        name: {
          label: 'Your name',
          initialValue: ''
        },
        phone: {
          label: 'Your phone',
          initialValue: ''
        },
        email: {
          label: 'Your email',
          initialValue: ''
        }
      };

    const onChange = () => Promise.resolve(console.log('Form Updated'));

    const onValidate = ({fields}) => {
        return Promise.resolve(_.mapValues(fields, value => (value => !!value));
    }

    const onValid = ({fields}) => console.log('Form is valid!', fields);

    const onSubmit = ({values, resetForm}) => {
            return new Promise((resolve, reject) => {
                try {
                   api.post(values)
                    .then(resolve)
                    .then(() => {
                        resetForm()
                    })
                } catch(e) {
                   reject(e);
                };
            }
        }

    const onError = ({error, resetForm}) => {
        console.log(error);
        resetForm();
    };

    return (
        <StyledShortForm
          formText={'The price for this model starts at £300,000'}
          bottomText={
            'We collect your data to keep you updated about our reservation program. By submitting this form you agree to the Privacy Policy.'
          }
          fields={fields}
          onValidate={onValidate}
          onChange={onChange}
          onSubmit={onSubmit}
          onError={onError}
        />
    );
};

Styling

Form component is generic, so it don't have any styles. So you need to add styles by yourself with css or with styled component. Preset have default styles, and you can style them in 3 ways:

Theming

Preset accepts theme props, so you can pass theme from your styled-components theme context to preset component:

import {useContext} from 'react';
import styled, {ThemeContext} from 'styled-components';
import {ShortForm} from '@simpozio/contact-form/dist/presets';

const Component = (props) => {
    const theme = useContext(ThemeContext);

    return (
        <ShortForm {...props} theme={theme} />
    )
}

Styled Components

Default styling with styled components

import styled from 'styled-components';
import {ShortForm} from '@simpozio/contact-form/dist/presets';

const StyledForm = styled(ShortForm)`
    color: #fff;
    backgroung-color: #000;
`

const Component = (props) => {
    return (
        <StyledForm {...props} />
    )
}

Custom Styles

Preset supports styles with interpolated string from styled-components:

import styled, {css} from 'styled-components';
import {ShortForm} from '@simpozio/contact-form/dist/presets';

const customStyles = css(({Field, BottomText}) => css`
    ${Field} {
        color: #fff;
        backgroung-color: #000;
    }

    ${BottomText} {
        font-size: 0.8rem;
    }
`

const Component = (props) => {
    return (
        <StyledForm {...props} styles={customStyles} />
    )
}

Properties

Form

Form accepts standard HTML attributes as props: action, method, className. And form have it's own additional properties: fields, isSubmitted, isValid: boolean, error, resetForm

initialValues: {[key: string]: string} - object with default values for fields
onChange: ({fields, isSubmitted, isValid}) => Promise<newFields> - callback called when form was updated via updateForm() method. It accepts object with fields and it's values, and optionally can return fields with new values. It can be used to modify fields values in dependency of other values of form changes.
onValidate: ({fields, isSubmitted, isValid}) => Promise<object> - callback called when form was validated. It accepts object with fields and it's values, and should return fields with boolean values (valid/not valid).
onValid: ({fields, isSubmitted, isValid}) => void - callback called when form become valid, after onValidate() check
onSubmit: ({fields, isSubmitted, isValid, resetForm}) => Promise<void> - callback called when form is submitting via submitForm() method. It accepts object with fields and it's values, and optionally can return error that will be passed to onError callback. Also accepts resetForm() method as second argument.
onError: ({fields, isSubmitted, isValid, error, resetForm}) => void - callback called when form is errored (after onSubmit callback). It accepts error string passed form onSubmit callback as first argument, and resetForm() method as second argument.

Form accepts children as function, and will pass methods and state to this function:

fields - object with field name as keys, and object with value, field error and touched properties as value.
- value: string - field value
- error: boolean - validation state of field
- touched: boolean - becomes true when value of field is different from the initial
formError: string - string with for error passed from onSubmit callback
onChange: (name, value) => void - onchange handler for fields, should be passed to onChange callback of fields
isValid: boolean - becomes true when all fields are valid after onValidate callback,
isSubmitted: boolean - prop that shows submitted state of form
isSubmitting: boolean - props that show is submitting in process
updateForm: () => void - method for call form onChange callback (e.g. for saving values to redux)
submitForm: () => void - method for submitting form, will call onSubmit callback
resetForm: () => void - method for resetting form to initialValues

Field

Fields accepts props passed to MUI Text Field: className, name, type, label, placeholder, required, disabled.

field: {value: string, error: boolean, touched: boolean} - field object, contains value, validation state in error prop, and touched state if vields value is different from initial value
onChange: (name, value) => void - accepts onChange handler passed from form
onBlur: (event) => void - accepts onBlur handler, it can be used to update form via updateForm() method

Caption

Component for form text, that accepts HTML string and render it as children.

className: string - standard prop for styling
html: string - you can pass HTML string that will be inserted as children via dangerouslySetInnerHTML prop. If passed - children props will be ignored.
children - standard children prop to render child components. It will be ignored if html prop is passed.

<Caption html="<span>This text will be rendered as <b>html</b></span>">
    This text will be ignored!
</Caption>

<Caption>
    <span>This text will be rendered as regular <b>children</b></span>
</Caption>

Presets

Short

Form component with predefined structure.

Properties

It accepts all properties from Form component, except initialValues, and has its own properties:

fields: object - fields preset object
- label: string - field label
- placeholder: string - field placeholder
- initialValue: string - field initial value
- disabled: string - disabled state of field
formText: string - HTML string passed to Caption component above the button
bottomText: string - HTML string passed to Caption component at the bottom of the form
validSchema: yup-schema - validation schema created via yup module
styles: string - interpolated styled components string with styles
theme: object - theme object

Development

Look simpozio-frontend-common library

Usage no npm install needed!

README

Contact Form

Installation

Usage

Styling

Theming

Styled Components

Custom Styles

Properties

Form

Field

Caption

Presets

Short

Properties

Development