mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-02-24 06:03:04 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve screen size hook

Browse source
This commit is contained in:
Ajay Bura 2024-03-23 14:54:53 +05:30
parent db3b6591d5
commit f96ad8bc48
2 changed files with 8 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/app/hooks/useScreenSize.ts
View file

@ -1,5 +1,5 @@
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { getResizeObserverEntry, useResizeObserver } from './useResizeObserver'; import { useElementSizeObserver } from './useElementSizeObserver';
export const TABLET_BREAKPOINT = 1124; export const TABLET_BREAKPOINT = 1124;
export const MOBILE_BREAKPOINT = 750; export const MOBILE_BREAKPOINT = 750;
@ -16,20 +16,12 @@ export const getScreenSize = (width: number): ScreenSize => {
return ScreenSize.Mobile; return ScreenSize.Mobile;
}; };
export const useScreenSize = (): [ScreenSize, number] => { export const useScreenSize = (): ScreenSize => {
const [size, setSize] = useState<[ScreenSize, number]>([ const [size, setSize] = useState<ScreenSize>(getScreenSize(document.body.clientWidth));
getScreenSize(document.body.clientWidth),
document.body.clientWidth, useElementSizeObserver(
]); useCallback(() => document.body, []),
useResizeObserver( useCallback((width) => setSize(getScreenSize(width)), [])
useCallback((entries) => {
const bodyEntry = getResizeObserverEntry(document.body, entries);
if (bodyEntry) {
const bWidth = bodyEntry.contentRect.width;
setSize([getScreenSize(bWidth), bWidth]);
}
}, []),
document.body
); );
return size; return size;

2
src/app/organisms/room/Room.tsx
View file

@ -27,7 +27,7 @@ export function RoomBaseView({ room, eventId }: RoomBaseViewProps) {
useBindRoomIdToTypingMembersAtom(mx, roomIdToTypingMembersAtom); useBindRoomIdToTypingMembersAtom(mx, roomIdToTypingMembersAtom);
const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer'); const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
const [screenSize] = useScreenSize(); const screenSize = useScreenSize();
const powerLevelAPI = usePowerLevels(room); const powerLevelAPI = usePowerLevels(room);
return ( return (