mirror of https://github.com/usememos/memos.git
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { MasonryItem } from "./MasonryItem";
|
|
import { MasonryColumnProps } from "./types";
|
|
|
|
/**
|
|
* Column component for masonry layout
|
|
*
|
|
* Responsibilities:
|
|
* - Render a single column in the masonry grid
|
|
* - Display prefix element in the first column (e.g., memo editor)
|
|
* - Render all assigned memo items in order
|
|
* - Pass render context to items (includes compact mode flag)
|
|
*/
|
|
export function MasonryColumn({
|
|
memoIndices,
|
|
memoList,
|
|
renderer,
|
|
renderContext,
|
|
onHeightChange,
|
|
isFirstColumn,
|
|
prefixElement,
|
|
prefixElementRef,
|
|
}: MasonryColumnProps) {
|
|
return (
|
|
<div className="min-w-0 mx-auto w-full max-w-2xl">
|
|
{/* Prefix element (like memo editor) goes in first column */}
|
|
{isFirstColumn && prefixElement && <div ref={prefixElementRef}>{prefixElement}</div>}
|
|
|
|
{/* Render all memos assigned to this column */}
|
|
{memoIndices?.map((memoIndex) => {
|
|
const memo = memoList[memoIndex];
|
|
return memo ? (
|
|
<MasonryItem
|
|
key={`${memo.name}-${memo.displayTime}`}
|
|
memo={memo}
|
|
renderer={renderer}
|
|
renderContext={renderContext}
|
|
onHeightChange={onHeightChange}
|
|
/>
|
|
) : null;
|
|
})}
|
|
</div>
|
|
);
|
|
}
|