Animate scrollTop

Author: compulim

packages/component/src/ScrollTo.js

@@ -0,0 +1,113 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function step(from, to, stepper, index) {
+  let next = from;
+
+  for (let i = 0; i < index; i++) {
+    next = stepper(next, to);
+  }
+
+  return next;
+}
+
+function squareStepper(current, to) {
+  const sign = Math.sign(to - current);
+  const step = Math.sqrt(Math.abs(to - current));
+  const next = current + step * sign;
+
+  if (sign > 0) {
+    return Math.min(to, next);
+  } else {
+    return Math.max(to, next);
+  }
+}
+
+export default class ScrollTo extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.handleCancelAnimation = this.handleCancelAnimation.bind(this);
+  }
+
+  componentDidMount() {
+    const { current } = this.props.target;
+
+    if (current) {
+      this.addEventListeners(current);
+      this.animate('scrollTop', current.scrollTop, this.props.scrollTop, 1);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const { target: prevTarget } = prevProps;
+    const { target } = this.props;
+    const { current: prevCurrent } = prevTarget || {};
+    const { current } = target || {};
+    const scrollChanged = prevProps.scrollTop !== this.props.scrollTop;
+    const targetChanged = prevCurrent !== current;
+
+    if (targetChanged) {
+      this.removeEventListeners(prevCurrent);
+      this.addEventListeners(current);
+    }
+
+    if ((scrollChanged || targetChanged) && current) {
+      this.animate('scrollTop', current.scrollTop, this.props.scrollTop, 1);
+    }
+  }
+
+  componentWillUnmount() {
+    this.removeEventListeners(this.props.target && this.props.target.current);
+    cancelAnimationFrame(this.animator);
+  }
+
+  addEventListeners(current) {
+    current && current.addEventListener('pointerdown', this.handleCancelAnimation, { passive: true });
+  }
+
+  removeEventListeners(current) {
+    current && current.removeEventListener('pointerdown', this.handleCancelAnimation);
+  }
+
+  animate(name, from, to, index, start = Date.now()) {
+    if (typeof to === 'number') {
+      cancelAnimationFrame(this.animator);
+
+      this.animator = requestAnimationFrame(() => {
+        const { current } = this.props.target || {};
+
+        if (current) {
+          let nextValue = step(from, to, squareStepper, (Date.now() - start) / 5);
+
+          if (Math.abs(to - nextValue) < .5) {
+            nextValue = to;
+          }
+
+          current[name] = nextValue;
+
+          if (to === nextValue) {
+            this.props.onEnd && this.props.onEnd(true);
+          } else {
+            this.animate(name, from, to, index + 1, start);
+          }
+        }
+      });
+    }
+  }
+
+  handleCancelAnimation() {
+    cancelAnimationFrame(this.animator);
+    this.props.onEnd && this.props.onEnd(false);
+  }
+
+  render() {
+    return false;
+  }
+}
+
+ScrollTo.propTypes = {
+  onEnd: PropTypes.func,
+  scrollTop: PropTypes.number,
+  target: PropTypes.any
+};

packages/component/src/ScrollToBottom/Composer.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Context from './Context';
-import DOMSetter from '../DOMSetter';
 import EventSpy from '../EventSpy';
+import ScrollTo from '../ScrollTo';
 
 function isBottom(current, threshold) {
   const { offsetHeight, scrollHeight, scrollTop } = current;
@@ -16,19 +16,14 @@ export default class ScrollToBottomComposer extends React.Component {
     super(props);
 
     this.handleScroll = this.handleScroll.bind(this);
+    this.handleScrollEnd = this.handleScrollEnd.bind(this);
 
     this.state = {
       bottom: true,
       handleUpdate: () => this.state.bottom && this.state.scrollToBottom(),
       scrollToBottom: () => this.setState(() => ({
         bottom: true,
-        scrollSetter: () => {
-          const { current } = this.state.target || {};
-
-          if (current) {
-            current.scrollTop = current.scrollHeight;
-          }
-        }
+        scrollTop: this.state.target && this.state.target.current && (this.state.target.current.scrollHeight - this.state.target.current.offsetHeight)
       })),
       setTarget: target => this.setState(() => ({ target })),
       target: null
@@ -41,6 +36,12 @@ export default class ScrollToBottomComposer extends React.Component {
     }));
   }
 
+  handleScrollEnd() {
+    this.setState(() => ({
+      scrollTop: null
+    }));
+  }
+
   render() {
     return (
       <Context.Provider value={ this.state }>
@@ -50,9 +51,13 @@ export default class ScrollToBottomComposer extends React.Component {
           onEvent={ this.handleScroll }
           target={ this.state.target }
         />
-        <DOMSetter
-          setter={ this.state.scrollSetter }
-        />
+        { typeof this.state.scrollTop === 'number' &&
+          <ScrollTo
+            onEnd={ this.handleScrollEnd }
+            scrollTop={ this.state.scrollTop }
+            target={ this.state.target }
+          />
+        }
       </Context.Provider>
     );
   }