Move from createRef to callback ref

Author: compulim

packages/component/src/BasicScrollToBottom.js

@@ -2,9 +2,9 @@ import { css } from 'glamor';
 import classNames from 'classnames';
 import React from 'react';
 
+import AutoHideFollowButton from './ScrollToBottom/AutoHideFollowButton';
 import Composer from './ScrollToBottom/Composer';
 import Context from './ScrollToBottom/Context';
-import AutoHideFollowButton from './ScrollToBottom/AutoHideFollowButton';
 import Panel from './ScrollToBottom/Panel';
 
 const ROOT_CSS = css({

packages/component/src/ScrollToBottom/Composer.js

@@ -15,20 +15,21 @@ export default class ScrollToBottomComposer extends React.Component {
     this.state = {
       bottom: true,
       handleUpdate: () => this.state.bottom && this.state.scrollToBottom(),
-      scrollToBottom: () => this.setState(() => ({
-        scrollTop: this.state.target && this.state.target.current && (this.state.target.current.scrollHeight - this.state.target.current.offsetHeight)
+      scrollToBottom: () => this.setState(state => ({
+        scrollTop: state.target && state.target && (state.target.scrollHeight - state.target.offsetHeight)
       })),
       scrollTop: null,
-      target: React.createRef()
+      setTarget: target => this.setState(() => ({ target })),
+      target: null,
     };
   }
 
   handleScroll() {
     this.setState(() => {
-      const { current } = this.state.target;
+      const { target } = this.state;
 
-      if (current) {
-        const { offsetHeight, scrollHeight, scrollTop } = current;
+      if (target) {
+        const { offsetHeight, scrollHeight, scrollTop } = target;
         const bottom = scrollHeight - scrollTop - offsetHeight <= this.props.threshold;
 
         return { bottom };
@@ -41,21 +42,26 @@ export default class ScrollToBottomComposer extends React.Component {
   }
 
   render() {
+    const { scrollTop, target } = this.state;
+
     return (
       <Context.Provider value={ this.state }>
         { this.props.children }
-        <EventSpy
-          name="scroll"
-          onEvent={ this.handleScroll }
-          target={ this.state.target.current }
-        />
         {
-          typeof this.state.scrollTop === 'number' &&
+          target &&
+            <EventSpy
+              name="scroll"
+              onEvent={ this.handleScroll }
+              target={ target }
+            />
+        }
+        {
+          target && typeof scrollTop === 'number' &&
             <SpineTo
               name="scrollTop"
               onEnd={ this.handleScrollEnd }
-              target={ this.state.target.current }
-              value={ this.state.scrollTop }
+              target={ target }
+              value={ scrollTop }
             />
         }
       </Context.Provider>

packages/component/src/ScrollToBottom/Context.js

@@ -5,5 +5,6 @@ export default React.createContext({
   handleUpdate: () => 0,
   scrollToBottom: () => 0,
   scrollTop: null,
+  setTarget: () => 0,
   target: null
 });

packages/component/src/ScrollToBottom/Panel.js

@@ -26,7 +26,7 @@ export default class ScrollToBottomPanel extends React.PureComponent {
           return (
             <div
               className={ classNames(ROOT_CSS + '', props.className) }
-              ref={ context.target }
+              ref={ context.setTarget }
             >
               { props.children }
             </div>