Merge pull request 'Add prevent scroll control to HideScrollbar. Fix can not remove event listener bug. Add auto scroll.' (#13) from FatttSnake into dev

Reviewed-on: FatttSnake/fatweb-ui#13

src/components/FitCenter.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import '@/assets/css/fit-center.scss'
 
-const FitCenter: React.FC<PropsWithChildren> = (props: PropsWithChildren) => {
+const FitCenter: React.FC<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+> = (props) => {
+    const { className, ..._props } = props
     return (
         <>
-            <div className={'fit-center'}>{props.children}</div>
+            <div className={`fit-center${className ? ' ' + className : ''}`} {..._props}></div>
         </>
     )
 }

src/components/FitFullScreen.tsx

@@ -1,20 +1,25 @@
+import React from 'react'
 import '@/assets/css/fit-fullscreen.scss'
 
-interface FitFullscreenProps extends PropsWithChildren {
+interface FitFullscreenProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     zIndex?: number
     backgroundColor?: string
 }
 
 const FitFullScreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
+    const { zIndex, backgroundColor, className, style, ..._props } = props
     return (
         <>
             <div
-                className={'fit-fullscreen'}
+                className={`fit-fullscreen${className ? ' ' + className : ''}`}
                 style={{
-                    zIndex: props.zIndex,
+                    zIndex,
-                    backgroundColor: props.backgroundColor
+                    backgroundColor,
+                    ...style
                 }}
                 ref={ref}
+                {..._props}
             >
                 {props.children}
             </div>

src/components/HideScrollbar.tsx

@@ -1,5 +1,11 @@
+import React from 'react'
 import '@/assets/css/hide-scrollbar.scss'
 
+interface HideScrollbarProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    isPreventScroll?: boolean
+}
+
 export interface HideScrollbarElement {
     scrollTo(x: number, y: number): void
     scrollX(x: number): void
@@ -32,11 +38,45 @@ export interface HideScrollbarElement {
     ): void
 }
 
-const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props, ref) => {
+const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((props, ref) => {
     const rootRef = useRef<HTMLDivElement>(null)
     const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
     const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
 
+    const { isPreventScroll, ..._props } = props
+    const handleDefaultWheel = useCallback((event: WheelEvent) => {
+        event.preventDefault()
+    }, [])
+
+    const handleDefaultTouchmove = useCallback((event: TouchEvent) => {
+        event.preventDefault()
+    }, [])
+
+    const handleDefaultClickMiddleMouseButton = useCallback((event: MouseEvent) => {
+        if (event.button === 1) {
+            event.preventDefault()
+        }
+    }, [])
+
+    const handleDefaultKeyDown = (event: KeyboardEvent) => {
+        if (
+            [
+                'ArrowUp',
+                'ArrowDown',
+                'ArrowLeft',
+                'ArrowRight',
+                ' ',
+                '',
+                'PageUp',
+                'PageDown',
+                'Home',
+                'End'
+            ].find((value) => value === event.key)
+        ) {
+            event.preventDefault()
+        }
+    }
+
     useImperativeHandle<HideScrollbarElement, HideScrollbarElement>(
         ref,
         () => {
@@ -143,11 +183,24 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
         }, 1000)
 
         window.addEventListener('resize', windowResizeListener())
+        if (isPreventScroll) {
+            rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
+            rootRef.current?.addEventListener('touchmove', handleDefaultTouchmove, {
+                passive: false
+            })
+            rootRef.current?.addEventListener('mousedown', handleDefaultClickMiddleMouseButton)
+            rootRef.current?.addEventListener('keydown', handleDefaultKeyDown)
+        } else {
+            rootRef.current?.removeEventListener('wheel', handleDefaultWheel)
+            rootRef.current?.removeEventListener('touchmove', handleDefaultTouchmove)
+            rootRef.current?.removeEventListener('mousedown', handleDefaultClickMiddleMouseButton)
+            rootRef.current?.removeEventListener('keydown', handleDefaultKeyDown)
+        }
 
         return () => {
             window.removeEventListener('resize', windowResizeListener)
         }
-    }, [])
+    }, [isPreventScroll])
 
     return (
         <>
@@ -155,10 +208,12 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
                 <div
                     ref={rootRef}
                     className={'hide-scrollbar-selection'}
+                    tabIndex={0}
                     style={{
                         width: `calc(100vw + ${verticalScrollbarWidth}px)`,
                         height: `calc(100vh + ${horizontalScrollbarWidth}px`
                     }}
+                    {..._props}
                 >
                     {props.children}
                 </div>

src/components/Home.tsx

@@ -8,10 +8,10 @@ import { MainFrameworkContext } from '@/pages/MainFramework.tsx'
 const Home: React.FC = () => {
     const {
         hideScrollbarRef,
-        navbarHiddenState: { navbarHidden, setNavbarHidden }
+        navbarHiddenState: { setNavbarHidden },
+        preventScrollState: { setPreventScroll }
     } = useContext(MainFrameworkContext)
     const fitFullScreenRef = useRef<HTMLDivElement>(null)
-    const pathname = useLocation().pathname
 
     const [slogan, setSlogan] = useState('')
     const [sloganType, setSloganType] = useState(true)
@@ -35,59 +35,55 @@ const Home: React.FC = () => {
         }, 50)
     }
 
-    const hideScrollbarDOM = hideScrollbarRef.current
-    const scrollListener = useCallback(() => {
-        if (
-            hideScrollbarDOM &&
-            fitFullScreenRef.current &&
-            hideScrollbarDOM.getY() < fitFullScreenRef.current?.offsetHeight
-        ) {
-            if (!navbarHidden) {
-                setNavbarHidden(true)
-            }
-        } else {
-            if (navbarHidden) {
-                setNavbarHidden(false)
-            }
-        }
-    }, [hideScrollbarDOM, navbarHidden, setNavbarHidden])
-
     useEffect(() => {
-        hideScrollbarDOM?.removeEventListener('scroll', scrollListener)
+        setTimeout(() => {
-        hideScrollbarDOM?.addEventListener('scroll', scrollListener)
+            setNavbarHidden(true)
-        return () => {
+            setPreventScroll(true)
-            hideScrollbarDOM?.removeEventListener('scroll', scrollListener)
+        })
-        }
+    }, [setNavbarHidden, setPreventScroll])
-    }, [hideScrollbarDOM, scrollListener])
 
-    useEffect(() => {
+    const handleScrollToDown = () => {
-        scrollListener()
-    }, [pathname, scrollListener])
-
-    const handleScrollDown = () => {
         hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
+        setNavbarHidden(false)
+    }
+
+    const handleScrollToTop = () => {
+        hideScrollbarRef.current?.scrollY(0)
+        setNavbarHidden(true)
+    }
+
+    const handleWheel = (event: React.WheelEvent) => {
+        if (event.deltaY > 0) {
+            handleScrollToDown()
+            setNavbarHidden(false)
+        } else {
+            handleScrollToTop()
+            setNavbarHidden(true)
+        }
     }
 
     return (
         <>
-            <FitFullScreen backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
+            <div onWheel={handleWheel}>
-                <FitCenter>
+                <FitFullScreen backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
-                    <div className={'center-box'}>
+                    <FitCenter>
-                        <div className={'big-logo'}>FatWeb</div>
+                        <div className={'center-box'}>
-                        <span id={'slogan'} className={'slogan'}>
+                            <div className={'big-logo'}>FatWeb</div>
-                            {slogan || <>&nbsp;</>}
+                            <span id={'slogan'} className={'slogan'}>
-                        </span>
+                                {slogan || <>&nbsp;</>}
-                    </div>
+                            </span>
-                    <div className={'scroll-down'} onClick={handleScrollDown}>
+                        </div>
-                        <Icon
+                        <div className={'scroll-down'} onClick={handleScrollToDown}>
-                            component={IconFatwebDown}
+                            <Icon
-                            style={{ fontSize: '1.8em', color: '#666' }}
+                                component={IconFatwebDown}
-                        />
+                                style={{ fontSize: '1.8em', color: '#666' }}
-                    </div>
+                            />
-                </FitCenter>
+                        </div>
-            </FitFullScreen>
+                    </FitCenter>
-            <FitFullScreen />
+                </FitFullScreen>
-            <FitFullScreen />
+                <FitFullScreen />
+                <FitFullScreen />
+            </div>
         </>
     )
 }

src/pages/MainFramework.tsx

@@ -9,30 +9,41 @@ export const MainFrameworkContext = createContext<{
         navbarHidden: boolean
         setNavbarHidden: (newValue: boolean) => void
     }
-    hideScrollbarRef: RefObject<HideScrollbarElement>
+    preventScrollState: {
+        preventScroll: boolean
+        setPreventScroll: (newValue: boolean) => void
+    }
+    hideScrollbarRef: React.RefObject<HideScrollbarElement>
 }>({
     navbarHiddenState: {
         navbarHidden: false,
         setNavbarHidden: () => undefined
     },
-    hideScrollbarRef: createRef()
+    hideScrollbarRef: createRef(),
+    preventScrollState: {
+        preventScroll: false,
+        setPreventScroll: () => undefined
+    }
 })
 
 const MainFramework: React.FC = () => {
-    const [navbarHidden, setNavbarHidden] = useState(true)
-
-    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const routeId = useMatches()[1].id
     const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
 
     const pathname = useLocation().pathname
+
+    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
+
+    const [navbarHidden, setNavbarHidden] = useState(true)
+    const [preventScroll, setPreventScroll] = useState(false)
+
     useEffect(() => {
         setNavbarHidden(false)
     }, [pathname])
 
     return (
         <>
-            <HideScrollbar ref={hideScrollbarRef}>
+            <HideScrollbar ref={hideScrollbarRef} isPreventScroll={preventScroll}>
                 <div className={'body'}>
                     <header className={'nav' + (navbarHidden ? ' hide' : '')}>
                         <a className={'logo'} href={'https://fatweb.top'}>
@@ -61,6 +72,7 @@ const MainFramework: React.FC = () => {
                     <MainFrameworkContext.Provider
                         value={{
                             navbarHiddenState: { navbarHidden, setNavbarHidden },
+                            preventScrollState: { preventScroll, setPreventScroll },
                             hideScrollbarRef
                         }}
                     >

vite.config.ts

@@ -35,11 +35,6 @@ export default defineConfig({
                     from: 'react-router',
                     imports: ['RouteObject'],
                     type: true
-                },
-                {
-                    from: 'react',
-                    imports: ['PropsWithChildren', 'RefObject'],
-                    type: true
                 }
             ],