Skip to content

Commit

Permalink
Use toggles instead of buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@ecraig12345
ecraig12345 committed Mar 29, 2019
1 parent a889f2a commit 00edd67
Show file tree
Hide file tree
Showing 14 changed files with 2,539 additions and 3,124 deletions.
3 changes: 2 additions & 1 deletion packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ export interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement
forceFocusInsideTrap?: boolean;

/**
* Indicates the selector for first focusable item. Only applies if focusPreviouslyFocusedInnerElement == false.
* Class name for first focusable item (do not append a dot).
* Only applies if `focusPreviouslyFocusedInnerElement` is false.
*/
firstFocusableSelector?: string | (() => string);

Expand Down
99 changes: 33 additions & 66 deletions ...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,99 +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 { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

const contentClass = mergeStyles({
border: '1px dashed #ababab'
});
import { Stack } from 'office-ui-fabric-react/lib/Stack';

export interface IFocusTrapZoneBoxClickExampleState {
isToggled: boolean;
useTrapZone: boolean;
}

export class FocusTrapZoneBoxClickExample extends React.Component<{}, IFocusTrapZoneBoxClickExampleState> {
public state: IFocusTrapZoneBoxClickExampleState = {
isToggled: false
};
public state: IFocusTrapZoneBoxClickExampleState = { useTrapZone: false };

private _toggle: IToggle;
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={contentClass}>
<TextField label="Default TextField" placeholder="Input inside Focus Trap Zone" />
<Link href="">Hyperlink inside FocusTrapZone</Link>
<br />
<br />
<Stack
gap={15}
horizontalAlign="start"
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;
};
}
92 changes: 32 additions & 60 deletions ...ffice-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,67 @@
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 { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

const contentClass = mergeStyles({
border: '1px dashed #ababab'
});
import { Stack } from 'office-ui-fabric-react/lib/Stack';

export interface IFocusTrapZoneBoxExampleState {
isChecked: boolean;
useTrapZone: boolean;
}

export class FocusTrapZoneBoxExample extends React.Component<{}, IFocusTrapZoneBoxExampleState> {
public state: IFocusTrapZoneBoxExampleState = {
isChecked: false
useTrapZone: false
};

private _toggle: IToggle;
private _toggle = React.createRef<IToggle>();

public render() {
const { isChecked } = this.state;

return (
<div>
<DefaultButton secondaryText="Focuses inside the FocusTrapZone" onClick={this._onButtonClickHandler} text="Go to Trap Zone" />

{(() => {
if (isChecked) {
return <FocusTrapZone>{this._internalContents()}</FocusTrapZone>;
} else {
return <div>{this._internalContents()}</div>;
}
})()}
{this.state.useTrapZone ? (
<FocusTrapZone>{this._internalContents()}</FocusTrapZone>
) : (
// prettier-ignore
this._internalContents()
)}
</div>
);
}

private _internalContents() {
const { isChecked } = this.state;
const { useTrapZone } = this.state;

return (
<div className={contentClass}>
<TextField label="Default TextField" placeholder="Input inside Focus Trap Zone" className="" />
<Link href="">Hyperlink inside FocusTrapZone</Link>
<br />
<br />
<Stack
gap={15}
horizontalAlign="start"
styles={{
root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
}}
>
<Toggle
componentRef={this._setRef}
checked={isChecked}
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 (isChecked) {
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({
isChecked: true
});
};

private _onExitButtonClickHandler = (): void => {
this.setState({
isChecked: false
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 _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, isChecked: boolean): void => {
this.setState(
{
isChecked: isChecked
},
() => this._toggle.focus()
);
};

private _setRef = (toggle: IToggle): void => {
this._toggle = toggle;
};
}
Loading

0 comments on commit 00edd67

Please sign in to comment.