refactor: Use customize scrollbar (#45)

* mock scroll

* use my scrollbar

* customize scroll bar

* clean up

* sync top

* fix test

* scrollbar coverage

* coverage

* skip invalidate top

Author: zombieJ

examples/animate.less

@@ -1,5 +1,5 @@
 .motion {
-  transition: all 5s;
+  transition: all .3s;
 }
 
 .item {

examples/basic.tsx

@@ -146,6 +146,7 @@ const Demo = () => {
 
         {!destroy && (
           <List
+            id="list"
             ref={listRef}
             data={data}
             height={200}

src/List.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useRef } from 'react';
 import classNames from 'classnames';
 import Filler from './Filler';
+import ScrollBar from './ScrollBar';
 import { RenderFunc, SharedConfig, GetKey } from './interface';
 import useChildren from './hooks/useChildren';
 import useHeights from './hooks/useHeights';
@@ -12,7 +13,7 @@ import useFrameWheel from './hooks/useFrameWheel';
 
 const EMPTY_DATA = [];
 
-const ScrollStyle = {
+const ScrollStyle: React.CSSProperties = {
   overflowY: 'auto',
   overflowAnchor: 'none',
 };
@@ -50,7 +51,7 @@ export interface ListProps<T> extends React.HTMLAttributes<any> {
 
 export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   const {
-    prefixCls,
+    prefixCls = 'rc-virtual-list',
     className,
     height,
     itemHeight,
@@ -89,6 +90,21 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     getKey,
   };
 
+  // ================================ Scroll ================================
+  function syncScrollTop(newTop: number | ((prev: number) => number)) {
+    setScrollTop(origin => {
+      let value: number;
+      if (typeof newTop === 'function') {
+        value = newTop(origin);
+      } else {
+        value = newTop;
+      }
+
+      componentRef.current.scrollTop = value;
+      return value;
+    });
+  }
+
   // ================================ Legacy ================================
   // Put ref here since the range is generate by follow
   const rangeRef = useRef({ start: 0, end: mergedData.length });
@@ -142,7 +158,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
       itemTop = currentItemBottom;
     }
 
-    // Fallback to normal if not match
+    // Fallback to normal if not match. This code should never reach
+    /* istanbul ignore next */
     if (startIndex === undefined) {
       startIndex = 0;
       startOffset = 0;
@@ -171,20 +188,25 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   // ================================ Scroll ================================
   // Since this added in global,should use ref to keep update
   const onRawWheel = useFrameWheel(inVirtual, offsetY => {
-    setScrollTop(top => {
+    syncScrollTop(top => {
       const newTop = keepInRange(top + offsetY);
-
-      componentRef.current.scrollTop = newTop;
       return newTop;
     });
   });
 
-  // Additional handle the scroll which not trigger by wheel
-  function onRawScroll(event: React.UIEvent) {
-    const newScrollTop = (event.target as HTMLDivElement).scrollTop;
+  function onScrollBar(newScrollTop: number) {
     const newTop = keepInRange(newScrollTop);
     if (newTop !== scrollTop) {
-      setScrollTop(newTop);
+      syncScrollTop(newTop);
+    }
+  }
+
+  // This code may only trigger in test case.
+  // But we still need a sync if some special escape
+  function onFallbackScroll(e: React.UIEvent) {
+    const { scrollTop: newScrollTop } = e.currentTarget;
+    if (newScrollTop !== scrollTop) {
+      syncScrollTop(newScrollTop);
     }
   }
 
@@ -203,6 +225,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     itemHeight,
     getKey,
     collectHeight,
+    syncScrollTop,
   );
 
   React.useImperativeHandle(ref, () => ({
@@ -212,25 +235,46 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   // ================================ Render ================================
   const listChildren = useChildren(mergedData, start, end, setInstanceRef, children, sharedConfig);
 
+  let componentStyle: React.CSSProperties = null;
+  if (height) {
+    componentStyle = { [fullHeight ? 'height' : 'maxHeight']: height, ...ScrollStyle };
+    componentStyle.overflowY = 'hidden';
+  }
+
   return (
-    <Component
-      style={
-        height ? { ...style, [fullHeight ? 'height' : 'maxHeight']: height, ...ScrollStyle } : style
-      }
+    <div
+      style={{
+        ...style,
+        position: 'relative',
+      }}
       className={mergedClassName}
       {...restProps}
-      ref={componentRef}
-      onScroll={onRawScroll}
     >
-      <Filler
-        prefixCls={prefixCls}
-        height={scrollHeight}
-        offset={offset}
-        onInnerResize={collectHeight}
+      <Component
+        className={`${prefixCls}-holder`}
+        style={componentStyle}
+        ref={componentRef}
+        onScroll={onFallbackScroll}
       >
-        {listChildren}
-      </Filler>
-    </Component>
+        <Filler
+          prefixCls={prefixCls}
+          height={scrollHeight}
+          offset={offset}
+          onInnerResize={collectHeight}
+        >
+          {listChildren}
+        </Filler>
+      </Component>
+
+      <ScrollBar
+        prefixCls={prefixCls}
+        scrollTop={scrollTop}
+        height={height}
+        scrollHeight={scrollHeight}
+        count={mergedData.length}
+        onScroll={onScrollBar}
+      />
+    </div>
   );
 }
 

src/ScrollBar.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import raf from 'rc-util/lib/raf';
+
+const MIN_SIZE = 20;
+
+export interface ScrollBarProps {
+  prefixCls: string;
+  scrollTop: number;
+  scrollHeight: number;
+  height: number;
+  count: number;
+  onScroll: (scrollTop: number) => void;
+}
+
+interface ScrollBarState {
+  dragging: boolean;
+  pageY: number;
+  startTop: number;
+  visible: boolean;
+}
+
+export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
+  moveRaf: number = null;
+
+  visibleTimeout: NodeJS.Timeout = null;
+
+  state: ScrollBarState = {
+    dragging: false,
+    pageY: null,
+    startTop: null,
+    visible: false,
+  };
+
+  componentDidUpdate(prevProps: ScrollBarProps) {
+    if (prevProps.scrollTop !== this.props.scrollTop) {
+      this.delayHidden();
+    }
+  }
+
+  componentWillUnmount() {
+    this.removeEvents();
+    clearTimeout(this.visibleTimeout);
+  }
+
+  delayHidden = () => {
+    clearTimeout(this.visibleTimeout);
+
+    this.setState({ visible: true });
+    this.visibleTimeout = setTimeout(() => {
+      this.setState({ visible: false });
+    }, 2000);
+  };
+
+  patchEvents = () => {
+    window.addEventListener('mousemove', this.onMouseMove);
+    window.addEventListener('mouseup', this.onMouseUp);
+  };
+
+  removeEvents = () => {
+    window.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
+    raf.cancel(this.moveRaf);
+  };
+
+  onMouseDown: React.MouseEventHandler = e => {
+    this.setState({
+      dragging: true,
+      pageY: e.pageY,
+      startTop: this.getTop(),
+    });
+
+    this.patchEvents();
+    e.stopPropagation();
+  };
+
+  onMouseMove = (e: MouseEvent) => {
+    const { dragging, pageY, startTop } = this.state;
+    const { onScroll } = this.props;
+
+    raf.cancel(this.moveRaf);
+
+    if (dragging) {
+      const offsetY = e.pageY - pageY;
+      const newTop = startTop + offsetY;
+
+      const enableScrollRange = this.getEnableScrollRange();
+      const enableHeightRange = this.getEnableHeightRange();
+
+      const ptg = newTop / enableHeightRange;
+      const newScrollTop = Math.ceil(ptg * enableScrollRange);
+      this.moveRaf = raf(() => {
+        onScroll(newScrollTop);
+      });
+    }
+  };
+
+  onMouseUp = () => {
+    this.setState({ dragging: false });
+    this.removeEvents();
+  };
+
+  getSpinHeight = () => {
+    const { height, count } = this.props;
+    let baseHeight = (height / count) * 10;
+    baseHeight = Math.max(baseHeight, MIN_SIZE);
+    baseHeight = Math.min(baseHeight, height / 2);
+    return Math.floor(baseHeight);
+  };
+
+  getEnableScrollRange = () => {
+    const { scrollHeight, height } = this.props;
+    return scrollHeight - height;
+  };
+
+  getEnableHeightRange = () => {
+    const { height } = this.props;
+    const spinHeight = this.getSpinHeight();
+    return height - spinHeight;
+  };
+
+  getTop = () => {
+    const { scrollTop } = this.props;
+    const enableScrollRange = this.getEnableScrollRange();
+    const enableHeightRange = this.getEnableHeightRange();
+    const ptg = scrollTop / enableScrollRange;
+    return ptg * enableHeightRange;
+  };
+
+  render() {
+    const { visible, dragging } = this.state;
+    const { prefixCls } = this.props;
+    const spinHeight = this.getSpinHeight();
+    const top = this.getTop();
+
+    return (
+      <div
+        className={`${prefixCls}-scrollbar`}
+        style={{
+          width: 8,
+          top: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: visible ? null : 'none',
+        }}
+        onMouseMove={this.delayHidden}
+      >
+        <div
+          className={classNames(`${prefixCls}-scrollbar-thumb`, {
+            [`${prefixCls}-scrollbar-thumb-moving`]: dragging,
+          })}
+          style={{
+            width: '100%',
+            height: spinHeight,
+            top,
+            left: 0,
+            position: 'absolute',
+            background: 'rgba(0, 0, 0, 0.5)',
+            borderRadius: 99,
+            cursor: 'pointer',
+            userSelect: 'none',
+          }}
+          onMouseDown={this.onMouseDown}
+        />
+      </div>
+    );
+  }
+}

src/hooks/useScrollTo.tsx

@@ -12,14 +12,15 @@ export default function useScrollTo<T>(
   itemHeight: number,
   getKey: GetKey<T>,
   collectHeight: () => void,
+  syncScrollTop: (newTop: number) => void,
 ): ScrollTo {
   const scrollRef = React.useRef<number>();
 
   return arg => {
     raf.cancel(scrollRef.current);
 
     if (typeof arg === 'number') {
-      containerRef.current.scrollTop = arg;
+      syncScrollTop(arg);
     } else if (arg && typeof arg === 'object') {
       let index: number;
       const { align } = arg;
@@ -80,7 +81,7 @@ export default function useScrollTo<T>(
         }
 
         if (targetTop !== null && targetTop !== containerRef.current.scrollTop) {
-          containerRef.current.scrollTop = targetTop;
+          syncScrollTop(targetTop);
         }
 
         // We will retry since element may not sync height as it described

tests/list.test.js

@@ -79,7 +79,7 @@ describe('List.Basic', () => {
       mockElement.mockRestore();
     });
 
-    it('scroll', () => {
+    it('scroll it', () => {
       // scroll to top
       scrollTop = 0;
       const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) });