@pisell/materials 1.8.38 → 1.8.41

package/es/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarMonthView.js

@@ -1,111 +0,0 @@
-import { CALENDAR_WEEKDAY_IDS, tCal } from "../calendarI18n.js";
-import { fmtDate, formatHourLabel } from "../utils/bookingCalendarDateUtils.js";
-import { getGridBookingRowStateClasses } from "../utils/BookingCalendarStyle.js";
-import { MonthGridOverflowVirtualList } from "../modal/OverflowPopover.js";
-import React from "react";
-//#region src/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarMonthView.tsx
-const MONTH_GRID_COLS = 7;
-/** 月视图：由 BookingCalendar 传入数据与交互，本文件仅负责渲染结构 */
-function BookingCalendarMonthView({ isLight, anchorDate, monthDays, bookings, goToDayFromCell, handleGridDropMove, setDraggingItem, openBookingDetail, overflowPopover, setOverflowPopover, overflowListModal, setOverflowListModal, overflowPanelRef, renderMonthWeekBooking }) {
-	const todayKey = fmtDate(/* @__PURE__ */ new Date());
-	const weekRowCount = Math.ceil(monthDays.length / MONTH_GRID_COLS);
-	return /* @__PURE__ */ React.createElement("div", {
-		key: `month-${anchorDate.getFullYear()}-${anchorDate.getMonth()}`,
-		className: "flex min-h-0 flex-1 flex-col"
-	}, /* @__PURE__ */ React.createElement("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-auto overflow-y-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "theme-panel flex min-h-[0] min-w-[980px] flex-1 flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "theme-panel-alt grid shrink-0 grid-cols-7 border-b theme-border shadow-[0_6px_12px_rgba(0,0,0,0.08)]" }, CALENDAR_WEEKDAY_IDS.map((id) => /* @__PURE__ */ React.createElement("div", {
-		key: id,
-		className: "px-4 py-2.5 text-center text-sm font-medium"
-	}, tCal(id)))), /* @__PURE__ */ React.createElement("div", {
-		className: "grid min-h-0 flex-1 grid-cols-7 gap-0",
-		style: { gridTemplateRows: `repeat(${weekRowCount}, minmax(0, 1fr))` }
-	}, monthDays.map((day) => {
-		const isToday = day.key === todayKey;
-		const allItems = bookings.filter((b) => b.date === day.key);
-		const dayItems = allItems.slice(0, 3);
-		const moreItems = allItems.slice(3);
-		const moreCount = moreItems.length;
-		const showMoreTile = moreCount > 0 && dayItems.length > 0;
-		return /* @__PURE__ */ React.createElement("button", {
-			key: day.key,
-			type: "button",
-			onClick: () => goToDayFromCell(day.date, null, `month-${day.key}`),
-			onDragOver: (e) => e.preventDefault(),
-			onDrop: (e) => {
-				e.preventDefault();
-				handleGridDropMove(day.key);
-			},
-			className: `flex h-full min-h-0 flex-col overflow-hidden border-r border-b theme-border text-left align-top ${day.inMonth ? isLight ? "theme-grid-cell theme-text" : "bg-[#1a1b21]" : isLight ? "theme-grid-muted theme-text-faint" : "bg-[#111217] text-zinc-600"}`
-		}, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-start justify-between gap-1 px-2 pb-1 pt-2" }, /* @__PURE__ */ React.createElement("div", { className: `text-3xl font-semibold leading-none ${isLight ? "theme-text-soft" : ""}` }, /* @__PURE__ */ React.createElement("span", {
-			className: `grid h-10 w-10 place-items-center rounded-full leading-none ${isToday ? isLight ? "ring-2 ring-violet-500/70 bg-violet-50" : "ring-2 ring-violet-400/60 bg-white/[0.06]" : ""}`,
-			"aria-label": isToday ? "Today" : void 0
-		}, day.date.getDate())), /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 gap-1 pt-0.5" }, day.bookingCount > 0 && /* @__PURE__ */ React.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-violet-500" }), (day.blockCount > 0 || day.fullyBooked) && /* @__PURE__ */ React.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-red-500" }))), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-y-contain px-2 pb-2" }, dayItems.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5" }, dayItems.map((item, i) => {
-			const isLastVisible = i === dayItems.length - 1;
-			const shrinkForMore = showMoreTile && isLastVisible;
-			const layoutClassName = `block rounded-md px-2 pt-1.5 pb-2 text-xs text-left ${getGridBookingRowStateClasses(item)} ${shrinkForMore ? "flex-1 min-w-0" : "w-full"}`;
-			const rowKey = item.id != null ? String(item.id) : `${day.key}-${i}`;
-			return /* @__PURE__ */ React.createElement("div", {
-				key: rowKey,
-				className: "flex w-full items-stretch gap-2"
-			}, renderMonthWeekBooking ? /* @__PURE__ */ React.createElement("div", { className: shrinkForMore ? "flex-1 min-w-0" : "w-full" }, renderMonthWeekBooking({
-				item,
-				dateKey: day.key,
-				view: "month",
-				isLight,
-				layoutClassName,
-				onOpenDetail: openBookingDetail,
-				onDragStart: (it) => setDraggingItem(it),
-				draggable: item.kind !== "block"
-			})) : /* @__PURE__ */ React.createElement("button", {
-				type: "button",
-				draggable: item.kind !== "block",
-				onDragStart: (e) => {
-					if (item.kind !== "block") {
-						e.stopPropagation();
-						setDraggingItem(item);
-					}
-				},
-				onClick: (e) => {
-					e.stopPropagation();
-					openBookingDetail(item);
-				},
-				className: layoutClassName
-			}, /* @__PURE__ */ React.createElement("div", { className: "truncate" }, item.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1 opacity-80" }, formatHourLabel(item.startHour), " -", " ", formatHourLabel(item.endHour))), shrinkForMore && /* @__PURE__ */ React.createElement("div", {
-				className: "relative h-[52px] w-[52px] shrink-0",
-				ref: (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.courtId) === "month" && (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.date) === day.key ? overflowPanelRef : null
-			}, /* @__PURE__ */ React.createElement("button", {
-				type: "button",
-				onMouseEnter: (e) => {
-					e.stopPropagation();
-					setOverflowPopover({
-						courtId: "month",
-						date: day.key,
-						items: moreItems,
-						pinned: false
-					});
-				},
-				onClick: (e) => {
-					e.stopPropagation();
-					setOverflowPopover(null);
-					setOverflowListModal((prev) => prev && prev.scope === "month" && prev.date === day.key ? null : {
-						scope: "month",
-						date: day.key,
-						title: tCal("pisell2.recordBoard.calendar.overflow.listTitleBookings", { date: day.key }),
-						items: allItems.filter((x) => x.kind === "booking")
-					});
-				},
-				className: "flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-violet-700/90 text-sm font-semibold text-white"
-			}, "+", moreCount), (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.courtId) === "month" && (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.date) === day.key && !overflowListModal && /* @__PURE__ */ React.createElement("div", {
-				onMouseLeave: () => {
-					if (!(overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.pinned)) setOverflowPopover(null);
-				},
-				className: `absolute right-0 top-[60px] z-20 flex min-w-[240px] max-h-[360px] flex-col rounded-xl border p-3 shadow-2xl ${isLight ? "theme-panel theme-border" : "border-zinc-700 bg-[#111218]"}`
-			}, /* @__PURE__ */ React.createElement("div", { className: `mb-3 shrink-0 text-xs font-semibold ${isLight ? "theme-text-soft" : "text-zinc-300"}` }, tCal("pisell2.recordBoard.calendar.overflow.bookingsForDay")), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-hidden" }, /* @__PURE__ */ React.createElement(MonthGridOverflowVirtualList, {
-				items: overflowPopover.items,
-				listWidth: 214,
-				onPickItem: openBookingDetail
-			})))));
-		})) : null));
-	}))))));
-}
-//#endregion
-export { BookingCalendarMonthView };