@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
97 lines (96 loc) • 4.09 kB
TypeScript
/**
* Web ToggleButtonGroup Component
*
* This is a legacy component.
* For referencing while developing new features, please use a Functional component.
*/
import React from 'react';
declare const _default: React.ComponentClass<ToggleButtonGroupProps>;
export default _default;
import type { FormStatusProps, FormStatusState, FormStatusText } from '../FormStatus';
import type { ButtonSize } from '../Button';
import type { SkeletonShow } from '../Skeleton';
import type { SpacingProps, SpaceType } from '../space/types';
import type { GlobalStatusConfigObject } from '../GlobalStatus';
export type ToggleButtonGroupVariant = 'default' | 'checkbox' | 'radio';
export type ToggleButtonGroupSuffix = string | ((...args: any[]) => any) | React.ReactNode;
export type ToggleButtonGroupLayoutDirection = 'column' | 'row';
export type ToggleButtonGroupValue = string | number | Record<string, unknown> | any[];
export type ToggleButtonGroupValues = string | any[];
export type ToggleButtonGroupAttributes = string | Record<string, unknown>;
export type ToggleButtonGroupChildren = string | ((...args: any[]) => any) | React.ReactNode;
export interface ToggleButtonGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'label' | 'value'>, Omit<SpacingProps, 'top' | 'right' | 'bottom' | 'left'> {
/**
* Use either the `label` property or provide a custom one.
*/
label?: string | React.ReactNode;
label_direction?: 'horizontal' | 'vertical';
label_sr_only?: boolean;
/**
* The `title` of the input - describing it a bit further for accessibility reasons.
*/
title?: string;
/**
* Determine whether the ToggleButtonGroup is checked or not. The default will be `false`.
*/
checked?: boolean;
variant?: ToggleButtonGroupVariant;
left_component?: React.ReactNode;
disabled?: boolean;
/**
* If set to `true`, an overlaying skeleton with animation will be shown.
*/
skeleton?: SkeletonShow;
id?: string;
/**
* Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
*/
status?: FormStatusText;
/**
* Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
*/
status_state?: FormStatusState;
/**
* Use an object to define additional FormStatus properties.
*/
status_props?: FormStatusProps;
status_no_animation?: boolean;
/**
* The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
*/
globalStatus?: GlobalStatusConfigObject;
/**
* Text describing the content of the ToggleButtonGroup more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButtonGroup component.
*/
suffix?: ToggleButtonGroupSuffix;
/**
* Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **ToggleButtonGroup**.
*/
value?: ToggleButtonGroupValue;
/**
* The size of the button. For now there is `small`, `medium`, `default` and `large`.
*/
size?: ButtonSize;
/**
* Defines the layout direction of the ToggleButtonGroup. Set to `column` or `row`. Defaults to `row` if not set.
*/
layout_direction?: ToggleButtonGroupLayoutDirection;
/**
* Defines the `values` as a string. Use it to get the values during the `on_change` event listener callback in the **ToggleButtonGroup**.
*/
values?: ToggleButtonGroupValues;
attributes?: ToggleButtonGroupAttributes;
readOnly?: boolean;
className?: string;
children?: ToggleButtonGroupChildren;
on_change?: (...args: any[]) => any;
on_state_update?: (...args: any[]) => any;
onChange?: (...args: any[]) => any;
top?: SpaceType;
right?: SpaceType;
bottom?: SpaceType;
left?: SpaceType;
multiselect?: boolean;
name?: string;
vertical?: boolean;
}