Merge pull request #56 from linked-planet/dev

Dev

library/src/components/timetable/TimeTable.tsx

@@ -566,7 +566,8 @@ function moveNowBar(
 	const tableBody = tableBodyRef.current
 
 	// remove the orange border from the header cell
-	const headerTimeslotRow = tableHeader.children[1]
+	const headerTimeslotRow =
+		tableHeader.children[tableHeader.children.length - 1]
 	if (!headerTimeslotRow) {
 		setMessage?.({
 			appearance: "danger",

library/src/components/timetable/TimeTableHeader.tsx

@@ -369,7 +369,7 @@ function CustomHeaderRowCell<
 			key={`timeheader${timeSlot.unix()}`}
 			colSpan={2}
 			className={`${headerCellBaseClassname} ${
-				isLastOfDay ? "after:border-l-2" : ""
+				isLastOfDay ? "after:border-l-2" : "after:border-l"
 			} ${showTimeSlotHeader ? "pt-1" : ""}`}
 			ref={ref}
 		>

showcase/public/showcase-sources.txt

@@ -7936,21 +7936,33 @@ function TestCustomHeaderRowTimeSlot<
 	viewType,
 	slotsArray,
 	entries,
+	tableCellRef,
 }: TimeTableTypes.CustomHeadeRowTimeSlotProps<G, I>) {
 	const groupItems = entries[1].items
 
-	const startAndEndSlots = groupItems.map((it) =>
-		timeTableUtils.getStartAndEndSlot(
-			it,
+	const groupItemsOfCell: I[] = []
+	const startAndEndInSlow: {
+		status: "in" | "before" | "after"
+		startSlot: number
+		endSlot: number
+	}[] = []
+	for (let i = 0; i < groupItems.length; i++) {
+		const item = groupItems[i]
+		const startAndEnd = timeTableUtils.getStartAndEndSlot(
+			item,
 			slotsArray,
 			timeFrameOfDay,
 			timeSlotMinutes,
 			viewType,
-		),
-	)
+		)
+		if (slotsArray[startAndEnd.startSlot] === timeSlot) {
+			groupItemsOfCell.push(item)
+			startAndEndInSlow.push(startAndEnd)
+		}
+	}
 
-	const getLeftAndWidth = groupItems.map((it, i) => {
-		const startAndEnd = startAndEndSlots[i]
+	const leftAndWidths = groupItemsOfCell.map((it, i) => {
+		const startAndEnd = startAndEndInSlow[i]
 		if (startAndEnd.status === "before" || startAndEnd.status === "after") {
 			return null
 		}
@@ -7965,8 +7977,27 @@ function TestCustomHeaderRowTimeSlot<
 		)
 	})
 
-	console.log("GET LEFT AND WIDTH", getLeftAndWidth)
-	return <div>{startAndEndSlots.length}</div>
+	const cellWidth = tableCellRef.current?.offsetWidth ?? 70
+
+	const ret = leftAndWidths.map((it, i) =>
+		it ? (
+			<div
+				key={groupItemsOfCell[i].title}
+				className="absolute top-0 bottom-0 bg-discovery-bold whitespace-nowrap overflow-visible z-10 opacity-50"
+				style={{
+					left: `${it.left * cellWidth}px`,
+					width: `${it.width * cellWidth}px`,
+				}}
+				title={groupItemsOfCell[i].title}
+			>
+				<div className="truncate">{groupItemsOfCell[i].title}</div>
+			</div>
+		) : null,
+	)
+
+	console.log("RET", ret, leftAndWidths)
+
+	return <>{ret}</>
 }
 
 function CustomHeaderRowHeader<

showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx

@@ -458,8 +458,6 @@ function TestCustomHeaderRowTimeSlot<
 		}
 	}
 
-	console.log("GROUP ITEMS", groupItemsOfCell)
-
 	const leftAndWidths = groupItemsOfCell.map((it, i) => {
 		const startAndEnd = startAndEndInSlow[i]
 		if (startAndEnd.status === "before" || startAndEnd.status === "after") {
@@ -482,19 +480,18 @@ function TestCustomHeaderRowTimeSlot<
 		it ? (
 			<div
 				key={groupItemsOfCell[i].title}
-				className="absolute top-0 bottom-0 bg-warning-bold whitespace-nowrap overflow-visible truncate"
+				className="absolute top-0 bottom-0 bg-discovery-bold whitespace-nowrap overflow-visible z-10 opacity-50"
 				style={{
 					left: `${it.left * cellWidth}px`,
 					width: `${it.width * cellWidth}px`,
 				}}
+				title={groupItemsOfCell[i].title}
 			>
-				{groupItemsOfCell[i].title}
+				<div className="truncate">{groupItemsOfCell[i].title}</div>
 			</div>
 		) : null,
 	)
 
-	console.log("RET", ret, leftAndWidths)
-
 	return <>{ret}</>
 }