office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 9.41 kB
JavaScript
module.exports = "import * as React from 'react';\r\nimport { css } from '../../../../utilities/css';\r\nimport { ContextualMenu, DirectionalHint, Button } from '../../../../index';\r\nimport './ContextualMenuExample.scss';\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\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}> 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 className='ms-ContextualMenu-customizationExample'\r\n items={\r\n [\r\n {\r\n key: 'newItem',\r\n icon: 'Add',\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 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 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 key: 'categories',\r\n name: 'Categorize',\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 /> ) : null }\r\n </div>\r\n );\r\n }\r\n\r\n private _renderCharmMenuItem(item: any) {\r\n return <i className={ css('ms-Icon', 'ms-ContextualMenu-customizationExample-icon', 'ms-Icon--' + item.name) } />;\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({target: {x: event.clientX, y: event.clientY}, 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";