office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 3.88 kB
JavaScript
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";