refactor: update react refs to use callback instead of string (#63)

Author: coderpawz

examples/nested.js

@@ -37,16 +37,26 @@ const popupBorderStyle = {
   padding: 10,
 };
 
+function saveRef(name, component) {
+  this[name] = component;
+}
+
 class Test extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.saveContainerRef = saveRef.bind(this, 'containerInstance');
+  }
+
   render() {
     const innerTrigger = (
       <div style={popupBorderStyle}>
-        <div ref="container" />
+        <div ref={this.saveContainerRef} />
         <Trigger
           popupPlacement="bottom"
           action={['click']}
           builtinPlacements={builtinPlacements}
-          getPopupContainer={() => this.refs.container}
+          getPopupContainer={() => this.containerInstance}
           popup={<div style={popupBorderStyle}>I am inner Trigger Popup</div>}
         >
           <span href="#" style={{ margin: 20 }}>clickToShowInnerTrigger</span>

src/Popup.js

@@ -5,6 +5,7 @@ import Align from 'rc-align';
 import Animate from 'rc-animate';
 import PopupInner from './PopupInner';
 import LazyRenderBox from './LazyRenderBox';
+import { saveRef } from './utils';
 
 class Popup extends Component {
   static propTypes = {
@@ -21,6 +22,13 @@ class Popup extends Component {
     onMouseLeave: PropTypes.func,
   };
 
+  constructor(props) {
+    super(props);
+
+    this.savePopupRef = saveRef.bind(this, 'popupInstance');
+    this.saveAlignRef = saveRef.bind(this, 'alignInstance');
+  }
+
   componentDidMount() {
     this.rootNode = this.getPopupDomNode();
   }
@@ -38,7 +46,7 @@ class Popup extends Component {
   }
 
   getPopupDomNode() {
-    return ReactDOM.findDOMNode(this.refs.popup);
+    return ReactDOM.findDOMNode(this.popupInstance);
   }
 
   getTarget = () => {
@@ -69,7 +77,7 @@ class Popup extends Component {
   }
 
   getPopupElement() {
-    const props = this.props;
+    const { savePopupRef, props } = this;
     const { align, style, visible, prefixCls, destroyPopupOnHide } = props;
     const className = this.getClassName(this.currentAlignClassName ||
       props.getClassNameFromAlign(align));
@@ -84,7 +92,7 @@ class Popup extends Component {
     const popupInnerProps = {
       className,
       prefixCls,
-      ref: 'popup',
+      ref: savePopupRef,
       onMouseEnter: props.onMouseEnter,
       onMouseLeave: props.onMouseLeave,
       style: newStyle,
@@ -99,7 +107,7 @@ class Popup extends Component {
         {visible ? (<Align
           target={this.getTarget}
           key="popup"
-          ref={this.saveAlign}
+          ref={this.saveAlignRef}
           monitorWindowResize
           align={align}
           onAlign={this.onAlign}
@@ -123,7 +131,7 @@ class Popup extends Component {
       <Align
         target={this.getTarget}
         key="popup"
-        ref={this.saveAlign}
+        ref={this.saveAlignRef}
         monitorWindowResize
         xVisible={visible}
         childrenProps={{ visible: 'xVisible' }}
@@ -181,10 +189,6 @@ class Popup extends Component {
     return maskElement;
   }
 
-  saveAlign = (align) => {
-    this.alignInstance = align;
-  }
-
   render() {
     return (
       <div>

src/utils.js

@@ -21,3 +21,7 @@ export function getPopupClassNameFromAlign(builtinPlacements, prefixCls, align)
   }
   return '';
 }
+
+export function saveRef(name, component) {
+  this[name] = component;
+}

tests/index.js

@@ -9,6 +9,7 @@ import '../assets/index.less';
 import Trigger from '../index';
 import './test.less';
 import async from 'async';
+import { saveRef } from '../src/utils';
 
 const Simulate = TestUtils.Simulate;
 window.$ = $;
@@ -235,18 +236,24 @@ describe('rc-trigger', function main() {
 
     it('nested action works', (done) => {
       class Test extends React.Component {
+        constructor(props) {
+          super(props);
+
+          this.saveClickTriggerRef = saveRef.bind(this, 'clickTriggerInstance');
+          this.saveHoverTriggerRef = saveRef.bind(this, 'hoverTriggerInstance');
+        }
         render() {
           return (
             <Trigger
               action={['click']}
               popupAlign={placementAlignMap.left}
-              ref="clickTrigger"
+              ref={this.saveClickTriggerRef}
               popup={<strong>click trigger</strong>}
             >
               <Trigger
                 action={['hover']}
                 popupAlign={placementAlignMap.left}
-                ref="hoverTrigger"
+                ref={this.saveHoverTriggerRef}
                 popup={<strong>hover trigger</strong>}
               >
                 <div className="target">trigger</div>
@@ -262,19 +269,19 @@ describe('rc-trigger', function main() {
       Simulate.mouseEnter(target);
       Simulate.click(target);
       async.series([timeout(200), (next) => {
-        const clickPopupDomNode = trigger.refs.clickTrigger.getPopupDomNode();
-        const hoverPopupDomNode = trigger.refs.hoverTrigger.getPopupDomNode();
+        const clickPopupDomNode = trigger.clickTriggerInstance.getPopupDomNode();
+        const hoverPopupDomNode = trigger.hoverTriggerInstance.getPopupDomNode();
         expect(clickPopupDomNode).to.be.ok();
         expect(hoverPopupDomNode).to.be.ok();
         Simulate.mouseLeave(target);
         next();
       }, timeout(200), (next) => {
-        const hoverPopupDomNode = trigger.refs.hoverTrigger.getPopupDomNode();
+        const hoverPopupDomNode = trigger.hoverTriggerInstance.getPopupDomNode();
         expect($(hoverPopupDomNode).css('display')).to.be('none');
         Simulate.click(target);
         next();
       }, timeout(200), (next) => {
-        const clickPopupDomNode = trigger.refs.clickTrigger.getPopupDomNode();
+        const clickPopupDomNode = trigger.clickTriggerInstance.getPopupDomNode();
         expect($(clickPopupDomNode).css('display')).to.be('none');
         next();
       }], done);
@@ -656,4 +663,15 @@ describe('rc-trigger', function main() {
       expect(popupNodeHeightOfOneWord).to.equal(popupNodeHeightOfSeveralWords);
     });
   });
+
+  describe('utils/saveRef', () => {
+    const mock = {};
+    const saveTestRef = saveRef.bind(mock, 'testInstance');
+
+    it('adds a property with the given name to context', () => {
+      expect(mock.testInstance).to.be(undefined);
+      saveTestRef('bar');
+      expect(mock.testInstance).to.be('bar');
+    });
+  });
 });