office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 4.31 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport './CalloutExample.scss';\r\nimport {\r\n Callout,\r\n Button,\r\n DirectionalHint,\r\n Dropdown,\r\n IDropdownOption\r\n} from '../../../../index';\r\n\r\nexport interface ICalloutCoverExampleState {\r\n isCalloutVisible?: boolean;\r\n directionalHint?: DirectionalHint;\r\n}\r\n\r\nconst DIRECTION_OPTIONS = [\r\n { key: DirectionalHint[DirectionalHint.topLeftEdge], text: 'Top Left Edge' },\r\n { key: DirectionalHint[DirectionalHint.topCenter], text: 'Top Center' },\r\n { key: DirectionalHint[DirectionalHint.topRightEdge], text: 'Top Right Edge' },\r\n { key: DirectionalHint[DirectionalHint.topAutoEdge], text: 'Top Auto Edge' },\r\n { key: DirectionalHint[DirectionalHint.bottomLeftEdge], text: 'Bottom Left Edge' },\r\n { key: DirectionalHint[DirectionalHint.bottomCenter], text: 'Bottom Center' },\r\n { key: DirectionalHint[DirectionalHint.bottomRightEdge], text: 'Bottom Right Edge' },\r\n { key: DirectionalHint[DirectionalHint.bottomAutoEdge], text: 'Bottom Auto Edge' },\r\n { key: DirectionalHint[DirectionalHint.leftTopEdge], text: 'Left Top Edge' },\r\n { key: DirectionalHint[DirectionalHint.leftCenter], text: 'Left Center' },\r\n { key: DirectionalHint[DirectionalHint.leftBottomEdge], text: 'Left Bottom Edge' },\r\n { key: DirectionalHint[DirectionalHint.rightTopEdge], text: 'Right Top Edge' },\r\n { key: DirectionalHint[DirectionalHint.rightCenter], text: 'Right Center' },\r\n { key: DirectionalHint[DirectionalHint.rightBottomEdge], text: 'Right Bottom Edge' },\r\n];\r\n\r\nexport class CalloutCoverExample extends React.Component<any, ICalloutCoverExampleState> {\r\n private _menuButtonElement: HTMLElement;\r\n\r\n public constructor() {\r\n super();\r\n\r\n this._onDismiss = this._onDismiss.bind(this);\r\n this._onShowMenuClicked = this._onShowMenuClicked.bind(this);\r\n this._onDirectionalChanged = this._onDirectionalChanged.bind(this);\r\n\r\n this.state = {\r\n isCalloutVisible: false,\r\n directionalHint: DirectionalHint.bottomLeftEdge\r\n };\r\n }\r\n\r\n public render() {\r\n let { isCalloutVisible, directionalHint } = this.state;\r\n // ms-Callout-smallbeak is used in this directional example to reflect all the positions. Large beak will disable some position to avoid beak over the callout edge.\r\n return (\r\n <div className='ms-CalloutExample'>\r\n <div className='ms-CalloutExample-configArea'>\r\n <Dropdown\r\n label='Directional hint'\r\n selectedKey={ DirectionalHint[directionalHint] }\r\n options={ DIRECTION_OPTIONS }\r\n onChanged={ this._onDirectionalChanged } />\r\n </div>\r\n <div className='ms-CalloutCoverExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton }>\r\n <Button onClick={ this._onShowMenuClicked } >{ isCalloutVisible ? 'Hide callout' : 'Show callout' }</Button>\r\n </div>\r\n { isCalloutVisible ? (\r\n <Callout\r\n className='ms-CalloutExample-callout'\r\n onDismiss={ this._onDismiss }\r\n targetElement={ this._menuButtonElement }\r\n directionalHint={ directionalHint }\r\n coverTarget={ true }\r\n isBeakVisible={ false }\r\n gapSpace={ 0 }\r\n >\r\n <div className='ms-CalloutExample-header'>\r\n <p className='ms-CalloutExample-title'>\r\n I'm covering the target!\r\n </p>\r\n </div>\r\n <div className='ms-CalloutExample-inner'>\r\n <div className='ms-CalloutExample-content'>\r\n <Button onClick={ this._onShowMenuClicked }> Click to dismiss </Button>\r\n </div>\r\n </div>\r\n </Callout>\r\n ) : (null) }\r\n </div>\r\n );\r\n }\r\n\r\n private _onDismiss() {\r\n this.setState({ isCalloutVisible: false });\r\n }\r\n\r\n private _onShowMenuClicked() {\r\n this.setState({\r\n isCalloutVisible: !this.state.isCalloutVisible\r\n });\r\n }\r\n\r\n private _onDirectionalChanged(option: IDropdownOption) {\r\n this.setState({\r\n directionalHint: DirectionalHint[option.key]\r\n });\r\n }\r\n}"; });