refactor

Author: zombieJ

src/List.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Filler from './Filler';
-import { getLocationItem, getScrollPercentage, getNodeHeight } from './util';
+import { getScrollPercentage, getNodeHeight, getRangeIndex } from './util';
 
 type RenderFunc<T> = (item: T) => React.ReactNode;
 
@@ -17,7 +17,6 @@ interface ListState {
   status: 'NONE' | 'MEASURE_START' | 'MEASURE_DONE';
 
   scrollTop: number | null;
-  scrollPtg: number;
   itemIndex: number;
   itemOffsetPtg: number;
   startIndex: number;
@@ -49,7 +48,6 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
   state: ListState = {
     status: 'NONE',
     scrollTop: null,
-    scrollPtg: 0,
     itemIndex: 0,
     itemOffsetPtg: 0,
     startIndex: 0,
@@ -76,8 +74,8 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
    * Phase 5: Trigger re-render to use correct position
    */
   public componentDidUpdate(prevProps: ListProps<T>) {
-    const { status, scrollPtg, startIndex, endIndex, itemIndex, itemOffsetPtg } = this.state;
-    const { dataSource, itemKey } = this.props;
+    const { status, startIndex, endIndex, itemIndex, itemOffsetPtg } = this.state;
+    const { dataSource } = this.props;
 
     if (status === 'MEASURE_START') {
       // Record here since measure item height will get warning in `render`
@@ -87,6 +85,7 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
       }
 
       // Calculate top visible item top offset
+      const scrollPtg = getScrollPercentage(this.listRef.current);
       const locatedItemHeight = this.itemElementHeights[this.getItemKey(itemIndex)] || 0;
       const locatedItemTop = scrollPtg * this.listRef.current.clientHeight;
       const locatedItemOffset = itemOffsetPtg * locatedItemHeight;
@@ -121,21 +120,21 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
     }
 
     const scrollPtg = getScrollPercentage(this.listRef.current);
-
-    const { index, offsetPtg } = getLocationItem(scrollPtg, dataSource.length);
     const visibleCount = Math.ceil(height / itemHeight);
 
-    const beforeCount = Math.ceil(scrollPtg * visibleCount);
-    const afterCount = Math.ceil((1 - scrollPtg) * visibleCount);
+    const { itemIndex, itemOffsetPtg, startIndex, endIndex } = getRangeIndex(
+      scrollPtg,
+      dataSource.length,
+      visibleCount,
+    );
 
     this.setState({
       status: 'MEASURE_START',
       scrollTop,
-      scrollPtg,
-      itemIndex: index,
-      itemOffsetPtg: offsetPtg,
-      startIndex: Math.max(0, index - beforeCount),
-      endIndex: Math.min(dataSource.length - 1, index + afterCount),
+      itemIndex,
+      itemOffsetPtg,
+      startIndex,
+      endIndex,
     });
   };
 

src/util.ts

@@ -14,7 +14,7 @@ interface LocationItemResult {
  *
  * `total` should be the real count instead of `total - 1` in calculation.
  */
-export function getLocationItem(scrollPtg: number, total: number): LocationItemResult {
+function getLocationItem(scrollPtg: number, total: number): LocationItemResult {
   const itemIndex = Math.floor(scrollPtg * total);
   const itemTopPtg = itemIndex / total;
   const itemBottomPtg = (itemIndex + 1) / total;
@@ -26,12 +26,15 @@ export function getLocationItem(scrollPtg: number, total: number): LocationItemR
   };
 }
 
-export function getScrollPercentage(element: HTMLElement | null) {
-  if (!element) {
-    return 0;
-  }
-
-  const { scrollTop, scrollHeight, clientHeight } = element;
+function internalGetScrollPercentage({
+  scrollTop,
+  scrollHeight,
+  clientHeight,
+}: {
+  scrollTop: number;
+  scrollHeight: number;
+  clientHeight: number;
+}): number {
   if (scrollHeight <= clientHeight) {
     return 0;
   }
@@ -40,6 +43,14 @@ export function getScrollPercentage(element: HTMLElement | null) {
   return scrollTopPtg;
 }
 
+export function getScrollPercentage(element: HTMLElement | null) {
+  if (!element) {
+    return 0;
+  }
+
+  return internalGetScrollPercentage(element);
+}
+
 /**
  * Get node `offsetHeight`. We prefer node is a dom element directly.
  * But if not provided, downgrade to `findDOMNode` to get the real dom element.
@@ -52,4 +63,28 @@ export function getNodeHeight(node: HTMLElement) {
   return findDOMNode(node).offsetHeight;
 }
 
-export function getStartItemTop(itemIndex: number) {}
+/**
+ * Get display items start, end, located item index. This is pure math calculation
+ */
+export function getRangeIndex(scrollPtg: number, itemCount: number, visibleCount: number) {
+  const { index, offsetPtg } = getLocationItem(scrollPtg, itemCount);
+
+  const beforeCount = Math.ceil(scrollPtg * visibleCount);
+  const afterCount = Math.ceil((1 - scrollPtg) * visibleCount);
+
+  return {
+    itemIndex: index,
+    itemOffsetPtg: offsetPtg,
+    startIndex: Math.max(0, index - beforeCount),
+    endIndex: Math.min(itemCount - 1, index + afterCount),
+  };
+}
+
+interface ItemTopConfig {
+  clientHeight: number;
+  scrollTop: number;
+  scrollPtg: number;
+  itemOffsetPtg: number;
+}
+
+export function getStartItemTop(itemIndex: number, itemElementHeights: { [key: string]: number }) {}