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 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); const gridRef = useRef<HTMLDivElement>(null);
useElementSizeObserver( useElementSizeObserver(
gridRef, useCallback(() => gridRef.current, []),
useCallback((width, _, target) => setGridColumnCount(target, getGridColumnCount(width)), []) 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'; import { getResizeObserverEntry, useResizeObserver } from './useResizeObserver';
export const useElementSizeObserver = <T extends Element>( export const useElementSizeObserver = <T extends Element>(
elementRef: RefObject<T>, element: () => T | null,
onResize: (width: number, height: number, element: T) => void onResize: (width: number, height: number, element: T) => void
) => { ) => {
useResizeObserver( useResizeObserver(
useCallback( useCallback(
(entries) => { (entries) => {
const target = elementRef.current; const target = element();
if (!target) return; if (!target) return;
const targetEntry = getResizeObserverEntry(target, entries); const targetEntry = getResizeObserverEntry(target, entries);
if (targetEntry) { if (targetEntry) {
@ -16,8 +16,8 @@ export const useElementSizeObserver = <T extends Element>(
onResize(width, height, target); 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, trimReplyFromFormattedBody,
} from '../../utils/room'; } from '../../utils/room';
import { sanitizeText } from '../../utils/sanitize'; import { sanitizeText } from '../../utils/sanitize';
import { useScreenSize } from '../../hooks/useScreenSize';
import { CommandAutocomplete } from './CommandAutocomplete'; import { CommandAutocomplete } from './CommandAutocomplete';
import { Command, SHRUG, useCommands } from '../../hooks/useCommands'; import { Command, SHRUG, useCommands } from '../../hooks/useCommands';
import { mobileOrTablet } from '../../utils/user-agent'; import { mobileOrTablet } from '../../utils/user-agent';
import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
interface RoomInputProps { interface RoomInputProps {
editor: Editor; editor: Editor;
@ -171,9 +171,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
const pickFile = useFilePicker(handleFiles, true); const pickFile = useFilePicker(handleFiles, true);
const handlePaste = useFilePasteHandler(handleFiles); const handlePaste = useFilePasteHandler(handleFiles);
const dropZoneVisible = useFileDropZone(roomViewRef, handleFiles); const dropZoneVisible = useFileDropZone(roomViewRef, handleFiles);
const [hideStickerBtn, setHideStickerBtn] = useState(document.body.clientWidth < 500);
const [, screenWidth] = useScreenSize(); useElementSizeObserver(
const hideStickerBtn = screenWidth < 500; useCallback(() => document.body, []),
useCallback((width) => setHideStickerBtn(width < 500), [])
);
useEffect(() => { useEffect(() => {
Transforms.insertFragment(editor, msgDraft); Transforms.insertFragment(editor, msgDraft);