Merge pull request 'Add HideScrollbar. Fix unique prop warning.' (#9) from FatttSnake into dev

Reviewed-on: FatttSnake/fatweb-ui#9

src/assets/css/hide-scrollbar.scss

@@ -0,0 +1,15 @@
+body {
+  overflow: hidden;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+#hide-scrollbar {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  overflow: scroll;
+}

src/components/HideScrollbar.tsx

@@ -0,0 +1,47 @@
+import React, { PropsWithChildren } from 'react'
+import '@/assets/css/hide-scrollbar.scss'
+
+const HideScrollbar: React.FC<PropsWithChildren> = (prop: PropsWithChildren) => {
+    const hideScrollbarRef = useRef<HTMLDivElement>(null)
+    const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
+    const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
+
+    useEffect(() => {
+        const hideScrollbarElement = hideScrollbarRef.current
+
+        const windowResizeListener = () => {
+            setVerticalScrollbarWidth(
+                (hideScrollbarElement?.offsetWidth ?? 0) - (hideScrollbarElement?.clientWidth ?? 0)
+            )
+            setHorizontalScrollbarWidth(
+                (hideScrollbarElement?.offsetHeight ?? 0) -
+                    (hideScrollbarElement?.clientHeight ?? 0)
+            )
+
+            return windowResizeListener
+        }
+
+        window.addEventListener('resize', windowResizeListener())
+
+        return () => {
+            window.removeEventListener('resize', windowResizeListener())
+        }
+    }, [])
+
+    return (
+        <>
+            <div
+                ref={hideScrollbarRef}
+                id={'hide-scrollbar'}
+                style={{
+                    width: `calc(100vw + ${verticalScrollbarWidth}px)`,
+                    height: `calc(100vh + ${horizontalScrollbarWidth}px`
+                }}
+            >
+                {prop.children}
+            </div>
+        </>
+    )
+}
+
+export default HideScrollbar

src/components/Home.tsx

@@ -44,6 +44,7 @@ const Home: React.FC = () => {
                     </div>
                 </FitCenter>
             </FitFullScreen>
+            <FitFullScreen />
         </>
     )
 }

src/pages/MainFramework.tsx

@@ -2,6 +2,7 @@ import React, { createContext } from 'react'
 import '@/assets/css/header.scss'
 import LoadingMask from '@/components/LoadingMask.tsx'
 import router from '@/router'
+import HideScrollbar from '@/components/HideScrollbar.tsx'
 
 export const MainFrameworkContext = createContext<{
     navbarHiddenState: {
@@ -22,6 +23,7 @@ const MainFramework: React.FC = () => {
 
     return (
         <>
+            <HideScrollbar>
                 <div className={'body'}>
                     <header className={'nav ' + (navbarHidden ? 'hide' : '')}>
                         <a className={'logo'} href={'https://fatweb.top'}>
@@ -31,7 +33,7 @@ const MainFramework: React.FC = () => {
                             <ul className={'menu'}>
                                 {routeChildren?.map((route) => {
                                     return (
-                                    <li className={'item'}>
+                                        <li className={'item'} key={route.id}>
                                             <NavLink
                                                 to={route.path ?? ''}
                                                 className={({ isActive, isPending }) =>
@@ -61,6 +63,7 @@ const MainFramework: React.FC = () => {
                         </Suspense>
                     </MainFrameworkContext.Provider>
                 </div>
+            </HideScrollbar>
         </>
     )
 }