feat: horizontal scroll

README.md

@@ -51,15 +51,16 @@ import List from 'rc-virtual-list';
 
 ## List
 
-| Prop       | Description                                             | Type                                 | Default |
-| ---------- | ------------------------------------------------------- | ------------------------------------ | ------- |
-| children   | Render props of item                                    | (item, index, props) => ReactElement | -       |
-| component  | Customize List dom element                              | string \| Component                  | div     |
-| data       | Data list                                               | Array                                | -       |
-| disabled   | Disable scroll check. Usually used on animation control | boolean                              | false   |
-| height     | List height                                             | number                               | -       |
-| itemHeight | Item minium height                                      | number                               | -       |
-| itemKey    | Match key with item                                     | string                               | -       |
+| Prop             | Description                                             | Type                                 | Default |
+| ---------------- | ------------------------------------------------------- | ------------------------------------ | ------- |
+| children         | Render props of item                                    | (item, index, props) => ReactElement | -       |
+| component        | Customize List dom element                              | string \| Component                  | div     |
+| data             | Data list                                               | Array                                | -       |
+| disabled         | Disable scroll check. Usually used on animation control | boolean                              | false   |
+| height           | List height                                             | number                               | -       |
+| itemHeight       | Item minium height                                      | number                               | -       |
+| itemKey          | Match key with item                                     | string                               | -       |
+| horizontalScroll | enable horizontal scroll                                | boolean                              | -       |
 
 `children` provides additional `props` argument to support IE 11 scroll shaking.
 It will set `style` to `visibility: hidden` when measuring. You can ignore this if no requirement on IE.

docs/demo/horizontal-scroll.md

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

examples/horizontal-scroll.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import List from '../src/List';
+
+interface Item {
+  id: number;
+  height: number;
+}
+
+const MyItem: React.ForwardRefRenderFunction<HTMLElement, Item> = ({ id, height }, ref) => {
+  return (
+    <span
+      ref={ref}
+      style={{
+        border: '1px solid gray',
+        padding: '0 16px',
+        height,
+        lineHeight: '30px',
+        boxSizing: 'border-box',
+        display: 'inline-block',
+      }}
+    >
+      longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
+    </span>
+  );
+};
+
+const ForwardMyItem = React.forwardRef(MyItem);
+
+const data: Item[] = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({
+    id: i,
+    height: 30,
+  });
+}
+
+const Demo = () => {
+  return (
+    <React.StrictMode>
+      <div>
+        <h2>Dynamic Height</h2>
+
+        <List
+          data={data}
+          height={500}
+          itemHeight={30}
+          itemKey="id"
+          horizontalScroll
+          style={{
+            border: '1px solid red',
+            boxSizing: 'border-box',
+          }}
+        >
+          {(item) => <ForwardMyItem {...item} />}
+        </List>
+      </div>
+    </React.StrictMode>
+  );
+};
+
+export default Demo;

package.json

@@ -65,7 +65,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.0",
     "classnames": "^2.2.6",
-    "rc-resize-observer": "^1.0.0",
-    "rc-util": "^5.15.0"
+    "rc-resize-observer": "^1.3.1",
+    "rc-util": "^5.34.1"
   }
 }

src/Filler.tsx

@@ -11,45 +11,65 @@ interface FillerProps {
   /** Set offset of visible items. Should be the top of start item position */
   offset?: number;
 
+  horizontalScroll?: boolean;
+
   children: React.ReactNode;
 
+  fillerOuterRef: React.MutableRefObject<HTMLDivElement>;
+
   onInnerResize?: () => void;
 
   innerProps?: InnerProps;
+
+  onWidthChange: (width: number) => void;
+
+  onScrollWidthChange: (scrollWidth: number) => void;
 }
 
 /**
  * Fill component to provided the scroll content real height.
  */
 const Filler = React.forwardRef(
   (
-    { height, offset, children, prefixCls, onInnerResize, innerProps }: FillerProps,
+    {
+      height,
+      offset,
+      children,
+      prefixCls,
+      horizontalScroll,
+      fillerOuterRef,
+      onInnerResize,
+      innerProps,
+      onWidthChange,
+      onScrollWidthChange,
+    }: FillerProps,
     ref: React.Ref<HTMLDivElement>,
   ) => {
     let outerStyle: React.CSSProperties = {};
 
     let innerStyle: React.CSSProperties = {
-      display: 'flex',
+      display: horizontalScroll ? 'inline-flex' : 'flex',
       flexDirection: 'column',
     };
 
     if (offset !== undefined) {
-      outerStyle = { height, position: 'relative', overflow: 'hidden' };
+      outerStyle = {
+        height,
+        position: 'relative',
+        overflow: 'hidden',
+      };
 
       innerStyle = {
         ...innerStyle,
         transform: `translateY(${offset}px)`,
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        top: 0,
       };
     }
 
-    return (
-      <div style={outerStyle}>
+    const outerContainer = (
+      <div ref={fillerOuterRef} style={outerStyle}>
         <ResizeObserver
-          onResize={({ offsetHeight }) => {
+          onResize={({ offsetWidth, offsetHeight }) => {
+            onScrollWidthChange(offsetWidth);
             if (offsetHeight && onInnerResize) {
               onInnerResize();
             }
@@ -68,6 +88,18 @@ const Filler = React.forwardRef(
         </ResizeObserver>
       </div>
     );
+
+    return horizontalScroll ? (
+      <ResizeObserver
+        onResize={({ offsetWidth }) => {
+          onWidthChange(offsetWidth);
+        }}
+      >
+        {outerContainer}
+      </ResizeObserver>
+    ) : (
+      outerContainer
+    );
   },
 );