@vtaits/react-form-schema-base-ui/dist/index.d.ts

Structure of base ui-components to construct complex forms using @vtaits/form-schema

import * as react from 'react';
import { ReactNode, RefObject, HTMLProps } from 'react';
import { LoadOptions } from 'select-async-paginate-model';

type ButtonRenderProps = Readonly<{
    children?: ReactNode;
    disabled?: boolean;
    onClick?: () => void;
}>;
type ListItemWrapperRenderProps = Readonly<{
    children?: ReactNode;
    compact?: boolean;
    disabled?: boolean;
    handleRemove?: () => void;
    inline?: boolean;
    name: string;
    title?: ReactNode;
}>;
type ListWrapperRenderProps = Readonly<{
    actions?: ReactNode;
    compact?: boolean;
    error?: ReactNode;
    hint?: ReactNode;
    inline?: boolean;
    name: string;
    items?: ReactNode;
    label?: ReactNode;
    required?: boolean;
}>;
type WrapperRenderProps = Readonly<{
    children?: ReactNode;
    error?: ReactNode;
    hint?: ReactNode;
    label?: ReactNode;
    name?: string;
    required?: boolean;
}>;
type BaseFieldRenderProps = Readonly<{
    disabled?: boolean;
    autoFocus?: boolean;
    name: string;
    wrapper: WrapperRenderProps;
}>;
type CheckboxRenderProps = Readonly<BaseFieldRenderProps & {
    checked: boolean;
    children?: ReactNode;
    onChange: (nextChecked: boolean) => void;
}>;
type DatePickerRenderProps = Readonly<BaseFieldRenderProps & {
    displayDateFormat?: string;
    value: Date | null | undefined;
    onChange: (nextValue: Date | null | undefined) => void;
    inputProps: Partial<HTMLProps<HTMLInputElement>>;
}>;
type FormRenderProps = Readonly<{
    actions?: ReactNode;
    error?: ReactNode;
    fields?: ReactNode;
    formProps?: HTMLProps<HTMLFormElement>;
    title?: ReactNode;
}>;
type FileInputRenderProps = Readonly<BaseFieldRenderProps & {
    accept?: string;
    children?: ReactNode;
    onSelectFile: (file: Blob | null) => void;
    selectedFile?: string;
}>;
type InputRenderProps = Readonly<BaseFieldRenderProps & {
    debounceTimeout?: number;
    options?: readonly string[];
    inputProps: Partial<HTMLProps<HTMLInputElement>>;
    onChange: (nextValue: string) => void;
}>;
type MultiSelectRenderProps<OptionType> = Readonly<BaseFieldRenderProps & {
    options: readonly OptionType[];
    optionsCacheRef: RefObject<Record<string, OptionType>>;
    placeholder?: string;
    handleClear: () => void;
    value: readonly OptionType[];
    onChange: (nextValue: readonly OptionType[]) => void;
    getOptionLabel: (option: OptionType) => string;
    getOptionValue: (option: OptionType) => string | number;
    renderOption?: (option: OptionType, payload: unknown) => ReactNode;
}>;
type SelectRenderProps<OptionType> = Readonly<BaseFieldRenderProps & {
    clearable?: boolean;
    options: readonly OptionType[];
    optionsCacheRef: RefObject<Record<string, OptionType>>;
    placeholder?: string;
    handleClear: () => void;
    value: OptionType | null | undefined;
    onChange: (nextValue: OptionType | null | undefined) => void;
    getOptionLabel: (option: OptionType) => string;
    getOptionValue: (option: OptionType) => string | number;
    renderOption?: (option: OptionType, payload: unknown) => ReactNode;
}>;
type AsyncMultiSelectRenderProps<OptionType, Additional> = Readonly<BaseFieldRenderProps & {
    initialAdditional?: Additional;
    additional?: Additional;
    optionsCacheRef: RefObject<Record<string, OptionType>>;
    loadOptions: LoadOptions<OptionType, Additional>;
    placeholder?: string;
    handleClear: () => void;
    value: readonly OptionType[];
    onChange: (nextValue: readonly OptionType[]) => void;
    getOptionLabel: (option: OptionType) => string;
    getOptionValue: (option: OptionType) => string | number;
    renderOption?: (option: OptionType, payload: unknown) => ReactNode;
}>;
type AsyncSelectRenderProps<OptionType, Additional> = Readonly<BaseFieldRenderProps & {
    clearable?: boolean;
    initialAdditional?: Additional;
    additional?: Additional;
    optionsCacheRef: RefObject<Record<string, OptionType>>;
    loadOptions: LoadOptions<OptionType, Additional>;
    placeholder?: string;
    handleClear: () => void;
    value: OptionType | null | undefined;
    onChange: (nextValue: OptionType | null | undefined) => void;
    getOptionLabel: (option: OptionType) => string;
    getOptionValue: (option: OptionType) => string | number;
    renderOption?: (option: OptionType, payload: unknown) => ReactNode;
}>;
type TagsRenderProps = Readonly<BaseFieldRenderProps & {
    createLabel?: ReactNode;
    onChange: (nextValue: readonly string[]) => void;
    options?: readonly string[];
    value: readonly string[];
}>;
type TextareaRenderProps = Readonly<BaseFieldRenderProps & {
    debounceTimeout?: number;
    textAreaProps: Partial<HTMLProps<HTMLTextAreaElement>>;
}>;
type BaseUIContextValue = Readonly<{
    renderAsyncMultiSelect: <OptionType, Additional>(renderProps: AsyncMultiSelectRenderProps<OptionType, Additional>) => ReactNode;
    renderAsyncSelect: <OptionType, Additional>(renderProps: AsyncSelectRenderProps<OptionType, Additional>) => ReactNode;
    renderCheckbox: (renderProps: CheckboxRenderProps) => ReactNode;
    renderCheckboxGroup: <OptionType>(renderProps: MultiSelectRenderProps<OptionType>) => ReactNode;
    renderDatePicker: (renderProps: DatePickerRenderProps) => ReactNode;
    renderDateTimePicker: (renderProps: DatePickerRenderProps) => ReactNode;
    renderFileInput: (renderProps: FileInputRenderProps) => ReactNode;
    renderForm: (renderProps: FormRenderProps) => ReactNode;
    renderRadioGroup: <OptionType>(renderProps: SelectRenderProps<OptionType>) => ReactNode;
    renderInput: (renderProps: InputRenderProps) => ReactNode;
    renderListAddButton: (renderProps: ButtonRenderProps) => ReactNode;
    renderListItemWrapper: (renderProps: ListItemWrapperRenderProps) => ReactNode;
    renderListWrapper: (renderProps: ListWrapperRenderProps) => ReactNode;
    renderMultiSelect: <OptionType>(renderProps: MultiSelectRenderProps<OptionType>) => ReactNode;
    renderSelect: <OptionType>(renderProps: SelectRenderProps<OptionType>) => ReactNode;
    renderTags: (renderProps: TagsRenderProps) => ReactNode;
    renderTextArea: (renderProps: TextareaRenderProps) => ReactNode;
    renderWrapper: (renderProps: WrapperRenderProps) => ReactNode;
}>;

declare const BaseUIContext: react.Context<Readonly<{
    renderAsyncMultiSelect: <OptionType, Additional>(renderProps: AsyncMultiSelectRenderProps<OptionType, Additional>) => ReactNode;
    renderAsyncSelect: <OptionType, Additional>(renderProps: AsyncSelectRenderProps<OptionType, Additional>) => ReactNode;
    renderCheckbox: (renderProps: CheckboxRenderProps) => ReactNode;
    renderCheckboxGroup: <OptionType>(renderProps: MultiSelectRenderProps<OptionType>) => ReactNode;
    renderDatePicker: (renderProps: DatePickerRenderProps) => ReactNode;
    renderDateTimePicker: (renderProps: DatePickerRenderProps) => ReactNode;
    renderFileInput: (renderProps: FileInputRenderProps) => ReactNode;
    renderForm: (renderProps: FormRenderProps) => ReactNode;
    renderRadioGroup: <OptionType>(renderProps: SelectRenderProps<OptionType>) => ReactNode;
    renderInput: (renderProps: InputRenderProps) => ReactNode;
    renderListAddButton: (renderProps: ButtonRenderProps) => ReactNode;
    renderListItemWrapper: (renderProps: ListItemWrapperRenderProps) => ReactNode;
    renderListWrapper: (renderProps: ListWrapperRenderProps) => ReactNode;
    renderMultiSelect: <OptionType>(renderProps: MultiSelectRenderProps<OptionType>) => ReactNode;
    renderSelect: <OptionType>(renderProps: SelectRenderProps<OptionType>) => ReactNode;
    renderTags: (renderProps: TagsRenderProps) => ReactNode;
    renderTextArea: (renderProps: TextareaRenderProps) => ReactNode;
    renderWrapper: (renderProps: WrapperRenderProps) => ReactNode;
}>>;

declare function useUI(): BaseUIContextValue;

export { type AsyncMultiSelectRenderProps, type AsyncSelectRenderProps, type BaseFieldRenderProps, BaseUIContext, type BaseUIContextValue, type ButtonRenderProps, type CheckboxRenderProps, type DatePickerRenderProps, type FileInputRenderProps, type FormRenderProps, type InputRenderProps, type ListItemWrapperRenderProps, type ListWrapperRenderProps, type MultiSelectRenderProps, type SelectRenderProps, type TagsRenderProps, type TextareaRenderProps, type WrapperRenderProps, useUI };