();
+
+ const onClose = (id: string) => {
+ setCloseMap({
+ ...closeMap,
+ [id]: true,
+ });
+ };
+
+ const onLeave = (id: string) => {
+ const newData = data.filter(item => item.id !== id);
+ setData(newData);
+ };
+
+ const onAppear = (...args: any[]) => {
+ console.log('Appear:', args);
+ setAnimating(false);
+ };
+
+ function lockForAnimation() {
+ setAnimating(true);
+ }
+
+ const onInsertBefore = (id: string) => {
+ const index = data.findIndex(item => item.id === id);
+ const newData = [...data.slice(0, index), genItem(), ...data.slice(index)];
+ setInsertIndex(index);
+ setData(newData);
+ lockForAnimation();
+ };
+ const onInsertAfter = (id: string) => {
+ const index = data.findIndex(item => item.id === id) + 1;
+ const newData = [...data.slice(0, index), genItem(), ...data.slice(index)];
+ setInsertIndex(index);
+ setData(newData);
+ lockForAnimation();
+ };
+
+ return (
+
+
+
Animate
+
Current: {data.length} records
+
+
+ data={data}
+ data-id="list"
+ height={200}
+ itemHeight={20}
+ itemKey="id"
+ // disabled={animating}
+ ref={listRef}
+ style={{
+ border: '1px solid red',
+ boxSizing: 'border-box',
+ }}
+ // onSkipRender={onAppear}
+ // onItemRemove={onAppear}
+ >
+ {(item, index) => (
+
+ )}
+
+ {this.$attrs.id}
;
+ },
+};
+
+const data = [];
+for (let i = 0; i < 1000; i += 1) {
+ data.push({
+ id: String(i),
+ });
+}
+
+const TYPES = [
+ { name: 'ref real dom element', type: 'dom' },
+ { name: 'ref vue node', type: 'vue' },
+];
+
+const onScroll = e => {
+ console.log('scroll:', e.currentTarget.scrollTop);
+};
+
+const state = reactive({
+ destroy: false,
+ visible: true,
+ type: 'dom',
+});
+
+const listRef = ref(null);
+const Demo = () => {
+ const { destroy, visible, type } = state;
+ return (
+
+
Basic
+ {TYPES.map(({ name, type: nType }) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!destroy && (
+
+ type === 'dom' ? :
+ }
+ >
+ )}
+
+ );
+};
+
+export default Demo;
+
+/* eslint-enable */
diff --git a/components/vc-virtual-list/examples/basic.less b/components/vc-virtual-list/examples/basic.less
new file mode 100644
index 000000000..1939f7a6f
--- /dev/null
+++ b/components/vc-virtual-list/examples/basic.less
@@ -0,0 +1,8 @@
+.fixed-item {
+ border: 1px solid gray;
+ padding: 0 16px;
+ height: 32px;
+ line-height: 30px;
+ box-sizing: border-box;
+ display: inline-block;
+}
diff --git a/components/vc-virtual-list/examples/height.tsx b/components/vc-virtual-list/examples/height.tsx
new file mode 100644
index 000000000..301572840
--- /dev/null
+++ b/components/vc-virtual-list/examples/height.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import List from '../src/List';
+
+interface Item {
+ id: number;
+ height: number;
+}
+
+const MyItem: React.FC- = ({ id, height }, ref) => {
+ return (
+
+ {id}
+
+ );
+};
+
+const ForwardMyItem = React.forwardRef(MyItem);
+
+const data: Item[] = [];
+for (let i = 0; i < 100; i += 1) {
+ data.push({
+ id: i,
+ height: 30 + (i % 2 ? 70 : 0),
+ });
+}
+
+const Demo = () => {
+ return (
+
+
+
Dynamic Height
+
+
+ {item => }
+
+
+
+ );
+};
+
+export default Demo;
diff --git a/components/vc-virtual-list/examples/no-virtual.tsx b/components/vc-virtual-list/examples/no-virtual.tsx
new file mode 100644
index 000000000..1af58ff79
--- /dev/null
+++ b/components/vc-virtual-list/examples/no-virtual.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import List from '../src/List';
+
+interface Item {
+ id: number;
+ height: number;
+}
+
+const MyItem: React.FC- = ({ id, height }, ref) => {
+ return (
+
+ {id}
+
+ );
+};
+
+const ForwardMyItem = React.forwardRef(MyItem);
+
+const data: Item[] = [];
+for (let i = 0; i < 100; i += 1) {
+ data.push({
+ id: i,
+ height: 30 + (i % 2 ? 20 : 0),
+ });
+}
+
+const Demo = () => {
+ return (
+
+
+
Less Count
+
+ {item => }
+
+
+ Less Item Height
+
+ {item => }
+
+
+ Without Height
+
+ {item => }
+
+
+
+ );
+};
+
+export default Demo;
diff --git a/components/vc-virtual-list/examples/switch.tsx b/components/vc-virtual-list/examples/switch.tsx
new file mode 100644
index 000000000..010cd911d
--- /dev/null
+++ b/components/vc-virtual-list/examples/switch.tsx
@@ -0,0 +1,106 @@
+/* eslint-disable jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
+import * as React from 'react';
+import List from '../src/List';
+
+interface Item {
+ id: number;
+}
+
+const MyItem: React.FC- = ({ id }, ref) => (
+
+ {id}
+
+);
+
+const ForwardMyItem = React.forwardRef(MyItem);
+
+function getData(count: number) {
+ const data: Item[] = [];
+ for (let i = 0; i < count; i += 1) {
+ data.push({
+ id: i,
+ });
+ }
+ return data;
+}
+
+const Demo = () => {
+ const [height, setHeight] = React.useState(100);
+ const [data, setData] = React.useState(getData(20));
+
+ return (
+
+
+
Switch
+ {
+ setData(getData(Number(e.target.value)));
+ }}
+ >
+ Data
+
+
+
+
+
+
+ {
+ setHeight(Number(e.target.value));
+ }}
+ >
+ | Height
+
+
+
+
+
+
+ {(item, _, props) => }
+
+
+
+ );
+};
+
+export default Demo;
diff --git a/components/vc-virtual-list/hooks/useChildren.jsx b/components/vc-virtual-list/hooks/useChildren.jsx
new file mode 100644
index 000000000..9aabe5798
--- /dev/null
+++ b/components/vc-virtual-list/hooks/useChildren.jsx
@@ -0,0 +1,23 @@
+import { Item } from '../Item';
+
+export default function useChildren(
+ list,
+ startIndex,
+ endIndex,
+ setNodeRef,
+ renderFunc,
+ { getKey },
+) {
+ return list.slice(startIndex, endIndex + 1).map((item, index) => {
+ const eleIndex = startIndex + index;
+ const node = renderFunc(item, eleIndex, {
+ // style: status === 'MEASURE_START' ? { visibility: 'hidden' } : {},
+ });
+ const key = getKey(item);
+ return (
+ - setNodeRef(item, ele)}>
+ {node}
+
+ );
+ });
+}
diff --git a/components/vc-virtual-list/hooks/useDiffItem.js b/components/vc-virtual-list/hooks/useDiffItem.js
new file mode 100644
index 000000000..af26e5c06
--- /dev/null
+++ b/components/vc-virtual-list/hooks/useDiffItem.js
@@ -0,0 +1,18 @@
+import { ref, toRaw, watch } from 'vue';
+import cloneDeep from 'lodash-es/cloneDeep';
+import { findListDiffIndex } from '../utils/algorithmUtil';
+
+export default function useDiffItem(data, getKey, onDiff) {
+ const diffItem = ref(null);
+ let prevData = cloneDeep(toRaw(data));
+ watch(data, val => {
+ const diff = findListDiffIndex(prevData || [], val || [], getKey);
+ if (diff?.index !== undefined) {
+ onDiff?.(diff.index);
+ diffItem = val[diff.index];
+ }
+ prevData = cloneDeep(toRaw(val));
+ });
+
+ return [diffItem];
+}
diff --git a/components/vc-virtual-list/hooks/useFrameWheel.js b/components/vc-virtual-list/hooks/useFrameWheel.js
new file mode 100644
index 000000000..dbdf8802d
--- /dev/null
+++ b/components/vc-virtual-list/hooks/useFrameWheel.js
@@ -0,0 +1,50 @@
+import raf from '../../_util/raf';
+import isFF from '../utils/isFirefox';
+import useOriginScroll from './useOriginScroll';
+
+export default function useFrameWheel(inVirtual, isScrollAtTop, isScrollAtBottom, onWheelDelta) {
+ let offsetRef = 0;
+ let nextFrame = null;
+
+ // Firefox patch
+ let wheelValue = null;
+ let isMouseScroll = false;
+
+ // Scroll status sync
+ const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+
+ function onWheel(event) {
+ if (!inVirtual.value) return;
+
+ raf.cancel(nextFrame);
+
+ const { deltaY } = event;
+ offsetRef += deltaY;
+ wheelValue = deltaY;
+
+ // Do nothing when scroll at the edge, Skip check when is in scroll
+ if (originScroll(deltaY)) return;
+
+ // Proxy of scroll events
+ if (!isFF) {
+ event.preventDefault();
+ }
+
+ nextFrame = raf(() => {
+ // Patch a multiple for Firefox to fix wheel number too small
+ // ref: https://github.com/ant-design/ant-design/issues/26372#issuecomment-679460266
+ const patchMultiple = isMouseScroll ? 10 : 1;
+ onWheelDelta(offsetRef * patchMultiple);
+ offsetRef = 0;
+ });
+ }
+
+ // A patch for firefox
+ function onFireFoxScroll(event) {
+ if (!inVirtual.value) return;
+
+ isMouseScroll = event.detail === wheelValue;
+ }
+
+ return [onWheel, onFireFoxScroll];
+}
diff --git a/components/vc-virtual-list/hooks/useHeights.jsx b/components/vc-virtual-list/hooks/useHeights.jsx
new file mode 100644
index 000000000..2fde69c0d
--- /dev/null
+++ b/components/vc-virtual-list/hooks/useHeights.jsx
@@ -0,0 +1,56 @@
+import { ref } from 'vue';
+import { findDOMNode } from '../../_util/props-util';
+import CacheMap from '../utils/CacheMap';
+
+export default function useHeights(getKey, onItemAdd, onItemRemove) {
+ const instance = new Map();
+ const heights = new CacheMap();
+ let updatedMark = ref(0);
+ let heightUpdateId = 0;
+ function collectHeight() {
+ heightUpdateId += 1;
+ const currentId = heightUpdateId;
+
+ Promise.resolve().then(() => {
+ // Only collect when it's latest call
+ if (currentId !== heightUpdateId) return;
+ let changed = false;
+ instance.forEach((element, key) => {
+ if (element && element.offsetParent) {
+ const htmlElement = findDOMNode(element);
+ const { offsetHeight } = htmlElement;
+ if (heights.get(key) !== offsetHeight) {
+ changed = true;
+ heights.set(key, htmlElement.offsetHeight);
+ }
+ }
+ });
+ if (changed) {
+ updatedMark.value++;
+ }
+ });
+ }
+
+ function setInstance(item, ins) {
+ const key = getKey(item);
+ const origin = instance.get(key);
+
+ if (ins) {
+ instance.set(key, ins);
+ collectHeight();
+ } else {
+ instance.delete(key);
+ }
+
+ // Instance changed
+ if (!origin !== !ins) {
+ if (ins) {
+ onItemAdd?.(item);
+ } else {
+ onItemRemove?.(item);
+ }
+ }
+ }
+
+ return [setInstance, collectHeight, heights, updatedMark];
+}
diff --git a/components/vc-virtual-list/hooks/useMobileTouchMove.js b/components/vc-virtual-list/hooks/useMobileTouchMove.js
new file mode 100644
index 000000000..0a1bdcf8b
--- /dev/null
+++ b/components/vc-virtual-list/hooks/useMobileTouchMove.js
@@ -0,0 +1,74 @@
+import { watch } from 'vue';
+
+const SMOOTH_PTG = 14 / 15;
+
+export default function useMobileTouchMove(inVirtual, listRef, callback) {
+ let touched = false;
+ let touchY = 0;
+
+ let element = null;
+
+ // Smooth scroll
+ let interval = null;
+
+ let cleanUpEvents;
+
+ const onTouchMove = e => {
+ if (touched) {
+ const currentY = Math.ceil(e.touches[0].pageY);
+ let offsetY = touchY - currentY;
+ touchY = currentY;
+
+ if (callback(offsetY)) {
+ e.preventDefault();
+ }
+
+ // Smooth interval
+ clearInterval(interval);
+ interval = setInterval(() => {
+ offsetY *= SMOOTH_PTG;
+
+ if (!callback(offsetY, true) || Math.abs(offsetY) <= 0.1) {
+ clearInterval(interval);
+ }
+ }, 16);
+ }
+ };
+
+ const onTouchEnd = () => {
+ touched = false;
+
+ cleanUpEvents();
+ };
+
+ const onTouchStart = e => {
+ cleanUpEvents();
+
+ if (e.touches.length === 1 && !touched) {
+ touched = true;
+ touchY = Math.ceil(e.touches[0].pageY);
+
+ element = e.target;
+ element.addEventListener('touchmove', onTouchMove);
+ element.addEventListener('touchend', onTouchEnd);
+ }
+ };
+
+ cleanUpEvents = () => {
+ if (element) {
+ element.removeEventListener('touchmove', onTouchMove);
+ element.removeEventListener('touchend', onTouchEnd);
+ }
+ };
+ watch(inVirtual, val => {
+ if (val.value) {
+ listRef.current.addEventListener('touchstart', onTouchStart);
+ }
+
+ return () => {
+ listRef.current.removeEventListener('touchstart', onTouchStart);
+ cleanUpEvents();
+ clearInterval(interval);
+ };
+ });
+}
diff --git a/components/vc-virtual-list/hooks/useOriginScroll.js b/components/vc-virtual-list/hooks/useOriginScroll.js
new file mode 100644
index 000000000..5518023d3
--- /dev/null
+++ b/components/vc-virtual-list/hooks/useOriginScroll.js
@@ -0,0 +1,42 @@
+import { reactive } from 'vue';
+
+export default (isScrollAtTop, isScrollAtBottom) => {
+ // Do lock for a wheel when scrolling
+ let lock = false;
+ let lockTimeout = null;
+ function lockScroll() {
+ clearTimeout(lockTimeout);
+
+ lock = true;
+
+ lockTimeout = setTimeout(() => {
+ lock = false;
+ }, 50);
+ }
+
+ // Pass to ref since global add is in closure
+ const scrollPingRef = reactive({
+ top: isScrollAtTop.value,
+ bottom: isScrollAtBottom.value,
+ });
+ // scrollPingRef.value.top = isScrollAtTop;
+ // scrollPingRef.value.bottom = isScrollAtBottom;
+
+ return (deltaY, smoothOffset = false) => {
+ const originScroll =
+ // Pass origin wheel when on the top
+ (deltaY < 0 && scrollPingRef.top) ||
+ // Pass origin wheel when on the bottom
+ (deltaY > 0 && scrollPingRef.bottom);
+
+ if (smoothOffset && originScroll) {
+ // No need lock anymore when it's smooth offset from touchMove interval
+ clearTimeout(lockTimeout);
+ lock = false;
+ } else if (!originScroll || lock) {
+ lockScroll();
+ }
+
+ return !lock && originScroll;
+ };
+};
diff --git a/components/vc-virtual-list/hooks/useScrollTo.jsx b/components/vc-virtual-list/hooks/useScrollTo.jsx
new file mode 100644
index 000000000..d0de1d6d3
--- /dev/null
+++ b/components/vc-virtual-list/hooks/useScrollTo.jsx
@@ -0,0 +1,102 @@
+/* eslint-disable no-param-reassign */
+
+import raf from '../../_util/raf';
+
+export default function useScrollTo(
+ containerRef,
+ data,
+ heights,
+ itemHeight,
+ getKey,
+ collectHeight,
+ syncScrollTop,
+) {
+ let scroll = null;
+
+ return arg => {
+ raf.cancel(scroll);
+
+ if (typeof arg === 'number') {
+ syncScrollTop(arg);
+ } else if (arg && typeof arg === 'object') {
+ let index;
+ const { align } = arg;
+
+ if ('index' in arg) {
+ ({ index } = arg);
+ } else {
+ index = data.findIndex(item => getKey(item) === arg.key);
+ }
+
+ const { offset = 0 } = arg;
+
+ // We will retry 3 times in case dynamic height shaking
+ const syncScroll = (times, targetAlign) => {
+ if (times < 0 || !containerRef.current) return;
+
+ const height = containerRef.current.clientHeight;
+ let needCollectHeight = false;
+ let newTargetAlign = targetAlign;
+
+ // Go to next frame if height not exist
+ if (height) {
+ const mergedAlign = targetAlign || align;
+
+ // Get top & bottom
+ let stackTop = 0;
+ let itemTop = 0;
+ let itemBottom = 0;
+
+ for (let i = 0; i <= index; i += 1) {
+ const key = getKey(data[i]);
+ itemTop = stackTop;
+ const cacheHeight = heights.get(key);
+ itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);
+
+ stackTop = itemBottom;
+
+ if (i === index && cacheHeight === undefined) {
+ needCollectHeight = true;
+ }
+ }
+
+ // Scroll to
+ let targetTop = null;
+
+ switch (mergedAlign) {
+ case 'top':
+ targetTop = itemTop - offset;
+ break;
+ case 'bottom':
+ targetTop = itemBottom - height + offset;
+ break;
+
+ default: {
+ const { scrollTop } = containerRef.current;
+ const scrollBottom = scrollTop + height;
+ if (itemTop < scrollTop) {
+ newTargetAlign = 'top';
+ } else if (itemBottom > scrollBottom) {
+ newTargetAlign = 'bottom';
+ }
+ }
+ }
+
+ if (targetTop !== null && targetTop !== containerRef.current.scrollTop) {
+ syncScrollTop(targetTop);
+ }
+ }
+
+ // We will retry since element may not sync height as it described
+ scroll = raf(() => {
+ if (needCollectHeight) {
+ collectHeight();
+ }
+ syncScroll(times - 1, newTargetAlign);
+ });
+ };
+
+ syncScroll(3);
+ }
+ };
+}
diff --git a/examples/App.vue b/examples/App.vue
index 0f02c1ac0..cd089ac7a 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -4,7 +4,7 @@