@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
207 lines (206 loc) • 8.61 kB
TypeScript
/**
* Web Tabs Component
*
*/
import React from 'react';
import type { SpacingProps } from '../space/types';
import CustomContent from './TabsCustomContent';
import ContentWrapper from './TabsContentWrapper';
import { DynamicElement } from '../../shared/types';
import { ButtonProps } from '../Button';
import { AnchorAllProps } from '../Anchor';
import type { SectionSpacing, SectionStyleTypes, SectionVariants } from '../Section';
import type { SkeletonShow } from '../Skeleton';
export type TabsData = string | {
title: string | React.ReactNode | ((...args: any[]) => any);
key: string | number;
selected?: boolean;
disabled?: boolean;
content?: TabsContent;
}[] | any;
export type TabsContent = Record<string, unknown> | React.ReactNode | ((...args: any[]) => any);
export type TabsTabElement = DynamicElement<null, ButtonProps | AnchorAllProps>;
export type TabsSelectedKey = string | number;
export type TabsAlign = 'left' | 'center' | 'right';
export type TabsChildren = Record<string, unknown> | React.ReactNode | ((...args: any[]) => any);
export interface TabsProps extends Omit<React.HTMLProps<HTMLElement>, 'ref' | 'content' | 'children'>, SpacingProps {
data?: TabsData;
/**
* the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.
*/
content?: TabsContent;
/**
* To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.
*/
content_style?: SectionStyleTypes | SectionVariants;
/**
* To modify the `spacing` onto the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `large`.
*/
content_spacing?: SectionSpacing;
label?: string;
/**
* Define what HTML element should be used. You can provide e.g. `tab_element={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: ';url';, ... }]}`). Defaults to `<button>`.
*/
tab_element?: TabsTabElement;
/**
* In case one of the tabs should be opened by a `key`.
*/
selected_key?: TabsSelectedKey;
/**
* To align the tab list on the right side `align="right"`. Defaults to `left`.
*/
align?: TabsAlign;
/**
* To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.
*/
tabs_style?: SectionStyleTypes | SectionVariants;
/**
* To modify the `spacing` inside the tab list. Defaults to `null`.
*/
tabs_spacing?: boolean;
/**
* If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.
*/
no_border?: boolean;
/**
* If set to `false`, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to `true`.
*/
breakout?: boolean;
/**
* If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.
*/
nav_button_edge?: boolean;
onOpenTabNavigationFn?: (...args: any[]) => any;
/**
* If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.
*/
prerender?: boolean;
/**
* If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.
*/
prevent_rerender?: boolean;
/**
* If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.
*/
scroll?: boolean;
/**
* If set to `true`, an overlaying skeleton with animation will be shown.
*/
skeleton?: SkeletonShow;
id?: string;
className?: string;
/**
* the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.
*/
children?: TabsChildren;
render?: (...args: any[]) => any;
on_change?: (...args: any[]) => any;
on_mouse_enter?: (...args: any[]) => any;
on_click?: (...args: any[]) => any;
on_focus?: (...args: any[]) => any;
}
export interface DummyProps {
/**
* the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.
*/
children: React.ReactNode;
}
export default class Tabs extends React.PureComponent<TabsProps> {
static contextType: React.Context<import("../../shared/Context").ContextProps>;
static defaultProps: {
data: any;
content: any;
content_style: any;
content_spacing: boolean;
label: any;
tab_element: string;
selected_key: any;
align: string;
tabs_style: any;
tabs_spacing: any;
no_border: boolean;
nav_button_edge: boolean;
onOpenTabNavigationFn: any;
prerender: boolean;
prevent_rerender: boolean;
scroll: any;
skeleton: any;
id: any;
className: any;
children: any;
render: any;
on_change: any;
on_mouse_enter: any;
on_click: any;
on_focus: any;
breakout: boolean;
};
static Content: typeof CustomContent;
static ContentWrapper: typeof ContentWrapper;
static getSelectedKeyOrFallback(selected_key: any, data: any): any;
static getDerivedStateFromProps(props: any, state: any): any;
static getData(props: any): any[];
constructor(props: any);
componentDidMount(): void;
componentWillUnmount(): void;
init: () => void;
componentDidUpdate(props: any): void;
hasLastPosition(): boolean;
getLastPosition(): number;
hasLastUsedTab(): string | -1;
saveLastUsedTab(): void;
saveLastPosition(position?: any): void;
setScrollbarState: ({ hasScrollbar }?: {
hasScrollbar?: boolean;
}) => void;
onResizeHandler: () => void;
hasScrollbar(): boolean;
addScrollBehavior(): void;
onTablistKeyDownHandler: (e: any) => void;
focusFirstTab: (e: any) => void;
focusLastTab: (e: any) => void;
focusPrevTab: (e: any) => void;
focusNextTab: (e: any) => void;
openPrevTab: (e: any) => void;
openNextTab: (e: any) => void;
handleVerticalScroll: () => void;
setLeftPosition(scrollLeft: any): void;
scrollToTab({ type, behavior }: {
type: any;
behavior?: string;
}): void;
onMouseDown: (event: any) => void;
onKeyDownHandler: (event: any) => void;
onMouseEnterHandler: (event: any) => void;
onClickHandler: (event: any) => void;
getCurrentKey: (event: any) => any;
getCurrentTitle: (selected_key?: any) => any;
getStepKey(useKey: any, stateKey: any): any;
focusTab: (focus_key: any, event?: any, mode?: any) => void;
setWhatInput(): void;
resetWhatInput(): void;
setFocusOnTabButton: () => void;
warnAboutMissingContainer(): void;
openTab: (selected_key: any, event?: any, mode?: any) => void;
getEventArgs(args: any): any;
isFocus(tabKey: any): boolean;
isSelected(tabKey: any): boolean;
renderCachedContent(): import("react/jsx-runtime").JSX.Element[];
renderContent(): any;
getContent: (selected_key: any) => any;
TabsWrapperHandler: ({ children, ...rest }: {
[x: string]: any;
children: any;
}) => import("react/jsx-runtime").JSX.Element;
TabsListHandler: ({ children, className, ...rest }: {
[x: string]: any;
children: any;
className: any;
}) => import("react/jsx-runtime").JSX.Element;
TabContentHandler: () => import("react/jsx-runtime").JSX.Element;
TabsHandler: (props: any) => import("react/jsx-runtime").JSX.Element;
render(): any;
}
export declare const Dummy: ({ children }: {
children: any;
}) => import("react/jsx-runtime").JSX.Element;