refactor: Virtual always use fake scroll bar (#68)

* add useVirtual

* scroll to offsetHeight

* support show scroll bar

* clean up legacy code

* fix mobile touch move

* show scrollbar only when scorllable

* skip when no height

* update test case

* fix compile

* more test case

Author: zombieJ

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
   ...base,
   rules: {
     ...base.rules,
+    'arrow-parens': 0,
     '@typescript-eslint/no-explicit-any': 0,
     'react/no-did-update-set-state': 0,
     'react/no-find-dom-node': 0,

examples/basic.tsx

@@ -72,6 +72,14 @@ const Demo = () => {
           </label>
         ))}
 
+        <button
+          type="button"
+          onClick={() => {
+            listRef.current.scrollTo(null);
+          }}
+        >
+          Show scroll bar
+        </button>
         <button
           type="button"
           onClick={() => {

examples/no-virtual.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable arrow-body-style */
 import * as React from 'react';
 import List from '../src/List';
 
@@ -24,7 +25,7 @@ const MyItem: React.FC<Item> = ({ id, height }, ref) => {
   );
 };
 
-const ForwardMyItem = React.forwardRef(MyItem);
+const ForwardMyItem = React.forwardRef(MyItem as any);
 
 const data: Item[] = [];
 for (let i = 0; i < 100; i += 1) {
@@ -38,6 +39,20 @@ const Demo = () => {
   return (
     <React.StrictMode>
       <div>
+        <h2>Not Data</h2>
+        <List
+          data={null}
+          itemHeight={30}
+          height={100}
+          itemKey="id"
+          style={{
+            border: '1px solid red',
+            boxSizing: 'border-box',
+          }}
+        >
+          {item => <ForwardMyItem {...(item as any)} />}
+        </List>
+
         <h2>Less Count</h2>
         <List
           data={data.slice(0, 1)}
@@ -49,7 +64,7 @@ const Demo = () => {
             boxSizing: 'border-box',
           }}
         >
-          {item => <ForwardMyItem {...item} />}
+          {item => <ForwardMyItem {...(item as any)} />}
         </List>
 
         <h2>Less Item Height</h2>
@@ -63,7 +78,7 @@ const Demo = () => {
             boxSizing: 'border-box',
           }}
         >
-          {item => <ForwardMyItem {...item} />}
+          {item => <ForwardMyItem {...(item as any)} />}
         </List>
 
         <h2>Without Height</h2>
@@ -76,7 +91,7 @@ const Demo = () => {
             boxSizing: 'border-box',
           }}
         >
-          {item => <ForwardMyItem {...item} />}
+          {item => <ForwardMyItem {...(item as any)} />}
         </List>
       </div>
     </React.StrictMode>

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 from '../src/List';
+import List, { ListRef } from '../src/List';
 
 interface Item {
   id: number;
@@ -22,7 +22,7 @@ const MyItem: React.FC<Item> = ({ id }, ref) => (
   </span>
 );
 
-const ForwardMyItem = React.forwardRef(MyItem);
+const ForwardMyItem = React.forwardRef(MyItem as any);
 
 function getData(count: number) {
   const data: Item[] = [];
@@ -35,8 +35,9 @@ function getData(count: number) {
 }
 
 const Demo = () => {
-  const [height, setHeight] = React.useState(100);
+  const [height, setHeight] = React.useState(200);
   const [data, setData] = React.useState(getData(20));
+  const listRef = React.useRef<ListRef>();
 
   return (
     <React.StrictMode>
@@ -54,6 +55,10 @@ const Demo = () => {
           <label>
             <input type="radio" name="switch" value={2} />2
           </label>
+          <label>
+            <input type="radio" name="switch" value={20} />
+            20
+          </label>
           <label>
             <input type="radio" name="switch" value={100} />
             100
@@ -66,6 +71,14 @@ const Demo = () => {
             <input type="radio" name="switch" value={1000} />
             1000
           </label>
+          <button
+            type="button"
+            onClick={() => {
+              listRef.current.scrollTo(null);
+            }}
+          >
+            Show scrollbar
+          </button>
         </span>
         <span
           onChange={(e: any) => {
@@ -87,16 +100,17 @@ const Demo = () => {
         </span>
 
         <List
+          ref={listRef}
           data={data}
           height={height}
-          itemHeight={30}
+          itemHeight={10}
           itemKey="id"
           style={{
             border: '1px solid red',
             boxSizing: 'border-box',
           }}
         >
-          {(item, _, props) => <ForwardMyItem {...item} {...props} />}
+          {(item, _, props) => <ForwardMyItem {...(item as any)} {...props} />}
         </List>
       </div>
     </React.StrictMode>

src/Filler.tsx

@@ -17,53 +17,55 @@ interface FillerProps {
 /**
  * Fill component to provided the scroll content real height.
  */
-const Filler: React.FC<FillerProps> = ({
-  height,
-  offset,
-  children,
-  prefixCls,
-  onInnerResize,
-}): React.ReactElement => {
-  let outerStyle: React.CSSProperties = {};
+const Filler = React.forwardRef(
+  (
+    { height, offset, children, prefixCls, onInnerResize }: FillerProps,
+    ref: React.Ref<HTMLDivElement>,
+  ) => {
+    let outerStyle: React.CSSProperties = {};
 
-  let innerStyle: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-  };
+    let innerStyle: React.CSSProperties = {
+      display: 'flex',
+      flexDirection: 'column',
+    };
 
-  if (offset !== undefined) {
-    outerStyle = { height, position: 'relative', overflow: 'hidden' };
+    if (offset !== undefined) {
+      outerStyle = { height, position: 'relative', overflow: 'hidden' };
 
-    innerStyle = {
-      ...innerStyle,
-      transform: `translateY(${offset}px)`,
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      top: 0,
-    };
-  }
+      innerStyle = {
+        ...innerStyle,
+        transform: `translateY(${offset}px)`,
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+      };
+    }
 
-  return (
-    <div style={outerStyle}>
-      <ResizeObserver
-        onResize={({ offsetHeight }) => {
-          if (offsetHeight && onInnerResize) {
-            onInnerResize();
-          }
-        }}
-      >
-        <div
-          style={innerStyle}
-          className={classNames({
-            [`${prefixCls}-holder-inner`]: prefixCls,
-          })}
+    return (
+      <div style={outerStyle}>
+        <ResizeObserver
+          onResize={({ offsetHeight }) => {
+            if (offsetHeight && onInnerResize) {
+              onInnerResize();
+            }
+          }}
         >
-          {children}
-        </div>
-      </ResizeObserver>
-    </div>
-  );
-};
+          <div
+            style={innerStyle}
+            className={classNames({
+              [`${prefixCls}-holder-inner`]: prefixCls,
+            })}
+            ref={ref}
+          >
+            {children}
+          </div>
+        </ResizeObserver>
+      </div>
+    );
+  },
+);
+
+Filler.displayName = 'Filler';
 
 export default Filler;

src/List.tsx

@@ -70,15 +70,17 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   } = props;
 
   // ================================= MISC =================================
-  const inVirtual =
-    virtual !== false && height && itemHeight && data && itemHeight * data.length > height;
+  const useVirtual = !!(virtual !== false && height && itemHeight);
+  const inVirtual = useVirtual && data && itemHeight * data.length > height;
 
   const [scrollTop, setScrollTop] = useState(0);
   const [scrollMoving, setScrollMoving] = useState(false);
 
   const mergedClassName = classNames(prefixCls, className);
   const mergedData = data || EMPTY_DATA;
   const componentRef = useRef<HTMLDivElement>();
+  const fillerInnerRef = useRef<HTMLDivElement>();
+  const scrollBarRef = useRef<any>(); // Hack on scrollbar to enable flash call
 
   // =============================== Item Key ===============================
   const getKey = React.useCallback<GetKey<T>>(
@@ -129,7 +131,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   // ========================== Visible Calculation =========================
   const { scrollHeight, start, end, offset } = React.useMemo(() => {
-    if (!inVirtual) {
+    if (!useVirtual) {
       return {
         scrollHeight: undefined,
         start: 0,
@@ -138,6 +140,16 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
       };
     }
 
+    // Always use virtual scroll bar in avoid shaking
+    if (!inVirtual) {
+      return {
+        scrollHeight: fillerInnerRef.current?.offsetHeight || 0,
+        start: 0,
+        end: mergedData.length - 1,
+        offset: undefined,
+      };
+    }
+
     let itemTop = 0;
     let startIndex: number;
     let startOffset: number;
@@ -184,7 +196,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
       end: endIndex,
       offset: startOffset,
     };
-  }, [inVirtual, scrollTop, mergedData, heightUpdatedMark, height]);
+  }, [inVirtual, useVirtual, scrollTop, mergedData, heightUpdatedMark, height]);
 
   rangeRef.current.start = start;
   rangeRef.current.end = end;
@@ -227,7 +239,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   // Since this added in global,should use ref to keep update
   const [onRawWheel, onFireFoxScroll] = useFrameWheel(
-    inVirtual,
+    useVirtual,
     isScrollAtTop,
     isScrollAtBottom,
     offsetY => {
@@ -239,7 +251,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   );
 
   // Mobile touch move
-  useMobileTouchMove(inVirtual, componentRef, (deltaY, smoothOffset) => {
+  useMobileTouchMove(useVirtual, componentRef, (deltaY, smoothOffset) => {
     if (originScroll(deltaY, smoothOffset)) {
       return false;
     }
@@ -251,7 +263,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   React.useLayoutEffect(() => {
     // Firefox only
     function onMozMousePixelScroll(e: Event) {
-      if (inVirtual) {
+      if (useVirtual) {
         e.preventDefault();
       }
     }
@@ -265,7 +277,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
       componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll as any);
       componentRef.current.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll as any);
     };
-  }, [inVirtual]);
+  }, [useVirtual]);
 
   // ================================= Ref ==================================
   const scrollTo = useScrollTo<T>(
@@ -276,6 +288,9 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     getKey,
     collectHeight,
     syncScrollTop,
+    () => {
+      scrollBarRef.current?.delayHidden();
+    },
   );
 
   React.useImperativeHandle(ref, () => ({
@@ -289,7 +304,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   if (height) {
     componentStyle = { [fullHeight ? 'height' : 'maxHeight']: height, ...ScrollStyle };
 
-    if (inVirtual) {
+    if (useVirtual) {
       componentStyle.overflowY = 'hidden';
 
       if (scrollMoving) {
@@ -318,13 +333,15 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
           height={scrollHeight}
           offset={offset}
           onInnerResize={collectHeight}
+          ref={fillerInnerRef}
         >
           {listChildren}
         </Filler>
       </Component>
 
-      {inVirtual && (
+      {useVirtual && (
         <ScrollBar
+          ref={scrollBarRef}
           prefixCls={prefixCls}
           scrollTop={scrollTop}
           height={height}