fix: optimize the shadow effect of Scrollable (#443)

* fix: fix the shadow of scrollable

* test: improve test for scrollable

* test: remove useless code in test

Author: mortalYoung

src/components/scrollable/__tests__/scrollable.test.tsx

@@ -99,4 +99,35 @@ describe('Test Scrollable Component', () => {
         fireEvent.scroll(rootEle);
         expect(trackElement(container).style.opacity).toBe('1');
     });
+
+    test('Should NOT render active shadow when scorllTop is 0', () => {
+        const original = React.useState;
+        React.useState = jest
+            .fn()
+            .mockImplementation((args) => [args, () => {}]);
+
+        const { container } = render(<TestScrollable isShowShadow />);
+
+        const shadowDom = container.querySelector('.shadow');
+        expect(shadowDom?.classList).not.toContain('active');
+
+        React.useState = original;
+    });
+
+    test("Should render active shadow when scrollTop isn't 0", () => {
+        const original = React.useState;
+        React.useState = jest
+            .fn()
+            .mockImplementation((args) => [
+                typeof args === 'number' ? 100 : args,
+                () => {},
+            ]);
+
+        const { container } = render(<TestScrollable isShowShadow />);
+
+        const shadowDom = container.querySelector('.shadow');
+        expect(shadowDom?.classList).toContain('active');
+
+        React.useState = original;
+    });
 });

src/components/scrollable/index.tsx

@@ -33,14 +33,18 @@ const Scrollable = forwardRef<Scrollbar, IScrollbarProps>(function (
 
     const [isScrolling, setIsScrolling] = useState(false);
     const [isMouseOver, setIsMouseOver] = useState(false);
-    const [scrollTop, setScrollTop] = useState(0);
+    const [scrollTop, setScrollTop] = React.useState(0);
     const isShow = isScrolling || isMouseOver;
 
     const claNames = classNames(defaultScrollableClassName, className);
 
-    const onScrollStart = useCallback((values) => {
+    const onScroll = useCallback(({ scrollTop }) => {
+        /* istanbul ignore next */
+        setScrollTop(scrollTop);
+    }, []);
+
+    const onScrollStart = useCallback(() => {
         setIsScrolling(true);
-        setScrollTop(values.scrollTop);
     }, []);
     const onScrollStop = useCallback(() => {
         /* istanbul ignore next */
@@ -132,6 +136,7 @@ const Scrollable = forwardRef<Scrollbar, IScrollbarProps>(function (
             thumbYProps={thumbProps}
             onScrollStart={onScrollStart}
             onScrollStop={onScrollStop}
+            onScroll={onScroll}
             scrollDetectionThreshold={500} // ms
         >
             {children}