From fd05ba8c5e4eb2e2253c4581a85143798165f7f6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Jun 2025 12:20:30 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat(ScrollBar):=20=F0=9F=92=84=20use=20CSS?= =?UTF-8?q?=20variable=20for=20scrollbar=20color?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jest.config.js | 4 -- src/ScrollBar.tsx | 27 +----------- src/index.less | 14 +++++++ src/index.ts | 1 + tests/dark.test.js | 101 --------------------------------------------- tests/setup.js | 13 ------ 6 files changed, 17 insertions(+), 143 deletions(-) delete mode 100644 jest.config.js create mode 100644 src/index.less delete mode 100644 tests/dark.test.js delete mode 100644 tests/setup.js diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 0c6601ae..00000000 --- a/jest.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - setupFiles: ['./tests/setup.js'], - snapshotSerializers: [require.resolve('enzyme-to-json/serializer')], -}; \ No newline at end of file diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index 832eadd1..e8f25b5f 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -45,7 +45,6 @@ const ScrollBar = React.forwardRef((props, ref) => const [dragging, setDragging] = React.useState(false); const [pageXY, setPageXY] = React.useState(null); const [startTop, setStartTop] = React.useState(null); - const [dark, setDark] = React.useState(false); const isLTR = !rtl; @@ -188,21 +187,6 @@ const ScrollBar = React.forwardRef((props, ref) => } }, [dragging]); - React.useEffect(() => { - const media = window.matchMedia?.('(prefers-color-scheme: dark)'); - setDark(media.matches); - - const listener = (e: MediaQueryListEvent) => { - setDark(e.matches); - }; - - media?.addEventListener('change', listener); - - return () => { - media?.removeEventListener('change', listener); - }; - }, []); - React.useEffect(() => { delayHidden(); return () => { @@ -225,11 +209,9 @@ const ScrollBar = React.forwardRef((props, ref) => const thumbStyle: React.CSSProperties = { position: 'absolute', - background: dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)', borderRadius: 99, cursor: 'pointer', userSelect: 'none', - ...propsThumbStyle, }; if (horizontal) { @@ -269,21 +251,16 @@ const ScrollBar = React.forwardRef((props, ref) => return (
diff --git a/src/index.less b/src/index.less new file mode 100644 index 00000000..7dd685b9 --- /dev/null +++ b/src/index.less @@ -0,0 +1,14 @@ +.rc-virtual-list { + --rc-virtual-list-scrollbar-bg: rgba(0, 0, 0, 0.5); + --rc-virtual-list-scrollbar-bg-light: rgba(255, 255, 255, 0.5); +} + +@media (prefers-color-scheme: dark) { + .rc-virtual-list { + --rc-virtual-list-scrollbar-bg: var(--rc-virtual-list-scrollbar-bg-light); + } +} + +.rc-virtual-list-scrollbar-thumb { + background: var(--rc-virtual-list-scrollbar-bg); +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index a312aa0d..6f35b61d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ +import './index.less'; import List from './List'; export type { ListRef, ListProps } from './List'; diff --git a/tests/dark.test.js b/tests/dark.test.js deleted file mode 100644 index 6e8454ae..00000000 --- a/tests/dark.test.js +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { act } from 'react-dom/test-utils'; -import List from '../src'; - -describe('List.dark', () => { - const originalMatchMedia = window.matchMedia; - - afterEach(() => { - window.matchMedia = originalMatchMedia; - }); - - const mockMatchMedia = (matches) => { - Object.defineProperty(window, 'matchMedia', { - writable: true, - value: jest.fn().mockImplementation(query => ({ - matches, - media: query, - onchange: null, - addListener: jest.fn(), // deprecated - removeListener: jest.fn(), // deprecated - addEventListener: jest.fn(), - removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), - })), - }); - }; - - it('should render dark scrollbar', () => { - mockMatchMedia(true); - - const wrapper = mount( - item}> - {(item) =>
{item}
} - - ); - - const thumb = wrapper.find('.rc-virtual-list-scrollbar-thumb'); - expect(thumb.props().style.background).toBe('rgba(255, 255, 255, 0.5)'); - }); - - it('should render light scrollbar', () => { - mockMatchMedia(false); - - const wrapper = mount( - item}> - {(item) =>
{item}
} - - ); - - const thumb = wrapper.find('.rc-virtual-list-scrollbar-thumb'); - expect(thumb.props().style.background).toBe('rgba(0, 0, 0, 0.5)'); - }); - - it('should update on theme change', () => { - let listener; - Object.defineProperty(window, 'matchMedia', { - writable: true, - value: jest.fn().mockImplementation(() => ({ - matches: false, - addEventListener: (type, cb) => { - if (type === 'change') { - listener = cb; - } - }, - removeEventListener: () => {}, - })), - }); - - const wrapper = mount( - item}> - {(item) =>
{item}
} - - ); - - // Initial: light - expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.background).toBe( - 'rgba(0, 0, 0, 0.5)', - ); - - // Change to dark - act(() => { - listener({ matches: true }); - }); - wrapper.update(); - - expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.background).toBe( - 'rgba(255, 255, 255, 0.5)', - ); - - // Change back to light - act(() => { - listener({ matches: false }); - }); - wrapper.update(); - - expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.background).toBe( - 'rgba(0, 0, 0, 0.5)', - ); - }); -}); \ No newline at end of file diff --git a/tests/setup.js b/tests/setup.js deleted file mode 100644 index 87237082..00000000 --- a/tests/setup.js +++ /dev/null @@ -1,13 +0,0 @@ -Object.defineProperty(window, 'matchMedia', { - writable: true, - value: jest.fn().mockImplementation(query => ({ - matches: false, - media: query, - onchange: null, - addListener: jest.fn(), // deprecated - removeListener: jest.fn(), // deprecated - addEventListener: jest.fn(), - removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), - })), -}); \ No newline at end of file From 46ac34b7146902eb40539e16a02ace5062edba02 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Jun 2025 17:21:49 +0800 Subject: [PATCH 2/5] update --- src/ScrollBar.tsx | 4 +++- src/index.less | 14 -------------- src/index.ts | 1 - 3 files changed, 3 insertions(+), 16 deletions(-) delete mode 100644 src/index.less diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index e8f25b5f..1b2ef43c 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -210,8 +210,10 @@ const ScrollBar = React.forwardRef((props, ref) => const thumbStyle: React.CSSProperties = { position: 'absolute', borderRadius: 99, + background: 'var(--rc-virtual-list-scrollbar-bg)', cursor: 'pointer', userSelect: 'none', + ...propsThumbStyle, }; if (horizontal) { @@ -260,7 +262,7 @@ const ScrollBar = React.forwardRef((props, ref) => className={classNames(`${scrollbarPrefixCls}-thumb`, { [`${scrollbarPrefixCls}-thumb-moving`]: dragging, })} - style={{ ...thumbStyle, ...propsThumbStyle }} + style={thumbStyle} onMouseDown={onThumbMouseDown} />
diff --git a/src/index.less b/src/index.less deleted file mode 100644 index 7dd685b9..00000000 --- a/src/index.less +++ /dev/null @@ -1,14 +0,0 @@ -.rc-virtual-list { - --rc-virtual-list-scrollbar-bg: rgba(0, 0, 0, 0.5); - --rc-virtual-list-scrollbar-bg-light: rgba(255, 255, 255, 0.5); -} - -@media (prefers-color-scheme: dark) { - .rc-virtual-list { - --rc-virtual-list-scrollbar-bg: var(--rc-virtual-list-scrollbar-bg-light); - } -} - -.rc-virtual-list-scrollbar-thumb { - background: var(--rc-virtual-list-scrollbar-bg); -} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 6f35b61d..a312aa0d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,3 @@ -import './index.less'; import List from './List'; export type { ListRef, ListProps } from './List'; From 54eb3fa519a130b70f3163ee8eaa79c854e5f87d Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Jun 2025 17:33:35 +0800 Subject: [PATCH 3/5] add cssvar --- src/ScrollBar.tsx | 56 +++++++++++++++++++++-------------------------- 1 file changed, 25 insertions(+), 31 deletions(-) diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index 1b2ef43c..4fdf74ec 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -210,44 +210,38 @@ const ScrollBar = React.forwardRef((props, ref) => const thumbStyle: React.CSSProperties = { position: 'absolute', borderRadius: 99, - background: 'var(--rc-virtual-list-scrollbar-bg)', + background: 'var(--rc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))', cursor: 'pointer', userSelect: 'none', ...propsThumbStyle, }; if (horizontal) { - // Container - containerStyle.height = 8; - containerStyle.left = 0; - containerStyle.right = 0; - containerStyle.bottom = 0; - - // Thumb - thumbStyle.height = '100%'; - thumbStyle.width = spinSize; - - if (isLTR) { - thumbStyle.left = top; - } else { - thumbStyle.right = top; - } + Object.assign(containerStyle, { + height: 8, + left: 0, + right: 0, + bottom: 0, + }); + + Object.assign(thumbStyle, { + height: '100%', + width: spinSize, + [isLTR ? 'left' : 'right']: top, + }); } else { - // Container - containerStyle.width = 8; - containerStyle.top = 0; - containerStyle.bottom = 0; - - if (isLTR) { - containerStyle.right = 0; - } else { - containerStyle.left = 0; - } - - // Thumb - thumbStyle.width = '100%'; - thumbStyle.height = spinSize; - thumbStyle.top = top; + Object.assign(containerStyle, { + width: 8, + top: 0, + bottom: 0, + [isLTR ? 'right' : 'left']: 0, + }); + + Object.assign(thumbStyle, { + width: '100%', + height: spinSize, + top, + }); } return ( From 3c087601f64dbf47b8257e656b98cca2405844fb Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Jun 2025 17:39:16 +0800 Subject: [PATCH 4/5] fix --- src/ScrollBar.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index 4fdf74ec..f61e8885 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -213,7 +213,6 @@ const ScrollBar = React.forwardRef((props, ref) => background: 'var(--rc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))', cursor: 'pointer', userSelect: 'none', - ...propsThumbStyle, }; if (horizontal) { @@ -247,7 +246,11 @@ const ScrollBar = React.forwardRef((props, ref) => return (
@@ -256,7 +259,7 @@ const ScrollBar = React.forwardRef((props, ref) => className={classNames(`${scrollbarPrefixCls}-thumb`, { [`${scrollbarPrefixCls}-thumb-moving`]: dragging, })} - style={thumbStyle} + style={{ ...thumbStyle, ...propsThumbStyle }} onMouseDown={onThumbMouseDown} />
From 1611fa067ffa331d08db02eb3c926a7ef2e7dc61 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Jun 2025 17:42:35 +0800 Subject: [PATCH 5/5] fix --- src/ScrollBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index f61e8885..c57ad969 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -253,6 +253,7 @@ const ScrollBar = React.forwardRef((props, ref) => })} style={{ ...containerStyle, ...style }} onMouseDown={onContainerMouseDown} + onMouseMove={delayHidden} >