office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 4.65 kB
JavaScript
module.exports = "import * as React from 'react';\nimport { ContextualMenu, DirectionalHint, Button, getRTL } from '../../../../index';\nimport './ContextualMenuExample.scss';\n\nexport class ContextualMenuBasicExample extends React.Component<any, any> {\n\n constructor() {\n super();\n this.state = {isContextMenuVisible: false};\n this._onClick = this._onClick.bind(this);\n this._onDismiss = this._onDismiss.bind(this);\n }\n\n public render() {\n return (\n <div>\n <Button onClick={ this._onClick }> Click for ContextualMenu </Button>\n { this.state.isContextMenuVisible ? (\n <ContextualMenu\n shouldFocusOnMount={ true }\n targetPoint={ this.state.target }\n useTargetPoint={ true }\n onDismiss={ this._onDismiss }\n directionalHint={ getRTL() ? DirectionalHint.bottomRightEdge : DirectionalHint.bottomLeftEdge }\n items={\n [\n {\n key: 'newItem',\n icon: 'Add',\n items: [\n {\n key: 'emailMessage',\n name: 'Email message',\n title: 'Create an email'\n },\n {\n key: 'calendarEvent',\n name: 'Calendar event',\n title: 'Create a calendar event',\n }\n ],\n name: 'New'\n },\n {\n key: 'upload',\n icon: 'Upload',\n name: 'Upload',\n title: 'Upload a file'\n },\n {\n key: 'divider_1',\n name: '-',\n },\n {\n key: 'rename',\n name: 'Rename'\n },\n {\n key: 'properties',\n name: 'Properties'\n },\n {\n key: 'disabled',\n name: 'Disabled item',\n isDisabled: true,\n },\n {\n key: 'divider_2',\n name: '-',\n },\n {\n key: 'share',\n icon: 'Share',\n items: [\n {\n key: 'sharetoemail',\n name: 'Share to Email',\n icon: 'Mail'\n },\n {\n key: 'sharetofacebook',\n name: 'Share to Facebook',\n },\n {\n key: 'sharetotwitter',\n name: 'Share to Twitter',\n icon: 'Share',\n items: [\n {\n key: 'sharetoemail_1',\n name: 'Share to Email',\n title: 'Share to Email',\n icon: 'Mail'\n },\n {\n key: 'sharetofacebook_1',\n name: 'Share to Facebook',\n title: 'Share to Facebook',\n },\n {\n key: 'sharetotwitter_1',\n name: 'Share to Twitter',\n title: 'Share to Twitter',\n icon: 'Share'\n },\n ],\n },\n ],\n name: 'Share'\n },\n {\n key: 'print',\n icon: 'Print',\n name: 'Print'\n },\n {\n key: 'music',\n icon: 'MusicInCollectionFill',\n name: 'Music',\n },\n {\n key: 'divider_3',\n name: '-',\n },\n {\n key: 'Bing',\n name: 'Go to Bing',\n href: 'http://www.bing.com'\n },\n ]\n }\n />) : (null)}\n </div>\n );\n }\n\n private _onClick(event: any) {\n this.setState({target: {x: event.clientX, y: event.clientY}, isContextMenuVisible: true});\n }\n\n private _onDismiss(event: any) {\n this.setState({isContextMenuVisible: false});\n }\n}\n";