office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
71 lines (70 loc) • 1.98 kB
TypeScript
/// <reference types="react" />
import { BaseComponent } from '../../Utilities';
import { IPivotProps } from './Pivot.types';
import { IPivotItemProps } from './PivotItem.types';
/**
* Usage:
*
* <Pivot>
* <PivotItem linkText="Foo">
* <Label>Pivot #1</Label>
* </PivotItem>
* <PivotItem linkText="Bar">
* <Label>Pivot #2</Label>
* </PivotItem>
* <PivotItem linkText="Bas">
* <Label>Pivot #3</Label>
* </PivotItem>
* </Pivot>
*/
export interface IPivotState {
links: IPivotItemProps[];
selectedKey: string;
selectedTabId: string;
}
export declare class Pivot extends BaseComponent<IPivotProps, IPivotState> {
private _keyToIndexMapping;
private _keyToTabIds;
private _pivotId;
constructor(props: IPivotProps);
componentWillReceiveProps(nextProps: IPivotProps): void;
render(): JSX.Element;
/**
* Renders the set of links to route between pivots
*/
private _renderPivotLinks();
/**
* Renders a pivot link
*/
private _renderLink(link);
private _renderLinkContent(link);
/**
* Renders the current Pivot Item
*/
private _renderPivotItem();
/**
* Gets the set of PivotLinks as arrary of IPivotItemProps
* The set of Links is determined by child components of type PivotItem
*/
private _getPivotLinks(props);
/**
* Generates the Id for the tab button.
*/
private _getTabId(itemKey, index);
/**
* whether the key exists in the pivot items.
*/
private _isKeyValid(itemKey);
/**
* Handles the onClick event on PivotLinks
*/
private _onLinkClick(itemKey, ev);
/**
* Handle the onKeyPress eventon the PivotLinks
*/
private _onKeyPress(itemKey, ev);
/**
* Updates the state with the new selected index
*/
private _updateSelectedItem(itemKey, ev?);
}