fix transitionName when auto adjust

react-component · Oct 12, 2015 · 8b75f37 · 8b75f37
1 parent 646bf22
commit 8b75f37
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 33 deletions.
diff --git a/assets/bootstrap.less b/assets/bootstrap.less
@@ -17,7 +17,6 @@
 
   &-placement {
     &-left {
-      margin-left: -3px;
       padding: 0 5px;
 
       & > .rc-tooltip-arrow {
@@ -30,7 +29,6 @@
     }
 
     &-top {
-      margin-top: -3px;
       padding: 5px 0;
 
       & > .@{tooltipPrefixCls}-arrow {
@@ -43,8 +41,6 @@
     }
 
     &-topRight {
-
-      margin-top: -3px;
       padding: 5px 0;
 
       & > .@{tooltipPrefixCls}-arrow {
@@ -57,8 +53,6 @@
     }
 
     &-topLeft {
-
-      margin-top: -3px;
       padding: 5px 0;
 
       & > .@{tooltipPrefixCls}-arrow {
@@ -71,7 +65,6 @@
     }
 
     &-bottom {
-      margin-top: 3px;
       padding: 5px 0;
 
       & > .@{tooltipPrefixCls}-arrow {
@@ -85,8 +78,6 @@
     }
 
     &-bottomRight {
-
-      margin-top: 3px;
       padding: 5px 0;
 
       & > .@{tooltipPrefixCls}-arrow {
@@ -99,8 +90,6 @@
     }
 
     &-bottomLeft {
-
-      margin-top: 3px;
       padding: 5px 0;
 
       & > .@{tooltipPrefixCls}-arrow {
@@ -113,7 +102,6 @@
     }
 
     &-right {
-      margin-left: 3px;
       padding: 0 5px;
 
       & > .@{tooltipPrefixCls}-arrow {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-tooltip",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "tooltip ui component for react",
   "keywords": [
     "react",

diff --git a/src/Popup.jsx b/src/Popup.jsx
@@ -12,6 +12,10 @@ const Popup = React.createClass({
     onMouseLeave: React.PropTypes.func,
   },
 
+  componentDidMount() {
+    this.rootNode = this.getPopupDomNode();
+  },
+
   // optimize for speed
   shouldComponentUpdate(nextProps) {
     return this.props.visible || nextProps.visible;
@@ -53,19 +57,24 @@ const Popup = React.createClass({
 
   render() {
     const props = this.props;
-    const {prefixCls} = props;
-    let className = getToolTipClassByPlacement(prefixCls, props.placement);
-    if (props.className) {
-      className += ' ' + props.className;
-    }
-    const style = this.props.style;
-    if (!props.visible) {
-      className += ` ${prefixCls}-hidden`;
+    const {prefixCls, placement, style} = props;
+    let className;
+
+    if (props.visible || !this.rootNode) {
+      className = getToolTipClassByPlacement(prefixCls, props.placement);
+      if (props.className) {
+        className += ' ' + props.className;
+      }
+    } else {
+      // fix auto adjust
+      className = this.rootNode.className;
+      const hiddenClass = `${prefixCls}-hidden`;
+      if (className.indexOf(hiddenClass) === -1) {
+        className += ` ${hiddenClass}`;
+      }
     }
     const arrowClassName = `${prefixCls}-arrow`;
     const innerClassname = `${prefixCls}-inner`;
-
-    const placement = props.placement;
     let align;
     if (placement && placement.points) {
       align = placement;

diff --git a/src/utils.js b/src/utils.js
@@ -24,34 +24,42 @@ export const placementAlignMap = {
   left: {
     points: ['cr', 'cl'],
     overflow: autoAdjustOverflow,
+    offset: [-3, 0],
   },
   right: {
     points: ['cl', 'cr'],
     overflow: autoAdjustOverflow,
+    offset: [3, 0],
   },
   top: {
     points: ['bc', 'tc'],
     overflow: autoAdjustOverflow,
+    offset: [0, -3],
   },
   bottom: {
     points: ['tc', 'bc'],
     overflow: autoAdjustOverflow,
+    offset: [0, 3],
   },
   topLeft: {
     points: ['bl', 'tl'],
     overflow: autoAdjustOverflow,
+    offset: [0, -3],
   },
   topRight: {
     points: ['br', 'tr'],
     overflow: autoAdjustOverflow,
+    offset: [0, -3],
   },
   bottomRight: {
     points: ['tr', 'br'],
     overflow: autoAdjustOverflow,
+    offset: [0, 3],
   },
   bottomLeft: {
     points: ['tl', 'bl'],
     overflow: autoAdjustOverflow,
+    offset: [0, 3],
   },
 };
 

diff --git a/tests/index.spec.js b/tests/index.spec.js
@@ -73,7 +73,9 @@ describe('rc-tooltip', function () {
 
   describe('placement', ()=> {
     it('left works', (done)=> {
-      var tooltip = React.render(<Tooltip trigger={['click']} placement="left" overlay={<strong>tooltip</strong>}>
+      var tooltip = React.render(<Tooltip trigger={['click']} placement="left"
+                                          overlayStyle={{width:50}}
+                                          overlay={<div>tooltip</div>}>
         <div className="target">click</div>
       </Tooltip>, div);
       var domNode = React.findDOMNode(tooltip).firstChild;
@@ -83,7 +85,27 @@ describe('rc-tooltip', function () {
         expect(popupDomNode).to.be.ok();
         var targetOffset = $(domNode).offset();
         var popupOffset = $(popupDomNode).offset();
-        expect(popupOffset.left + $(popupDomNode).outerWidth()).to.be(targetOffset.left);
+        expect(popupOffset.left + $(popupDomNode).outerWidth()).to.be(targetOffset.left-3);
+        Simulate.click(domNode);
+        done();
+      }, 20);
+    });
+
+    it('auto adjust left works', (done)=> {
+      var tooltip = React.render(<Tooltip trigger={['click']} placement="left"
+                                          overlayStyle={{width:400}}
+                                          overlay={<div>tooltip</div>}>
+        <div className="target">click</div>
+      </Tooltip>, div);
+      var domNode = React.findDOMNode(tooltip).firstChild;
+      Simulate.click(domNode);
+      setTimeout(()=> {
+        var popupDomNode = tooltip.getPopupDomNode();
+        expect(popupDomNode).to.be.ok();
+        var targetOffset = $(domNode).offset();
+        var popupOffset = $(popupDomNode).offset();
+        // offset is 3
+        expect(popupOffset.left).to.be(targetOffset.left + $(domNode).outerWidth() + 3);
         Simulate.click(domNode);
         done();
       }, 20);
@@ -101,7 +123,7 @@ describe('rc-tooltip', function () {
         var targetOffset = $(domNode).offset();
         var popupOffset = $(popupDomNode).offset();
         console.log(popupOffset, targetOffset);
-        expect(popupOffset.left).to.be(targetOffset.left + $(domNode).outerWidth());
+        expect(popupOffset.left).to.be(targetOffset.left + $(domNode).outerWidth()+3);
         Simulate.click(domNode);
         done();
       }, 20);
@@ -119,14 +141,15 @@ describe('rc-tooltip', function () {
         var targetOffset = $(domNode).offset();
         var popupOffset = $(popupDomNode).offset();
         console.log(popupOffset, targetOffset);
-        expect(popupOffset.top).to.be(targetOffset.top + $(domNode).outerHeight());
+        expect(popupOffset.top).to.be(targetOffset.top + $(domNode).outerHeight()+3);
         Simulate.click(domNode);
         done();
       }, 20);
     });
 
     it('bottomRight works', (done)=> {
-      var tooltip = React.render(<Tooltip trigger={['click']} placement="bottomRight" overlay={<strong>tooltip</strong>}>
+      var tooltip = React.render(<Tooltip trigger={['click']} placement="bottomRight"
+                                          overlay={<strong>tooltip</strong>}>
         <div className="target">click</div>
       </Tooltip>, div);
       var domNode = React.findDOMNode(tooltip).firstChild;
@@ -138,7 +161,7 @@ describe('rc-tooltip', function () {
         var popupOffset = $(popupDomNode).offset();
         var arrowOffset = $(popupDomNode).find('.rc-tooltip-arrow').offset();
         console.log(popupOffset, targetOffset);
-        expect(popupOffset.top).to.be(targetOffset.top + $(domNode).outerHeight());
+        expect(popupOffset.top).to.be(targetOffset.top + $(domNode).outerHeight()+3);
         expect(arrowOffset.left).to.be(180);
         Simulate.click(domNode);
         done();
@@ -158,7 +181,7 @@ describe('rc-tooltip', function () {
         var popupOffset = $(popupDomNode).offset();
         var arrowOffset = $(popupDomNode).find('.rc-tooltip-arrow').offset();
         console.log(popupOffset, targetOffset);
-        expect(popupOffset.top).to.be(targetOffset.top + $(domNode).outerHeight());
+        expect(popupOffset.top).to.be(targetOffset.top + $(domNode).outerHeight()+3);
         expect(arrowOffset.left).to.be(110);
         Simulate.click(domNode);
         done();
@@ -177,7 +200,7 @@ describe('rc-tooltip', function () {
         var targetOffset = $(domNode).offset();
         var popupOffset = $(popupDomNode).offset();
         console.log(popupOffset, targetOffset);
-        expect(popupOffset.top).to.be(targetOffset.top - $(popupDomNode).outerHeight());
+        expect(popupOffset.top).to.be(targetOffset.top - $(popupDomNode).outerHeight()-3);
         Simulate.click(domNode);
         done();
       }, 20);
@@ -196,7 +219,7 @@ describe('rc-tooltip', function () {
         var popupOffset = $(popupDomNode).offset();
         var arrowOffset = $(popupDomNode).find('.rc-tooltip-arrow').offset();
         console.log(popupOffset, targetOffset);
-        expect(popupOffset.top).to.be(targetOffset.top - $(popupDomNode).outerHeight());
+        expect(popupOffset.top).to.be(targetOffset.top - $(popupDomNode).outerHeight()-3);
         expect(popupOffset.left).to.be(targetOffset.left);
         expect(arrowOffset.left).to.be(110);
         Simulate.click(domNode);
@@ -217,7 +240,7 @@ describe('rc-tooltip', function () {
         var popupOffset = $(popupDomNode).offset();
         var arrowOffset = $(popupDomNode).find('.rc-tooltip-arrow').offset();
         console.log(popupOffset, targetOffset);
-        expect(popupOffset.top).to.be(targetOffset.top - $(popupDomNode).outerHeight());
+        expect(popupOffset.top).to.be(targetOffset.top - $(popupDomNode).outerHeight()-3);
         expect(popupOffset.left).to.be(targetOffset.left);
         expect(arrowOffset.left).to.be(180);
         Simulate.click(domNode);