@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
112 lines (111 loc) • 3.92 kB
TypeScript
import * as React from 'react';
import type {
FormStatusProps,
FormStatusState,
FormStatusText
} from '../FormStatus';
import type { ButtonSize } from '../Button';
import type { SkeletonShow } from '../Skeleton';
import type { SpacingProps } from '../space/types';
import type { FormLabelLabelDirection } from '../FormLabel';
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 React.HTMLProps<HTMLElement>,
SpacingProps {
/**
* Use either the `label` property or provide a custom one.
*/
label?: React.ReactNode;
/**
* To define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.
*/
label_direction?: FormLabelLabelDirection;
/**
* Use `true` to make the label only readable by screen readers.
*/
label_sr_only?: boolean;
/**
* The `title` of group, describing it a bit further for accessibility reasons.
*/
title?: string;
/**
* Defines if the ToggleButton's should act as a multi-selectable list of toggle buttons. Defaults to `false`.
*/
multiselect?: boolean;
variant?: ToggleButtonGroupVariant;
left_component?: React.ReactNode;
no_fieldset?: boolean;
disabled?: boolean;
/**
* If set to `true`, an overlaying skeleton with animation will be shown.
*/
skeleton?: SkeletonShow;
id?: string;
name?: string;
/**
* Uses the `form-status` component to show failure messages.
*/
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;
/**
* Will force both `direction` and `label_direction` to be **vertical** if set to `true`.
*/
vertical?: boolean;
/**
* Define the layout direction of the ToggleButton buttons. Can be either `column` or `row`. Defaults to `column`.
*/
layout_direction?: ToggleButtonGroupLayoutDirection;
/**
* Defines the pre-selected ToggleButton button. The value has to match the one provided in the ToggleButton button. Use a string value.
*/
value?: ToggleButtonGroupValue;
/**
* Defines the pre-selected ToggleButton buttons in `multiselect` mode. The values have to match the one provided in the ToggleButton buttons. Use array, either as JS or JSON string.
*/
values?: ToggleButtonGroupValues;
attributes?: ToggleButtonGroupAttributes;
className?: string;
size?: ButtonSize | number;
children?: ToggleButtonGroupChildren;
on_change?: (...args: any[]) => any;
}
export default class ToggleButtonGroup extends React.Component<
ToggleButtonGroupProps,
any
> {
static defaultProps: object;
render(): JSX.Element;
}