-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FocusZone and FocusTrapZone example improvements (#8505)
* FocusZone and FocusTrapZone example updates * Use toggles instead of buttons * tokens
- Loading branch information
1 parent
a787974
commit 2a358d7
Showing
30 changed files
with
3,668 additions
and
5,807 deletions.
There are no files selected for viewing
11 changes: 11 additions & 0 deletions
11
common/changes/office-ui-fabric-react/focus-examples_2019-03-27-23-27.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "changes": [ | ||
| { | ||
| "packageName": "office-ui-fabric-react", | ||
| "comment": "FocusZone and FocusTrapZone example improvements", | ||
| "type": "patch" | ||
| } | ||
| ], | ||
| "packageName": "office-ui-fabric-react", | ||
| "email": "[email protected]" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 35 additions & 70 deletions
105
...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,66 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; | ||
| import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; | ||
| import { Link } from 'office-ui-fabric-react/lib/Link'; | ||
| import { TextField } from 'office-ui-fabric-react/lib/TextField'; | ||
| import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle'; | ||
| import './FocusTrapZone.Box.Example.scss'; | ||
| import { Stack } from 'office-ui-fabric-react/lib/Stack'; | ||
|
|
||
| export interface IBoxNoClickExampleExampleState { | ||
| isToggled: boolean; | ||
| export interface IFocusTrapZoneBoxClickExampleState { | ||
| useTrapZone: boolean; | ||
| } | ||
|
|
||
| export default class BoxNoClickExample extends React.Component<React.HTMLAttributes<HTMLDivElement>, IBoxNoClickExampleExampleState> { | ||
| private _toggle: IToggle; | ||
| export class FocusTrapZoneBoxClickExample extends React.Component<{}, IFocusTrapZoneBoxClickExampleState> { | ||
| public state: IFocusTrapZoneBoxClickExampleState = { useTrapZone: false }; | ||
|
|
||
| constructor(props: React.HTMLAttributes<HTMLDivElement>) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| isToggled: false | ||
| }; | ||
| } | ||
| private _toggle = React.createRef<IToggle>(); | ||
|
|
||
| public render() { | ||
| const { isToggled } = this.state; | ||
|
|
||
| return ( | ||
| <div> | ||
| <DefaultButton secondaryText="Focuses inside the FocusTrapZone" onClick={this._onButtonClickHandler} text="Go to Trap Zone" /> | ||
|
|
||
| {(() => { | ||
| if (isToggled) { | ||
| return ( | ||
| <FocusTrapZone isClickableOutsideFocusTrap={true} forceFocusInsideTrap={false}> | ||
| {this._internalContents()} | ||
| </FocusTrapZone> | ||
| ); | ||
| } else { | ||
| return <div>{this._internalContents()}</div>; | ||
| } | ||
| })()} | ||
| {this.state.useTrapZone ? ( | ||
| <FocusTrapZone isClickableOutsideFocusTrap={true} forceFocusInsideTrap={false}> | ||
| {this._internalContents()} | ||
| </FocusTrapZone> | ||
| ) : ( | ||
| this._internalContents() | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| private _internalContents() { | ||
| const { isToggled } = this.state; | ||
| const { useTrapZone } = this.state; | ||
|
|
||
| return ( | ||
| <div className="ms-FocusTrapZoneBoxExample"> | ||
| <TextField label="Default TextField" placeholder="Input inside Focus Trap Zone" className="" /> | ||
| <Link href="" className=""> | ||
| Hyperlink inside FocusTrapZone | ||
| </Link> | ||
| <br /> | ||
| <br /> | ||
| <Stack | ||
| horizontalAlign="start" | ||
| tokens={{ childrenGap: 15 }} | ||
| styles={{ | ||
| root: { border: `2px dashed ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 } | ||
| }} | ||
| > | ||
| <Toggle | ||
| componentRef={this._setRef} | ||
| checked={isToggled} | ||
| label="Use trap zone" | ||
| componentRef={this._toggle} | ||
| checked={useTrapZone} | ||
| onChange={this._onFocusTrapZoneToggleChanged} | ||
| label="Focus Trap Zone" | ||
| onText="On" | ||
| onText="On (toggle to exit)" | ||
| offText="Off" | ||
| /> | ||
| {(() => { | ||
| if (isToggled) { | ||
| return ( | ||
| <DefaultButton secondaryText="Exit Focus Trap Zone" onClick={this._onExitButtonClickHandler} text="Exit Focus Trap Zone" /> | ||
| ); | ||
| } | ||
| })()} | ||
| </div> | ||
| <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} /> | ||
| <Link href="https://bing.com">Hyperlink inside trap zone</Link> | ||
| </Stack> | ||
| ); | ||
| } | ||
|
|
||
| private _onButtonClickHandler = (): void => { | ||
| this.setState({ | ||
| isToggled: true | ||
| private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => { | ||
| this.setState({ useTrapZone: !!checked }, () => { | ||
| // Restore focus to toggle after disabling the trap zone | ||
| // (the trap zone itself will handle initial focus when it's enabled) | ||
| if (!checked) { | ||
| this._toggle.current!.focus(); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| private _onExitButtonClickHandler = (): void => { | ||
| this.setState({ | ||
| isToggled: false | ||
| }); | ||
| }; | ||
|
|
||
| private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, isToggled: boolean): void => { | ||
| this.setState( | ||
| { | ||
| isToggled: isToggled | ||
| }, | ||
| () => this._toggle.focus() | ||
| ); | ||
| }; | ||
|
|
||
| private _setRef = (toggle: IToggle): void => { | ||
| this._toggle = toggle; | ||
| }; | ||
| } |
11 changes: 0 additions & 11 deletions
11
...fice-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.scss
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.