diff --git a/src/List.tsx b/src/List.tsx index 95b46810..9afe3bfb 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -72,7 +72,7 @@ export interface ListProps extends Omit, 'children' verticalScrollBar?: React.CSSProperties; verticalScrollBarThumb?: React.CSSProperties; }; - + showScrollBar?: boolean | 'optional'; onScroll?: React.UIEventHandler; /** @@ -112,6 +112,7 @@ export function RawList(props: ListProps, ref: React.Ref) { innerProps, extraRender, styles, + showScrollBar = 'optional', ...restProps } = props; @@ -640,6 +641,7 @@ export function RawList(props: ListProps, ref: React.Ref) { containerSize={size.height} style={styles?.verticalScrollBar} thumbStyle={styles?.verticalScrollBarThumb} + showScrollBar={showScrollBar} /> )} @@ -658,6 +660,7 @@ export function RawList(props: ListProps, ref: React.Ref) { horizontal style={styles?.horizontalScrollBar} thumbStyle={styles?.horizontalScrollBarThumb} + showScrollBar={showScrollBar} /> )} diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index 588fe88a..15a9db25 100644 --- a/src/ScrollBar.tsx +++ b/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((props, ref) => containerSize, style, thumbStyle: propsThumbStyle, + showScrollBar, } = props; const [dragging, setDragging] = React.useState(false); @@ -51,13 +53,13 @@ const ScrollBar = React.forwardRef((props, ref) => const thumbRef = React.useRef(); // ======================= Visible ======================== - const [visible, setVisible] = React.useState(false); + const [visible, setVisible] = React.useState(showScrollBar); const visibleTimeoutRef = React.useRef>(); const delayHidden = () => { + if (showScrollBar === true || showScrollBar === false) return; clearTimeout(visibleTimeoutRef.current); setVisible(true); - visibleTimeoutRef.current = setTimeout(() => { setVisible(false); }, 3000); diff --git a/tests/scroll.test.js b/tests/scroll.test.js index 573938e6..59e2f6ca 100644 --- a/tests/scroll.test.js +++ b/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 } },