module.exports = "import * as React from 'react';\nimport './CalloutExample.scss';\nimport {\n  Callout,\n  Button,\n  DirectionalHint,\n  Checkbox,\n  TextField,\n  Dropdown,\n  IDropdownOption\n} from '../../../../index';\n\nexport interface ICalloutDirectionalExampleState {\n  isCalloutVisible?: boolean;\n  directionalHint?: DirectionalHint;\n  isBeakVisible?: boolean;\n  gapSpace?: number;\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 CalloutDirectionalExample extends React.Component<any, ICalloutDirectionalExampleState> {\n  private _menuButtonElement: HTMLElement;\n  private _gapSize: TextField;\n\n  public constructor() {\n    super();\n\n    this._onShowMenuClicked = this._onShowMenuClicked.bind(this);\n    this._onShowBeakChanged = this._onShowBeakChanged.bind(this);\n    this._onDirectionalChanged = this._onDirectionalChanged.bind(this);\n    this._onChangeGapSizeClicked = this._onChangeGapSizeClicked.bind(this);\n\n    this.state = {\n      isCalloutVisible: false,\n      isBeakVisible: true,\n      directionalHint: DirectionalHint.bottomLeftEdge,\n      gapSpace: 10\n    };\n  }\n\n  public render() {\n    let { isCalloutVisible, isBeakVisible, directionalHint, gapSpace } = 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-CalloutBasicExample'>\n         <div className='ms-CalloutExample-configArea'>\n          <Checkbox text='Show beak' isChecked={ isBeakVisible } onChanged={ this._onShowBeakChanged } />\n          <TextField ref={ (gapSize) => this._gapSize = gapSize } label='Gap Space' placeholder='Type in the gap space' />\n          <Button onClick={ this._onChangeGapSizeClicked }>Submit</Button>\n          <Dropdown\n            label='Directional hint'\n            selectedKey={ DirectionalHint[directionalHint] }\n            options={ DIRECTION_OPTIONS }\n            onChanged={ this._onDirectionalChanged } />\n        </div>\n        <div className='ms-CalloutExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton }>\n          <Button onClick={ this._onShowMenuClicked } >{ isCalloutVisible ? 'Hide callout' : 'Show callout' }</Button>\n        </div>\n        { isCalloutVisible ? (\n        <Callout\n          gapSpace={ gapSpace }\n          targetElement={ this._menuButtonElement }\n          isBeakVisible={ isBeakVisible }\n          directionalHint={ directionalHint }\n          beakStyle={ 'ms-Callout-smallbeak' }\n          beakWidth={ 16 }\n         >\n            <div className='ms-Callout-header'>\n              <p className='ms-Callout-title'>\n                All of your favorite people\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         </Callout>\n        ) : (null) }\n      </div>\n    );\n  }\n\n  private _onShowMenuClicked() {\n    this.setState({\n      isCalloutVisible: !this.state.isCalloutVisible\n    });\n  }\n\n  private _onShowBeakChanged(isVisible: boolean) {\n    this.setState({\n      isBeakVisible: isVisible\n    });\n  }\n\n  private _onDirectionalChanged(option: IDropdownOption) {\n    this.setState({\n      directionalHint: DirectionalHint[option.key]\n    });\n  }\n\n  private _onChangeGapSizeClicked() {\n    this.setState({\n      gapSpace: parseInt(this._gapSize.state.value, 10)\n    });\n  }\n}";