define([], function() { return "import * as React from 'react';\r\nimport { assign } from '@uifabric/utilities';\r\nimport { CommandBar } from '../../../../CommandBar';\r\nimport { Toggle } from '../../../../Toggle';\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}"; });