office-ui-fabric-react/lib/demo/pages/CalloutPage/examples/Callout.Directional.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "import * as React from 'react';\nimport './CalloutExample.scss';\nimport {\n  Callout,\n  Button,\n  DirectionalHint,\n  Checkbox,\n  Dropdown,\n  IDropdownOption,\n  Slider,\n  autobind\n} from '../../../../index';\n\nexport interface ICalloutDirectionalExampleState {\n  isCalloutVisible?: boolean;\n  directionalHint?: DirectionalHint;\n  isBeakVisible?: boolean;\n  gapSpace?: number;\n  beakWidth?: 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  public constructor() {\n    super();\n\n    this.state = {\n      isCalloutVisible: false,\n      isBeakVisible: true,\n      directionalHint: DirectionalHint.bottomLeftEdge,\n      beakWidth: 10\n    };\n  }\n\n  public render() {\n    let { isCalloutVisible, isBeakVisible, directionalHint, gapSpace, beakWidth } = 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          <Checkbox label='Show beak' checked={ isBeakVisible } onChange={ this._onShowBeakChange } />\n          <Slider\n            max={ 20 }\n            label='Gap Space'\n            min={ 0 }\n            defaultValue={ 0 }\n            onChange={ this._onGapSlider } />\n          { isBeakVisible &&\n            (<Slider\n            max={ 50 }\n            label='Beak Width'\n            min={ 10 }\n            defaultValue={ 10 }\n            onChange={ this._onBeakWidthSlider } />) }\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            className='ms-CalloutExample-callout'\n            gapSpace={ gapSpace }\n            targetElement={ this._menuButtonElement }\n            isBeakVisible={ isBeakVisible }\n            beakWidth={ beakWidth }\n            directionalHint={ directionalHint }\n            >\n            <div className='ms-CalloutExample-header'>\n              <p className='ms-CalloutExample-title'>\n                All of your favorite people\n              </p>\n            </div>\n            <div className='ms-CalloutExample-inner'>\n              <div className='ms-CalloutExample-content'>\n                <p className='ms-CalloutExample-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  @autobind\n  private _onShowMenuClicked() {\n    this.setState({\n      isCalloutVisible: !this.state.isCalloutVisible\n    });\n  }\n\n  @autobind\n  private _onShowBeakChange(ev: React.FormEvent<HTMLElement>, isVisible: boolean) {\n    this.setState({\n      isBeakVisible: isVisible,\n      beakWidth: 10\n    });\n  }\n\n  @autobind\n  private _onDirectionalChanged(option: IDropdownOption) {\n    this.setState({\n      directionalHint: DirectionalHint[option.key]\n    });\n  }\n\n  @autobind\n  private _onGapSlider(value: number) {\n    this.setState({\n      gapSpace: value\n    });\n  }\n\n  @autobind\n  private _onBeakWidthSlider(value: number) {\n    this.setState({\n      beakWidth: value\n    });\n  }\n}";