Rename to SpineTo

Author: compulim

packages/component/src/ScrollToBottom/Composer.js

@@ -3,7 +3,7 @@ import React from 'react';
 
 import Context from './Context';
 import EventSpy from '../EventSpy';
-import ScrollTo from '../ScrollTo';
+import SpineTo from '../SpineTo';
 
 function isBottom(current, threshold) {
   const { offsetHeight, scrollHeight, scrollTop } = current;
@@ -25,6 +25,7 @@ export default class ScrollToBottomComposer extends React.Component {
         bottom: true,
         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
     };
@@ -52,10 +53,11 @@ export default class ScrollToBottomComposer extends React.Component {
           target={ this.state.target }
         />
         { typeof this.state.scrollTop === 'number' &&
-          <ScrollTo
+          <SpineTo
+            name="scrollTop"
             onEnd={ this.handleScrollEnd }
-            scrollTop={ this.state.scrollTop }
             target={ this.state.target }
+            value={ this.state.scrollTop }
           />
         }
       </Context.Provider>

packages/component/src/ScrollTo.js renamed to packages/component/src/SpineTo.js

@@ -31,11 +31,12 @@ export default class ScrollTo extends React.Component {
   }
 
   componentDidMount() {
-    const { current } = this.props.target;
+    const { name, target } = this.props;
+    const { current } = target || {};
 
     if (current) {
       this.addEventListeners(current);
-      this.animate('scrollTop', current.scrollTop, this.props.scrollTop, 1);
+      this.animate(name, current[name], this.props.value, 1);
     }
   }
 
@@ -44,7 +45,7 @@ export default class ScrollTo extends React.Component {
     const { target } = this.props;
     const { current: prevCurrent } = prevTarget || {};
     const { current } = target || {};
-    const scrollChanged = prevProps.scrollTop !== this.props.scrollTop;
+    const scrollChanged = prevProps.value !== this.props.value;
     const targetChanged = prevCurrent !== current;
 
     if (targetChanged) {
@@ -53,7 +54,9 @@ export default class ScrollTo extends React.Component {
     }
 
     if ((scrollChanged || targetChanged) && current) {
-      this.animate('scrollTop', current.scrollTop, this.props.scrollTop, 1);
+      const { name } = this.props;
+
+      this.animate(name, current[name], this.props.value, 1);
     }
   }
 
@@ -107,7 +110,8 @@ export default class ScrollTo extends React.Component {
 }
 
 ScrollTo.propTypes = {
+  name: PropTypes.string.isRequired,
   onEnd: PropTypes.func,
-  scrollTop: PropTypes.number,
-  target: PropTypes.any
+  target: PropTypes.any.isRequired,
+  value: PropTypes.number.isRequired
 };