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