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