office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.51 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport './CalloutExample.scss';\r\nimport {\r\n Callout,\r\n Button,\r\n Link\r\n} from '../../../../index';\r\n\r\nexport interface ICalloutBaiscExampleState {\r\n isCalloutVisible?: boolean;\r\n}\r\n\r\nexport class CalloutBasicExample extends React.Component<any, ICalloutBaiscExampleState> {\r\n private _menuButtonElement: HTMLElement;\r\n\r\n public constructor() {\r\n super();\r\n\r\n this._onShowMenuClicked = this._onShowMenuClicked.bind(this);\r\n this._onCalloutDismiss = this._onCalloutDismiss.bind(this);\r\n\r\n this.state = {\r\n isCalloutVisible: false\r\n };\r\n }\r\n\r\n public render() {\r\n let { isCalloutVisible } = this.state;\r\n\r\n return (\r\n <div className='ms-CalloutExample'>\r\n <div className='ms-CalloutBasicExample-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 gapSpace={ 0 }\r\n targetElement={ this._menuButtonElement }\r\n onDismiss={ this._onCalloutDismiss }\r\n setInitialFocus={ true }\r\n >\r\n <div className='ms-CalloutExample-header'>\r\n <p className='ms-CalloutExample-title'>\r\n All of your favorite people\r\n </p>\r\n </div>\r\n <div className='ms-CalloutExample-inner'>\r\n <div className='ms-CalloutExample-content'>\r\n <p className='ms-CalloutExample-subText'>\r\n Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.\r\n </p>\r\n </div>\r\n <div className='ms-CalloutExample-actions'>\r\n <Link className='ms-CalloutExample-link' href='http://microsoft.com'>Go to microsoft</Link>\r\n </div>\r\n </div>\r\n </Callout>\r\n ) }\r\n </div>\r\n );\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 _onCalloutDismiss() {\r\n this.setState({\r\n isCalloutVisible: false\r\n });\r\n }\r\n}\r\n"; });