feat: ScrollBar adds a showScrollBar field to determine if the scrollbar does not need to be hidden (#300)

* feat:ScrollBar增加showScrollBar字段，用于判断是否隐藏滚动条

* feat:调整新增字段默认值和判断位置

* feat:修改判断内容

* feat: showScrollBar: boolean | 'optional'

---------

Co-authored-by: 刘欢 <[email protected]>

Author: EmilyyyLiu

src/List.tsx

@@ -72,7 +72,7 @@ export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'
     verticalScrollBar?: React.CSSProperties;
     verticalScrollBarThumb?: React.CSSProperties;
   };
-
+  showScrollBar?: boolean | 'optional';
   onScroll?: React.UIEventHandler<HTMLElement>;
 
   /**
@@ -112,6 +112,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     innerProps,
     extraRender,
     styles,
+    showScrollBar = 'optional',
     ...restProps
   } = props;
 
@@ -640,6 +641,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
           containerSize={size.height}
           style={styles?.verticalScrollBar}
           thumbStyle={styles?.verticalScrollBarThumb}
+          showScrollBar={showScrollBar}
         />
       )}
 
@@ -658,6 +660,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
           horizontal
           style={styles?.horizontalScrollBar}
           thumbStyle={styles?.horizontalScrollBarThumb}
+          showScrollBar={showScrollBar}
         />
       )}
     </div>

src/ScrollBar.tsx

@@ -18,6 +18,7 @@ export interface ScrollBarProps {
   thumbStyle?: React.CSSProperties;
   spinSize: number;
   containerSize: number;
+  showScrollBar?: boolean | 'optional';
 }
 
 export interface ScrollBarRef {
@@ -38,6 +39,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
     containerSize,
     style,
     thumbStyle: propsThumbStyle,
+    showScrollBar,
   } = props;
 
   const [dragging, setDragging] = React.useState(false);
@@ -51,13 +53,13 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   const thumbRef = React.useRef<HTMLDivElement>();
 
   // ======================= Visible ========================
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = React.useState(showScrollBar);
   const visibleTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
 
   const delayHidden = () => {
+    if (showScrollBar === true || showScrollBar === false) return;
     clearTimeout(visibleTimeoutRef.current);
     setVisible(true);
-
     visibleTimeoutRef.current = setTimeout(() => {
       setVisible(false);
     }, 3000);

tests/scroll.test.js

@@ -233,6 +233,25 @@ describe('List.Scroll', () => {
       expect(wrapper.find('ul').instance().scrollTop > 10).toBeTruthy();
     });
 
+    it('should show scrollbar when element has showScrollBar prop set to true', () => {
+      jest.useFakeTimers();
+      const listRef = React.createRef();
+      const { container } = genList(
+        {
+          itemHeight: 20,
+          height: 100,
+          data: genData(100),
+          ref: listRef,
+          showScrollBar: true,
+        },
+        render,
+      );
+      act(() => {
+        jest.runAllTimers();
+      });
+      const scrollbarElement = container.querySelector('.rc-virtual-list-scrollbar-visible');
+      expect(scrollbarElement).not.toBeNull();
+    });
     describe('not show scrollbar when disabled virtual', () => {
       [
         { name: '!virtual', props: { virtual: false } },