From 96baa15467ad44e40690370b64be5d11094f338c Mon Sep 17 00:00:00 2001 From: Jimmy Jia Date: Thu, 14 May 2015 17:08:17 -0400 Subject: [PATCH] [fixed] Fix propTypes for overlays Fixes react-bootstrap/react-bootstrap#173 --- src/Popover.js | 14 +++++++++----- src/Tooltip.js | 14 +++++++++----- test/OverlayTriggerSpec.js | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/src/Popover.js b/src/Popover.js index c899b86bc2..4c18e2b183 100644 --- 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 index cb536097ea..fd769d5d12 100644 --- 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 index dce0753f07..d1e921ddae 100644 --- 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: (test) + }, + { + name: 'Tooltip', + overlay: (test) + } + ].forEach(function(testCase) { + describe(testCase.name, function() { + let instance, overlayTrigger; + + beforeEach(function() { + instance = ReactTestUtils.renderIntoDocument( + + + + ); + overlayTrigger = React.findDOMNode(instance); + }); + + it('Should handle trigger without warnings', function() { + ReactTestUtils.Simulate.click(overlayTrigger); + }); + }); + }); + }); });