Move createRef to composer

Author: compulim

packages/component/src/ScrollToBottom/Composer.js

@@ -5,12 +5,6 @@ import Context from './Context';
 import EventSpy from '../EventSpy';
 import SpineTo from '../SpineTo';
 
-function isBottom(current, threshold) {
-  const { offsetHeight, scrollHeight, scrollTop } = current;
-
-  return scrollHeight - scrollTop - offsetHeight <= threshold;
-}
-
 export default class ScrollToBottomComposer extends React.Component {
   constructor(props) {
     super(props);
@@ -26,21 +20,25 @@ export default class ScrollToBottomComposer extends React.Component {
         scrollTop: this.state.target && this.state.target.current && (this.state.target.current.scrollHeight - this.state.target.current.offsetHeight)
       })),
       scrollTop: null,
-      setTarget: target => this.setState(() => ({ target })),
-      target: null
+      target: React.createRef()
     };
   }
 
   handleScroll() {
-    this.setState(() => ({
-      bottom: isBottom(this.state.target.current, this.props.threshold)
-    }));
+    this.setState(() => {
+      const { current } = this.state.target;
+
+      if (current) {
+        const { offsetHeight, scrollHeight, scrollTop } = current;
+        const bottom = scrollHeight - scrollTop - offsetHeight <= this.props.threshold;
+
+        return { bottom };
+      }
+    });
   }
 
   handleScrollEnd() {
-    this.setState(() => ({
-      scrollTop: null
-    }));
+    this.setState(() => ({ scrollTop: null }));
   }
 
   render() {
@@ -50,15 +48,16 @@ export default class ScrollToBottomComposer extends React.Component {
         <EventSpy
           name="scroll"
           onEvent={ this.handleScroll }
-          target={ this.state.target && this.state.target.current }
+          target={ this.state.target.current }
         />
-        { typeof this.state.scrollTop === 'number' &&
-          <SpineTo
-            name="scrollTop"
-            onEnd={ this.handleScrollEnd }
-            target={ this.state.target && this.state.target.current }
-            value={ this.state.scrollTop }
-          />
+        {
+          typeof this.state.scrollTop === 'number' &&
+            <SpineTo
+              name="scrollTop"
+              onEnd={ this.handleScrollEnd }
+              target={ this.state.target.current }
+              value={ this.state.scrollTop }
+            />
         }
       </Context.Provider>
     );

packages/component/src/ScrollToBottom/Panel.js

@@ -11,18 +11,8 @@ const ROOT_CSS = css({
 });
 
 export default class ScrollToBottomPanel extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.containerRef = React.createRef();
-  }
-
-  componentDidMount() {
-    this.context.setTarget(this.containerRef);
-  }
-
   componentDidUpdate() {
-    this.context.handleUpdate();
+    this.context && this.context.handleUpdate();
   }
 
   render() {
@@ -36,7 +26,7 @@ export default class ScrollToBottomPanel extends React.PureComponent {
           return (
             <div
               className={ classNames(ROOT_CSS + '', props.className) }
-              ref={ this.containerRef }
+              ref={ context.target }
             >
               { props.children }
             </div>