From d1f2144ae5dec7329b78890ab33c5dcf809b47a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Fri, 17 Jan 2025 17:22:52 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:ScrollBar=E5=A2=9E=E5=8A=A0showScrollB?= =?UTF-8?q?ar=E5=AD=97=E6=AE=B5=EF=BC=8C=E7=94=A8=E4=BA=8E=E5=88=A4?= =?UTF-8?q?=E6=96=AD=E6=98=AF=E5=90=A6=E9=9A=90=E8=97=8F=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/List.tsx | 4 +++- src/ScrollBar.tsx | 5 ++++- tests/scroll.test.js | 19 +++++++++++++++++++ 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/List.tsx b/src/List.tsx index 95b46810..d4a6236f 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; onScroll?: React.UIEventHandler; /** @@ -640,6 +640,7 @@ export function RawList(props: ListProps, ref: React.Ref) { containerSize={size.height} style={styles?.verticalScrollBar} thumbStyle={styles?.verticalScrollBarThumb} + showScrollBar={restProps?.showScrollBar} /> )} @@ -658,6 +659,7 @@ export function RawList(props: ListProps, ref: React.Ref) { horizontal style={styles?.horizontalScrollBar} thumbStyle={styles?.horizontalScrollBarThumb} + showScrollBar={restProps?.showScrollBar} /> )} diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index 588fe88a..9869fd55 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; } 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,10 +53,11 @@ 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) return; clearTimeout(visibleTimeoutRef.current); setVisible(true); 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 } }, From dd7acdbfefc3c850f7792a998329b3e920b723bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Fri, 17 Jan 2025 17:54:53 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=E8=B0=83=E6=95=B4=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=AD=97=E6=AE=B5=E9=BB=98=E8=AE=A4=E5=80=BC=E5=92=8C=E5=88=A4?= =?UTF-8?q?=E6=96=AD=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/List.tsx | 2 +- src/ScrollBar.tsx | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/List.tsx b/src/List.tsx index d4a6236f..97160840 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; + showScrollBar?: true | 'optional'; onScroll?: React.UIEventHandler; /** diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index 9869fd55..9a517989 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -18,7 +18,7 @@ export interface ScrollBarProps { thumbStyle?: React.CSSProperties; spinSize: number; containerSize: number; - showScrollBar?: boolean; + showScrollBar?: true | 'optional'; } export interface ScrollBarRef { @@ -39,7 +39,7 @@ const ScrollBar = React.forwardRef((props, ref) => containerSize, style, thumbStyle: propsThumbStyle, - showScrollBar, + showScrollBar = 'optional', } = props; const [dragging, setDragging] = React.useState(false); @@ -53,17 +53,17 @@ const ScrollBar = React.forwardRef((props, ref) => const thumbRef = React.useRef(); // ======================= Visible ======================== - const [visible, setVisible] = React.useState(showScrollBar); + const [visible, setVisible] = React.useState(false); const visibleTimeoutRef = React.useRef>(); const delayHidden = () => { - if (showScrollBar) return; clearTimeout(visibleTimeoutRef.current); setVisible(true); - - visibleTimeoutRef.current = setTimeout(() => { - setVisible(false); - }, 3000); + if (showScrollBar === 'optional') { + visibleTimeoutRef.current = setTimeout(() => { + setVisible(false); + }, 3000); + } }; // ======================== Range ========================= From 52c189bf9078211b628a1aaea4865de3f9886269 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Mon, 20 Jan 2025 10:08:23 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E5=88=A4=E6=96=AD?= =?UTF-8?q?=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/List.tsx | 5 +++-- src/ScrollBar.tsx | 13 ++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/List.tsx b/src/List.tsx index 97160840..48c8af9a 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -112,6 +112,7 @@ export function RawList(props: ListProps, ref: React.Ref) { innerProps, extraRender, styles, + showScrollBar = 'optional', ...restProps } = props; @@ -640,7 +641,7 @@ export function RawList(props: ListProps, ref: React.Ref) { containerSize={size.height} style={styles?.verticalScrollBar} thumbStyle={styles?.verticalScrollBarThumb} - showScrollBar={restProps?.showScrollBar} + showScrollBar={showScrollBar} /> )} @@ -659,7 +660,7 @@ export function RawList(props: ListProps, ref: React.Ref) { horizontal style={styles?.horizontalScrollBar} thumbStyle={styles?.horizontalScrollBarThumb} - showScrollBar={restProps?.showScrollBar} + showScrollBar={showScrollBar} /> )} diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index 9a517989..c990a342 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -39,7 +39,7 @@ const ScrollBar = React.forwardRef((props, ref) => containerSize, style, thumbStyle: propsThumbStyle, - showScrollBar = 'optional', + showScrollBar, } = props; const [dragging, setDragging] = React.useState(false); @@ -53,17 +53,16 @@ const ScrollBar = React.forwardRef((props, ref) => const thumbRef = React.useRef(); // ======================= Visible ======================== - const [visible, setVisible] = React.useState(false); + const [visible, setVisible] = React.useState(showScrollBar === true); const visibleTimeoutRef = React.useRef>(); const delayHidden = () => { + if (showScrollBar === true) return; clearTimeout(visibleTimeoutRef.current); setVisible(true); - if (showScrollBar === 'optional') { - visibleTimeoutRef.current = setTimeout(() => { - setVisible(false); - }, 3000); - } + visibleTimeoutRef.current = setTimeout(() => { + setVisible(false); + }, 3000); }; // ======================== Range ========================= From 1fa0edbb5fba932def58d8d6430e2611d7a780fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Mon, 20 Jan 2025 13:46:18 +0800 Subject: [PATCH 4/4] feat: showScrollBar: boolean | 'optional' --- src/List.tsx | 2 +- src/ScrollBar.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/List.tsx b/src/List.tsx index 48c8af9a..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?: true | 'optional'; + showScrollBar?: boolean | 'optional'; onScroll?: React.UIEventHandler; /** diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index c990a342..15a9db25 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -18,7 +18,7 @@ export interface ScrollBarProps { thumbStyle?: React.CSSProperties; spinSize: number; containerSize: number; - showScrollBar?: true | 'optional'; + showScrollBar?: boolean | 'optional'; } export interface ScrollBarRef { @@ -53,11 +53,11 @@ const ScrollBar = React.forwardRef((props, ref) => const thumbRef = React.useRef(); // ======================= Visible ======================== - const [visible, setVisible] = React.useState(showScrollBar === true); + const [visible, setVisible] = React.useState(showScrollBar); const visibleTimeoutRef = React.useRef>(); const delayHidden = () => { - if (showScrollBar === true) return; + if (showScrollBar === true || showScrollBar === false) return; clearTimeout(visibleTimeoutRef.current); setVisible(true); visibleTimeoutRef.current = setTimeout(() => {