office-ui-fabric-react/lib/demo/pages/ContextualMenuPage/examples/ContextualMenu.Directional.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "import * as React from 'react';\nimport {\n  Button,\n  Checkbox,\n  ContextualMenu,\n  DirectionalHint,\n  Dropdown,\n  TextField,\n  IDropdownOption,\n  autobind,\n  Slider\n } from '../../../../index';\nimport './ContextualMenuExample.scss';\n\nexport interface IContextualMenuDirectionalExampleState {\n  isContextualMenuVisible?: 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 ContextualMenuDirectionalExample extends React.Component<{}, IContextualMenuDirectionalExampleState> {\n  public refs: {\n    [key: string]: React.ReactInstance;\n    menuButton: HTMLElement;\n    gapSize: TextField;\n  };\n\n  public constructor() {\n    super();\n\n    this.state = {\n      isContextualMenuVisible: false,\n      isBeakVisible: false,\n      directionalHint: DirectionalHint.bottomLeftEdge,\n      gapSpace: 0,\n      beakWidth: 10\n    };\n  }\n\n  public render() {\n    let { isContextualMenuVisible, isBeakVisible, directionalHint, gapSpace, beakWidth } = this.state;\n\n    return (\n      <div className='ms-ContextualMenuDirectionalExample'>\n       <div className='ms-ContextualMenuDirectionalExample-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-ContextualMenuDirectionalExample-buttonArea' ref='menuButton'>\n          <Button onClick={ this._onShowMenuClicked }>{ isContextualMenuVisible ? 'Hide context menu' : 'Show context menu'}</Button>\n        </div>\n        { isContextualMenuVisible ? (\n        <ContextualMenu\n          targetElement={ this.refs.menuButton }\n          isBeakVisible={ isBeakVisible }\n          directionalHint={ directionalHint }\n          gapSpace={ gapSpace }\n          beakWidth={ beakWidth }\n          items={\n            [\n              {\n                key: 'newItem',\n                name: 'New',\n                icon: 'Add',\n                items: [\n                  {\n                    key: 'emailMessage',\n                    name: 'Email message',\n                  },\n                  {\n                    key: 'calendarEvent',\n                    name: 'Calendar event',\n                  }\n                ]\n              },\n              {\n                key: 'upload',\n                name: 'Upload',\n                icon: 'Upload'\n              },\n              {\n                key: 'rename',\n                name: 'Rename',\n              },\n              {\n                key: '-',\n                name: '-',\n              },\n              {\n                key: 'share',\n                name: 'Share',\n                icon: 'Share',\n                items: [\n                  {\n                    key: 'sharetoemail',\n                    name: 'Share to Email',\n                    icon: 'Mail'\n                  },\n                  {\n                    key: 'sharetofacebook',\n                    name: 'Share to Facebook',\n                  },\n                  {\n                    key: 'sharetotwitter',\n                    name: 'Share to Twitter',\n                    icon: 'Share'\n                  },\n                ]\n              },\n              {\n                key: 'print',\n                name: 'Print',\n                icon: 'Print'\n              },\n            ]\n          }\n        />\n        ) : (null) }\n      </div>\n    );\n  }\n\n  @autobind\n  private _onShowBeakChange(ev: React.FormEvent<HTMLElement>, isVisible: boolean) {\n    this.setState({\n      isBeakVisible: isVisible\n    });\n  }\n\n  @autobind\n  private _onShowMenuClicked() {\n    this.setState({\n      isContextualMenuVisible: !this.state.isContextualMenuVisible\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\n}\n";