Merge pull request react-bootstrap#662 from taion/arrow-offset-type

[fixed] Fix propTypes for overlays
mattermost · May 14, 2015 · 5928764 · 5928764
2 parents 5b1bc99 + 96baa15
commit 5928764
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 10 deletions.
diff --git a/src/Popover.js b/src/Popover.js
@@ -9,8 +9,12 @@ const Popover = React.createClass({
     placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
     positionLeft: React.PropTypes.number,
     positionTop: React.PropTypes.number,
-    arrowOffsetLeft: React.PropTypes.number,
-    arrowOffsetTop: React.PropTypes.number,
+    arrowOffsetLeft: React.PropTypes.oneOfType([
+      React.PropTypes.number, React.PropTypes.string
+    ]),
+    arrowOffsetTop: React.PropTypes.oneOfType([
+      React.PropTypes.number, React.PropTypes.string
+    ]),
     title: React.PropTypes.node
   },
 
@@ -21,19 +25,19 @@ const Popover = React.createClass({
   },
 
   render() {
-    let classes = {
+    const classes = {
       'popover': true,
       [this.props.placement]: true,
       'in': this.props.positionLeft != null || this.props.positionTop != null
     };
 
-    let style = {
+    const style = {
       'left': this.props.positionLeft,
       'top': this.props.positionTop,
       'display': 'block'
     };
 
-    let arrowStyle = {
+    const arrowStyle = {
       'left': this.props.arrowOffsetLeft,
       'top': this.props.arrowOffsetTop
     };

diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -9,8 +9,12 @@ const Tooltip = React.createClass({
     placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
     positionLeft: React.PropTypes.number,
     positionTop: React.PropTypes.number,
-    arrowOffsetLeft: React.PropTypes.number,
-    arrowOffsetTop: React.PropTypes.number
+    arrowOffsetLeft: React.PropTypes.oneOfType([
+      React.PropTypes.number, React.PropTypes.string
+    ]),
+    arrowOffsetTop: React.PropTypes.oneOfType([
+      React.PropTypes.number, React.PropTypes.string
+    ])
   },
 
   getDefaultProps() {
@@ -20,18 +24,18 @@ const Tooltip = React.createClass({
   },
 
   render() {
-    let classes = {
+    const classes = {
       'tooltip': true,
       [this.props.placement]: true,
       'in': this.props.positionLeft != null || this.props.positionTop != null
     };
 
-    let style = {
+    const style = {
       'left': this.props.positionLeft,
       'top': this.props.positionTop
     };
 
-    let arrowStyle = {
+    const arrowStyle = {
       'left': this.props.arrowOffsetLeft,
       'top': this.props.arrowOffsetTop
     };

diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import OverlayTrigger from '../src/OverlayTrigger';
+import Popover from '../src/Popover';
+import Tooltip from '../src/Tooltip';
 
 describe('OverlayTrigger', function() {
   it('Should create OverlayTrigger element', function() {
@@ -161,4 +163,34 @@ describe('OverlayTrigger', function() {
       });
     });
   });
+
+  describe('overlay types', function() {
+    [
+      {
+        name: 'Popover',
+        overlay: (<Popover>test</Popover>)
+      },
+      {
+        name: 'Tooltip',
+        overlay: (<Tooltip>test</Tooltip>)
+      }
+    ].forEach(function(testCase) {
+      describe(testCase.name, function() {
+        let instance, overlayTrigger;
+
+        beforeEach(function() {
+          instance = ReactTestUtils.renderIntoDocument(
+            <OverlayTrigger trigger="click" overlay={testCase.overlay}>
+              <button>button</button>
+            </OverlayTrigger>
+          );
+          overlayTrigger = React.findDOMNode(instance);
+        });
+
+        it('Should handle trigger without warnings', function() {
+          ReactTestUtils.Simulate.click(overlayTrigger);
+        });
+      });
+    });
+  });
 });