fix id mapping

Author: zombieJ

examples/animate.tsx

@@ -9,7 +9,8 @@ let uuid = 0;
 function genItem() {
   uuid += 1;
   return {
-    id: uuid,
+    id: `key_${uuid}`,
+    uuid,
   };
 }
 
@@ -19,22 +20,23 @@ for (let i = 0; i < 19; i += 1) {
 }
 
 interface Item {
-  id: number;
+  id: string;
+  uuid: number;
 }
 
 interface MyItemProps extends Item {
   visible: boolean;
-  onClose: (id: number) => void;
-  onLeave: (id: number) => void;
-  onInsertBefore: (id: number) => void;
-  onInsertAfter: (id: number) => void;
+  onClose: (id: string) => void;
+  onLeave: (id: string) => void;
+  onInsertBefore: (id: string) => void;
+  onInsertAfter: (id: string) => void;
 }
 
 const getCurrentHeight = (node: HTMLElement) => ({ height: node.offsetHeight });
 const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
 
 const MyItem: React.FC<MyItemProps> = (
-  { id, visible, onClose, onLeave, onInsertBefore, onInsertAfter },
+  { id, uuid, visible, onClose, onLeave, onInsertBefore, onInsertAfter },
   ref,
 ) => {
   return (
@@ -50,7 +52,7 @@ const MyItem: React.FC<MyItemProps> = (
     >
       {({ className, style }, motionRef) => (
         <div ref={motionRef} className={classNames('item', className)} style={style}>
-          <div style={{ height: id % 2 ? 100 : undefined }}>
+          <div style={{ height: uuid % 2 ? 100 : undefined }}>
             <button
               onClick={() => {
                 onClose(id);
@@ -86,24 +88,24 @@ const Demo = () => {
   const [dataSource, setDataSource] = React.useState(originDataSource);
   const [closeMap, setCloseMap] = React.useState<{ [id: number]: boolean }>({});
 
-  const onClose = (id: number) => {
+  const onClose = (id: string) => {
     setCloseMap({
       ...closeMap,
       [id]: true,
     });
   };
 
-  const onLeave = (id: number) => {
+  const onLeave = (id: string) => {
     const newDataSource = dataSource.filter(item => item.id !== id);
     setDataSource(newDataSource);
   };
 
-  const onInsertBefore = (id: number) => {
+  const onInsertBefore = (id: string) => {
     const index = dataSource.findIndex(item => item.id === id);
     const newDataSource = [...dataSource.slice(0, index), genItem(), ...dataSource.slice(index)];
     setDataSource(newDataSource);
   };
-  const onInsertAfter = (id: number) => {
+  const onInsertAfter = (id: string) => {
     const index = dataSource.findIndex(item => item.id === id) + 1;
     const newDataSource = [...dataSource.slice(0, index), genItem(), ...dataSource.slice(index)];
     setDataSource(newDataSource);

src/List.tsx

@@ -82,21 +82,20 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
     if (status === 'MEASURE_START') {
       // Record here since measure item height will get warning in `render`
       for (let index = startIndex; index <= endIndex; index += 1) {
-        const item = dataSource[index];
-        const eleKey = itemKey ? item[itemKey] : index;
-        this.itemElementHeights[index] = getNodeHeight(this.itemElements[eleKey]);
+        const eleKey = this.getItemKey(index);
+        this.itemElementHeights[eleKey] = getNodeHeight(this.itemElements[eleKey]);
       }
 
       // Calculate top visible item top offset
-      const locatedItemHeight = this.getItemHeight(itemIndex);
+      const locatedItemHeight = this.itemElementHeights[this.getItemKey(itemIndex)] || 0;
       const locatedItemTop = scrollPtg * this.listRef.current.clientHeight;
       const locatedItemOffset = itemOffsetPtg * locatedItemHeight;
       const locatedItemMergedTop =
         this.listRef.current.scrollTop + locatedItemTop - locatedItemOffset;
 
       let startItemTop = locatedItemMergedTop;
       for (let index = itemIndex - 1; index >= startIndex; index -= 1) {
-        startItemTop -= this.getItemHeight(index);
+        startItemTop -= this.itemElementHeights[this.getItemKey(index)] || 0;
       }
 
       this.setState({ status: 'MEASURE_DONE', startItemTop });
@@ -108,8 +107,6 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
     }
   }
 
-  public getItemHeight = (index: number) => this.itemElementHeights[index] || 0;
-
   /**
    * Phase 2: Trigger render since we should re-calculate current position.
    */
@@ -142,16 +139,21 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
     });
   };
 
+  public getItemKey = (index: number) => {
+    const { dataSource, itemKey } = this.props;
+    const item = dataSource[index];
+    return item && itemKey ? item[itemKey] : index;
+  };
+
   /**
    * Phase 4: Render item and get all the visible items height
    */
-  public renderChildren = (list: T[], startIndex: number, renderFunc: RenderFunc<T>) => {
-    const { itemKey } = this.props;
+  public renderChildren = (list: T[], startIndex: number, renderFunc: RenderFunc<T>) =>
     // We should measure rendered item height
-    return list.map((item, index) => {
+     list.map((item, index) => {
       const node = renderFunc(item) as React.ReactElement;
       const eleIndex = startIndex + index;
-      const eleKey = itemKey ? item[itemKey] : eleIndex;
+      const eleKey = this.getItemKey(eleIndex);
 
       // Pass `key` and `ref` for internal measure
       return React.cloneElement(node, {
@@ -160,8 +162,8 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
           this.itemElements[eleKey] = ele;
         },
       });
-    });
-  };
+    })
+  ;
 
   public render() {
     const {

src/util.ts

@@ -47,3 +47,5 @@ export function getNodeHeight(node: HTMLElement) {
 
   return findDOMNode(node).offsetHeight;
 }
+
+export function getStartItemTop(itemIndex: number) {}