beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf(AppContainer): dynamic width

Browse source
This commit is contained in:
molvqingtai 2024-09-17 15:59:55 +08:00
parent 15821eaa47
commit 3d45e4609c
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app/content/views/AppContainer/index.tsx
View file

@ -1,14 +1,18 @@
import { type ReactNode, type FC } from 'react' import { type ReactNode, type FC } from 'react'
import useResizable from '@/hooks/useResizable' import useResizable from '@/hooks/useResizable'
import useBreakpoint from '@/hooks/useBreakpoint'
export interface AppContainerProps { export interface AppContainerProps {
children?: ReactNode children?: ReactNode
} }
const AppContainer: FC<AppContainerProps> = ({ children }) => { const AppContainer: FC<AppContainerProps> = ({ children }) => {
const { breakpoint } = useBreakpoint()
console.log(breakpoint)
const { size, ref } = useResizable({ const { size, ref } = useResizable({
initSize: 375, initSize: Math.max(375, window.innerWidth / 5),
maxSize: 750, maxSize: Math.max(750, window.innerWidth / 3),
minSize: 375, minSize: Math.max(375, window.innerWidth / 5),
direction: 'left' direction: 'left'
}) })

3
src/hooks/useBreakpoint.ts
View file

@ -11,7 +11,8 @@ const useBreakpoint = () => {
isMD: breakpoint === 'md', isMD: breakpoint === 'md',
isLG: breakpoint === 'lg', isLG: breakpoint === 'lg',
isXL: breakpoint === 'xl', isXL: breakpoint === 'xl',
is2XL: breakpoint === '2xl' is2XL: breakpoint === '2xl',
breakpoint
} }
} }