[added] Enable rootClose for OverlayTrigger

Fixes #233

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);
+ });
+ });
+ });
+ });
 });