module.exports = "import * as React from 'react';\nimport { CommandBar } from '../../../../CommandBar';\nimport { Toggle } from '../../../../Toggle';\nimport { assign } from '../../../../utilities/object';\n\nexport class CommandBarBasicExample extends React.Component<any, any> {\n\n  constructor(props: any) {\n    super(props);\n    this.state = {\n      isSearchBoxVisible: true,\n      areNamesVisible: true,\n      areIconsVisible: true\n    };\n  }\n\n  public render() {\n    let { items, farItems } = this.props;\n    let { isSearchBoxVisible: searchBoxVisible, areIconsVisible: iconsVisible, areNamesVisible: namesVisible } = this.state;\n\n    let filteredItems = items.map(item => assign({}, item, {\n      name: namesVisible ? item.name : '',\n      icon: iconsVisible ? item.icon : ''\n    }));\n\n    let filteredFarItems = farItems.map(item => assign({}, item, {\n      name: namesVisible ? item.name : '',\n      icon: iconsVisible ? item.icon : ''\n    }));\n\n    return (\n      <div>\n        <Toggle\n          label='Show search box'\n          checked={ searchBoxVisible }\n          onChanged={ isSearchBoxVisible => this.setState({ isSearchBoxVisible }) }\n          onText='Visible'\n          offText='Hidden'\n        />\n        <Toggle\n          label='Show names'\n          checked={ namesVisible }\n          onChanged={ areNamesVisible => this.setState({ areNamesVisible }) }\n          onText='Visible'\n          offText='Hidden' />\n        <Toggle\n          label='Show icons'\n          checked={ iconsVisible }\n          onChanged={ areIconsVisible => this.setState({ areIconsVisible }) }\n          onText='Visible'\n          offText='Hidden' />\n        <CommandBar\n          isSearchBoxVisible={ searchBoxVisible }\n          searchPlaceholderText='Search...'\n          items={ filteredItems }\n          farItems={ filteredFarItems }\n          />\n      </div>\n    );\n  }\n}";