Merge pull request react-bootstrap#698 from taion/overlay-root-close

[added] Enable rootClose for OverlayTrigger

docs/examples/PopoverTriggerBehaviors.js

@@ -0,0 +1,18 @@
+const positionerInstance = (
+  <ButtonToolbar>
+    <OverlayTrigger trigger='click' placement='bottom' overlay={<Popover title='Popover bottom'><strong>Holy guacamole!</strong> Check this info.</Popover>}>
+      <Button bsStyle='default'>Click</Button>
+    </OverlayTrigger>
+    <OverlayTrigger trigger='hover' placement='bottom' overlay={<Popover title='Popover bottom'><strong>Holy guacamole!</strong> Check this info.</Popover>}>
+      <Button bsStyle='default'>Hover</Button>
+    </OverlayTrigger>
+    <OverlayTrigger trigger='focus' placement='bottom' overlay={<Popover title='Popover bottom'><strong>Holy guacamole!</strong> Check this info.</Popover>}>
+      <Button bsStyle='default'>Focus</Button>
+    </OverlayTrigger>
+    <OverlayTrigger trigger='click' rootClose={true} placement='bottom' overlay={<Popover title='Popover bottom'><strong>Holy guacamole!</strong> Check this info.</Popover>}>
+      <Button bsStyle='default'>Click + rootClose</Button>
+    </OverlayTrigger>
+  </ButtonToolbar>
+);
+
+React.render(positionerInstance, mountNode);

docs/src/ComponentsPage.js

@@ -272,6 +272,9 @@ const ComponentsPage = React.createClass({
                   <p>Positioned popover component.</p>
                   <ReactPlayground codeText={Samples.PopoverPositioned} />
 
+                  <p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
+                  <ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
+
                   <p>Popover component in container.</p>
                   <ReactPlayground codeText={Samples.PopoverContained} exampleClassName='bs-example-popover-contained' />
 

docs/src/Samples.js

@@ -40,6 +40,7 @@ export default {
   TooltipInCopy:                 require('fs').readFileSync(__dirname + '/../examples/TooltipInCopy.js', 'utf8'),
   PopoverBasic:                  require('fs').readFileSync(__dirname + '/../examples/PopoverBasic.js', 'utf8'),
   PopoverPositioned:             require('fs').readFileSync(__dirname + '/../examples/PopoverPositioned.js', 'utf8'),
+  PopoverTriggerBehaviors:       require('fs').readFileSync(__dirname + '/../examples/PopoverTriggerBehaviors.js', 'utf8'),
   PopoverContained:              require('fs').readFileSync(__dirname + '/../examples/PopoverContained.js', 'utf8'),
   PopoverPositionedScrolling:    require('fs').readFileSync(__dirname + '/../examples/PopoverPositionedScrolling.js', 'utf8'),
   ProgressBarBasic:              require('fs').readFileSync(__dirname + '/../examples/ProgressBarBasic.js', 'utf8'),

src/OverlayTrigger.js

@@ -1,10 +1,12 @@
 import React, { cloneElement } from 'react';
+
 import OverlayMixin from './OverlayMixin';
-import domUtils from './utils/domUtils';
+import RootCloseWrapper from './RootCloseWrapper';
 
 import createChainedFunction from './utils/createChainedFunction';
-import assign from './utils/Object.assign';
 import createContextWrapper from './utils/createContextWrapper';
+import domUtils from './utils/domUtils';
+import assign from './utils/Object.assign';
 
 /**
  * Check if value one is inside or equal to the of value
@@ -34,7 +36,8 @@ const OverlayTrigger = React.createClass({
     delayHide: React.PropTypes.number,
     defaultOverlayShown: React.PropTypes.bool,
     overlay: React.PropTypes.node.isRequired,
-    containerPadding: React.PropTypes.number
+    containerPadding: React.PropTypes.number,
+    rootClose: React.PropTypes.bool
   },
 
   getDefaultProps() {
@@ -83,7 +86,7 @@ const OverlayTrigger = React.createClass({
       return <span />;
     }
 
-    return cloneElement(
+    const overlay = cloneElement(
       this.props.overlay,
       {
         onRequestHide: this.hide,
@@ -94,6 +97,16 @@ const OverlayTrigger = React.createClass({
         arrowOffsetTop: this.state.arrowOffsetTop
       }
     );
+
+    if (this.props.rootClose) {
+      return (
+        <RootCloseWrapper onRootClose={this.hide}>
+          {overlay}
+        </RootCloseWrapper>
+      );
+    } else {
+      return overlay;
+    }
   },
 
   render() {

src/RootCloseWrapper.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import domUtils from './utils/domUtils';
+import EventListener from './utils/EventListener';
+
+// TODO: Merge this logic with dropdown logic once #526 is done.
+
+/**
+ * Checks whether a node is within
+ * a root nodes tree
+ *
+ * @param {DOMElement} node
+ * @param {DOMElement} root
+ * @returns {boolean}
+ */
+function isNodeInRoot(node, root) {
+  while (node) {
+    if (node === root) {
+      return true;
+    }
+    node = node.parentNode;
+  }
+
+  return false;
+}
+
+export default class RootCloseWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleDocumentClick = this.handleDocumentClick.bind(this);
+    this.handleDocumentKeyUp = this.handleDocumentKeyUp.bind(this);
+  }
+
+  bindRootCloseHandlers() {
+    const doc = domUtils.ownerDocument(this);
+
+    this._onDocumentClickListener =
+      EventListener.listen(doc, 'click', this.handleDocumentClick);
+    this._onDocumentKeyupListener =
+      EventListener.listen(doc, 'keyup', this.handleDocumentKeyUp);
+  }
+
+  handleDocumentClick(e) {
+    // If the click originated from within this component, don't do anything.
+    if (isNodeInRoot(e.target, React.findDOMNode(this))) {
+      return;
+    }
+
+    this.props.onRootClose();
+  }
+
+  handleDocumentKeyUp(e) {
+    if (e.keyCode === 27) {
+      this.props.onRootClose();
+    }
+  }
+
+  unbindRootCloseHandlers() {
+    if (this._onDocumentClickListener) {
+      this._onDocumentClickListener.remove();
+    }
+
+    if (this._onDocumentKeyupListener) {
+      this._onDocumentKeyupListener.remove();
+    }
+  }
+
+  componentDidMount() {
+    this.bindRootCloseHandlers();
+  }
+
+  render() {
+    return React.Children.only(this.props.children);
+  }
+
+  componentWillUnmount() {
+    this.unbindRootCloseHandlers();
+  }
+}
+RootCloseWrapper.propTypes = {
+  onRootClose: React.PropTypes.func.isRequired
+};

test/OverlayTriggerSpec.js

@@ -27,6 +27,18 @@ describe('OverlayTrigger', function() {
     callback.called.should.be.true;
   });
 
+  it('Should show after click trigger', function() {
+    const instance = ReactTestUtils.renderIntoDocument(
+      <OverlayTrigger trigger='click' overlay={<div>test</div>}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+    const overlayTrigger = React.findDOMNode(instance);
+    ReactTestUtils.Simulate.click(overlayTrigger);
+
+    instance.state.isOverlayShown.should.be.true;
+  });
+
   it('Should forward requested context', function() {
     const contextTypes = {
       key: React.PropTypes.string
@@ -193,4 +205,44 @@ describe('OverlayTrigger', function() {
       });
     });
   });
+
+  describe('rootClose', function() {
+    [
+      {
+        label: 'true',
+        rootClose: true,
+        shownAfterClick: false
+      },
+      {
+        label: 'default (false)',
+        rootClose: null,
+        shownAfterClick: true
+      }
+    ].forEach(function(testCase) {
+      describe(testCase.label, function() {
+        let instance;
+
+        beforeEach(function () {
+          instance = ReactTestUtils.renderIntoDocument(
+            <OverlayTrigger
+              overlay={<div>test</div>}
+              trigger='click' rootClose={testCase.rootClose}
+              >
+              <button>button</button>
+            </OverlayTrigger>
+          );
+          const overlayTrigger = React.findDOMNode(instance);
+          ReactTestUtils.Simulate.click(overlayTrigger);
+        });
+
+        it('Should have correct isOverlayShown state', function () {
+          const event = document.createEvent('HTMLEvents');
+          event.initEvent('click', true, true);
+          document.documentElement.dispatchEvent(event);
+
+          instance.state.isOverlayShown.should.equal(testCase.shownAfterClick);
+        });
+      });
+    });
+  });
 });