module.exports = "import * as React from 'react';\nimport './CalloutExample.scss';\nimport {\n  Callout,\n  Button,\n  DirectionalHint,\n  Dropdown,\n  IDropdownOption\n} from '../../../../index';\n\nexport interface ICalloutCoverExampleState {\n  isCalloutVisible?: boolean;\n  directionalHint?: DirectionalHint;\n}\n\nconst DIRECTION_OPTIONS = [\n  { key: DirectionalHint[DirectionalHint.topLeftEdge], text: 'Top Left Edge' },\n  { key: DirectionalHint[DirectionalHint.topCenter], text: 'Top Center' },\n  { key: DirectionalHint[DirectionalHint.topRightEdge], text: 'Top Right Edge' },\n  { key: DirectionalHint[DirectionalHint.topAutoEdge], text: 'Top Auto Edge' },\n  { key: DirectionalHint[DirectionalHint.bottomLeftEdge], text: 'Bottom Left Edge' },\n  { key: DirectionalHint[DirectionalHint.bottomCenter], text: 'Bottom Center' },\n  { key: DirectionalHint[DirectionalHint.bottomRightEdge], text: 'Bottom Right Edge' },\n  { key: DirectionalHint[DirectionalHint.bottomAutoEdge], text: 'Bottom Auto Edge' },\n  { key: DirectionalHint[DirectionalHint.leftTopEdge], text: 'Left Top Edge' },\n  { key: DirectionalHint[DirectionalHint.leftCenter], text: 'Left Center' },\n  { key: DirectionalHint[DirectionalHint.leftBottomEdge], text: 'Left Bottom Edge' },\n  { key: DirectionalHint[DirectionalHint.rightTopEdge], text: 'Right Top Edge' },\n  { key: DirectionalHint[DirectionalHint.rightCenter], text: 'Right Center' },\n  { key: DirectionalHint[DirectionalHint.rightBottomEdge], text: 'Right Bottom Edge' },\n];\n\nexport class CalloutCoverExample extends React.Component<any, ICalloutCoverExampleState> {\n  private _menuButtonElement: HTMLElement;\n\n  public constructor() {\n    super();\n\n    this._onDismiss = this._onDismiss.bind(this);\n    this._onShowMenuClicked = this._onShowMenuClicked.bind(this);\n    this._onDirectionalChanged = this._onDirectionalChanged.bind(this);\n\n    this.state = {\n      isCalloutVisible: false,\n      directionalHint: DirectionalHint.bottomLeftEdge\n    };\n  }\n\n  public render() {\n    let { isCalloutVisible, directionalHint } = this.state;\n    // ms-Callout-smallbeak is used in this directional example to reflect all the positions. Large beak will disable some position to avoid beak over the callout edge.\n    return (\n      <div className='ms-CalloutExample'>\n         <div className='ms-CalloutExample-configArea'>\n          <Dropdown\n            label='Directional hint'\n            selectedKey={ DirectionalHint[directionalHint] }\n            options={ DIRECTION_OPTIONS }\n            onChanged={ this._onDirectionalChanged } />\n        </div>\n        <div className='ms-CalloutCoverExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton }>\n          <Button onClick={ this._onShowMenuClicked } >{ isCalloutVisible ? 'Hide callout' : 'Show callout' }</Button>\n        </div>\n        { isCalloutVisible ? (\n        <Callout\n          className='ms-CalloutExample-callout'\n          onDismiss={ this._onDismiss }\n          targetElement={ this._menuButtonElement }\n          directionalHint={ directionalHint }\n          coverTarget={ true }\n          isBeakVisible={ false }\n          gapSpace={ 0 }\n         >\n            <div className='ms-Callout-header'>\n              <p className='ms-Callout-title'>\n                I'm covering the target!\n              </p>\n            </div>\n            <div className='ms-Callout-inner'>\n              <div className='ms-Callout-content'>\n              <Button onClick={ this._onShowMenuClicked }> Click to dismiss </Button>\n              </div>\n            </div>\n         </Callout>\n        ) : (null) }\n      </div>\n    );\n  }\n\n  private _onDismiss() {\n    this.setState({ isCalloutVisible: false });\n  }\n\n  private _onShowMenuClicked() {\n    this.setState({\n      isCalloutVisible: !this.state.isCalloutVisible\n    });\n  }\n\n  private _onDirectionalChanged(option: IDropdownOption) {\n    this.setState({\n      directionalHint: DirectionalHint[option.key]\n    });\n  }\n}";