chore: Always use virtual when scrollWidth is set (#229)

* chore: scrollWidth make it always in virtual

* test: add test case

Author: zombieJ

examples/horizontal-scroll.tsx

@@ -70,16 +70,29 @@ const MyItem: React.ForwardRefRenderFunction<
 
 const ForwardMyItem = React.forwardRef(MyItem);
 
-const data: Item[] = [];
-for (let i = 0; i < 10000; i += 1) {
-  data.push({
-    id: `id_${i}`,
-    height: 30 + Math.random() * 10,
-  });
+function getData(count: number) {
+  const data: Item[] = [];
+  for (let i = 0; i < count; i += 1) {
+    data.push({
+      id: `id_${i}`,
+      height: Math.round(30 + Math.random() * 10),
+    });
+  }
+  return data;
 }
 
 const Demo = () => {
   const [rtl, setRTL] = React.useState(false);
+  const [count, setCount] = React.useState('1000');
+  const [data, setData] = React.useState<Item[]>([]);
+
+  React.useEffect(() => {
+    const num = Number(count);
+    if (!Number.isNaN(num)) {
+      setData(getData(num));
+    }
+  }, [count]);
+
   return (
     <React.StrictMode>
       <div>
@@ -91,8 +104,19 @@ const Demo = () => {
           RTL: {String(rtl)}
         </button>
 
+        <input
+          type="number"
+          value={count}
+          onChange={(e) => {
+            const num = e.target.value;
+
+            setCount(num);
+          }}
+        />
+
         <div style={{ width: 500, margin: 64 }}>
           <List
+            fullHeight={false}
             direction={rtl ? 'rtl' : 'ltr'}
             data={data}
             height={300}

src/List.tsx

@@ -60,6 +60,7 @@ export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'
    * By default `scrollWidth` is same as container.
    * When set this, it will show the horizontal scrollbar and
    * `scrollWidth` will be used as the real width instead of container width.
+   * When set, `virtual` will always be enabled.
    */
   scrollWidth?: number;
 
@@ -106,7 +107,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   // ================================= MISC =================================
   const useVirtual = !!(virtual !== false && height && itemHeight);
-  const inVirtual = useVirtual && data && itemHeight * data.length > height;
+  const inVirtual = useVirtual && data && (itemHeight * data.length > height || !!scrollWidth);
   const isRTL = direction === 'rtl';
 
   const mergedClassName = classNames(prefixCls, { [`${prefixCls}-rtl`]: isRTL }, className);

tests/scrollWidth.test.tsx

@@ -152,6 +152,24 @@ describe('List.scrollWidth', () => {
       expect(onVirtualScroll).toHaveBeenCalledWith({ x: 123, y: 0 });
     });
 
+    it('trigger event when less count', async () => {
+      const onVirtualScroll = jest.fn();
+
+      const { container } = await genList({
+        itemHeight: ITEM_HEIGHT,
+        height: 100,
+        data: genData(1),
+        scrollWidth: 1000,
+        onVirtualScroll,
+      });
+
+      // Wheel
+      fireEvent.wheel(container.querySelector('.rc-virtual-list-holder')!, {
+        deltaX: 123,
+      });
+      expect(onVirtualScroll).toHaveBeenCalledWith({ x: 123, y: 0 });
+    });
+
     it('shift wheel', async () => {
       const onVirtualScroll = jest.fn();