feat: add List ScrollBar direction (#201)

* feat: add List ScrollBar direction

* fix: code style

* chore: add test case

---------

Co-authored-by: 洋 <[email protected]>

Author: BoyYangzai

src/List.tsx

@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import classNames from 'classnames';
 import Filler from './Filler';
 import type { InnerProps } from './Filler';
+import type { ScrollBarDirectionType } from './ScrollBar';
 import ScrollBar from './ScrollBar';
 import type { RenderFunc, SharedConfig, GetKey } from './interface';
 import useChildren from './hooks/useChildren';
@@ -50,6 +51,7 @@ export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'
   component?: string | React.FC<any> | React.ComponentClass<any>;
   /** Set `false` will always use real scroll instead of virtual one */
   virtual?: boolean;
+  direction?: ScrollBarDirectionType;
 
   onScroll?: React.UIEventHandler<HTMLElement>;
   /** Trigger when render list item changed */
@@ -71,6 +73,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     children,
     itemKey,
     virtual,
+    direction,
     component: Component = 'div',
     onScroll,
     onVisibleChange,
@@ -373,6 +376,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
           height={height}
           scrollHeight={scrollHeight}
           count={mergedData.length}
+          direction={direction}
           onScroll={onScrollBar}
           onStartMove={() => {
             setScrollMoving(true);

src/ScrollBar.tsx

@@ -4,12 +4,15 @@ import raf from 'rc-util/lib/raf';
 
 const MIN_SIZE = 20;
 
+export type ScrollBarDirectionType = 'ltr' | 'rtl';
+
 export interface ScrollBarProps {
   prefixCls: string;
   scrollTop: number;
   scrollHeight: number;
   height: number;
   count: number;
+  direction?: ScrollBarDirectionType;
   onScroll: (scrollTop: number) => void;
   onStartMove: () => void;
   onStopMove: () => void;
@@ -90,7 +93,7 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     window.removeEventListener('mouseup', this.onMouseUp);
 
     this.scrollbarRef.current?.removeEventListener('touchstart', this.onScrollbarTouchStart);
-    
+
     if (this.thumbRef.current) {
       this.thumbRef.current.removeEventListener('touchstart', this.onMouseDown);
       this.thumbRef.current.removeEventListener('touchmove', this.onMouseMove);
@@ -185,12 +188,20 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
   // ====================== Render =======================
   render() {
     const { dragging, visible } = this.state;
-    const { prefixCls } = this.props;
+    const { prefixCls, direction } = this.props;
     const spinHeight = this.getSpinHeight();
     const top = this.getTop();
 
     const canScroll = this.showScroll();
     const mergedVisible = canScroll && visible;
+    const scrollBarDirection =
+      direction === 'rtl'
+        ? {
+            left: 0,
+          }
+        : {
+            right: 0,
+          };
 
     return (
       <div
@@ -202,7 +213,7 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
           width: 8,
           top: 0,
           bottom: 0,
-          right: 0,
+          ...scrollBarDirection,
           position: 'absolute',
           display: mergedVisible ? null : 'none',
         }}

tests/scroll.test.js

@@ -286,4 +286,24 @@ describe('List.Scroll', () => {
       expect(wrapper.find('li').length).toBeLessThan(10);
     });
   });
+
+  it('scrollbar should be left position with rtl', () => {
+    jest.useFakeTimers();
+    const listRef = React.createRef();
+    const wrapper = genList({
+      itemHeight: 20,
+      height: 100,
+      data: genData(100),
+      ref: listRef,
+      direction: 'rtl',
+    });
+    jest.runAllTimers();
+
+    listRef.current.scrollTo(null);
+    expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.display).not.toEqual(
+      'none',
+    );
+    expect(wrapper.find('.rc-virtual-list-scrollbar').props().style.left).toEqual(0);
+    jest.useRealTimers();
+  });
 });