enhance getPopupContainer

SylvanasGone · Jan 6, 2016 · bb2271c · bb2271c
1 parent 163e8b0
commit bb2271c
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 11 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -0,0 +1,6 @@
+# History
+----
+
+## 1.1.0 / 2016-01-06
+
+- add root trigger node as parameter of getPopupContainer
diff --git a/examples/simple.js b/examples/simple.js
@@ -31,6 +31,11 @@ const builtinPlacements = {
   },
 };
 
+
+function getPopupContainer(trigger){
+  return trigger.parentNode;
+}
+
 const Test = React.createClass({
   getInitialState() {
     return {
@@ -141,8 +146,10 @@ const Test = React.createClass({
           <input type='text' onChange={this.onOffsetYChange} style={{width:50}}/>
         </label>
       </div>
-      <div style={{margin: 100}}>
-        <Trigger popupAlign={{
+      <div style={{margin: 100, position: 'relative'}}>
+        <Trigger
+          getPopupContainer={null && getPopupContainer}
+          popupAlign={{
       offset: [state.offsetX, state.offsetY],
       overflow: {
         adjustX: 1,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-trigger",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "base abstract trigger component for react",
   "keywords": [
     "react",

diff --git a/src/Trigger.jsx b/src/Trigger.jsx
@@ -1,5 +1,5 @@
 import React, {PropTypes} from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, {findDOMNode} from 'react-dom';
 import {createChainedFunction, Dom} from 'rc-util';
 import Popup from './Popup';
 import {getAlignFromPlacement, getPopupClassNameFromAlign} from './utils';
@@ -81,7 +81,7 @@ const Trigger = React.createClass({
       const self = this;
       ReactDOM.unstable_renderSubtreeIntoContainer(this, this.getPopupElement(), this.getPopupContainer(), function renderPopup() {
         if (this.isMounted()) {
-          self.popupDomNode = ReactDOM.findDOMNode(this);
+          self.popupDomNode = findDOMNode(this);
         } else {
           self.popupDomNode = null;
         }
@@ -112,7 +112,7 @@ const Trigger = React.createClass({
     if (popupContainer) {
       ReactDOM.unmountComponentAtNode(popupContainer);
       if (this.props.getPopupContainer) {
-        const mountNode = this.props.getPopupContainer();
+        const mountNode = this.props.getPopupContainer(findDOMNode(this));
         mountNode.removeChild(popupContainer);
       } else {
         document.body.removeChild(popupContainer);
@@ -180,7 +180,7 @@ const Trigger = React.createClass({
 
   onDocumentClick(event) {
     const target = event.target;
-    const root = ReactDOM.findDOMNode(this);
+    const root = findDOMNode(this);
     const popupNode = this.getPopupDomNode();
     if (!Dom.contains(root, target) && !Dom.contains(popupNode, target)) {
       this.setPopupVisible(false);
@@ -196,7 +196,7 @@ const Trigger = React.createClass({
     if (!this.popupContainer) {
       this.popupContainer = document.createElement('div');
       if (this.props.getPopupContainer) {
-        const mountNode = this.props.getPopupContainer();
+        const mountNode = this.props.getPopupContainer(findDOMNode(this));
         mountNode.appendChild(this.popupContainer);
       } else {
         document.body.appendChild(this.popupContainer);

diff --git a/tests/index.spec.js b/tests/index.spec.js
@@ -82,12 +82,49 @@ describe('rc-trigger', function () {
   this.timeout(40000);
   var div = document.createElement('div');
   div.style.margin = '100px';
+  div.style.position = 'relative';
   document.body.insertBefore(div, document.body.firstChild);
 
   afterEach(()=> {
     ReactDOM.unmountComponentAtNode(div);
   });
 
+  describe('getPopupContainer', () => {
+    it('defaults to document.body', (done) => {
+      var trigger = ReactDOM.render(<Trigger action={['click']} popupAlign={placementAlignMap.left}
+                                             popup={<strong className='x-content'>tooltip2</strong>}>
+        <div className="target">click</div>
+      </Trigger>, div);
+      var domNode = ReactDOM.findDOMNode(trigger);
+      Simulate.click(domNode);
+      async.series([timeout(20), (next)=> {
+        var popupDomNode = trigger.getPopupDomNode();
+        expect(popupDomNode.parentNode.parentNode).to.be(document.body);
+        next();
+      }], done);
+    });
+
+    it('can change', (done) => {
+      function getPopupContainer(node) {
+        return node.parentNode;
+      }
+
+      var trigger = ReactDOM.render(<Trigger action={['click']}
+                                             getPopupContainer={getPopupContainer}
+                                             popupAlign={placementAlignMap.left}
+                                             popup={<strong className='x-content'>tooltip2</strong>}>
+        <div className="target">click</div>
+      </Trigger>, div);
+      var domNode = ReactDOM.findDOMNode(trigger);
+      Simulate.click(domNode);
+      async.series([timeout(20), (next)=> {
+        var popupDomNode = trigger.getPopupDomNode();
+        expect(popupDomNode.parentNode.parentNode).to.be(div);
+        next();
+      }], done);
+    });
+  });
+
   describe('action', ()=> {
     it('click works', (done)=> {
       var trigger = ReactDOM.render(<Trigger action={['click']} popupAlign={placementAlignMap.left}
@@ -361,8 +398,8 @@ describe('rc-trigger', function () {
     });
   });
 
-  describe('destroyPopupOnHide', function(){
-    it('defaults to false', function(){
+  describe('destroyPopupOnHide', function () {
+    it('defaults to false', function () {
       var trigger = ReactDOM.render(<Trigger action={['click']}
                                              popupAlign={placementAlignMap.topRight}
                                              popup={<strong>trigger</strong>}>
@@ -375,7 +412,7 @@ describe('rc-trigger', function () {
       expect(trigger.getPopupDomNode()).to.be.ok();
     });
 
-    it('set true will destroy tooltip on hide', function(){
+    it('set true will destroy tooltip on hide', function () {
       var trigger = ReactDOM.render(<Trigger action={['click']}
                                              destroyPopupOnHide
                                              popupAlign={placementAlignMap.topRight}