office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.17 kB
JavaScript
module.exports = "import * as React from 'react';\nimport './CalloutExample.scss';\nimport {\n Callout,\n Button,\n CommandBar\n} from '../../../../index';\nimport { items } from '../../CommandBarPage/examples/data';\n\nexport interface ICalloutBaiscExampleState {\n isCalloutVisible?: boolean;\n}\n\nexport class CalloutNestedExample extends React.Component<any, ICalloutBaiscExampleState> {\n private _menuButtonElement: HTMLElement;\n\n public constructor() {\n super();\n\n this._onDismiss = this._onDismiss.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._onDismiss } >{ isCalloutVisible ? 'Hide callout' : 'Show callout' }</Button>\n </div>\n { isCalloutVisible ? (\n <div>\n <Callout\n className='ms-CalloutExample-callout'\n gapSpace={ 0 }\n targetElement={ this._menuButtonElement }\n onDismiss={ (ev: any) => { this._onDismiss(ev); } }\n setInitialFocus={ true }\n >\n <div className='ms-CalloutExample-header'>\n <p className='ms-CalloutExample-title'>\n Callout title here\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>\n <CommandBar items={ this.props.items } />\n </Callout>\n </div>\n ) : (null) }\n </div>\n );\n }\n\n private _onDismiss(ev: any) {\n this.setState({\n isCalloutVisible: !this.state.isCalloutVisible\n });\n }\n}\n";