office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 4.14 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 target?: {x: number, y: number};\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}> Click for ContextualMenu </Button>\r\n { this.state.isContextMenuVisible ? (\r\n <ContextualMenu\r\n targetPoint={this.state.target}\r\n useTargetPoint={true}\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 checked: 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 checked: 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 checked: 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 checked: 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 checked: selection[keys[4]],\r\n onClick: this._onToggleSelect\r\n },\r\n {\r\n key: keys[5],\r\n items: [\r\n {\r\n key: keys[6],\r\n name: 'Email message',\r\n canCheck: true,\r\n checked: 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 checked: selection[keys[7]],\r\n onClick: this._onToggleSelect\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({target: {x: event.clientX, y: event.clientY}, isContextMenuVisible: true});\r\n }\r\n\r\n private _onDismiss() {\r\n this.setState({isContextMenuVisible: false});\r\n }\r\n\r\n}\r\n"; });