fix decimal

Author: zombieJ

examples/animate.tsx

@@ -52,7 +52,7 @@ const MyItem: React.FC<MyItemProps> = (
       }}
     >
       {({ className, style }, motionRef) => (
-        <div ref={motionRef} className={classNames('item', className)} style={style}>
+        <div ref={motionRef} className={classNames('item', className)} style={style} data-id={id}>
           <div style={{ height: uuid % 2 ? 100 : undefined }}>
             <button
               onClick={() => {
@@ -119,6 +119,7 @@ const Demo = () => {
 
         <List
           dataSource={dataSource}
+          data-id="list"
           height={200}
           itemHeight={30}
           itemKey="id"

src/List.tsx

@@ -127,6 +127,25 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
         getItemKey: this.getItemKey,
       });
 
+      // TODO: REMOVE ME
+      const locatedItemRelativeTop = getItemRelativeTop({
+        itemIndex,
+        itemOffsetPtg,
+        itemElementHeights: this.itemElementHeights,
+        scrollPtg: getElementScrollPercentage(this.listRef.current),
+        clientHeight: this.listRef.current.clientHeight,
+        getItemKey: this.getItemKey,
+      });
+      console.warn('MEASURE:::', this.getItemKey(itemIndex), locatedItemRelativeTop);
+      console.warn(
+        ' ->',
+        itemIndex,
+        itemOffsetPtg,
+        this.itemElementHeights,
+        getElementScrollPercentage(this.listRef.current),
+        this.listRef.current.clientHeight,
+      );
+
       let startItemTop = locatedItemTop;
       for (let index = itemIndex - 1; index >= startIndex; index -= 1) {
         startItemTop -= this.itemElementHeights[this.getItemKey(index)] || 0;
@@ -145,14 +164,19 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
         itemOffsetPtg: originItemOffsetPtg,
         startIndex: originStartIndex,
         endIndex: originEndIndex,
+        scrollTop: originScrollTop,
       } = this.state;
 
       // 1. Get origin located item top
       const originLocatedItemRelativeTop = getItemRelativeTop({
         itemIndex: originItemIndex,
         itemOffsetPtg: originItemOffsetPtg,
         itemElementHeights: this.itemElementHeights,
-        scrollPtg: getElementScrollPercentage(this.listRef.current),
+        scrollPtg: getScrollPercentage({
+          scrollTop: originScrollTop,
+          scrollHeight: prevProps.dataSource.length * itemHeight,
+          clientHeight: this.listRef.current.clientHeight,
+        }),
         clientHeight: this.listRef.current.clientHeight,
         getItemKey: (index: number) => this.getItemKey(index, prevProps),
       });
@@ -164,6 +188,18 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
         this.getItemKey(originItemIndex, prevProps),
         originLocatedItemRelativeTop,
       );
+      console.warn(
+        ' -> ',
+        originItemIndex,
+        originItemOffsetPtg,
+        this.itemElementHeights,
+        getScrollPercentage({
+          scrollTop: originScrollTop,
+          scrollHeight: prevProps.dataSource.length * itemHeight,
+          clientHeight: this.listRef.current.clientHeight,
+        }),
+        this.listRef.current.clientHeight,
+      );
 
       // 2. Find the compare item
       const removedItemIndex: number = prevProps.dataSource.findIndex((_, index) => {

src/util.ts

@@ -112,6 +112,7 @@ export function getItemRelativeTop({
   const locatedItemHeight = itemElementHeights[getItemKey(itemIndex)] || 0;
   const locatedItemTop = scrollPtg * clientHeight;
   const locatedItemOffset = itemOffsetPtg * locatedItemHeight;
+  console.error('GIRT:', locatedItemTop, scrollPtg, clientHeight);
   return locatedItemTop - locatedItemOffset;
 }