gatsby-drupal-webform/dist/Webform.d.ts

React component for Drupal webforms

import React, { FormEvent } from 'react';
import { formToJSON } from './utils';
export declare const DEFAULT_SUBMIT_LABEL = "Submit";
/**
 * Webform object as returned from GraphQL query.
 */
export interface WebformObject {
    drupal_internal__id: string;
    description: string;
    status: string;
    elements: WebformElement[];
}
export declare type WebformSettings = {
    attributes: {
        [key: string]: string;
    };
    states: {
        [key: string]: boolean;
    };
};
/**
 * Webform element (e.g. text field input or submit button).
 */
export declare type WebformElement = {
    name: string;
    type: string;
    attributes: Array<{
        name: string;
        value: string;
    }>;
    options?: Array<{
        label: string;
        value: string;
    }>;
    states?: Array<{
        state: string;
        selector: string;
        condition: {
            [key: string]: boolean | string | null;
        };
    }>;
};
export declare type WebformCustomComponentProps = {
    element: WebformElement;
    error?: string;
};
/**
 * Custom component for webform element
 */
export declare type WebformCustomComponent = React.FC<WebformCustomComponentProps>;
export declare type WebformValidateHandler = (event: FormEvent<HTMLFormElement>) => boolean;
export declare type WebformSubmitHandler = (data: ReturnType<typeof formToJSON>) => void | boolean | Promise<void | boolean>;
export declare type WebformSuccessHandler = (response: any, requestData: any) => void;
export declare type WebformErrorHandler = (err: any, requestData: any) => void;
export declare class WebformError extends Error {
    response: any;
    constructor(response: any);
}
declare type CustomComponentLibrary = {
    [name: string]: WebformCustomComponent;
};
interface Props {
    id?: string;
    className?: string;
    style?: React.CSSProperties;
    noValidate?: boolean;
    webform: WebformObject;
    onValidate?: WebformValidateHandler;
    onSuccess?: WebformSuccessHandler;
    onError?: WebformErrorHandler;
    /**
     * Called right before webform data is POSTed to the api.
     *
     * If callback returns false nothing is sent to the api.
     */
    onSubmit?: WebformSubmitHandler;
    /** Form POST endpoint. */
    endpoint: string;
    /** Extra data to POST. */
    extraData?: object;
    /**
     * Override button component that the form uses.
     * */
    buttonComponent: React.ComponentType<any>;
    /** Provide custom components that handle specific webform elements. */
    customComponents: CustomComponentLibrary;
}
/**
 * Render single webform element.
 */
export declare function renderWebformElement(customComponents: CustomComponentLibrary, Button: React.ComponentType<any>, element: WebformElement, error?: string): JSX.Element;
/**
 * Drupal webform react component.
 */
declare const Webform: {
    ({ webform, customComponents, buttonComponent, ...props }: Props): JSX.Element;
    defaultProps: {
        customComponents: {};
        buttonComponent: React.FC<any>;
    };
};
export default Webform;