office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.77 kB
JavaScript
module.exports = "/* tslint:disable:no-unused-variable */\nimport * as React from 'react';\n/* tslint:enable:no-unused-variable */\n\nimport {\n TeachingBubble,\n Button\n} from '../../../../index';\n\nexport interface ITeachingBubbleCondensedExampleState {\n isTeachingBubbleVisible?: boolean;\n}\n\nexport class TeachingBubbleCondensedExample extends React.Component<any, ITeachingBubbleCondensedExampleState> {\n private _menuButtonElement: HTMLElement;\n\n public constructor() {\n super();\n\n this._onDismiss = this._onDismiss.bind(this);\n\n this.state = {\n isTeachingBubbleVisible: false,\n };\n }\n\n public render() {\n let { isTeachingBubbleVisible } = this.state;\n\n return (\n <div className='ms-TeachingBubbleExample'>\n <span className='ms-TeachingBubbleBasicExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton }>\n <Button onClick={ this._onDismiss } >{ isTeachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble' }</Button>\n </span>\n { isTeachingBubbleVisible ? (\n <div>\n <TeachingBubble\n targetElement={ this._menuButtonElement }\n hasCondensedHeadline={ true }\n onDismiss={ this._onDismiss }\n hasCloseIcon={ true }\n headline='Discover what’s trending around you'\n >\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni harum non?\n </TeachingBubble>\n </div>\n ) : (null) }\n </div>\n );\n }\n\n private _onDismiss(ev: any) {\n this.setState({\n isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible\n });\n }\n}\n";