-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make it possible to have
<FocusTrap /> without children (#186)
Only when `containerElements` are used.
- Loading branch information
1 parent
0836c6d
commit c4e4837
Showing
11 changed files
with
301 additions
and
97 deletions.
There are no files selected for viewing
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,7 @@ | ||
| --- | ||
| 'focus-trap-react': minor | ||
| --- | ||
|
|
||
| - Remove the need for a child in `<FocusTrap />` when `containerElements` is used. The child was already being ignored anyway (when `containerElements` is used; if the prop is not used, then a single child is still required). | ||
| - Update the typings related to the `children` prop to make it optional. Prop-types already had `children` as optional, however the use of `React.Children.only()` in all cases was still forcing the presence of a single child. That's no longer the case. | ||
| - Add additional notes about the use of the `containerElements` prop in the documentation. |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| const React = require('react'); | ||
| const ReactDOM = require('react-dom'); | ||
| const FocusTrap = require('../../dist/focus-trap-react'); | ||
|
|
||
| const container = document.getElementById('demo-containerelements-childless'); | ||
|
|
||
| class DemoContainerElementsChildless extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| activeTrap: false, | ||
| }; | ||
|
|
||
| this.mountTrap = this.mountTrap.bind(this); | ||
| this.unmountTrap = this.unmountTrap.bind(this); | ||
| this.setElementRef = this.setElementRef.bind(this); | ||
|
|
||
| this.element1 = null; | ||
| this.element2 = null; | ||
| } | ||
|
|
||
| mountTrap() { | ||
| this.setState({ activeTrap: true }); | ||
| } | ||
|
|
||
| unmountTrap() { | ||
| this.setState({ activeTrap: false }); | ||
| } | ||
|
|
||
| setElementRef(refName) { | ||
| return (element) => { | ||
| if (element && (!this[refName] || this[refName] !== element)) { | ||
| this[refName] = element; | ||
| this.forceUpdate(); // re-render | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| const trap = this.state.activeTrap ? ( | ||
| <> | ||
| <FocusTrap | ||
| containerElements={[this.element1, this.element2]} | ||
| focusTrapOptions={{ | ||
| onDeactivate: this.unmountTrap, | ||
| allowOutsideClick(event) { | ||
| return ( | ||
| event.target.id === | ||
| 'demo-containerelements-childless-deactivate' | ||
| ); | ||
| }, | ||
| }} | ||
| /> | ||
|
|
||
| <div className="trap is-active"> | ||
| <p ref={this.setElementRef('element1')}> | ||
| Here is a focus trap <a href="#">with</a> <a href="#">some</a> | ||
| <a href="#">focusable</a> parts. | ||
| </p> | ||
| <p> | ||
| Here is <a href="#">something</a>. | ||
| </p> | ||
| <p ref={this.setElementRef('element2')}> | ||
| Here is a another focus trap element. <a href="#">See</a>{' '} | ||
| <a href="#">how</a> | ||
| it <a href="#">works</a>. | ||
| </p> | ||
| <p> | ||
| <button | ||
| id="demo-containerelements-childless-deactivate" | ||
| onClick={this.unmountTrap} | ||
| > | ||
| deactivate trap | ||
| </button> | ||
| </p> | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| false | ||
| ); | ||
|
|
||
| return ( | ||
| <div> | ||
| <p> | ||
| <button onClick={this.mountTrap}>activate trap</button> | ||
| </p> | ||
| {trap} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ReactDOM.render(<DemoContainerElementsChildless />, container); |
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
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
Oops, something went wrong.