react-hooks-dynamic-form/dist/api/field.d.ts

Dynamic form with react hooks

/// <reference types="react" />
import { FormData } from "./form";
/**
 * [TYPE] Available value for field "type"
 */
export declare enum FieldTypeEnum {
    /**
     * HTML Text input
     */
    TEXT = "text",
    /**
     * HTML Number input
     */
    NUMBER = "number",
    /**
     * Text input with default email format validation
     */
    EMAIL = "email",
    /**
     * Text input with general phone format validation
     */
    PHONE = "phone",
    /**
     * HTML password input
     */
    PASSWORD = "password",
    /**
     * HTML hidden input
     */
    HIDDEN = "hidden",
    /**
     * HTML textarea
     */
    TEXTAREA = "textarea",
    /**
     * Generated checkbox
     * (only applicable to Form Component)
     */
    CHECKBOX = "checkbox",
    /**
     * Generated radio button
     * (only applicable to Form Component)
     */
    RADIO = "radio",
    /**
     * User's custom rendered field
     * (only applicable to Form Component)
     */
    CUSTOM = "custom"
}
/**
 * [TYPE] Available type for field value
 */
export declare type FieldValueType = string | number | boolean | object | Array<string | number | boolean | object> | null | undefined;
/**
 * [TYPE] Custom validation rule
 */
export declare type FieldCustomValidatorType = {
    /**
     * Validation method - a predicate with formData as parameter in case of conditional validation based on other field
     */
    validate: (value: FieldValueType, formData?: FormData) => boolean;
    /**
     * Error message for this validation rule
     */
    errorMessage?: string;
};
/**
 * [TYPE] Validation error messages
 */
export interface FieldErrorMessages {
    /**
     * isRequired error message
     */
    isRequired?: string;
    /**
     * Email format error message
     * (only applicable to "email" type)
     */
    email?: string;
    /**
     * Phone format error message
     * (only applicable to "phone" type)
     */
    phone?: string;
    /**
     * Default validation error message
     */
    default?: string;
}
/**
 * [TYPE] Field settings
 */
export declare abstract class FieldSettings {
    /**
     * HTML name attribute, also used as field identifier in the form, must be unique
     */
    name: string;
    /**
     * Field type that will be use for adding default validation rule and render method when using Form component
     */
    type?: string;
    /**
     * Initial field value
     */
    value?: FieldValueType;
    /**
     * If true, the field is required for validation. Can be a predicate with formData as parameter in case of conditional validation based on other field
     */
    isRequired?: boolean | ((formData?: FormData) => boolean);
    /**
     * Custom validation rules
     */
    customValidators?: FieldCustomValidatorType[];
    /**
     * Validation error messages
     */
    errorMessages?: FieldErrorMessages;
    /**
     * If true, validate field on change, otherwise validate on blur by default
     */
    validateOnChange?: boolean;
    /**
     * If true, disable built-in validator, applicable to type with default validator (email, phone)
     */
    disableBuiltInValidator?: boolean;
    /**
     * Field label
     * (only applicable to Form Component)
     */
    label?: string;
    /**
     * Field placeholder
     * (only applicable to Form Component)
     */
    placeholder?: string;
    /**
     * Field HTML class
     * (only applicable to Form Component)
     */
    className?: string;
    /**
     * Label HTML class
     * (only applicable to Form Component)
     */
    labelClassName?: string;
    /**
     * Wrapper (for label + field) HTML class
     * (only applicable to Form Component)
     */
    wrapperClassName?: string;
    /**
     * Field extra props
     * (only applicable to Form Component)
     */
    props?: Record<string, any>;
    /**
     * Field render method applicable to "custom" type
     * (only applicable to Form Component)
     */
    render?: () => JSX.Element;
    /**
     * Field children applicable to "fieldset" type
     * (only applicable to Form Component)
     */
    children?: Field[];
    /**
     * If true, validate field on blur. Applicable to build-in text type (resulting in HTML input or textarea)
     * (only applicable to Form Component)
     */
    validateOnBlur?: boolean;
}
export declare class Field extends FieldSettings {
    private _error;
    private _isPristine;
    constructor(init?: FieldSettings);
    /**
     * Get error message
     * @param key error key
     */
    private getErrorMessage;
    /**
     * PRIVATE: set default value
     */
    private setDefaultValue;
    /**
     * PRIVATE: set default validations
     */
    private setDefaultValidations;
    /**
     * Set value from user input
     * @param newValue input value
     */
    setInputValue(newValue: FieldValueType): void;
    /**
     * Return error message if field is error after validation
     */
    getInputError: () => string | null;
    /**
     * Validate field
     * @param formData current form data object
     */
    validate(formData?: FormData): boolean;
}