office-ui-fabric-react/lib/demo/pages/FocusTrapZonePage/examples/FocusTrapZone.Box.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "/* tslint:disable:no-unused-variable */\r\nimport * as React from 'react';\r\n/* tslint:enable:no-unused-variable */\r\n\r\nimport * as ReactDOM from 'react-dom';\r\nimport { FocusTrapZone } from '../../../../index';\r\nimport './FocusTrapZone.Box.Example.scss';\r\nimport {\r\n  Button,\r\n  Link,\r\n  TextField,\r\n  Toggle\r\n} from '../../../../index';\r\n\r\nexport interface IBoxExampleExampleState {\r\n  isChecked: boolean;\r\n}\r\n\r\nexport default class BoxExample extends React.Component<React.HTMLProps<HTMLDivElement>, IBoxExampleExampleState> {\r\n  public refs: {\r\n    [key: string]: React.ReactInstance;\r\n    toggle: HTMLElement;\r\n  };\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      isChecked: false,\r\n    };\r\n  }\r\n\r\n  public render() {\r\n    let { isChecked } = this.state;\r\n    return (\r\n      <div>\r\n        <Button description='Focuses inside the FocusTrapZone' onClick={ this._onButtonClickHandler.bind(this) }>Go to Trap Zone</Button>\r\n\r\n        {(() => {\r\n          if (isChecked) {\r\n            return (\r\n              <FocusTrapZone>\r\n                { this._internalContents() }\r\n              </FocusTrapZone>\r\n              );\r\n          } else {\r\n            return (\r\n              <div>\r\n                { this._internalContents() }\r\n              </div>\r\n            );\r\n          }\r\n        })()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private _internalContents() {\r\n    let { isChecked } = this.state;\r\n\r\n    return (\r\n      <div className='ms-FocusTrapZoneBoxExample'>\r\n        <TextField label='Default TextField' placeholder='Input inside Focus Trap Zone' className='' />\r\n        <Link href='' className='' >Hyperlink inside FocusTrapZone</Link><br /><br />\r\n        <Toggle\r\n          ref='toggle'\r\n          checked={ isChecked }\r\n          onChanged={ this._onFocusTrapZoneToggleChanged.bind(this) }\r\n          label='Focus Trap Zone'\r\n          onText='On'\r\n          offText='Off' />\r\n        {(() => {\r\n          if (isChecked) {\r\n            return (\r\n              <Button description='Exit Focus Trap Zone' onClick={ this._onExitButtonClickHandler.bind(this) }>Exit Focus Trap Zone</Button>\r\n            );\r\n          }\r\n        })()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private _onButtonClickHandler() {\r\n    this.setState({\r\n      isChecked: true\r\n    });\r\n  }\r\n\r\n  private _onExitButtonClickHandler() {\r\n    this.setState({\r\n      isChecked: false\r\n    });\r\n  }\r\n\r\n  private _onFocusTrapZoneToggleChanged(isChecked: boolean) {\r\n    this.setState({\r\n      isChecked: isChecked\r\n    }, () => {\r\n      let toggle = ReactDOM.findDOMNode(this.refs.toggle) as HTMLElement;\r\n\r\n      if (toggle) {\r\n        toggle.focus();\r\n      }\r\n    });\r\n  }\r\n}";