prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: prevent collapse to too narrow

Browse source
This commit is contained in:
EnixCoda 2020-11-04 21:43:01 +08:00
parent 087ed0e3e0
commit b2150b9212
No known key found for this signature in database
GPG key ID: 0C1A07377913A1DD
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/Resizable.tsx
View file

@ -14,6 +14,7 @@ type Props = {
}
const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100
const MINIMAL_WIDTH = 240
export function Resizable({ baseSize, className, children }: React.PropsWithChildren<Props>) {
const [size, setSize] = React.useState(baseSize)
@ -27,6 +28,7 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
React.useEffect(() => {
if (size > width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
setSize(width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
else if (size < MINIMAL_WIDTH) setSize(MINIMAL_WIDTH)
}, [width, size])
React.useEffect(() => {
@ -39,7 +41,11 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
useDebounce(() => configContext.set({ sideBarWidth: size }), 100, [size])
const onResize = React.useCallback((size: number) => {
if (size < window.innerWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH) setSize(size)
// do NOT merge this with the above similar effect, side bar will jump otherwise
if (size > width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
setSize(width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
else if (size < MINIMAL_WIDTH) setSize(MINIMAL_WIDTH)
else setSize(size)
}, [])
return (
<div className={cx('gitako-position-wrapper', className)}>