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