Fix syntax error and finalize robust note resizing

This commit is contained in:
2026-01-24 20:02:38 +01:00
parent 8e35780717
commit 4a1b60e575
6 changed files with 26 additions and 21 deletions

View File

@@ -26,18 +26,23 @@ interface MasonryItemProps {
isDragging?: boolean;
}
const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onNoteSizeChange, onDragStart, onDragEnd, isDragging }: MasonryItemProps) {
const MasonryItem = function MasonryItem({ note, onEdit, onResize, onNoteSizeChange, onDragStart, onDragEnd, isDragging }: MasonryItemProps) {
const resizeRef = useResizeObserver(onResize);
useEffect(() => {
onResize();
const timer = setTimeout(onResize, 300);
return () => clearTimeout(timer);
}, [note.size, onResize]);
return (
<div
className="masonry-item absolute py-1"
data-id={note.id}
data-size={note.size}
data-draggable="true"
ref={resizeRef as any}
>
<div className="masonry-item-content relative">
<div className="masonry-item-content relative" ref={resizeRef as any}>
<NoteCard
note={note}
onEdit={onEdit}
@@ -50,7 +55,7 @@ const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onNoteSi
</div>
</div>
);
});
};
export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
const { t } = useLanguage();
@@ -354,7 +359,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
<div ref={pinnedGridRef} className="relative min-h-[100px]">
{pinnedNotes.map(note => (
<MasonryItem
key={`${note.id}-${note.size}`}
key={note.id}
note={note}
onEdit={handleEdit}
onResize={refreshLayout}
@@ -376,7 +381,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
<div ref={othersGridRef} className="relative min-h-[100px]">
{othersNotes.map(note => (
<MasonryItem
key={`${note.id}-${note.size}`}
key={note.id}
note={note}
onEdit={handleEdit}
onResize={refreshLayout}