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

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

/**
 * This module includes a select UI control, to be used as a drop down box with a selection list.
 *
 * 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';
/**
 * A select option.
 */
export type SelectOption = {
    /** The unique value. */
    value: number;
    /** The display text. */
    displayText: string;
};
/**
 * Properties of the SelectControl React component.
 */
export interface SelectControlProps {
    /** The component id. */
    id: string;
    /** A label text that will be displayed in front of the select control. */
    label: string;
    /** Set to true to display the label. */
    showLabel?: boolean;
    /** A helper text that will be displayed underneath the select control. */
    helperText?: string;
    /** The options to be available inside the select control. */
    options: SelectOption[] | Map<string, SelectOption[]>;
    /** Value of the selected option or '' if no option has been selected. */
    value: number | '';
    /**
     * Callback that will be called when a new option has been selected.
     * @param value - The new selected value.
     */
    onChange: (value: number | '') => void;
    /** Set to true to disable this control. */
    disabled?: boolean;
    /** Set to true if the value of this control 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 width of its parent. */
    fullWidth?: boolean;
    /** The min width of this control. */
    minWidth?: number | string;
    /**
     * Set to true to display each option as '<value> - <displayText>', otherwise each option will
     * be displayed with its displayText only.
     */
    prefixTextWithValue?: boolean;
}
/**
 * Creates a select control.
 * @param props - Component properties.
 * @returns The SelectControl React component.
 */
declare function SelectControl({ id, label, showLabel, helperText, options, value, onChange, disabled, required, margin, size, fullWidth, minWidth, prefixTextWithValue, }: SelectControlProps): JSX.Element;
export default SelectControl;