c07905c360
* fix room members hook * fix resize observer hook * add intersection observer hook * install react-virtual lib * improve right panel - WIP * add filters for members * fix bug in async search * categories members and add search * show spinner on room member fetch * make invite member btn clickable * so no member text * add line between room view and member drawer * fix imports * add screen size hook * fix set setting hook * make member drawer responsive * extract power level tags hook * fix room members hook * fix use async search api * produce search result on filter change
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { useCallback, useState } from 'react';
|
|
import { getResizeObserverEntry, useResizeObserver } from './useResizeObserver';
|
|
|
|
export const TABLET_BREAKPOINT = 1124;
|
|
export const MOBILE_BREAKPOINT = 750;
|
|
|
|
export enum ScreenSize {
|
|
Desktop = 'Desktop',
|
|
Tablet = 'Tablet',
|
|
Mobile = 'Mobile',
|
|
}
|
|
|
|
export const getScreenSize = (width: number): ScreenSize => {
|
|
if (width > TABLET_BREAKPOINT) return ScreenSize.Desktop;
|
|
if (width > MOBILE_BREAKPOINT) return ScreenSize.Tablet;
|
|
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
|
|
);
|
|
|
|
return size;
|
|
};
|