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

Reusable React components for building experiences for Office 365.

define([], function() { return "import * as React from 'react';\r\nimport {\r\n  Button,\r\n  Checkbox,\r\n  ContextualMenu,\r\n  DirectionalHint,\r\n  Dropdown,\r\n  TextField,\r\n  IDropdownOption,\r\n  autobind,\r\n  Slider\r\n} from '../../../../index';\r\nimport './ContextualMenuExample.scss';\r\n\r\nexport interface IContextualMenuDirectionalExampleState {\r\n  isContextualMenuVisible?: boolean;\r\n  directionalHint?: DirectionalHint;\r\n  isBeakVisible?: boolean;\r\n  gapSpace?: number;\r\n  beakWidth?: number;\r\n}\r\n\r\nconst DIRECTION_OPTIONS = [\r\n  { key: DirectionalHint[DirectionalHint.topLeftEdge], text: 'Top Left Edge' },\r\n  { key: DirectionalHint[DirectionalHint.topCenter], text: 'Top Center' },\r\n  { key: DirectionalHint[DirectionalHint.topRightEdge], text: 'Top Right Edge' },\r\n  { key: DirectionalHint[DirectionalHint.topAutoEdge], text: 'Top Auto Edge' },\r\n  { key: DirectionalHint[DirectionalHint.bottomLeftEdge], text: 'Bottom Left Edge' },\r\n  { key: DirectionalHint[DirectionalHint.bottomCenter], text: 'Bottom Center' },\r\n  { key: DirectionalHint[DirectionalHint.bottomRightEdge], text: 'Bottom Right Edge' },\r\n  { key: DirectionalHint[DirectionalHint.bottomAutoEdge], text: 'Bottom Auto Edge' },\r\n  { key: DirectionalHint[DirectionalHint.leftTopEdge], text: 'Left Top Edge' },\r\n  { key: DirectionalHint[DirectionalHint.leftCenter], text: 'Left Center' },\r\n  { key: DirectionalHint[DirectionalHint.leftBottomEdge], text: 'Left Bottom Edge' },\r\n  { key: DirectionalHint[DirectionalHint.rightTopEdge], text: 'Right Top Edge' },\r\n  { key: DirectionalHint[DirectionalHint.rightCenter], text: 'Right Center' },\r\n  { key: DirectionalHint[DirectionalHint.rightBottomEdge], text: 'Right Bottom Edge' },\r\n];\r\n\r\nexport class ContextualMenuDirectionalExample extends React.Component<{}, IContextualMenuDirectionalExampleState> {\r\n  public refs: {\r\n    [key: string]: React.ReactInstance;\r\n    menuButton: HTMLElement;\r\n    gapSize: TextField;\r\n  };\r\n\r\n  public constructor() {\r\n    super();\r\n\r\n    this.state = {\r\n      isContextualMenuVisible: false,\r\n      isBeakVisible: false,\r\n      directionalHint: DirectionalHint.bottomLeftEdge,\r\n      gapSpace: 0,\r\n      beakWidth: 10\r\n    };\r\n  }\r\n\r\n  public render() {\r\n    let { isContextualMenuVisible, isBeakVisible, directionalHint, gapSpace, beakWidth } = this.state;\r\n\r\n    return (\r\n      <div className='ms-ContextualMenuDirectionalExample'>\r\n        <div className='ms-ContextualMenuDirectionalExample-configArea'>\r\n          <Checkbox label='Show beak' checked={ isBeakVisible } onChange={ this._onShowBeakChange } />\r\n          <Slider\r\n            max={ 20 }\r\n            label='Gap Space'\r\n            min={ 0 }\r\n            defaultValue={ 0 }\r\n            onChange={ this._onGapSlider } />\r\n          { isBeakVisible &&\r\n            (<Slider\r\n              max={ 50 }\r\n              label='Beak Width'\r\n              min={ 10 }\r\n              defaultValue={ 10 }\r\n              onChange={ this._onBeakWidthSlider } />) }\r\n          <Dropdown\r\n            label='Directional hint'\r\n            selectedKey={ DirectionalHint[directionalHint] }\r\n            options={ DIRECTION_OPTIONS }\r\n            onChanged={ this._onDirectionalChanged } />\r\n        </div>\r\n        <div className='ms-ContextualMenuDirectionalExample-buttonArea' ref='menuButton'>\r\n          <Button onClick={ this._onShowMenuClicked }>{ isContextualMenuVisible ? 'Hide context menu' : 'Show context menu' }</Button>\r\n        </div>\r\n        { isContextualMenuVisible ? (\r\n          <ContextualMenu\r\n            target={ this.refs.menuButton }\r\n            isBeakVisible={ isBeakVisible }\r\n            directionalHint={ directionalHint }\r\n            gapSpace={ gapSpace }\r\n            beakWidth={ beakWidth }\r\n            items={\r\n              [\r\n                {\r\n                  key: 'newItem',\r\n                  name: 'New',\r\n                  icon: 'Add',\r\n                  subMenuProps: {\r\n                    items: [\r\n                      {\r\n                        key: 'emailMessage',\r\n                        name: 'Email message',\r\n                      },\r\n                      {\r\n                        key: 'calendarEvent',\r\n                        name: 'Calendar event',\r\n                      }\r\n                    ]\r\n                  },\r\n                },\r\n                {\r\n                  key: 'upload',\r\n                  name: 'Upload',\r\n                  icon: 'Upload'\r\n                },\r\n                {\r\n                  key: 'rename',\r\n                  name: 'Rename',\r\n                },\r\n                {\r\n                  key: '-',\r\n                  name: '-',\r\n                },\r\n                {\r\n                  key: 'share',\r\n                  name: 'Share',\r\n                  icon: 'Share',\r\n                  items: [\r\n                    {\r\n                      key: 'sharetoemail',\r\n                      name: 'Share to Email',\r\n                      icon: 'Mail'\r\n                    },\r\n                    {\r\n                      key: 'sharetofacebook',\r\n                      name: 'Share to Facebook',\r\n                    },\r\n                    {\r\n                      key: 'sharetotwitter',\r\n                      name: 'Share to Twitter',\r\n                      icon: 'Share'\r\n                    },\r\n                  ]\r\n                },\r\n                {\r\n                  key: 'print',\r\n                  name: 'Print',\r\n                  icon: 'Print'\r\n                },\r\n              ]\r\n            }\r\n            />\r\n        ) : (null) }\r\n      </div>\r\n    );\r\n  }\r\n\r\n  @autobind\r\n  private _onShowBeakChange(ev: React.FormEvent<HTMLElement>, isVisible: boolean) {\r\n    this.setState({\r\n      isBeakVisible: isVisible\r\n    });\r\n  }\r\n\r\n  @autobind\r\n  private _onShowMenuClicked() {\r\n    this.setState({\r\n      isContextualMenuVisible: !this.state.isContextualMenuVisible\r\n    });\r\n  }\r\n\r\n  @autobind\r\n  private _onDirectionalChanged(option: IDropdownOption) {\r\n    this.setState({\r\n      directionalHint: DirectionalHint[option.key]\r\n    });\r\n  }\r\n\r\n  @autobind\r\n  private _onGapSlider(value: number) {\r\n    this.setState({\r\n      gapSpace: value\r\n    });\r\n  }\r\n\r\n  @autobind\r\n  private _onBeakWidthSlider(value: number) {\r\n    this.setState({\r\n      beakWidth: value\r\n    });\r\n  }\r\n\r\n}\r\n"; });