office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.09 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 ButtonType,\n IButtonProps\n} from '../../../../index';\n\nexport interface ITeachingBubbleBasicExampleState {\n isTeachingBubbleVisible?: boolean;\n}\n\nexport class TeachingBubbleBasicExample extends React.Component<any, ITeachingBubbleBasicExampleState> {\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 let examplePrimaryButton: IButtonProps = {\n buttonType: ButtonType.primary,\n children: 'Try it out'\n };\n let exampleSecondaryButtonProps: IButtonProps = {\n children: 'May be later',\n onClick: this._onDismiss\n };\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 primaryButtonProps={ examplePrimaryButton }\n secondaryButtonProps={ exampleSecondaryButtonProps }\n onDismiss={ this._onDismiss }\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";