Merge pull request react-bootstrap#685 from thetimbanks/popover-toolt…

…ip-animation

[added] Property for animation on Popover and Tooltip

src/Popover.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
+import FadeMixin from './FadeMixin';
 
 const Popover = React.createClass({
-  mixins: [BootstrapMixin],
+  mixins: [BootstrapMixin, FadeMixin],
 
   propTypes: {
     placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
@@ -15,20 +16,24 @@ const Popover = React.createClass({
     arrowOffsetTop: React.PropTypes.oneOfType([
       React.PropTypes.number, React.PropTypes.string
     ]),
-    title: React.PropTypes.node
+    title: React.PropTypes.node,
+    animation: React.PropTypes.bool
   },
 
   getDefaultProps() {
     return {
-      placement: 'right'
+      placement: 'right',
+      animation: true
     };
   },
 
   render() {
     const classes = {
       'popover': true,
       [this.props.placement]: true,
-      'in': this.props.positionLeft != null || this.props.positionTop != null
+      // in class will be added by the FadeMixin when the animation property is true
+      'in': !this.props.animation && (this.props.positionLeft != null || this.props.positionTop != null),
+      'fade': this.props.animation
     };
 
     const style = {

src/Tooltip.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
+import FadeMixin from './FadeMixin';
 
 const Tooltip = React.createClass({
-  mixins: [BootstrapMixin],
+  mixins: [BootstrapMixin, FadeMixin],
 
   propTypes: {
     placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
@@ -14,20 +15,24 @@ const Tooltip = React.createClass({
     ]),
     arrowOffsetTop: React.PropTypes.oneOfType([
       React.PropTypes.number, React.PropTypes.string
-    ])
+    ]),
+    animation: React.PropTypes.bool
   },
 
   getDefaultProps() {
     return {
-      placement: 'right'
+      placement: 'right',
+      animation: true
     };
   },
 
   render() {
     const classes = {
       'tooltip': true,
       [this.props.placement]: true,
-      'in': this.props.positionLeft != null || this.props.positionTop != null
+      // in class will be added by the FadeMixin when the animation property is true
+      'in': !this.props.animation && (this.props.positionLeft != null || this.props.positionTop != null),
+      'fade': this.props.animation
     };
 
     const style = {

test/PopoverSpec.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Popover from '../src/Popover';
+
+describe('Popover', function () {
+  it('Should output a popover title and content', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Popover title="Popover title">
+        <strong>Popover Content</strong>
+      </Popover>
+    );
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'popover-title'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'popover-content'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'fade'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
+  });
+
+  it('Should not have the fade class if animation is false', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Popover title="Popover title" animation={false}>
+        <strong>Popover Content</strong>
+      </Popover>
+    );
+    assert.equal(instance.getDOMNode().className.match(/\bfade\b/), null, 'The fade class should not be present');
+  });
+});

test/TooltipSpec.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Tooltip from '../src/Tooltip';
+
+describe('Tooltip', function () {
+  it('Should output a tooltip with content', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Tooltip>
+        <strong>Tooltip Content</strong>
+      </Tooltip>
+    );
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'fade'));
+  });
+
+  it('Should not have the fade class if animation is false', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Tooltip animation={false}>
+        <strong>Tooltip Content</strong>
+      </Tooltip>
+    );
+    assert.equal(instance.getDOMNode().className.match(/\bfade\b/), null, 'The fade class should not be present');
+  });
+});