2016-09-02 10:18:33 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import ReactToolbox from "../index";
|
2016-07-24 14:17:16 +03:00
|
|
|
|
|
|
|
export interface TabsTheme {
|
|
|
|
/**
|
|
|
|
* Added to the active tab content and header.
|
|
|
|
*/
|
|
|
|
active?: string;
|
|
|
|
/**
|
|
|
|
* Used for the navigation element.
|
|
|
|
*/
|
|
|
|
navigation?: string;
|
|
|
|
/**
|
|
|
|
* Used for the moving underline element.
|
|
|
|
*/
|
|
|
|
pointer?: string;
|
|
|
|
/**
|
|
|
|
* Used as a root classname for the component.
|
|
|
|
*/
|
|
|
|
tabs?: string;
|
|
|
|
/**
|
|
|
|
* Used for the tab content element.
|
|
|
|
*/
|
|
|
|
tab?: string;
|
|
|
|
}
|
|
|
|
|
2016-09-02 10:18:33 +03:00
|
|
|
interface TabsProps extends ReactToolbox.Props {
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Children to pass through the component.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
children?: React.ReactNode;
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Disable the animation below the active tab.
|
|
|
|
* @default false
|
|
|
|
*/
|
|
|
|
disableAnimatedBottomBorder?: boolean;
|
|
|
|
/**
|
|
|
|
* Current
|
|
|
|
* @default 0
|
|
|
|
*/
|
|
|
|
index?: number;
|
2016-11-11 00:45:15 +03:00
|
|
|
/**
|
|
|
|
* `unmounted` mode will not mount the tab content of inactive tabs.
|
2016-11-24 10:58:25 +03:00
|
|
|
* `display` mode will mount but hide inactive tabs.
|
2016-11-11 00:45:15 +03:00
|
|
|
* Consider holding state outside of the Tabs component before using `display` mode
|
|
|
|
* @default unmounted
|
|
|
|
*/
|
|
|
|
hideMode?: 'display' | 'unmounted';
|
|
|
|
/**
|
|
|
|
* If True, the tabs will have an inverse style.
|
|
|
|
*/
|
|
|
|
inverse?: boolean;
|
2016-11-24 10:58:25 +03:00
|
|
|
/**
|
|
|
|
* If True, the tabs will be fixed, covering the whole width.
|
|
|
|
*/
|
|
|
|
fixed?: boolean;
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Callback function that is fired when the tab changes.
|
|
|
|
*/
|
|
|
|
onChange?: Function;
|
|
|
|
/**
|
|
|
|
* Classnames object defining the component style.
|
|
|
|
*/
|
|
|
|
theme?: TabsTheme;
|
|
|
|
}
|
|
|
|
|
2016-09-02 10:18:33 +03:00
|
|
|
export class Tabs extends React.Component<TabsProps, {}> { }
|
2016-07-24 14:17:16 +03:00
|
|
|
|
|
|
|
export interface TabTheme {
|
|
|
|
/**
|
|
|
|
* Added to the navigation tab element in case it's active.
|
|
|
|
*/
|
|
|
|
active?: string;
|
|
|
|
/**
|
|
|
|
* Added to the navigation tab element in case it's disabled.
|
|
|
|
*/
|
|
|
|
disabled?: string;
|
|
|
|
/**
|
|
|
|
* Added to the navigation tab element in case it's hidden.
|
|
|
|
*/
|
|
|
|
hidden?: string;
|
|
|
|
/**
|
|
|
|
* Added to the navigation tab element in case it's active.
|
|
|
|
*/
|
|
|
|
label?: string;
|
|
|
|
}
|
|
|
|
|
2016-09-02 10:18:33 +03:00
|
|
|
interface TabProps extends ReactToolbox.Props {
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* If true, the current component is visible.
|
|
|
|
*/
|
|
|
|
active?: boolean;
|
|
|
|
/**
|
|
|
|
* Additional class name to provide custom styling for the active tab.
|
|
|
|
*/
|
|
|
|
activeClassName?: string;
|
|
|
|
/**
|
|
|
|
* If true, the current component is not clickable.
|
|
|
|
* @default false
|
|
|
|
*/
|
|
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
|
|
* If true, the current component is not visible.
|
|
|
|
* @default false
|
|
|
|
*/
|
|
|
|
hidden?: boolean;
|
|
|
|
/**
|
|
|
|
* Label text for navigation header. Required.
|
|
|
|
*/
|
|
|
|
label: string;
|
|
|
|
/**
|
|
|
|
* Callback function that is fired when the tab is activated.
|
|
|
|
*/
|
|
|
|
onActive?: Function;
|
|
|
|
/**
|
|
|
|
* Classnames object defining the component style.
|
|
|
|
*/
|
|
|
|
theme?: TabTheme;
|
|
|
|
}
|
|
|
|
|
2016-09-02 10:18:33 +03:00
|
|
|
export class Tab extends React.Component<TabProps, {}> { }
|