fix: extra offset position not cover (#220)

* fix: extra should render in the filler

* docs: update demo

* test: update testcase

Author: zombieJ

examples/horizontal-scroll.tsx

@@ -14,6 +14,7 @@ const Rect = ({ style }: { style?: React.CSSProperties }) => (
       background: 'blue',
       flex: 'none',
       borderInline: `1px solid red`,
+      zIndex: 2,
       ...style,
     }}
   >
@@ -104,17 +105,20 @@ const Demo = () => {
               boxSizing: 'border-box',
             }}
             extraRender={(info) => {
-              const { offsetX, rtl: isRTL } = info;
+              const { offsetX, offsetY, rtl: isRTL } = info;
               const sizeInfo = info.getSize('id_3', 'id_5');
 
               return (
                 <div
                   style={{
                     position: 'absolute',
-                    top: sizeInfo.top,
+                    // top: -offsetY,
+                    top: -offsetY + sizeInfo.top,
                     height: sizeInfo.bottom - sizeInfo.top,
-                    [isRTL ? 'right' : 'left']: 100 - offsetX,
-                    background: 'rgba(255,0,0,0.1)',
+                    // [isRTL ? 'right' : 'left']: 100 - offsetX,
+                    [isRTL ? 'right' : 'left']: 100,
+                    background: 'rgba(255,0,0,0.9)',
+                    zIndex: 1,
                   }}
                 >
                   Extra

src/Filler.tsx

@@ -86,11 +86,10 @@ const Filler = React.forwardRef(
             ref={ref}
             {...innerProps}
           >
+            {extra}
             {children}
           </div>
         </ResizeObserver>
-
-        {extra}
       </div>
     );
   },

src/List.tsx

@@ -174,7 +174,12 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   );
 
   // ========================== Visible Calculation =========================
-  const { scrollHeight, start, end, offset } = React.useMemo(() => {
+  const {
+    scrollHeight,
+    start,
+    end,
+    offset: fillerOffset,
+  } = React.useMemo(() => {
     if (!useVirtual) {
       return {
         scrollHeight: undefined,
@@ -482,6 +487,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     end,
     virtual: inVirtual,
     offsetX: offsetLeft,
+    offsetY: fillerOffset,
     rtl: isRTL,
     getSize,
   });
@@ -541,7 +547,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
             prefixCls={prefixCls}
             height={scrollHeight}
             offsetX={offsetLeft}
-            offsetY={offset}
+            offsetY={fillerOffset}
             scrollWidth={scrollWidth}
             onInnerResize={collectHeight}
             ref={fillerInnerRef}

src/interface.ts

@@ -19,6 +19,7 @@ export interface ExtraRenderInfo {
   virtual: boolean;
   /** Used for `scrollWidth` tell the horizontal offset */
   offsetX: number;
+  offsetY: number;
 
   rtl: boolean;
 

tests/scrollWidth.test.tsx

@@ -187,6 +187,7 @@ describe('List.scrollWidth', () => {
       },
     });
 
+    expect(container.querySelector('.rc-virtual-list-holder-inner .bamboo')).toBeTruthy();
     expect(container.querySelector('.bamboo').textContent).toEqual(
       `${ITEM_HEIGHT}/${4 * ITEM_HEIGHT}`,
     );