From 1658142a4d7b935bfa4702ff2c90aa3f46c1d70c Mon Sep 17 00:00:00 2001
From: Tim Banks <thetimbanks@gmail.com>
Date: Sat, 16 May 2015 16:36:10 -0500
Subject: [PATCH] [added] Property for animation on Popover and Tooltip

---
 src/Popover.js      | 13 +++++++++----
 src/Tooltip.js      | 13 +++++++++----
 test/PopoverSpec.js | 26 ++++++++++++++++++++++++++
 test/TooltipSpec.js | 24 ++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 test/PopoverSpec.js
 create mode 100644 test/TooltipSpec.js

diff --git a/src/Popover.js b/src/Popover.js
index 4c18e2b183..c0ea27a6eb 100644
--- a/src/Popover.js
+++ b/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,12 +16,14 @@ 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
     };
   },
 
@@ -28,7 +31,9 @@ const Popover = React.createClass({
     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 = {
diff --git a/src/Tooltip.js b/src/Tooltip.js
index fd769d5d12..1c7dafeb80 100644
--- a/src/Tooltip.js
+++ b/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,12 +15,14 @@ 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
     };
   },
 
@@ -27,7 +30,9 @@ const Tooltip = React.createClass({
     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 = {
diff --git a/test/PopoverSpec.js b/test/PopoverSpec.js
new file mode 100644
index 0000000000..611634bf5a
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/test/TooltipSpec.js b/test/TooltipSpec.js
new file mode 100644
index 0000000000..cd878f3a19
--- /dev/null
+++ b/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');
+  });
+});