office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.4 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n Label,\r\n Button,\r\n Pivot,\r\n PivotItem,\r\n PivotLinkFormat,\r\n PivotLinkSize,\r\n IPivotItemProps\r\n} from '../../../../index';\r\n\r\nexport interface IPivotOnChangeExampleState {\r\n shouldShowFirstPivotItem: boolean;\r\n}\r\n\r\nexport class PivotRemoveExample extends React.Component<any, IPivotOnChangeExampleState> {\r\n private _shouldShowFirstPivotItem;\r\n\r\n constructor(props: any) {\r\n super(props);\r\n\r\n this._shouldShowFirstPivotItem = true;\r\n this.state = {\r\n shouldShowFirstPivotItem: true\r\n };\r\n\r\n this._handleClick = this._handleClick.bind(this);\r\n }\r\n public render() {\r\n let pivotArray: React.ReactElement<IPivotItemProps>[] = [];\r\n\r\n if (this.state.shouldShowFirstPivotItem) {\r\n pivotArray.push(\r\n <PivotItem linkText='Foo' itemKey='Foo' key='Foo'>\r\n <Label>Click the button below to show/hide this pivot item.</Label>\r\n <Label>The selected item will not change when the number of pivot items changes.</Label>\r\n <Label>If the selected item was removed, the new first item will be selected.</Label>\r\n </PivotItem>\r\n );\r\n }\r\n\r\n pivotArray = pivotArray.concat(\r\n (\r\n <PivotItem linkText='Bar' itemKey='Bar' key='Bar'>\r\n <Label>Pivot #2</Label>\r\n </PivotItem>\r\n ),\r\n (\r\n <PivotItem linkText='Bas' itemKey='Bas' key='Bas'>\r\n <Label>Pivot #3</Label>\r\n </PivotItem>\r\n ),\r\n (\r\n <PivotItem linkText='Biz' itemKey='Biz' key='Biz'>\r\n <Label>Pivot #4</Label>\r\n </PivotItem>\r\n )\r\n );\r\n\r\n return (\r\n <div>\r\n <Pivot linkSize={ PivotLinkSize.large } linkFormat={ PivotLinkFormat.tabs }>\r\n { pivotArray }\r\n </Pivot>\r\n <div>\r\n <Button onClick={ this._handleClick }>\r\n { `${this.state.shouldShowFirstPivotItem ? 'Hide' : 'Show'} First Pivot Item` }\r\n </Button>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n private _handleClick(): void {\r\n this._shouldShowFirstPivotItem = !this._shouldShowFirstPivotItem;\r\n this.setState({\r\n shouldShowFirstPivotItem: this._shouldShowFirstPivotItem\r\n });\r\n }\r\n}\r\n"; });