@questpie/admin 3.2.3 → 3.2.5

package/dist/client/components/fields/relation/displays/grid-display.mjs

@@ -5,9 +5,8 @@ import { Button } from "../../../ui/button.mjs";
 import { Skeleton } from "../../../ui/skeleton.mjs";
 import { getImageUrl, getItemDisplayValue } from "./types.mjs";
 import { CollectionEditLink } from "../../../admin-link.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/components/fields/relation/displays/grid-display.tsx
@@ -20,193 +19,100 @@ const gridCols = {
 	3: "grid-cols-2 sm:grid-cols-3",
 	4: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
 };
-function GridSkeleton(t0) {
-	const $ = c(7);
-	const { count: t1, gridColumns: t2 } = t0;
-	const count = t1 === void 0 ? 6 : t1;
-	const gridColumns = t2 === void 0 ? 3 : t2;
-	let t3;
-	if ($[0] !== count) {
-		t3 = Array.from({ length: count }, _temp);
-		$[0] = count;
-		$[1] = t3;
-	} else t3 = $[1];
-	const skeletonKeys = t3;
-	const t4 = `grid gap-2 ${gridCols[gridColumns]}`;
-	let t5;
-	if ($[2] !== skeletonKeys) {
-		t5 = skeletonKeys.map(_temp2);
-		$[2] = skeletonKeys;
-		$[3] = t5;
-	} else t5 = $[3];
-	let t6;
-	if ($[4] !== t4 || $[5] !== t5) {
-		t6 = /* @__PURE__ */ jsx("div", {
-			className: t4,
-			children: t5
-		});
-		$[4] = t4;
-		$[5] = t5;
-		$[6] = t6;
-	} else t6 = $[6];
-	return t6;
+function GridSkeleton({ count = 6, gridColumns = 3 }) {
+	const skeletonKeys = React.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid gap-2 ${gridCols[gridColumns]}`,
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
+			className: "panel-surface flex items-center gap-2 p-2.5",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0" }), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-4 max-w-[120px] flex-1"
+			})]
+		}, key))
+	});
 }
-function _temp2(key) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "panel-surface flex items-center gap-2 p-2.5",
-		children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0" }), /* @__PURE__ */ jsx(Skeleton, {
-			variant: "text",
-			className: "h-4 max-w-[120px] flex-1"
-		})]
-	}, key);
-}
-function _temp() {
-	return crypto.randomUUID();
-}
-function GridDisplay(t0) {
-	const $ = c(29);
-	const { items, collection, collectionIcon, actions, editable: t1, fields, gridColumns: t2, linkToDetail: t3, isLoading: t4, loadingCount: t5 } = t0;
-	const editable = t1 === void 0 ? false : t1;
-	const gridColumns = t2 === void 0 ? 3 : t2;
-	const linkToDetail = t3 === void 0 ? false : t3;
-	const isLoading = t4 === void 0 ? false : t4;
-	const loadingCount = t5 === void 0 ? 6 : t5;
+function GridDisplay({ items, collection, collectionIcon, actions, editable = false, fields, gridColumns = 3, linkToDetail = false, isLoading = false, loadingCount = 6 }) {
 	const { t } = useTranslation();
-	let t6;
-	if ($[0] !== fields?.title) {
-		t6 = (item) => item[fields?.title || "_title"] || getItemDisplayValue(item);
-		$[0] = fields?.title;
-		$[1] = t6;
-	} else t6 = $[1];
-	const getTitle = t6;
-	let t7;
-	if ($[2] !== fields?.image) {
-		t7 = (item_0) => getImageUrl(item_0, fields?.image);
-		$[2] = fields?.image;
-		$[3] = t7;
-	} else t7 = $[3];
-	const getImage = t7;
-	if (isLoading && items.length === 0) {
-		let t8$1;
-		if ($[4] !== gridColumns || $[5] !== loadingCount) {
-			t8$1 = /* @__PURE__ */ jsx(GridSkeleton, {
-				count: loadingCount,
-				gridColumns
-			});
-			$[4] = gridColumns;
-			$[5] = loadingCount;
-			$[6] = t8$1;
-		} else t8$1 = $[6];
-		return t8$1;
-	}
-	const t8 = `grid gap-2 ${gridCols[gridColumns]}`;
-	let t9;
-	if ($[7] !== actions || $[8] !== collection || $[9] !== collectionIcon || $[10] !== editable || $[11] !== getImage || $[12] !== getTitle || $[13] !== items || $[14] !== linkToDetail || $[15] !== t) {
-		let t10$1;
-		if ($[17] !== actions || $[18] !== collection || $[19] !== collectionIcon || $[20] !== editable || $[21] !== getImage || $[22] !== getTitle || $[23] !== linkToDetail || $[24] !== t) {
-			t10$1 = (item_1) => {
-				const image = getImage(item_1);
-				const gridContent = /* @__PURE__ */ jsxs("div", {
-					className: cn("item-surface border-border bg-card flex h-full items-center gap-2 px-3 py-2.5 transition-colors", (editable || !!actions?.onEdit || linkToDetail) && "hover:border-border hover:bg-accent hover:text-accent-foreground"),
-					children: [
-						image ? /* @__PURE__ */ jsx("div", {
-							className: "bg-muted size-8 shrink-0 overflow-hidden rounded-sm",
-							children: /* @__PURE__ */ jsx("img", {
-								src: image,
-								alt: getTitle(item_1),
-								className: "image-outline h-full w-full object-cover"
-							})
-						}) : collectionIcon ? /* @__PURE__ */ jsx("div", {
-							className: "bg-muted flex size-8 shrink-0 items-center justify-center rounded-sm",
-							children: resolveIconElement(collectionIcon, { className: "size-4 text-muted-foreground" })
-						}) : null,
-						/* @__PURE__ */ jsx("span", {
-							className: "flex-1 truncate text-sm",
-							children: getTitle(item_1)
-						}),
-						editable && (actions?.onEdit || actions?.onRemove) && /* @__PURE__ */ jsxs("div", {
-							className: "flex shrink-0 items-center gap-1",
-							children: [actions?.onEdit && /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								variant: "ghost",
-								size: "icon-xs",
-								className: "relative after:absolute after:-inset-1",
-								onClick: (e) => {
-									e.preventDefault();
-									e.stopPropagation();
-									actions.onEdit?.(item_1);
-								},
-								"aria-label": t("field.editItem"),
-								children: /* @__PURE__ */ jsx(Icon, {
-									icon: "ph:pencil",
-									className: "size-3"
-								})
-							}), actions?.onRemove && /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								variant: "ghost",
-								size: "icon-xs",
-								className: "relative after:absolute after:-inset-1",
-								onClick: (e_0) => {
-									e_0.preventDefault();
-									e_0.stopPropagation();
-									actions.onRemove?.(item_1);
-								},
-								"aria-label": t("field.removeItem"),
-								children: /* @__PURE__ */ jsx(Icon, {
-									icon: "ph:x",
-									className: "size-3"
-								})
-							})]
+	const getTitle = (item) => item[fields?.title || "_title"] || getItemDisplayValue(item);
+	const getImage = (item) => getImageUrl(item, fields?.image);
+	if (isLoading && items.length === 0) return /* @__PURE__ */ jsx(GridSkeleton, {
+		count: loadingCount,
+		gridColumns
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid gap-2 ${gridCols[gridColumns]}`,
+		children: items.map((item) => {
+			const image = getImage(item);
+			const gridContent = /* @__PURE__ */ jsxs("div", {
+				className: cn("item-surface border-border bg-card flex h-full items-center gap-2 px-3 py-2.5 transition-colors", (editable || !!actions?.onEdit || linkToDetail) && "hover:border-border hover:bg-accent hover:text-accent-foreground"),
+				children: [
+					image ? /* @__PURE__ */ jsx("div", {
+						className: "bg-muted size-8 shrink-0 overflow-hidden rounded-sm",
+						children: /* @__PURE__ */ jsx("img", {
+							src: image,
+							alt: getTitle(item),
+							className: "image-outline h-full w-full object-cover"
 						})
-					]
-				});
-				if (!editable && actions?.onEdit) return /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => actions.onEdit?.(item_1),
-					className: "w-full text-left",
-					children: gridContent
-				}, item_1.id);
-				if (!editable && linkToDetail) return /* @__PURE__ */ jsx(CollectionEditLink, {
-					collection,
-					id: item_1.id,
-					className: "block",
-					children: gridContent
-				}, item_1.id);
-				return /* @__PURE__ */ jsx("div", { children: gridContent }, item_1.id);
-			};
-			$[17] = actions;
-			$[18] = collection;
-			$[19] = collectionIcon;
-			$[20] = editable;
-			$[21] = getImage;
-			$[22] = getTitle;
-			$[23] = linkToDetail;
-			$[24] = t;
-			$[25] = t10$1;
-		} else t10$1 = $[25];
-		t9 = items.map(t10$1);
-		$[7] = actions;
-		$[8] = collection;
-		$[9] = collectionIcon;
-		$[10] = editable;
-		$[11] = getImage;
-		$[12] = getTitle;
-		$[13] = items;
-		$[14] = linkToDetail;
-		$[15] = t;
-		$[16] = t9;
-	} else t9 = $[16];
-	let t10;
-	if ($[26] !== t8 || $[27] !== t9) {
-		t10 = /* @__PURE__ */ jsx("div", {
-			className: t8,
-			children: t9
-		});
-		$[26] = t8;
-		$[27] = t9;
-		$[28] = t10;
-	} else t10 = $[28];
-	return t10;
+					}) : collectionIcon ? /* @__PURE__ */ jsx("div", {
+						className: "bg-muted flex size-8 shrink-0 items-center justify-center rounded-sm",
+						children: resolveIconElement(collectionIcon, { className: "size-4 text-muted-foreground" })
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate text-sm",
+						children: getTitle(item)
+					}),
+					editable && (actions?.onEdit || actions?.onRemove) && /* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center gap-1",
+						children: [actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-xs",
+							className: "relative after:absolute after:-inset-1",
+							onClick: (e) => {
+								e.preventDefault();
+								e.stopPropagation();
+								actions.onEdit?.(item);
+							},
+							"aria-label": t("field.editItem"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:pencil",
+								className: "size-3"
+							})
+						}), actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-xs",
+							className: "relative after:absolute after:-inset-1",
+							onClick: (e) => {
+								e.preventDefault();
+								e.stopPropagation();
+								actions.onRemove?.(item);
+							},
+							"aria-label": t("field.removeItem"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:x",
+								className: "size-3"
+							})
+						})]
+					})
+				]
+			});
+			if (!editable && actions?.onEdit) return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => actions.onEdit?.(item),
+				className: "w-full text-left",
+				children: gridContent
+			}, item.id);
+			if (!editable && linkToDetail) return /* @__PURE__ */ jsx(CollectionEditLink, {
+				collection,
+				id: item.id,
+				className: "block",
+				children: gridContent
+			}, item.id);
+			return /* @__PURE__ */ jsx("div", { children: gridContent }, item.id);
+		})
+	});
 }
 
 //#endregion