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

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

/**
 * This module includes a text/input UI control.
 *
 * 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 React, { JSX } from 'react';
import { SxProps, Theme } from '@mui/material';
/**
 * Properties of the TextControl React component.
 */
export interface TextControlProps {
    /** 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.
     */
    onBlur?: () => void;
    /** Set to true to disable this control. */
    disabled?: boolean;
    /** The current error state. */
    error?: 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 or component to be displayed in front of the value. */
    startAdornment?: string | React.ReactNode;
    /** A text or component to be displayed after the value. */
    endAdornment?: string | React.ReactNode;
    /** 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>;
}
/**
 * Creates a text control.
 * @param props - Component properties.
 * @returns The TextControl React component.
 */
declare function TextControl({ id, label, helperText, value, onChange, onBlur, disabled, error, required, margin, size, fullWidth, inputMode, pattern, startAdornment, endAdornment, sx, sxStartAdornment, sxEndAdornment, }: TextControlProps): JSX.Element;
export default TextControl;