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

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

/**
 * This module includes a toolbar 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 { TypographyVariant } from '@mui/material';
import { DropdownButtonChildrenProps } from './DropdownButton';
/**
 * Properties of a Label component displayed by the toolbar.
 */
export interface LabelProps {
    /** The label text. */
    text: string;
    /** The label variant. */
    variant?: TypographyVariant;
}
/**
 * Properties of a ToggleButton component displayed by the toolbar.
 */
export interface ToggleButtonProps {
    /** The value represented by this toggle button. */
    value: string;
    /** An icon that will be displayed in this button. */
    icon: React.ReactNode;
    /** The button size. */
    size?: 'small' | 'medium' | 'large' | number;
    /** A tooltip of this button. */
    tooltip?: string;
    /** Aria label. */
    ariaLabel?: string;
    /** Set to true to disable this button. */
    disabled?: boolean;
}
/**
 * Properties of a ToggleButtonGroup component displayed by the toolbar.
 */
export interface ToggleButtonGroupProps {
    /** Value of the selected buttons in this group. */
    value: string[];
    /**
     * Callback that will be called when any button in this group has been selected/deselected.
     * @param value - The new value.
     */
    onChange: (value: string[]) => void;
    /** The buttons in this group. */
    buttons: ToggleButtonProps[];
    /** Size of the buttons in this group. */
    size?: 'small' | 'medium' | 'large';
    /** Set to true if only one of the buttons can be selected at the time. */
    exclusive?: boolean;
    /** Aria label. */
    ariaLabel?: string;
    /** Orientation of this group. */
    orientation?: 'vertical' | 'horizontal';
}
/**
 * Properties of a Button component displayed by the toolbar.
 */
export interface ButtonProps {
    /**
     * Callback that will be called when this button has been clicked.
     */
    onClick: () => void;
    /** Icon to be displayed in this button. */
    icon?: React.ReactNode;
    /** Text to be displayed in this button. */
    text?: string;
    /** Size of this button. */
    size?: 'small' | 'medium' | 'large' | number;
    /** The button variant. */
    variant?: 'text' | 'contained' | 'outlined';
    /** The button color. */
    color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
    /** A tooltip of this button. */
    tooltip?: string;
    /** Aria label. */
    ariaLabel?: string;
    /** Set to true to disable this button. */
    disabled?: boolean;
    /** Set to true to stretch this button to available width. */
    fullWidth?: boolean;
    /** Chidren to be displayed in this button if this button should be a {@link DropdownButton} */
    children?: React.ReactElement<DropdownButtonChildrenProps>;
}
/**
 * Properties of a ButtonGroup component displayed by the toolbar.
 */
export interface ButtonGroupProps {
    /** The buttons in this group. */
    buttons: ButtonProps[];
    /** Size of the buttons in this group. */
    size?: 'small' | 'medium' | 'large';
    /** Aria label. */
    ariaLabel?: string;
    /** Orientation of this group. */
    orientation?: 'vertical' | 'horizontal';
}
/**
 * Properties of a divider displayed by the toolbar.
 */
export interface DividerItemProps {
    /** Divider orientation. Defaults to vertical in toolbar and horizontal in overflow. */
    orientation?: 'vertical' | 'horizontal';
    /** Optional divider color. */
    color?: string;
    /** Optional margin around divider in px. */
    margin?: number;
}
/**
 * A toolbar item. Could be one of its properties.
 */
export interface toolbarItem {
    /** A label. */
    label?: LabelProps;
    /** A toggle button group. */
    toggleButtonGroup?: ToggleButtonGroupProps;
    /** A button. */
    button?: ButtonProps;
    /** A button group. */
    buttonGroup?: ButtonGroupProps;
    /** A divider. */
    divider?: DividerItemProps;
    /** A custom node. */
    other?: React.ReactNode;
    /** A nested collection of toolbar items. */
    items?: toolbarItem[];
}
/**
 * Properties of a ToolbarControl component.
 */
export interface ToolbarControlProps {
    /** The toolbar items. */
    items: toolbarItem[];
    /** The toolbar height. */
    height?: number;
    /** The toolbar width. */
    width?: number;
    /** How to justify the items. */
    justifyContent?: 'left' | 'center' | 'right' | 'space-between';
    /** The border size. */
    borderSize?: number;
    /** The padding. */
    padding?: number;
    /** The background color. */
    backgroundColor?: string;
    /** The orientation. */
    orientation?: 'vertical' | 'horizontal';
}
/**
 * Creates a toolbar control.
 * @param props - Component properties.
 * @returns The ToolbarControl React component.
 */
declare function ToolbarControl({ items, height, width, justifyContent, borderSize, padding, backgroundColor, orientation, }: ToolbarControlProps): JSX.Element;
export default ToolbarControl;