office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.11 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport { CommandBar } from '../../../../CommandBar';\r\nimport { Toggle } from '../../../../Toggle';\r\nimport { assign } from '../../../../utilities/object';\r\n\r\nexport class CommandBarBasicExample extends React.Component<any, any> {\r\n\r\n constructor(props: any) {\r\n super(props);\r\n this.state = {\r\n isSearchBoxVisible: true,\r\n areNamesVisible: true,\r\n areIconsVisible: true\r\n };\r\n }\r\n\r\n public render() {\r\n let { items, farItems } = this.props;\r\n let { isSearchBoxVisible: searchBoxVisible, areIconsVisible: iconsVisible, areNamesVisible: namesVisible } = this.state;\r\n\r\n let filteredItems = items.map(item => assign({}, item, {\r\n name: namesVisible ? item.name : '',\r\n icon: iconsVisible ? item.icon : ''\r\n }));\r\n\r\n let filteredFarItems = farItems.map(item => assign({}, item, {\r\n name: namesVisible ? item.name : '',\r\n icon: iconsVisible ? item.icon : ''\r\n }));\r\n\r\n return (\r\n <div>\r\n <Toggle\r\n label='Show search box'\r\n checked={ searchBoxVisible }\r\n onChanged={ isSearchBoxVisible => this.setState({ isSearchBoxVisible }) }\r\n onText='Visible'\r\n offText='Hidden'\r\n />\r\n <Toggle\r\n label='Show names'\r\n checked={ namesVisible }\r\n onChanged={ areNamesVisible => this.setState({ areNamesVisible }) }\r\n onText='Visible'\r\n offText='Hidden' />\r\n <Toggle\r\n label='Show icons'\r\n checked={ iconsVisible }\r\n onChanged={ areIconsVisible => this.setState({ areIconsVisible }) }\r\n onText='Visible'\r\n offText='Hidden' />\r\n <CommandBar\r\n isSearchBoxVisible={ searchBoxVisible }\r\n searchPlaceholderText='Search...'\r\n elipisisAriaLabel='More options'\r\n items={ filteredItems }\r\n farItems={ filteredFarItems }\r\n />\r\n </div>\r\n );\r\n }\r\n}"; });