FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Add HideScrollbar. Fix unique prop warning. #9

Merged
FatttSnake merged 2 commits from FatttSnake into dev 2023-09-08 00:57:21 +08:00
Conversation 0 Commits 2 Files Changed 4 +103 -37
4 changed files with 103 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/assets/css/hide-scrollbar.scss Normal file
View File

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

47
src/components/HideScrollbar.tsx Normal file
View File

@@ -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

1
src/components/Home.tsx
View File

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

77
src/pages/MainFramework.tsx
View File

@@ -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,45 +23,47 @@ const MainFramework: React.FC = () => {
return (
<>
<div className={'body'}>
<header className={'nav ' + (navbarHidden ? 'hide' : '')}>
<a className={'logo'} href={'https://fatweb.top'}>
<span className={'title'}>FatWeb</span>
</a>
<nav>
<ul className={'menu'}>
{routeChildren?.map((route) => {
return (
<li className={'item'}>
<NavLink
to={route.path ?? ''}
className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : ''
}
>
{(route.handle as RouteHandle).name}
</NavLink>
</li>
)
})}
</ul>
</nav>
</header>
<HideScrollbar>
<div className={'body'}>
<header className={'nav ' + (navbarHidden ? 'hide' : '')}>
<a className={'logo'} href={'https://fatweb.top'}>
<span className={'title'}>FatWeb</span>
</a>
<nav>
<ul className={'menu'}>
{routeChildren?.map((route) => {
return (
<li className={'item'} key={route.id}>
<NavLink
to={route.path ?? ''}
className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : ''
}
>
{(route.handle as RouteHandle).name}
</NavLink>
</li>
)
})}
</ul>
</nav>
</header>
<MainFrameworkContext.Provider
value={{ navbarHiddenState: { navbarHidden, setNavbarHidden } }}
>
<Suspense
fallback={
<>
<LoadingMask />
</>
}
<MainFrameworkContext.Provider
value={{ navbarHiddenState: { navbarHidden, setNavbarHidden } }}
>
<Outlet />
</Suspense>
</MainFrameworkContext.Provider>
</div>
<Suspense
fallback={
<>
<LoadingMask />
</>
}
>
<Outlet />
</Suspense>
</MainFrameworkContext.Provider>
</div>
</HideScrollbar>
</>
)
}