Merge branch 'react-component:master' into patch-1

Author: nuintun

.fatherrc.js

@@ -1,8 +1,9 @@
 export default {
   cjs: 'babel',
   esm: { type: 'babel', importLibToEs: true },
+  runtimeHelpers: true,
   preCommit: {
     eslint: true,
     prettier: true,
   },
-};
+};

.gitignore

@@ -7,4 +7,10 @@ lib/
 ~*
 yarn.lock
 package-lock.json
-!tests/__mocks__/rc-util/lib
+!tests/__mocks__/rc-util/lib
+
+# umi
+.umi
+.umi-production
+.umi-test
+.env.local

.umirc.ts

@@ -0,0 +1,22 @@
+// more config: https://d.umijs.org/config
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  title: 'rc-virtual-list',
+  favicon:
+    'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  logo:
+    'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  outputPath: '.doc',
+  exportStatic: {},
+  resolve: {
+    examples: ['none'],
+  },
+  styles: [
+    `
+      .markdown table {
+        width: auto !important;
+      }
+    `,
+  ]
+});

README.md

@@ -2,11 +2,7 @@
 
 React Virtual List Component which worked with animation.
 
-[![NPM version][npm-image]][npm-url]
-[![build status][github-actions-image]][github-actions-url]
-[![Test coverage][coveralls-image]][coveralls-url]
-[![node version][node-image]][node-url]
-[![npm download][download-image]][download-url]
+[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-virtual-list.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-virtual-list
@@ -19,6 +15,10 @@ React Virtual List Component which worked with animation.
 [download-image]: https://img.shields.io/npm/dm/rc-virtual-list.svg?style=flat-square
 [download-url]: https://npmjs.org/package/rc-virtual-list
 
+## Online Preview
+
+https://virtual-list-react-component.vercel.app/
+
 ## Development
 
 ```bash

docs/demo/animate.md

@@ -0,0 +1,3 @@
+## animate
+
+<code src="../../examples/animate.tsx">

docs/demo/basic.md

@@ -0,0 +1,3 @@
+## basic
+
+<code src="../../examples/basic.tsx">

docs/demo/height.md

@@ -0,0 +1,3 @@
+## height
+
+<code src="../../examples/height.tsx">

docs/demo/no-virtual.md

@@ -0,0 +1,3 @@
+## no-virtual
+
+<code src="../../examples/no-virtual.tsx">

docs/demo/switch.md

@@ -0,0 +1,3 @@
+## switch
+
+<code src="../../examples/switch.tsx">

docs/index.md

@@ -0,0 +1,5 @@
+---
+title: rc-virtual-list
+---
+
+<embed src="../README.md"></embed>

examples/animate.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import CSSMotion from 'rc-animate/lib/CSSMotion';
 import classNames from 'classnames';
 import List, { ListRef } from '../src/List';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import './animate.less';
 
 let uuid = 0;
@@ -58,7 +59,7 @@ const MyItem: React.ForwardRefRenderFunction<any, MyItemProps> = (
   ref,
 ) => {
   const motionRef = React.useRef(false);
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     return () => {
       if (motionRef.current) {
         onAppear();

examples/height.tsx

@@ -6,7 +6,7 @@ interface Item {
   height: number;
 }
 
-const MyItem: React.FC<Item> = ({ id, height }, ref) => {
+const MyItem: React.ForwardRefRenderFunction<HTMLElement, Item> = ({ id, height }, ref) => {
   return (
     <span
       ref={ref}

examples/switch.tsx

@@ -1,6 +1,6 @@
-/* eslint-disable jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
 import * as React from 'react';
-import List, { ListRef } from '../src/List';
+import type { ListRef } from '../src/List';
+import List from '../src/List';
 
 interface Item {
   id: number;
@@ -37,6 +37,7 @@ function getData(count: number) {
 const Demo = () => {
   const [height, setHeight] = React.useState(200);
   const [data, setData] = React.useState(getData(20));
+  const [fullHeight, setFullHeight] = React.useState(true);
   const listRef = React.useRef<ListRef>();
 
   return (
@@ -98,13 +99,23 @@ const Demo = () => {
             200
           </label>
         </span>
+        <span>
+          <button
+            onClick={() => {
+              setFullHeight(!fullHeight);
+            }}
+          >
+            Full Height: {String(fullHeight)}
+          </button>
+        </span>
 
         <List
           ref={listRef}
           data={data}
           height={height}
           itemHeight={10}
           itemKey="id"
+          fullHeight={fullHeight}
           style={{
             border: '1px solid red',
             boxSizing: 'border-box',

now.json

@@ -7,5 +7,8 @@
       "use": "@now/static-build",
       "config": { "distDir": ".doc" }
     }
+  ],
+  "routes": [
+    { "src": "/(.*)", "dest": "/dist/$1" }
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-virtual-list",
-  "version": "3.2.3",
+  "version": "3.4.11",
   "description": "React Virtual List Component",
   "engines": {
     "node": ">=8.x"
@@ -29,8 +29,8 @@
   "main": "./lib/index",
   "module": "./es/index",
   "scripts": {
-    "start": "cross-env NODE_ENV=development father doc dev --storybook",
-    "build": "father doc build --storybook",
+    "start": "dumi dev",
+    "build": "dumi build",
     "compile": "father build",
     "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
     "lint": "eslint src/ --ext .tsx,.ts",
@@ -45,24 +45,27 @@
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.3",
-    "@types/react": "^16.8.19",
-    "@types/react-dom": "^16.8.4",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/warning": "^3.0.0",
     "cross-env": "^5.2.0",
+    "dumi": "^1.1.12",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "enzyme-to-json": "^3.1.4",
     "eslint": "^7.6.0",
     "father": "^2.29.10",
+    "glob": "^7.1.6",
     "np": "^5.0.3",
     "rc-animate": "^2.9.1",
     "react": "^v16.9.0-alpha.0",
     "react-dom": "^v16.9.0-alpha.0",
     "typescript": "^3.5.2"
   },
   "dependencies": {
+    "@babel/runtime": "^7.20.0",
     "classnames": "^2.2.6",
-    "rc-resize-observer": "^0.2.3",
-    "rc-util": "^5.0.7"
+    "rc-resize-observer": "^1.0.0",
+    "rc-util": "^5.15.0"
   }
 }

src/List.tsx

@@ -3,14 +3,15 @@ import { useRef, useState } from 'react';
 import classNames from 'classnames';
 import Filler from './Filler';
 import ScrollBar from './ScrollBar';
-import { RenderFunc, SharedConfig, GetKey } from './interface';
+import type { RenderFunc, SharedConfig, GetKey } from './interface';
 import useChildren from './hooks/useChildren';
 import useHeights from './hooks/useHeights';
 import useScrollTo from './hooks/useScrollTo';
 import useDiffItem from './hooks/useDiffItem';
 import useFrameWheel from './hooks/useFrameWheel';
 import useMobileTouchMove from './hooks/useMobileTouchMove';
 import useOriginScroll from './hooks/useOriginScroll';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 
 const EMPTY_DATA = [];
 
@@ -36,7 +37,7 @@ export type ListRef = {
   scrollTo: ScrollTo;
 };
 
-export interface ListProps<T> extends React.HTMLAttributes<any> {
+export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'> {
   prefixCls?: string;
   children: RenderFunc<T>;
   data: T[];
@@ -50,6 +51,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 +69,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     virtual,
     component: Component = 'div',
     onScroll,
+    onVisibleChange,
     ...restProps
   } = props;
 
@@ -99,7 +103,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);
@@ -177,11 +181,12 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
       itemTop = currentItemBottom;
     }
 
-    // Fallback to normal if not match. This code should never reach
-    /* istanbul ignore next */
+    // When scrollTop at the end but data cut to small count will reach this
     if (startIndex === undefined) {
       startIndex = 0;
       startOffset = 0;
+
+      endIndex = Math.ceil(height / itemHeight);
     }
     if (endIndex === undefined) {
       endIndex = mergedData.length - 1;
@@ -207,10 +212,11 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   maxScrollHeightRef.current = maxScrollHeight;
 
   function keepInRange(newScrollTop: number) {
-    let newTop = Math.max(newScrollTop, 0);
+    let newTop = newScrollTop;
     if (!Number.isNaN(maxScrollHeightRef.current)) {
       newTop = Math.min(newTop, maxScrollHeightRef.current);
     }
+    newTop = Math.max(newTop, 0);
     return newTop;
   }
 
@@ -225,8 +231,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     syncScrollTop(newTop);
   }
 
-  // This code may only trigger in test case.
-  // But we still need a sync if some special escape
+  // When data size reduce. It may trigger native scroll event back to fit scroll position
   function onFallbackScroll(e: React.UIEvent<HTMLDivElement>) {
     const { scrollTop: newScrollTop } = e.currentTarget;
     if (newScrollTop !== scrollTop) {
@@ -242,8 +247,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 +265,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) {
@@ -273,9 +278,14 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     componentRef.current.addEventListener('MozMousePixelScroll', onMozMousePixelScroll);
 
     return () => {
-      componentRef.current.removeEventListener('wheel', onRawWheel);
-      componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll as any);
-      componentRef.current.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll as any);
+      if (componentRef.current) {
+        componentRef.current.removeEventListener('wheel', onRawWheel);
+        componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll as any);
+        componentRef.current.removeEventListener(
+          'MozMousePixelScroll',
+          onMozMousePixelScroll as any,
+        );
+      }
     };
   }, [useVirtual]);
 
@@ -297,6 +307,16 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     scrollTo,
   }));
 
+  // ================================ Effect ================================
+  /** We need told outside that some list not rendered */
+  useLayoutEffect(() => {
+    if (onVisibleChange) {
+      const renderList = mergedData.slice(start, end + 1);
+
+      onVisibleChange(renderList, mergedData);
+    }
+  }, [start, end, mergedData]);
+
   // ================================ Render ================================
   const listChildren = useChildren(mergedData, start, end, setInstanceRef, children, sharedConfig);
 
@@ -365,5 +385,5 @@ const List = React.forwardRef<ListRef, ListProps<any>>(RawList);
 List.displayName = 'List';
 
 export default List as <Item = any>(
-  props: React.PropsWithChildren<ListProps<Item>> & { ref?: React.Ref<ListRef> },
+  props: ListProps<Item> & { ref?: React.Ref<ListRef> },
 ) => React.ReactElement;