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={ 20 }\n              targetElement={ this._menuButtonElement }\n              onDismiss= { (ev: any) => { this._onDismiss(ev); } }\n              >\n              <div className='ms-Callout-header'>\n                <p className='ms-Callout-title'>\n                  Callout title here\n                </p>\n              </div>\n              <div className='ms-Callout-inner'>\n                <div className='ms-Callout-content'>\n                  <p className='ms-Callout-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";