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

Reusable React components for building experiences for Office 365.

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