react-proforma/dist/Proforma.d.ts

React Proforma helps you build simple to complex web forms with ease in React. -- Simplicity where you want it. Flexibility where you need it.

import React from 'react';
import { IndexableObjectType, IConfigObject, ProformaBundle, HandleSubmitBundle } from './types';
interface IProps<V> {
    config: IConfigObject<V>;
    handleSubmit: (values: V, handleSubmitBundle: HandleSubmitBundle) => any;
    children: (proformaBundle: ProformaBundle<V>) => JSX.Element;
}
export declare type ProformaStateType<V> = Pick<ProformaBundle<V>, 'values' | 'touched' | 'errors' | 'isSubmitting' | 'isComplete' | 'submitCount'>;
/**
 * The core component of the React Proforma library. It takes in a config object and a handleSubmit
 * function as props, expects a function (that renders your form) as a child, and then executes that
 * function while providing it all of the methods and properties that make up the
 * ProformaBundle (see docs for complete contents of the bundle). You can either hook up
 * your form elements yourself using the appropriate pieces of the ProformaBundle, or you can rely
 * on the custom form elements offered by the React Proforma library that come pre-hooked-up to the
 * Proforma internal functionality (see docs for complete list of custom form elements).
 *
 * @param {Object} config - Core configuration object for React Proforma. See docs for complete config options.
 * @param {Object} config.initialValues - an object containing the initial values for your form data. The name for each piece of form data MUST exist on this object, or it will not be included in any of the internal processing.
 * @param {Object=} [config.validationObject] - an object containing any validation you wish to have performed on any (or all) form data. See docs for more information.
 * @param {Object=} [config.customOnChangeObject] - an object containing the names of any field that you wish to have a custom onChange operation performed. If present for a given name, the provided onChange function will be executed instead of the internal React Proforma change handler. See docs for more information.
 * @param {Object=} [config.onValidateCallbacksObject] - an object containing the names of any field that you wish to have a custom callback function called after each validation cycle. If present for a given name, the provided callback function will be executed upon the completion of each validation cycle. See docs for more information.
 * @param {boolean=} [config.resetTouchedOnFocus=false] - boolean flag that, if set to true, causes the "touched" status for fields to reset whenever the field has focus. Defaults to false.
 * @param {boolean=} [config.validateOnChange=true] - boolean flat that, if set to false, will not run validation for fields on change. Defaults to true.
 * @param {Function} handleSubmit - The function to be executed when your form is submitted. The function will be executed with the following two arguments:
 * <br/>(1) values - an object containing the current form values.
 * <br/>(2) HandleSubmitBundle - an object containing useful methods and properties for your form submission:
 * <br/>(i) setSubmitting - a function that enables you to change the submission status of your form, with signature: (setTo: boolean) => void
 * <br/>(ii) setComplete - a function that enables you to change the completion status of your form, with signature: (setTo: boolean) => void
 * <br/>(iii) setValues - a function that enables you to set the values of any of your form fields, with signature: (setToObject: object) => void
 * <br/>(iv) resetFields - a function that resets all of your form fields back to the initial values, with signature: () => void
 * <br/>(v) submitCount - a property that represents the number of times this form has been submitted.
 * <br/>(vi) event - the original form submission React event.
 * @returns {JSX.Element | null} - JSX.Element or null (null if no children are provided)
 */
export declare class Proforma<V> extends React.PureComponent<IProps<V>, ProformaStateType<V>> {
    proformaBundle: ProformaBundle<V>;
    constructor(props: IProps<V>);
    validateField(name: string): void;
    handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
    handleFocus(event: React.FocusEvent<HTMLInputElement | HTMLButtonElement>): void;
    handleBlur(event: React.FocusEvent<HTMLInputElement | HTMLButtonElement>): void;
    setValues(setToObj: IndexableObjectType): void;
    setSubmitting(setTo: boolean): void;
    setComplete(setTo: boolean): void;
    handleSubmit(event: React.FormEvent<HTMLFormElement> | React.SyntheticEvent<HTMLElement>): void;
    handleReset(event: React.SyntheticEvent<HTMLElement>): void;
    resetFields(): void;
    computeProformaBundle(): void;
    render(): JSX.Element | null;
}
export {};