Add code & demo to pause/unpause parents of nested traps

demo/index.html

@@ -53,6 +53,12 @@ <h2>demo autofocus</h2>
   </p>
   <div id="demo-autofocus"></div>
 
+  <h2>nested traps</h2>
+  <p>
+    The trap contains a nested child trap. The parent trap automatically pauses when the child is active.
+  </p>
+  <div id="demo-nested"></div>
+
   <p>
     <span style="font-size:2em;vertical-align:middle;">☜</span>
     <a href="https://github.com/davidtheclark/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>

demo/js/demo-nested.js

@@ -0,0 +1,86 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+const FocusTrap = require('../../dist/focus-trap-react');
+
+const container = document.getElementById('demo-nested');
+
+class DemoNestedTrap extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeParentTrap: false,
+      activeChildTrap: false,
+    };
+
+    this.mountParentTrap = this.mountParentTrap.bind(this);
+    this.unmountParentTrap = this.unmountParentTrap.bind(this);
+    this.mountChildTrap = this.mountChildTrap.bind(this);
+    this.unmountChildTrap = this.unmountChildTrap.bind(this);
+  }
+
+  mountParentTrap() {
+    this.setState({ activeParentTrap: true });
+  }
+
+  unmountParentTrap() {
+    this.setState({ activeParentTrap: false });
+  }
+
+  mountChildTrap() {
+    this.setState({ activeChildTrap: true });
+  }
+
+  unmountChildTrap() {
+    this.setState({ activeChildTrap: false });
+  }
+
+  render() {
+    const childTrap = this.state.activeChildTrap
+      ? <FocusTrap>
+        <div className="trap">
+          <button onClick={this.unmountChildTrap}>
+            deactivate child trap
+          </button>
+          <div>
+            <a href="#">Another focusable thing</a>
+          </div>
+        </div>
+      </FocusTrap>
+      : false;
+
+    const parentTrap = this.state.activeParentTrap
+      ? <FocusTrap
+          focusTrapOptions={{
+            onDeactivate: this.unmountParentTrap
+          }}
+        >
+          <div className="trap">
+            <button onClick={this.unmountParentTrap}>
+              deactivate parent trap
+            </button>
+            <div>
+              <a href="#">Another focusable thing</a>
+            </div>
+            <button onClick={this.mountChildTrap}>
+              activate child trap
+            </button>
+            {childTrap}
+          </div>
+        </FocusTrap>
+      : false;
+
+    return (
+      <div>
+        <p>
+          <button key="button" onClick={this.mountParentTrap}>
+            activate parent trap
+          </button>
+        </p>
+        {parentTrap}
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<DemoNestedTrap />, container);

demo/js/index.js

@@ -2,3 +2,4 @@ require('./demo-defaults');
 require('./demo-ffne');
 require('./demo-special-element');
 require('./demo-autofocus');
+require('./demo-nested');

package.json

@@ -54,13 +54,15 @@
     "eslint-plugin-react": "^6.10.3",
     "jest": "^23.4.0",
     "prettier": "^1.2.2",
+    "prop-types": "^15.0.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },
   "dependencies": {
     "focus-trap": "^3.0.0"
   },
   "peerDependencies": {
+    "prop-types": "^15.0.0",
     "react": "0.14.x || ^15.0.0 || ^16.0.0",
     "react-dom": "0.14.x || ^15.0.0 || ^16.0.0"
   },

src/focus-trap-react.js

@@ -1,3 +1,4 @@
+const PropTypes = require('prop-types');
 const React = require('react');
 const createFocusTrap = require('focus-trap');
 
@@ -9,6 +10,13 @@ const checkedProps = [
   '_createFocusTrap'
 ];
 
+const FocusTrapReactContextType = {
+  _FocusTrapReact: PropTypes.shape({
+    pause: PropTypes.func.isRequired,
+    unpause: PropTypes.func.isRequired,
+  })
+};
+
 class FocusTrap extends React.Component {
   constructor(props) {
     super(props)
@@ -18,6 +26,19 @@ class FocusTrap extends React.Component {
     }
   }
 
+  getChildContext() {
+    return {
+      _FocusTrapReact: {
+        pause: () => this.focusTrap.pause(),
+        unpause: () => {
+          if (this.props.paused === false) {
+            this.focusTrap.unpause()
+          }
+        }
+      }
+    };
+  }
+
   componentDidMount() {
     // We need to hijack the returnFocusOnDeactivate option,
     // because React can move focus into the element before we arrived at
@@ -45,6 +66,10 @@ class FocusTrap extends React.Component {
     if (this.props.paused) {
       this.focusTrap.pause();
     }
+
+    // if there is a _FocusTrapReact context from a parent focus trap, pause it
+    const {_FocusTrapReact: {pause} = {}} = this.context;
+    if (pause) pause();
   }
 
   componentDidUpdate(prevProps) {
@@ -70,6 +95,10 @@ class FocusTrap extends React.Component {
     ) {
       this.previouslyFocusedElement.focus();
     }
+
+    // if there is a _FocusTrapReact context from a parent focus trap, activate it
+    const {_FocusTrapReact: {unpause} = {}} = this.context;
+    if (unpause) unpause();
   }
 
   setNode = el => {
@@ -96,6 +125,9 @@ class FocusTrap extends React.Component {
   }
 }
 
+FocusTrap.contextTypes = FocusTrapReactContextType;
+FocusTrap.childContextTypes = FocusTrapReactContextType;
+
 FocusTrap.defaultProps = {
   active: true,
   tag: 'div',