Merge pull request react-bootstrap#569 from teloo/issue-527

[fixed] It is possible to merge OverlayMixin components

Author: mtscout6

src/ModalTrigger.js

@@ -49,12 +49,15 @@ const ModalTrigger = React.createClass({
 
   render() {
     let child = React.Children.only(this.props.children);
-    return cloneElement(
-      child,
-      {
-        onClick: createChainedFunction(child.props.onClick, this.toggle)
-      }
-    );
+    let props = {};
+
+    props.onClick = createChainedFunction(child.props.onClick, this.toggle);
+    props.onMouseOver = createChainedFunction(child.props.onMouseOver, this.props.onMouseOver);
+    props.onMouseOut = createChainedFunction(child.props.onMouseOut, this.props.onMouseOut);
+    props.onFocus = createChainedFunction(child.props.onFocus, this.props.onFocus);
+    props.onBlur = createChainedFunction(child.props.onBlur, this.props.onBlur);
+
+    return cloneElement(child, props);
   }
 });
 

src/OverlayTrigger.js

@@ -90,14 +90,16 @@ const OverlayTrigger = React.createClass({
   },
 
   render() {
+    let child = React.Children.only(this.props.children);
     if (this.props.trigger === 'manual') {
-      return React.Children.only(this.props.children);
+      return child;
     }
 
     let props = {};
 
+    props.onClick = createChainedFunction(child.props.onClick, this.props.onClick);
     if (isOneOf('click', this.props.trigger)) {
-      props.onClick = createChainedFunction(this.toggle, this.props.onClick);
+      props.onClick = createChainedFunction(this.toggle, props.onClick);
     }
 
     if (isOneOf('hover', this.props.trigger)) {
@@ -111,7 +113,7 @@ const OverlayTrigger = React.createClass({
     }
 
     return cloneElement(
-      React.Children.only(this.props.children),
+      child,
       props
     );
   },

test/ModalTriggerSpec.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import ModalTrigger from '../src/ModalTrigger';
+
+describe('ModalTrigger', function() {
+  it('Should create ModalTrigger element', function() {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ModalTrigger modal={<div>test</div>}>
+        <button>button</button>
+      </ModalTrigger>
+    );
+    let modalTrigger = instance.getDOMNode();
+    assert.equal(modalTrigger.nodeName, 'BUTTON');
+  });
+
+  it('Should pass ModalTrigger onMouseOver prop to child', function() {
+    let called = false;
+    let callback = function() {
+      called = true;
+    };
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ModalTrigger modal={<div>test</div>} onMouseOver={callback}>
+        <button>button</button>
+      </ModalTrigger>
+    );
+    let modalTrigger = instance.getDOMNode();
+    ReactTestUtils.Simulate.mouseOver(modalTrigger);
+    assert.equal(called, true);
+  });
+
+  it('Should pass ModalTrigger onMouseOut prop to child', function() {
+    let called = false;
+    let callback = function() {
+      called = true;
+    };
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ModalTrigger modal={<div>test</div>} onMouseOut={callback}>
+        <button>button</button>
+      </ModalTrigger>
+    );
+    let modalTrigger = instance.getDOMNode();
+    ReactTestUtils.Simulate.mouseOut(modalTrigger);
+    assert.equal(called, true);
+  });
+
+  it('Should pass ModalTrigger onFocus prop to child', function() {
+    let called = false;
+    let callback = function() {
+      called = true;
+    };
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ModalTrigger modal={<div>test</div>} onFocus={callback}>
+        <button>button</button>
+      </ModalTrigger>
+    );
+    let modalTrigger = instance.getDOMNode();
+    ReactTestUtils.Simulate.focus(modalTrigger);
+    assert.equal(called, true);
+  });
+
+  it('Should pass ModalTrigger onBlur prop to child', function() {
+    let called = false;
+    let callback = function() {
+      called = true;
+    };
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ModalTrigger modal={<div>test</div>} onBlur={callback}>
+        <button>button</button>
+      </ModalTrigger>
+    );
+    let modalTrigger = instance.getDOMNode();
+    ReactTestUtils.Simulate.blur(modalTrigger);
+    assert.equal(called, true);
+  });
+});

test/OverlayTriggerSpec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import OverlayTrigger from '../src/OverlayTrigger';
+
+describe('OverlayTrigger', function() {
+  it('Should create OverlayTrigger element', function() {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <OverlayTrigger overlay={<div>test</div>}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+    let overlayTrigger = instance.getDOMNode();
+    assert.equal(overlayTrigger.nodeName, 'BUTTON');
+  });
+
+  it('Should pass OverlayTrigger onClick prop to child', function() {
+    let called = false;
+    let callback = function() {
+      called = true;
+    };
+    let instance = ReactTestUtils.renderIntoDocument(
+      <OverlayTrigger overlay={<div>test</div>} onClick={callback}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+    let overlayTrigger = instance.getDOMNode();
+    ReactTestUtils.Simulate.click(overlayTrigger);
+    assert.equal(called, true);
+  });
+});