mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-02-23 13:43:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve element size observer hook props

Browse source
This commit is contained in:
Ajay Bura 2024-03-23 14:54:04 +05:30
parent 3655b38dd9
commit db3b6591d5
3 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/room-card/RoomCard.tsx
View file

@ -46,7 +46,7 @@ export function RoomCardGrid({ children }: { children: ReactNode }) {
const gridRef = useRef<HTMLDivElement>(null);
useElementSizeObserver(
gridRef,
useCallback(() => gridRef.current, []),
useCallback((width, _, target) => setGridColumnCount(target, getGridColumnCount(width)), [])
);

10
src/app/hooks/useElementSizeObserver.ts
View file

@ -1,14 +1,14 @@
import { RefObject, useCallback } from 'react';
import { useCallback } from 'react';
import { getResizeObserverEntry, useResizeObserver } from './useResizeObserver';
export const useElementSizeObserver = <T extends Element>(
elementRef: RefObject<T>,
element: () => T | null,
onResize: (width: number, height: number, element: T) => void
) => {
useResizeObserver(
useCallback(
(entries) => {
const target = elementRef.current;
const target = element();
if (!target) return;
const targetEntry = getResizeObserverEntry(target, entries);
if (targetEntry) {
@ -16,8 +16,8 @@ export const useElementSizeObserver = <T extends Element>(
onResize(width, height, target);
}
},
[elementRef, onResize]
[element, onResize]
),
useCallback(() => elementRef.current, [elementRef])
element
);
};

9
src/app/organisms/room/RoomInput.tsx
View file

@ -102,10 +102,10 @@ import {
trimReplyFromFormattedBody,
} from '../../utils/room';
import { sanitizeText } from '../../utils/sanitize';
import { useScreenSize } from '../../hooks/useScreenSize';
import { CommandAutocomplete } from './CommandAutocomplete';
import { Command, SHRUG, useCommands } from '../../hooks/useCommands';
import { mobileOrTablet } from '../../utils/user-agent';
import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
interface RoomInputProps {
editor: Editor;
@ -171,9 +171,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
const pickFile = useFilePicker(handleFiles, true);
const handlePaste = useFilePasteHandler(handleFiles);
const dropZoneVisible = useFileDropZone(roomViewRef, handleFiles);
const [hideStickerBtn, setHideStickerBtn] = useState(document.body.clientWidth < 500);
const [, screenWidth] = useScreenSize();
const hideStickerBtn = screenWidth < 500;
useElementSizeObserver(
useCallback(() => document.body, []),
useCallback((width) => setHideStickerBtn(width < 500), [])
);
useEffect(() => {
Transforms.insertFragment(editor, msgDraft);