Added animation to scrollToItem, changed grid call to match list call parameters

Author: Rayan Arnaout

src/createGridComponent.js

@@ -6,6 +6,7 @@ import { cancelTimeout, requestTimeout } from './timer';
 import { getScrollbarSize, getRTLOffsetType } from './domHelpers';
 
 import type { TimeoutID } from './timer';
+import { animatedScrollTo } from './scrollTo';
 
 type Direction = 'ltr' | 'rtl';
 export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
@@ -215,6 +216,7 @@ export default function createGridComponent({
  ? this.props.initialScrollTop
  : 0,
  scrollUpdateWasRequested: false,
+ scrollAnimated: false,
  verticalScrollDirection: 'forward',
  };
 
@@ -237,6 +239,7 @@ export default function createGridComponent({
  scrollTo({
  scrollLeft,
  scrollTop,
+ animated
  }: {
  scrollLeft: number,
  scrollTop: number,
@@ -268,33 +271,21 @@ export default function createGridComponent({
  prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
  scrollLeft: scrollLeft,
  scrollTop: scrollTop,
+ scrollAnimated: animated,
  scrollUpdateWasRequested: true,
  verticalScrollDirection:
  prevState.scrollTop < scrollTop ? 'forward' : 'backward',
  };
  }, this._resetIsScrollingDebounced);
  }
 
- scrollToItem({
- align = 'auto',
- columnIndex,
- rowIndex,
- }: {
- align: ScrollToAlign,
- columnIndex?: number,
- rowIndex?: number,
- }): void {
+ scrollToItem(index: number, align: ScrollToAlign = 'auto', animated: boolean = false): void {
  const { columnCount, height, rowCount, width } = this.props;
  const { scrollLeft, scrollTop } = this.state;
  const scrollbarSize = getScrollbarSize();
 
- if (columnIndex !== undefined) {
- columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
- }
- if (rowIndex !== undefined) {
- rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
- }
-
+ const rowIndex = parseInt(index / columnCount);
+ 
  const estimatedTotalHeight = getEstimatedTotalHeight(
  this.props,
  this._instanceProps
@@ -313,17 +304,6 @@ export default function createGridComponent({
  estimatedTotalHeight > height ? scrollbarSize : 0;
 
  this.scrollTo({
- scrollLeft:
- columnIndex !== undefined
- ? getOffsetForColumnAndAlignment(
- this.props,
- columnIndex,
- align,
- scrollLeft,
- this._instanceProps,
- verticalScrollbarSize
- )
- : scrollLeft,
  scrollTop:
  rowIndex !== undefined
  ? getOffsetForRowAndAlignment(
@@ -335,6 +315,7 @@ export default function createGridComponent({
  horizontalScrollbarSize
  )
  : scrollTop,
+ animated: animated,
  });
  }
 
@@ -356,7 +337,7 @@ export default function createGridComponent({
 
  componentDidUpdate() {
  const { direction } = this.props;
- const { scrollLeft, scrollTop, scrollUpdateWasRequested } = this.state;
+ const { scrollLeft, scrollTop, scrollUpdateWasRequested, scrollAnimated } = this.state;
 
  if (scrollUpdateWasRequested && this._outerRef != null) {
  // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
@@ -380,7 +361,8 @@ export default function createGridComponent({
  outerRef.scrollLeft = Math.max(0, scrollLeft);
  }
 
- outerRef.scrollTop = Math.max(0, scrollTop);
+ if (scrollAnimated) animatedScrollTo(outerRef, scrollTop, undefined, 200)
+ else outerRef.scrollTop = Math.max(0, scrollTop);
  }
 
  this._callPropsCallbacks();

src/createListComponent.js

@@ -6,6 +6,7 @@ import { cancelTimeout, requestTimeout } from './timer';
 import { getScrollbarSize, getRTLOffsetType } from './domHelpers';
 
 import type { TimeoutID } from './timer';
+import { animatedScrollTo } from './scrollTo';
 
 export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
 
@@ -177,6 +178,7 @@ export default function createListComponent({
  typeof this.props.initialScrollOffset === 'number'
  ? this.props.initialScrollOffset
  : 0,
+ scrollAnimated: false,
  scrollUpdateWasRequested: false,
  };
 
@@ -196,7 +198,7 @@ export default function createListComponent({
  return null;
  }
 
- scrollTo(scrollOffset: number): void {
+ scrollTo(scrollOffset: number, animated: boolean = false): void {
  scrollOffset = Math.max(0, scrollOffset);
 
  this.setState(prevState => {
@@ -208,11 +210,12 @@ export default function createListComponent({
  prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
  scrollOffset: scrollOffset,
  scrollUpdateWasRequested: true,
+ scrollAnimated: animated,
  };
  }, this._resetIsScrollingDebounced);
  }
 
- scrollToItem(index: number, align: ScrollToAlign = 'auto'): void {
+ scrollToItem(index: number, align: ScrollToAlign = 'auto', animated: boolean = false): void {
  const { itemCount, layout } = this.props;
  const { scrollOffset } = this.state;
 
@@ -245,7 +248,8 @@ export default function createListComponent({
  scrollOffset,
  this._instanceProps,
  scrollbarSize
- )
+ ),
+ animated
  );
  }
 
@@ -267,7 +271,7 @@ export default function createListComponent({
 
  componentDidUpdate() {
  const { direction, layout } = this.props;
- const { scrollOffset, scrollUpdateWasRequested } = this.state;
+ const { scrollOffset, scrollUpdateWasRequested, scrollAnimated } = this.state;
 
  if (scrollUpdateWasRequested && this._outerRef != null) {
  const outerRef = ((this._outerRef: any): HTMLElement);
@@ -294,9 +298,11 @@ export default function createListComponent({
  outerRef.scrollLeft = scrollOffset;
  }
  } else {
- outerRef.scrollTop = scrollOffset;
+ if (scrollAnimated) animatedScrollTo(outerRef, scrollOffset, undefined, 200)
+ else outerRef.scrollTop = scrollOffset;
  }
  }
+ 
 
  this._callPropsCallbacks();
  }

src/scrollTo.js

@@ -0,0 +1,58 @@
+// easing functions http://goo.gl/5HLl8
+Math.easeInOutQuad = function (t, b, c, d) {
+ t /= d/2;
+ if (t < 1) {
+ return c/2*t*t + b
+ }
+ t--;
+ return -c/2 * (t*(t-2) - 1) + b;
+ };
+ 
+ Math.easeInCubic = function(t, b, c, d) {
+ var tc = (t/=d)*t*t;
+ return b+c*(tc);
+ };
+ 
+ Math.inOutQuintic = function(t, b, c, d) {
+ var ts = (t/=d)*t,
+ tc = ts*t;
+ return b+c*(6*tc*ts + -15*ts*ts + 10*tc);
+ };
+ 
+ // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+ var requestAnimFrame = (function(){
+ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
+ })();
+ 
+export function animatedScrollTo(element, to, callback, duration) {
+ // because it's so fucking difficult to detect the scrolling element, just move them all
+ function move(amount) {
+ element.scrollTop = amount;
+ }
+ function position() {
+ return element.scrollTop;
+ }
+ var start = position(),
+ change = to - start,
+ currentTime = 0,
+ increment = 20;
+ duration = (typeof(duration) === 'undefined') ? 500 : duration;
+ var animateScroll = function() {
+ // increment the time
+ currentTime += increment;
+ // find the value with the quadratic in-out easing function
+ var val = Math.easeInOutQuad(currentTime, start, change, duration);
+ // move the document.body
+ move(val);
+ // do the animation unless its over
+ if (currentTime < duration) {
+ requestAnimFrame(animateScroll);
+ } else {
+ if (callback && typeof(callback) === 'function') {
+ // the animation is done so lets callback
+ callback();
+ }
+ }
+ };
+ animateScroll();
+ }