mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-02-23 21:53:05 +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 { getResizeObserverEntry, useResizeObserver } from './useResizeObserver';
import { useElementSizeObserver } from './useElementSizeObserver';
export const TABLET_BREAKPOINT = 1124;
export const MOBILE_BREAKPOINT = 750;
@ -16,20 +16,12 @@ export const getScreenSize = (width: number): ScreenSize => {
return ScreenSize.Mobile;
};
export const useScreenSize = (): [ScreenSize, number] => {
const [size, setSize] = useState<[ScreenSize, number]>([
getScreenSize(document.body.clientWidth),
document.body.clientWidth,
]);
useResizeObserver(
useCallback((entries) => {
const bodyEntry = getResizeObserverEntry(document.body, entries);
if (bodyEntry) {
const bWidth = bodyEntry.contentRect.width;
setSize([getScreenSize(bWidth), bWidth]);
}
}, []),
document.body
export const useScreenSize = (): ScreenSize => {
const [size, setSize] = useState<ScreenSize>(getScreenSize(document.body.clientWidth));
useElementSizeObserver(
useCallback(() => document.body, []),
useCallback((width) => setSize(getScreenSize(width)), [])
);
return size;

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

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