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