@episub/rhf-mui/dist/index.es.d.ts

Glue components to help intergrating react-hook-forms with mui

/// <reference types="react" />
import { AutocompleteRenderGroupParams, AutocompleteProps } from "@material-ui/lab";
import React from "react";
import { ReactNode } from "react";
import { TextFieldProps, ButtonProps } from "@material-ui/core";
import { Control, FieldError } from "react-hook-form";
import { O } from "ts-toolbelt";
// Adapter for react-window
declare const ListboxComponent: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
declare const RenderGroup: (params: AutocompleteRenderGroupParams) => ReactNode[];
declare const RenderListOption: (name: string, inputValue: string) => ReactNode;
interface Props<T> {
    loading: boolean;
    disabled?: boolean;
    textProps?: Omit<TextFieldProps, "disabled">;
    autoCompleteProps: Omit<O.Required<AutocompleteProps<T, false, false, false>, "getOptionLabel">, "classes" | "disableListWrap" | "ListboxComponent" | "renderOption" | "renderInput" | "loading" | "disabled">;
}
type TextFieldCutDown = Omit<TextFieldProps, "onChange" | "onBlur" | "onFocus" | "onError" | "value">;
interface RHFFieldMeta {
    control: Control<Record<string, unknown>>;
    fieldError: FieldError | undefined;
    isError: boolean;
    textFieldProps: TextFieldCutDown;
}
declare const useListboxStyles: (props?: any) => Record<"listbox", string>;
/**
 * A helper function to quickly get all the values rhf values needed to
 * implement an input in material-ui. Given a field name and text props it will
 * return associated errors and a new TextFieldProps object with common defaults
 * set
 */
declare const useRHFGetFields: ({ name, textFieldProps }: Pick<RHFFieldProps, "name" | "textFieldProps">) => RHFFieldMeta;
declare const DefaultTextFieldProps: TextFieldProps;
interface RHFFieldProps {
    name: string;
    label?: ReactNode;
    disabled?: boolean;
    textFieldProps?: TextFieldCutDown;
}
/**
 * AutocompletePrefilled component is configured as an easy way to setup an
 * autocomplete field with virtulised fields already setup.
 */
declare const AutocompletePrefilled: <T>({ loading, textProps, autoCompleteProps, disabled }: Props<T>) => JSX.Element;
/**
 * react-hook-form field for using a checkbox
 */
declare const RHFCheckbox: ({ name, label, disabled }: Omit<RHFFieldProps, "textFieldProps">) => JSX.Element;
/**
 * react-hook-form field for working with dollars. The field value is expected
 * to be representing dollars **not** cents (with the input value being a number
 * not a string).
 */
declare const RHFDollar: ({ name, label, disabled, textFieldProps }: RHFFieldProps) => JSX.Element;
interface RHFKeyboardDateProps extends RHFFieldProps {
    clearable?: boolean;
    displayDateFormat?: string;
}
declare const RHFKeyboardDate: (props: RHFKeyboardDateProps) => JSX.Element;
interface ExtraProps {
    /** When true disables button (without showing loading indicator) */
    disabled?: boolean;
    /** When length is greater than zero disables button */
    errors?: Record<string, unknown>;
    /** When true disables button and shows loading indicator inside button */
    loading: boolean;
    buttonText?: string;
}
type Props$0 = O.Merge<ExtraProps, Omit<ButtonProps, "children">>;
declare const RHFSubmitButton: ({ disabled, errors, loading, buttonText, ...otherProps }: Props$0) => JSX.Element;
declare const RHFTextField: ({ name, textFieldProps, ...otherProps }: RHFFieldProps) => JSX.Element;
export { ListboxComponent, RenderGroup, RenderListOption, RHFCheckbox, RHFDollar, RHFKeyboardDate, RHFSubmitButton, RHFTextField, useListboxStyles, useRHFGetFields, DefaultTextFieldProps, RHFFieldProps, AutocompletePrefilled };