module.exports = "import * as React from 'react';\nimport { ContextualMenu, IContextualMenuItem, DirectionalHint, Button } from '../../../../index';\nimport './ContextualMenuExample.scss';\n\nexport interface IContextualMenuMultiselectExampleState {\n  selection?: { [ key: string]: boolean };\n  target?: {x: number, y: number};\n  isContextMenuVisible?: boolean;\n}\n\nlet keys: string[] = [ 'newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent' ];\n\nexport class ContextualMenuCheckmarksExample extends React.Component<any, IContextualMenuMultiselectExampleState> {\n\n  constructor() {\n    super();\n\n    this._onToggleSelect = this._onToggleSelect.bind(this);\n    this._onClick = this._onClick.bind(this);\n    this._onDismiss = this._onDismiss.bind(this);\n\n    this.state = {\n      selection: {},\n      isContextMenuVisible: false\n    };\n  }\n\n  public render() {\n    let { selection } = this.state;\n\n    return (\n      <div>\n        <Button onClick={this._onClick}> Click for ContextualMenu </Button>\n        { this.state.isContextMenuVisible ? (\n        <ContextualMenu\n          targetPoint={this.state.target}\n          useTargetPoint={true}\n          shouldFocusOnMount={ false }\n          onDismiss={this._onDismiss}\n          directionalHint={DirectionalHint.bottomLeftEdge}\n          items={\n            [\n              {\n                key: keys[0],\n                name: 'New',\n                canCheck: true,\n                isChecked: selection[keys[0]],\n                onClick: this._onToggleSelect\n              },\n              {\n                key: keys[1],\n                name: 'Share',\n                canCheck: true,\n                isChecked: selection[keys[1]],\n                onClick: this._onToggleSelect\n              },\n              {\n                key: keys[2],\n                name: 'Mobile',\n                canCheck: true,\n                isChecked: selection[keys[2]],\n                onClick: this._onToggleSelect\n              },\n              {\n                key: 'divider_1',\n                name: '-',\n              },\n\n              {\n                key: keys[3],\n                name: 'Print',\n                canCheck: true,\n                isChecked: selection[keys[3]],\n                onClick: this._onToggleSelect\n              },\n              {\n                key: keys[4],\n                name: 'Music',\n                canCheck: true,\n                isChecked: selection[keys[4]],\n                onClick: this._onToggleSelect\n              },\n              {\n                key: keys[5],\n                items: [\n                  {\n                    key: keys[6],\n                    name: 'Email message',\n                    canCheck: true,\n                    isChecked: selection[keys[6]],\n                    onClick: this._onToggleSelect\n                  },\n                  {\n                    key: keys[7],\n                    name: 'Calendar event',\n                    canCheck: true,\n                    isChecked: selection[keys[7]],\n                    onClick: this._onToggleSelect\n                  }\n                ],\n                name: 'New'\n              },\n            ]\n          }\n        />) : (null)}\n       </div>\n    );\n  }\n\n  private _onToggleSelect(ev?: React.MouseEvent<HTMLButtonElement>, item?: IContextualMenuItem) {\n    let { selection } = this.state;\n\n    selection[item.key] = !selection[item.key];\n\n    this.setState({\n      selection: selection\n    });\n  }\n\n  private _onClick(event: React.MouseEvent<HTMLButtonElement>) {\n    this.setState({target: {x: event.clientX, y: event.clientY}, isContextMenuVisible: true});\n  }\n\n  private _onDismiss() {\n    this.setState({isContextMenuVisible: false});\n  }\n\n}\n";