@kvaser/canking-api/dist/controls/ValidateableTextControl.d.ts

CanKing API to communicate with the CanKing service using Node.js.

/**
 * This module includes a text/input UI control that can be validated.
 *
 * To be able to use these controls the CanKingDataProvider component must be present in the
 * component tree above your component. Normally the CanKingDataProvider is added
 * at the root of the component tree.
 *
 * @packageDocumentation
 */
import { JSX } from 'react';
import { SxProps, Theme } from '@mui/material';
/**
 * Properties of the ValidateableTextControl React component.
 */
export interface ValidateableTextControlProps {
    /** The component id. */
    id?: string;
    /** The label of this input control. */
    label?: string;
    /** Any helper text that should be displayed. */
    helperText?: string;
    /** The current value. */
    value: string;
    /**
     * Callback that will be called when the value has been changed.
     * @param value - The new value.
     */
    onChange?: (value: string) => void;
    /**
     * Callback that will be called when the control has lost focus.
     * @param value - The new value.
     */
    onBlur?: (value: string) => void;
    /** Set to true to disable this control. */
    disabled?: boolean;
    /** Set to true if this control's value is required. */
    required?: boolean;
    /** Margins between controls inside this control. */
    margin?: 'dense' | 'normal' | 'none';
    /** The component size. */
    size?: 'small' | 'medium';
    /** Set to true to expand this control to use the full widht of its parent. */
    fullWidth?: boolean;
    /** Input mode. */
    inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
    /** Regex pattern of the value in this control. */
    pattern?: string;
    /** A text to be displayed in front of the value. */
    startAdornment?: string;
    /** A text to be displayed after the value. */
    endAdornment?: string;
    /** Optional sx properties. */
    sx?: SxProps<Theme>;
    /** Optional sx properties for the start adornment. */
    sxStartAdornment?: SxProps<Theme>;
    /** Optional sx properties for the end adornment. */
    sxEndAdornment?: SxProps<Theme>;
    /** The current error state. */
    error?: boolean;
    /**
     * Callback that is called when the error state has changed.
     * @param error - The new error state.
     */
    onErrorChange?: (error: boolean) => void;
    /**
     * Callback that will be called when the value has been changed or the control has lost focus.
     * This callback is called before onChange and if the returned err value is true then onChange
     * won't be called.
     * The implemtation of this callback is allowed to modify the specified text value and return
     * the modified value in the val property of the returned object.
     * @param text - The new text value.
     * @param trigger - The trigger of this callback, either on 'change' or on 'blur'.
     * @returns An object with the validated value (val) and an error state (err).
     */
    onValidate?: (text: string, trigger: 'change' | 'blur') => {
        val: string;
        err: boolean;
    };
    /** Number type if the expected value is a number, if left undefined then the value is expected to be a string. */
    numberType?: 'int' | 'float';
    /** The min value if numberType is set. */
    minValue?: number;
    /** The max value if numberType is set. */
    maxValue?: number;
}
/**
 * Creates a text control.
 * @param props - Component properties.
 * @returns The ValidateableTextControl React component.
 */
declare function ValidateableTextControl({ id, label, helperText, value, onChange, onBlur, disabled, required, margin, size, fullWidth, inputMode, pattern, startAdornment, endAdornment, sx, sxStartAdornment, sxEndAdornment, error, onErrorChange, onValidate, numberType, minValue, maxValue, }: ValidateableTextControlProps): JSX.Element;
export default ValidateableTextControl;