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