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> </div>
</FitCenter> </FitCenter>
</FitFullScreen> </FitFullScreen>
<FitFullScreen />
</> </>
) )
} }

77
src/pages/MainFramework.tsx
View File

@@ -2,6 +2,7 @@ import React, { createContext } from 'react'
import '@/assets/css/header.scss' import '@/assets/css/header.scss'
import LoadingMask from '@/components/LoadingMask.tsx' import LoadingMask from '@/components/LoadingMask.tsx'
import router from '@/router' import router from '@/router'
import HideScrollbar from '@/components/HideScrollbar.tsx'
export const MainFrameworkContext = createContext<{ export const MainFrameworkContext = createContext<{
navbarHiddenState: { navbarHiddenState: {
@@ -22,45 +23,47 @@ const MainFramework: React.FC = () => {
return ( return (
<> <>
<div className={'body'}> <HideScrollbar>
<header className={'nav ' + (navbarHidden ? 'hide' : '')}> <div className={'body'}>
<a className={'logo'} href={'https://fatweb.top'}> <header className={'nav ' + (navbarHidden ? 'hide' : '')}>
<span className={'title'}>FatWeb</span> <a className={'logo'} href={'https://fatweb.top'}>
</a> <span className={'title'}>FatWeb</span>
<nav> </a>
<ul className={'menu'}> <nav>
{routeChildren?.map((route) => { <ul className={'menu'}>
return ( {routeChildren?.map((route) => {
<li className={'item'}> return (
<NavLink <li className={'item'} key={route.id}>
to={route.path ?? ''} <NavLink
className={({ isActive, isPending }) => to={route.path ?? ''}
isPending ? 'pending' : isActive ? 'active' : '' className={({ isActive, isPending }) =>
} isPending ? 'pending' : isActive ? 'active' : ''
> }
{(route.handle as RouteHandle).name} >
</NavLink> {(route.handle as RouteHandle).name}
</li> </NavLink>
) </li>
})} )
</ul> })}
</nav> </ul>
</header> </nav>
</header>
<MainFrameworkContext.Provider <MainFrameworkContext.Provider
value={{ navbarHiddenState: { navbarHidden, setNavbarHidden } }} value={{ navbarHiddenState: { navbarHidden, setNavbarHidden } }}
>
<Suspense
fallback={
<>
<LoadingMask />
</>
}
> >
<Outlet /> <Suspense
</Suspense> fallback={
</MainFrameworkContext.Provider> <>
</div> <LoadingMask />
</>
}
>
<Outlet />
</Suspense>
</MainFrameworkContext.Provider>
</div>
</HideScrollbar>
</> </>
) )
} }