gadgets

/** * A typical tab control container. This manages `Tab` elements within it. * * ## Screen: * <img src="https://github.com/jmquigley/gadgets/blob/master/images/tabs.png" width="70%" /> * * ## Examples: * * ```javascript * import {Tab, TabContainer} from 'gadgets'; * * const debug = require('debug')('App') * * <TabContainer * maxTabs={3} * location={Location.bottom} * nonavigation * onRemove={(tab: any) => { * debug(removing %o (id=${tab.props['id']})`, tab.props["title"]); * }} * onSelection={(tab: any, previous: any) => { * debug( * `selected: %o (id=${tab.props["id"]}), previous: %o (id=${ * previous.props["id"] * })`, * tab.props["title"], * previous.props["title"] * ); * }} * > * <Tab title="tab #1">#1 {randomText}</Tab> * <Tab title="tab #2">#2 {randomText}</Tab> * <Tab title="tab #3">#3 {randomText}</Tab> * <Tab title="tab #4">#4 {randomText}</Tab> * </TabContainer> * ``` * * This example will create a tab container with four tabs drawn on the * bottom of the control. It will suppress the navigation buttons. * This example sets the max number of tabs to 3, so the fourth would * be suppressed. * * The title value for a Tab component is unique within the container. If * the same title is given, then the last one is used. * * ## API * #### Events * - `onRemove(tab)` - When a tab is removed this event is invoked. The * callback will receive the tab instance that was removed. * - `onSelection(tab, previousTab)` - When a `Tab` is selected this event is * invoked. The callback will receive a reference to the selected tab and the * previous tab. If there is no previous tab, then the selected and * previous values are the same. * * #### Styles * - `ui-tab-container` - Global style applied to the root `<div>` element of * the `TabContainer` component. * - `ui-tab-bar` - Global style that is applied to each of the tab elements * within the container. * - `ui-tab-content` - Global style applied to the content that will be * displayed by a selected tab. * - `ui-tab-navigation` - style applied to the div surrounding the navigation * buttons within the tab bar. * * #### Properties * - `location=Location.top {Location}` - The position of the Tabs within the * container (.top, .bottom, .left, .right) * - `maxTabs=5 {number}` - the maximum number of tabs that will be shown * within the container. This respects the order in which they are given * to the control. If set to 0, then no maximum value is checked. * - `noborder=false {boolean}` - If true, then the border is disabled around * the content window, otherwise it is shown. * - `noclose=false {boolean}` - if true, then the close buttons on each * tab are suppressed, otherwise they are shown. * - `nonavigation=false {boolean}` - if true, then the navigation chevron * buttons are suppressed within the tab bar, otherwise they are shown * - `tabWidth=75 {number}` - the number of pixels for each `Tab` component * within the container. * * @module TabContainer */ import * as React from "react"; import { BaseComponent, BaseProps, BaseState } from "../shared"; import { Tab } from "./Tab"; export interface TabContainerProps extends BaseProps { children?: React.ReactNode; maxTabs?: number; noclose?: boolean; nonavigation?: boolean; onRemove?: (tab: Tab) => void; onSelection?: (tab: Tab, previousTab: Tab) => void; tabWidth?: number; } export interface TabContainerState extends BaseState { selectedTab?: string; } export declare class TabContainer extends BaseComponent<TabContainerProps, TabContainerState> { static defaultProps: TabContainerProps; private _removedTabs; private _tabContent; private _tabMap; private _tabs; constructor(props: TabContainerProps); /** * @return {number} the index value location for the currently selected * tab. */ readonly currentIdx: number; /** * Sets the current tab ID/Key value in the state. This update is NOT * synchronous (like all React setState calls) * @param id {string} the unique tab key value to set in this id. */ selectedTab: string; /** * @return {any[]} the child tab array used by this control. This only * useful for testing purposes. */ readonly tabs: any; /** * The child elements under the container must be modified to add a select * handler and unique id values. The id value for the tab is generated by * the Keys class. The content for each tab is also saved as a reference * into a Tab map class instance. When the Tab child component is created * it wraps the content. The problem with cloning the children to add * properties is that it recreates all of the children under that * component. It's a problem to keep recreating the underlying children * when this doesn't need to be done each time a tab is changed. To fix * this the "children" under a Tab are removed when they are cloned and * saved in a TabMap. The content displayed is handled by the TabContainer * when the switch occurs. This prevents the recreation of child elements. * @param props {TabContainerProps} - the properties passed to the tab * container. * @return an array of Tabs components */ private buildTabs; /** * Searches the current tab list and finds the tab object associated with * the given id. This method is private by convention. It is only exposed * for testing purposes. * @param id {string} the id value associated with a Tag to find * @return {tuple} a tuple reference to the Tag object associated with this * id and its index position within the child array. It returns null if * the tag is not found. */ _getTab(id: string): any; /** * Searches the current tab list and finds the tab index associated with * the given id. This method is private by convention. It is only exposed * for testing purposes. * @param id {string} the id value associated with a Tag to find * @return {number} the number index of this id with the tabs array. If * the value is not found it returns -1. */ _getTabIdx(id: string): number; private handlePreviousTab; private handleNextTab; private hiddenTabHandler; private selectHandler; render(): JSX.Element; } export default TabContainer;