65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
|
import { Component, For } from "solid-js";
|
|
import { createVirtualizer } from "@tanstack/solid-virtual";
|
|
import { ImageComponent } from "@components/image";
|
|
import { chunkRows } from "./chunk";
|
|
|
|
type ImageOrDate =
|
|
| { type: "image"; ID: string[] }
|
|
| { type: "date"; date: Date };
|
|
|
|
export const AllImages: Component = () => {
|
|
let scrollRef: HTMLDivElement | undefined;
|
|
|
|
const { imagesByDate } = useSearchImageContext();
|
|
|
|
const items = () => {
|
|
const items: Array<ImageOrDate> = [];
|
|
|
|
for (const { date, images } of imagesByDate()) {
|
|
items.push({ type: "date", date });
|
|
const chunkedRows = chunkRows(3, images);
|
|
for (const chunk of chunkedRows) {
|
|
items.push({ type: "image", ID: chunk.map((c) => c.ImageID) });
|
|
}
|
|
}
|
|
|
|
return items;
|
|
};
|
|
|
|
const rowVirtualizer = createVirtualizer({
|
|
count: items().length,
|
|
estimateSize: () => 400,
|
|
getScrollElement: () => scrollRef!,
|
|
overscan: 3,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
ref={scrollRef}
|
|
class="flex flex-col gap-4 h-[calc(100% - 12px)] overflow-y-auto"
|
|
>
|
|
<div
|
|
class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4 rounded-xl border border-neutral-200 bg-white p-4`}
|
|
>
|
|
<For each={rowVirtualizer.getVirtualItems()}>
|
|
{(i) => {
|
|
const item = items()[i.index];
|
|
if (item.type === "image") {
|
|
return (
|
|
<For each={item.ID}>{(id) => <ImageComponent ID={id} />}</For>
|
|
);
|
|
} else {
|
|
return (
|
|
<h3 class="col-span-3 font-bold text-2xl">
|
|
{item.date.toDateString()}
|
|
</h3>
|
|
);
|
|
}
|
|
}}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|