office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 9.97 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport { ContextualMenu, DirectionalHint, Button, ButtonType, FocusZoneDirection } from '../../../../index';\r\nimport './ContextualMenuExample.scss';\r\nexport interface IContextualMenuMultiselectExampleState {\r\n selection?: { [key: string]: boolean };\r\n isContextMenuVisible?: boolean;\r\n}\r\n\r\nexport class ContextualMenuCustomizationExample extends React.Component<any, IContextualMenuMultiselectExampleState> {\r\n\r\n constructor() {\r\n super();\r\n this._onClick = this._onClick.bind(this);\r\n this._onDismiss = this._onDismiss.bind(this);\r\n this.state = {\r\n selection: {},\r\n isContextMenuVisible: false\r\n };\r\n }\r\n\r\n public render() {\r\n return (\r\n <div>\r\n <Button onClick={ this._onClick } className='ContextualMenuButton3'> Click for ContextualMenu </Button>\r\n { this.state.isContextMenuVisible ? (\r\n <ContextualMenu\r\n target='.ContextualMenuButton3'\r\n shouldFocusOnMount={ false }\r\n onDismiss={ this._onDismiss }\r\n directionalHint={ DirectionalHint.bottomLeftEdge }\r\n className='ms-ContextualMenu-customizationExample'\r\n items={\r\n [\r\n {\r\n key: 'newItem',\r\n icon: 'Add',\r\n subMenuProps: {\r\n items: [\r\n {\r\n key: 'emailMessage',\r\n name: 'Email message',\r\n },\r\n {\r\n key: 'calendarEvent',\r\n name: 'Calendar event',\r\n }\r\n ],\r\n },\r\n name: 'New'\r\n },\r\n {\r\n key: 'upload',\r\n icon: 'Upload',\r\n name: 'Upload'\r\n },\r\n {\r\n key: 'divider_1',\r\n name: '-',\r\n },\r\n {\r\n key: 'charm',\r\n name: 'Charm',\r\n className: 'Charm-List',\r\n subMenuProps: {\r\n arrowDirection: FocusZoneDirection.bidirectional,\r\n items: [\r\n {\r\n key: 'none',\r\n name: 'None'\r\n },\r\n {\r\n key: 'bulb',\r\n name: 'Lightbulb',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'run',\r\n name: 'Running',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'plane',\r\n name: 'Airplane',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'page',\r\n name: 'Page',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'cake',\r\n name: 'Cake',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'soccer',\r\n name: 'Soccer',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'home',\r\n name: 'Home',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'emoji',\r\n name: 'Emoji2',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'work',\r\n name: 'Work',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'coffee',\r\n name: 'Coffee',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'people',\r\n name: 'People',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'stopwatch',\r\n name: 'Stopwatch',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'music',\r\n name: 'MusicInCollectionFill',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n },\r\n {\r\n key: 'lock',\r\n name: 'Lock',\r\n onRender: this._renderCharmMenuItem,\r\n className: 'ms-ContextualMenu-customizationExample-item'\r\n }\r\n ]\r\n },\r\n },\r\n {\r\n key: 'categories',\r\n name: 'Categorize',\r\n subMenuProps: {\r\n items: [\r\n {\r\n key: 'categories',\r\n name: 'categories',\r\n categoryList: [\r\n {\r\n name: 'Personal',\r\n color: 'yellow'\r\n },\r\n {\r\n name: 'Work',\r\n color: 'green'\r\n },\r\n {\r\n name: 'Birthday',\r\n color: 'blue'\r\n },\r\n {\r\n name: 'Spam',\r\n color: 'grey'\r\n },\r\n {\r\n name: 'Urgent',\r\n color: 'red'\r\n },\r\n {\r\n name: 'Hobbies',\r\n color: 'black'\r\n },\r\n ],\r\n onRender: this._renderCategoriesList\r\n },\r\n {\r\n key: 'divider_1',\r\n name: '-',\r\n },\r\n {\r\n key: 'clear',\r\n name: 'Clear categories'\r\n },\r\n {\r\n key: 'manage',\r\n name: 'Manage categories'\r\n }\r\n ]\r\n },\r\n }\r\n ]\r\n }\r\n />) : null }\r\n </div>\r\n );\r\n }\r\n\r\n private _renderCharmMenuItem(item: any) {\r\n return <Button\r\n buttonType={ ButtonType.icon }\r\n icon={ item.name }\r\n className='ms-ContextualMenu-customizationExample-icon ms-ContextualMenu-link'\r\n data-is-focusable={ true } />;\r\n }\r\n\r\n private _renderCategoriesList(item: any) {\r\n return (\r\n <ul className='ms-ContextualMenu-customizationExample-categoriesList'>\r\n <li className='ms-ContextualMenu-item'>\r\n { item.categoryList.map(category =>\r\n <button className='ms-ContextualMenu-link' role='menuitem'>\r\n <div>\r\n <span\r\n className='ms-ContextualMenu-icon ms-ContextualMenu-customizationExample-categorySwatch'\r\n style={ { backgroundColor: category.color } } />\r\n <span className='ms-ContextualMenu-itemText ms-font-m ms-font-weight-regular'>\r\n { category.name }\r\n </span>\r\n </div>\r\n </button>\r\n ) }\r\n </li>\r\n </ul>\r\n );\r\n }\r\n\r\n private _onClick(event: any) {\r\n this.setState({ isContextMenuVisible: true });\r\n }\r\n\r\n private _onDismiss(event: any) {\r\n this.setState({ isContextMenuVisible: false });\r\n }\r\n\r\n}\r\n"; });