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

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

/**
 * This module includes a drop down button UI control, a button with a drop down menu.
 *
 * 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';
/**
 * Base properties of any child component of the DropdownButton component.
 */
export interface DropdownButtonChildrenProps {
    /**
     * Callback that is called when the drop down menu is closed.
     */
    onClose?: () => void;
}
/**
 * Properties of the DropdownButtonTextItems React component.
 */
export interface DropdownButtonTextItemsProps extends DropdownButtonChildrenProps {
    /**
     * The items that will be displayed in the drop down control.
     * Each item has a unique key and a display text.
     */
    items: {
        key: string;
        text: string;
    }[];
    /**
     * Callback that is called when the user selects one of the drop down items.
     * @param itemKey - The key of the selected item.
     */
    onSelect: (itemKey: string, itemText?: string) => void;
}
/**
 * Creates a drop down control that displays a menu with text strings.
 * @param props - Component properties.
 * @returns The DropdownButtonTextItems React component.
 */
export declare function DropdownButtonTextItems({ items, onSelect, onClose, }: DropdownButtonTextItemsProps): JSX.Element;
/**
 * Properties of the DropdownButton React component.
 */
export interface DropdownButtonProps {
    /** The component id. */
    id?: string;
    /** A start icon displayed inside the button. */
    startIcon?: React.ReactNode;
    /** An end icon displayed inside the button. */
    endIcon?: React.ReactNode;
    /** The text to be displayed inside the button. */
    text?: string;
    /** Button variant. */
    variant?: 'text' | 'outlined' | 'contained';
    /** Button color. */
    color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
    /** Button size. */
    size?: 'small' | 'medium' | 'large';
    /** Set to true to make the button stretch to the container width. */
    fullWidth?: boolean;
    /** Set to true to disable this button. */
    disabled?: boolean;
    /** The drop down items that will be displayed when the user clicks on this button. */
    children: React.ReactElement<DropdownButtonChildrenProps>;
}
/**
 * Creates a drop down button control.
 * @param props - Component properties.
 * @returns The DropdownButton React component.
 */
declare function DropdownButton({ id, startIcon, endIcon, text, variant, color, size, fullWidth, disabled, children, }: DropdownButtonProps): JSX.Element;
export default DropdownButton;