office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 4.3 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport { ContextualMenu, IContextualMenuItem, DirectionalHint, Button } from '../../../../index';\r\nimport './ContextualMenuExample.scss';\r\n\r\nexport interface IContextualMenuMultiselectExampleState {\r\n selection?: { [key: string]: boolean };\r\n isContextMenuVisible?: boolean;\r\n}\r\n\r\nlet keys: string[] = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent'];\r\n\r\nexport class ContextualMenuCheckmarksExample extends React.Component<any, IContextualMenuMultiselectExampleState> {\r\n\r\n constructor() {\r\n super();\r\n\r\n this._onToggleSelect = this._onToggleSelect.bind(this);\r\n this._onClick = this._onClick.bind(this);\r\n this._onDismiss = this._onDismiss.bind(this);\r\n\r\n this.state = {\r\n selection: {},\r\n isContextMenuVisible: false\r\n };\r\n }\r\n\r\n public render() {\r\n let { selection } = this.state;\r\n\r\n return (\r\n <div>\r\n <Button onClick={ this._onClick } id='ContextualMenuButton2'> Click for ContextualMenu </Button>\r\n { this.state.isContextMenuVisible ? (\r\n <ContextualMenu\r\n target='#ContextualMenuButton2'\r\n shouldFocusOnMount={ false }\r\n onDismiss={ this._onDismiss }\r\n directionalHint={ DirectionalHint.bottomLeftEdge }\r\n items={\r\n [\r\n {\r\n key: keys[0],\r\n name: 'New',\r\n canCheck: true,\r\n isChecked: selection[keys[0]],\r\n onClick: this._onToggleSelect\r\n },\r\n {\r\n key: keys[1],\r\n name: 'Share',\r\n canCheck: true,\r\n isChecked: selection[keys[1]],\r\n onClick: this._onToggleSelect\r\n },\r\n {\r\n key: keys[2],\r\n name: 'Mobile',\r\n canCheck: true,\r\n isChecked: selection[keys[2]],\r\n onClick: this._onToggleSelect\r\n },\r\n {\r\n key: 'divider_1',\r\n name: '-',\r\n },\r\n\r\n {\r\n key: keys[3],\r\n name: 'Print',\r\n canCheck: true,\r\n isChecked: selection[keys[3]],\r\n onClick: this._onToggleSelect\r\n },\r\n {\r\n key: keys[4],\r\n name: 'Music',\r\n canCheck: true,\r\n isChecked: selection[keys[4]],\r\n onClick: this._onToggleSelect\r\n },\r\n {\r\n key: keys[5],\r\n subMenuProps: {\r\n items: [\r\n {\r\n key: keys[6],\r\n name: 'Email message',\r\n canCheck: true,\r\n isChecked: selection[keys[6]],\r\n onClick: this._onToggleSelect\r\n },\r\n {\r\n key: keys[7],\r\n name: 'Calendar event',\r\n canCheck: true,\r\n isChecked: selection[keys[7]],\r\n onClick: this._onToggleSelect\r\n }\r\n ],\r\n },\r\n name: 'New'\r\n },\r\n ]\r\n }\r\n />) : (null) }\r\n </div>\r\n );\r\n }\r\n\r\n private _onToggleSelect(ev?: React.MouseEvent<HTMLButtonElement>, item?: IContextualMenuItem) {\r\n let { selection } = this.state;\r\n\r\n selection[item.key] = !selection[item.key];\r\n\r\n this.setState({\r\n selection: selection\r\n });\r\n }\r\n\r\n private _onClick(event: React.MouseEvent<HTMLButtonElement>) {\r\n this.setState({ isContextMenuVisible: true });\r\n }\r\n\r\n private _onDismiss() {\r\n this.setState({ isContextMenuVisible: false });\r\n }\r\n\r\n}\r\n"; });