feat: add onVisibleChange prop

Author: zombieJ

src/List.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRef, useState } from 'react';
+import { useRef, useState, useLayoutEffect } from 'react';
 import classNames from 'classnames';
 import Filler from './Filler';
 import ScrollBar from './ScrollBar';
@@ -50,6 +50,8 @@ export interface ListProps<T> extends React.HTMLAttributes<any> {
   virtual?: boolean;
 
   onScroll?: React.UIEventHandler<HTMLElement>;
+  /** Trigger when render list item changed */
+  onVisibleChange?: (visibleList: T[], fullList: T[]) => void;
 }
 
 export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
@@ -66,6 +68,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     virtual,
     component: Component = 'div',
     onScroll,
+    onVisibleChange,
     ...restProps
   } = props;
 
@@ -99,7 +102,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   // ================================ Scroll ================================
   function syncScrollTop(newTop: number | ((prev: number) => number)) {
-    setScrollTop(origin => {
+    setScrollTop((origin) => {
       let value: number;
       if (typeof newTop === 'function') {
         value = newTop(origin);
@@ -242,8 +245,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     useVirtual,
     isScrollAtTop,
     isScrollAtBottom,
-    offsetY => {
-      syncScrollTop(top => {
+    (offsetY) => {
+      syncScrollTop((top) => {
         const newTop = top + offsetY;
         return newTop;
       });
@@ -260,7 +263,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     return true;
   });
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     // Firefox only
     function onMozMousePixelScroll(e: Event) {
       if (useVirtual) {
@@ -297,6 +300,14 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     scrollTo,
   }));
 
+  // ================================ Effect ================================
+  /** We need told outside that some list not rendered */
+  useLayoutEffect(() => {
+    const renderList = mergedData.slice(start, end);
+
+    onVisibleChange?.(renderList, mergedData);
+  }, [start, end, mergedData]);
+
   // ================================ Render ================================
   const listChildren = useChildren(mergedData, start, end, setInstanceRef, children, sharedConfig);
 

tests/list.test.js

@@ -81,11 +81,14 @@ describe('List.Basic', () => {
     });
 
     it('scroll it', () => {
+      const onVisibleChange = jest.fn();
+
       // scroll to top
       scrollTop = 0;
-      const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) });
+      const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), onVisibleChange });
       expect(wrapper.find(Filler).props().height).toEqual(2000);
       expect(wrapper.find(Filler).props().offset).toEqual(0);
+      onVisibleChange.mockReset();
 
       // scrollTop to end
       scrollTop = 2000 - 100;
@@ -94,6 +97,9 @@ describe('List.Basic', () => {
       });
       expect(wrapper.find(Filler).props().height).toEqual(2000);
       expect(wrapper.find(Filler).props().offset + wrapper.find('li').length * 20).toEqual(2000);
+
+      expect(onVisibleChange.mock.calls[0][0]).toHaveLength(6);
+      expect(onVisibleChange.mock.calls[0][1]).toHaveLength(100);
     });
   });
 
@@ -191,23 +197,15 @@ describe('List.Basic', () => {
 
     it('work', async () => {
       const wrapper = genList({ itemHeight: 20, height: 40, data: genData(3) });
-      wrapper
-        .find('Filler')
-        .find('ResizeObserver')
-        .props()
-        .onResize({ offsetHeight: 0 });
+      wrapper.find('Filler').find('ResizeObserver').props().onResize({ offsetHeight: 0 });
       expect(collected).toBeFalsy();
 
       // Wait for collection
       await act(async () => {
         await Promise.resolve();
       });
 
-      wrapper
-        .find('Filler')
-        .find('ResizeObserver')
-        .props()
-        .onResize({ offsetHeight: 100 });
+      wrapper.find('Filler').find('ResizeObserver').props().onResize({ offsetHeight: 100 });
       expect(collected).toBeTruthy();
     });
   });