formularity
Version:
The last React form library you will ever need!
49 lines (48 loc) • 2.45 kB
TypeScript
import React, { ComponentProps, FC, ReactNode } from 'react';
import { NoInfer } from './utilityTypes';
export type SubmitButtonProps<TDisableInvalid extends boolean, TComponentProps = undefined> = {
/**
* Child elements of the button
*/
children?: ReactNode;
/**
* Component to be rendered. Must be a custom component that ultimately
* renders an HTML button in order to work properly.
*/
component?: FC<TComponentProps> | 'button';
/**
* Disable the button if any errors exist in the form
* @default true
*/
disableInvalid?: TDisableInvalid;
/**
* Method for determining when the submit button should be disabled
*
* *note - All options assume the form is invalid (contains errors) at
* the time of rendering the disabled state
*
* Options:
*
* 1. `'after-first-submission'`: Disables the button only after one submission
* 2. `'after-first-submission-editing'`: Disables the button only after one submission unless in editing state
* 3. `'not-dirty'`: Checks to see if the form is also dirty and will disable if no changes have been made to the form
* 4. `'errors-only'`: Will disable the form regardless of any criteria other than `isValid`
*
* @default 'errors-only'
*/
disabledMode?: NoInfer<TDisableInvalid> extends true ? 'after-first-submission' | 'after-first-submission-editing' | 'not-dirty' | 'errors-only' : never;
/**
* Disable the button during form submission
*/
disableWhileSubmitting?: boolean;
} & (TComponentProps extends 'button' | undefined ? ComponentProps<'button'> : Omit<NoInfer<TComponentProps>, 'type' | 'children'>);
/**
* This component is an abstraction of the `<button type='submit' />` pattern in forms,
* as well as a simple way to set common submit disabling logic on the form.
* Use this component to reduce submit button boilerplate code and ensure proper
* submitting of the form.
*/
export declare const SubmitButton: <TDisableInvalid extends boolean, TComponentProps = undefined>({ component, disableInvalid, disabledMode, disableWhileSubmitting, children, ...props }: SubmitButtonProps<TDisableInvalid, TComponentProps>) => React.FunctionComponentElement<{
type: string;
disabled: {};
} & Omit<SubmitButtonProps<TDisableInvalid, TComponentProps>, "children" | "component" | "disableInvalid" | "disabledMode" | "disableWhileSubmitting">>;