mui-validate/index.d.ts

Validation tools for Material UI components and component groups

/// <reference types="react" />
import React, { RefObject } from 'react';

type ValidationMessageKey = 'required' | 'unique' | 'regex' | 'custom';
type ValidationMessage = {
    type: ValidationMessageKey;
    text: string;
};
type Validation = {
    valid: boolean;
    messages: ValidationMessage[];
    display: boolean;
};
type ValidationCollection = {
    [key: string]: Validation;
};
type ValidationRuleRequired = boolean | [boolean, string];
type ValidationRuleUnique = string[] | [string[], string];
type ValidationRuleRegex = RegExp | [RegExp, string];
type CustomValidationFunction = (value: string) => boolean;
type SingleValidationRuleCustom = CustomValidationFunction | [CustomValidationFunction, string];
type ValidationRuleCustom = SingleValidationRuleCustom | SingleValidationRuleCustom[];
type ValidationMode = 'silent' | 'noisy';
type SetValidationsFunc = (validations: ValidationCollection) => ValidationCollection;
type ValidationInfo = {
    validations: ValidationCollection;
    setValidations: (param: SetValidationsFunc | ValidationCollection) => void;
    updateValidation: (key: string, value: Validation) => void;
    removeValidation: (key: string) => void;
    allValid: boolean;
    initialValidation: ValidationMode;
    validation: ValidationMode;
    initialState: ValidationCollection;
    autoDisablersWereTriggered: boolean;
    setAutoDisablersWereTriggered: (triggered: boolean) => void;
};
type InputType = 'textfield' | 'select' | 'autocomplete' | 'picker' | 'datepicker';
type ValidateRef = undefined | null | {
    validate: () => void;
    name: string;
    value: string | Date | number | null | undefined;
};

declare const context: React.Context<ValidationInfo>;

declare const useValidation: () => ValidationInfo;

type ValidationGroupProps = {
    children: JSX.Element;
    initialValidation?: ValidationMode;
    validation?: ValidationMode;
    initialState?: ValidationCollection;
};
declare const ValidationGroup: {
    ({ children, initialValidation, validation, initialState, }: ValidationGroupProps): JSX.Element;
    displayName: string;
};

type ValidateProps = {
    name: string;
    id?: string;
    required?: ValidationRuleRequired;
    unique?: ValidationRuleUnique;
    regex?: ValidationRuleRegex;
    custom?: ValidationRuleCustom;
    after?: (result: Validation) => void;
    before?: () => void;
    inputType?: 'detect' | InputType;
    initialValidation?: ValidationMode;
    validation?: ValidationMode;
    children: JSX.Element & {
        fullWidth?: boolean;
        labelId?: string;
    };
    reference?: RefObject<ValidateRef>;
    triggers?: RefObject<ValidateRef> | RefObject<ValidateRef>[];
    classes?: {
        root?: string;
        message?: string;
    };
};
declare const Validate: {
    ({ children, name, required, unique, regex, custom, after, before, triggers, classes, initialValidation, validation, inputType, id, reference, }: ValidateProps): JSX.Element;
    displayName: string;
};

type AutoDisablerProps = {
    children: JSX.Element;
    firstDisplayErrors?: boolean;
};
declare const AutoDisabler: {
    ({ children, firstDisplayErrors }: AutoDisablerProps): JSX.Element;
    displayName: string;
};

type AutoHideProps = {
    children: JSX.Element;
    validationName: string;
};
declare const AutoHide: {
    ({ children, validationName }: AutoHideProps): JSX.Element | null;
    displayName: string;
};

type TypographyVariant = 'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'overline' | 'subtitle1' | 'subtitle2';
type TypographyColor = 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
type ErrorListProps = {
    title?: string;
    alwaysVisible?: boolean;
    noErrorsText?: string;
    titleVariant?: TypographyVariant;
    errorVariant?: TypographyVariant;
    titleColor?: TypographyColor;
    errorColor?: TypographyColor;
    renderErrorMessage?: (validationName: string, errorMessage: string) => string;
};
declare const ErrorList: {
    ({ title, alwaysVisible, noErrorsText, titleVariant, errorVariant, titleColor, errorColor, renderErrorMessage, }: ErrorListProps): JSX.Element | null;
    displayName: string;
};

export { AutoDisabler, AutoHide, ErrorList, Validate, context as ValidationContext, ValidationGroup, useValidation };