office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 5.39 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport './CalloutExample.scss';\r\nimport {\r\n Callout,\r\n Button,\r\n DirectionalHint,\r\n Checkbox,\r\n Dropdown,\r\n IDropdownOption,\r\n Slider,\r\n autobind\r\n} from '../../../../index';\r\n\r\nexport interface ICalloutDirectionalExampleState {\r\n isCalloutVisible?: 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 CalloutDirectionalExample extends React.Component<any, ICalloutDirectionalExampleState> {\r\n private _menuButtonElement: HTMLElement;\r\n public constructor() {\r\n super();\r\n\r\n this.state = {\r\n isCalloutVisible: false,\r\n isBeakVisible: true,\r\n directionalHint: DirectionalHint.bottomLeftEdge,\r\n beakWidth: 10\r\n };\r\n }\r\n\r\n public render() {\r\n let { isCalloutVisible, isBeakVisible, directionalHint, gapSpace, beakWidth } = this.state;\r\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.\r\n return (\r\n <div className='ms-CalloutExample'>\r\n <div className='ms-CalloutExample-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-CalloutExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton }>\r\n <Button onClick={ this._onShowMenuClicked } >{ isCalloutVisible ? 'Hide callout' : 'Show callout' }</Button>\r\n </div>\r\n { isCalloutVisible ? (\r\n <Callout\r\n className='ms-CalloutExample-callout'\r\n gapSpace={ gapSpace }\r\n targetElement={ this._menuButtonElement }\r\n isBeakVisible={ isBeakVisible }\r\n beakWidth={ beakWidth }\r\n directionalHint={ directionalHint }\r\n >\r\n <div className='ms-CalloutExample-header'>\r\n <p className='ms-CalloutExample-title'>\r\n All of your favorite people\r\n </p>\r\n </div>\r\n <div className='ms-CalloutExample-inner'>\r\n <div className='ms-CalloutExample-content'>\r\n <p className='ms-CalloutExample-subText'>\r\n Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.\r\n </p>\r\n </div>\r\n </div>\r\n </Callout>\r\n ) : (null) }\r\n </div>\r\n );\r\n }\r\n\r\n @autobind\r\n private _onShowMenuClicked() {\r\n this.setState({\r\n isCalloutVisible: !this.state.isCalloutVisible\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 beakWidth: 10\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}"; });