bugfix: fix refs change due to re-rendering that breaks resize method's contract

Author: inter-action

src/carousel/Carousel.jsx

@@ -40,6 +40,8 @@ export default class Carousel extends Component {
     this.throttledIndicatorHover = throttle(300, index => {
       this.handleIndicatorHover(index);
     });
+
+    this.resetItemPosition = this._resetItemPosition.bind(this)
   }
 
   getChildContext(): Context {
@@ -49,7 +51,7 @@ export default class Carousel extends Component {
   }
 
   componentDidMount() {
-    addResizeListener(this.refs.root, this.resetItemPosition.bind(this));
+    
 
     if (this.props.initialIndex < this.state.items.length && this.props.initialIndex >= 0) {
       this.setState({
@@ -61,6 +63,8 @@ export default class Carousel extends Component {
   }
 
   componentDidUpdate(props: Object, state: State): void {
+    addResizeListener(this.refs.root, this.resetItemPosition);
+    
     if (state.activeIndex != this.state.activeIndex) {
       this.resetItemPosition(state.activeIndex);
 
@@ -71,7 +75,7 @@ export default class Carousel extends Component {
   }
 
   componentWillUnmount(): void {
-    removeResizeListener(this.refs.root, this.resetItemPosition.bind(this));
+    removeResizeListener(this.refs.root, this.resetItemPosition);
   }
 
   handleMouseEnter(): void {
@@ -112,7 +116,7 @@ export default class Carousel extends Component {
     });
   }
 
-  resetItemPosition(oldIndex: number): void {
+  _resetItemPosition(oldIndex: number): void {
     this.state.items.forEach((item, index) => {
       item.translateItem(index, this.state.activeIndex, oldIndex);
     });

src/scrollbar/Scrollbar.jsx

@@ -18,6 +18,8 @@ export class Scrollbar extends Component {
       moveX: 0,
       moveY: 0
     };
+
+    this.update = this._update.bind(this)
   }
 
   get wrap(){
@@ -26,19 +28,22 @@ export class Scrollbar extends Component {
 
   componentDidMount(){
     if (this.native) return;
-    let handler = this.update.bind(this)
-    let rafId = requestAnimationFrame(handler)
+    let rafId = requestAnimationFrame(this.update)
     this.cleanRAF = ()=>{
       cancelAnimationFrame(rafId)
     }
-    this.resize = ReactDOM.findDOMNode(this.refs.resize)
+  }
+
+  componentDidUpdate() {
+    this.resizeDom = ReactDOM.findDOMNode(this.refs.resize)
     if (!this.props.noresize){
-      addResizeListener(this.resize, handler)
+      addResizeListener(this.resizeDom, this.update)
       this.cleanResize = ()=>{
-        removeResizeListener(this.resize, handler);
+        removeResizeListener(this.resizeDom, this.update);
       }
     }
   }
+  
 
   componentWillUnmount(){
     this.cleanRAF();
@@ -53,7 +58,7 @@ export class Scrollbar extends Component {
     })
   }
 
-  update() {
+  _update() {
     let heightPercentage, widthPercentage;
     const wrap = this.wrap;
     if (!wrap) return;

src/select/Select.jsx

@@ -91,6 +91,8 @@ class Select extends Component {
     this.debouncedOnInputChange = debounce(this.debounce(), () => {
       this.onInputChange();
     });
+
+    this.resetInputWidth = this._resetInputWidth.bind(this) 
   }
 
   getChildContext(): Object {
@@ -100,8 +102,6 @@ class Select extends Component {
   }
 
   componentDidMount() {
-    addResizeListener(this.refs.root, this.resetInputWidth.bind(this));
-
     this.reference = ReactDOM.findDOMNode(this.refs.reference);
     this.popper = ReactDOM.findDOMNode(this.refs.popper);
 
@@ -150,10 +150,11 @@ class Select extends Component {
 
   componentDidUpdate() {
     this.state.inputWidth = this.reference.getBoundingClientRect().width;
+    addResizeListener(this.refs.root, this.resetInputWidth);
   }
 
   componentWillUnmount() {
-    removeResizeListener(this.refs.root, this.resetInputWidth.bind(this));
+    removeResizeListener(this.refs.root, this.resetInputWidth);
   }
 
   debounce(): number {
@@ -552,7 +553,7 @@ class Select extends Component {
     });
   }
 
-  resetInputWidth() {
+  _resetInputWidth() {
     this.setState({
       inputWidth: this.reference.getBoundingClientRect().width
     })