Merge pull request #81 from linked-planet/dev

time table - changed types of custom header row, enabled showcase exa…

Author: marcus-wishes

library/src/components/timetable/TimeTable.tsx

@@ -188,7 +188,7 @@ export interface LPTimeTableProps<
 
 	/** custom header row */
 	customHeaderRow?: {
-		timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => JSX.Element
+		timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => React.ReactNode
 		header: (props: CustomHeaderRowHeaderProps<G, I>) => JSX.Element
 	}
 

library/src/components/timetable/TimeTableHeader.tsx

@@ -103,8 +103,8 @@ type TimeTableHeaderProps<
 
 	entries: TimeTableEntry<G, I>[]
 	customHeaderRow?: {
-		timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => JSX.Element
-		header: (props: CustomHeaderRowHeaderProps<G, I>) => JSX.Element
+		timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => React.ReactNode
+		header: (props: CustomHeaderRowHeaderProps<G, I>) => React.ReactNode
 	}
 
 	tableHeaderRef: React.Ref<HTMLTableSectionElement>
@@ -356,8 +356,8 @@ function CustomHeaderRowCell<
 	slotsArray: readonly Dayjs[]
 	showTimeSlotHeader: boolean
 	customHeaderRow: {
-		timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => JSX.Element
-		header: (props: CustomHeaderRowHeaderProps<G, I>) => JSX.Element
+		timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => React.ReactNode
+		header: (props: CustomHeaderRowHeaderProps<G, I>) => React.ReactNode
 	}
 }) {
 	// this is the same as in the TableCell component

showcase/public/showcase-sources.txt

@@ -7718,7 +7718,7 @@ const exampleEntries: TimeTableTypes.TimeTableEntry<
 		},
 		items: [],
 	},
-	{
+	/*{
 		group: {
 			id: "group-1",
 			title: "Group 1",
@@ -8017,7 +8017,7 @@ const exampleEntries: TimeTableTypes.TimeTableEntry<
 				title: "Item 7-1",
 			},
 		],
-	},
+	},*/
 ]
 
 function createTestItems(
@@ -8093,8 +8093,8 @@ function createMoreTestGroups(
 	return newGroups
 }
 
-const startDateInitial = dayjs().startOf("day").add(-1, "day").add(8, "hours")
-const endDateInitial = dayjs().startOf("day").add(5, "days").add(23, "hours")
+const startDateInitial = dayjs().startOf("day").add(-1, "day")
+const endDateInitial = dayjs().startOf("day").add(6, "days")
 
 function TestCustomHeaderRowTimeSlot<
 	G extends TimeTableTypes.TimeTableGroup,
@@ -8109,10 +8109,13 @@ function TestCustomHeaderRowTimeSlot<
 	entries,
 	tableCellRef,
 }: TimeTableTypes.CustomHeaderRowTimeSlotProps<G, I>) {
-	const groupItems = entries[1].items
+	const groupItems = entries[0].items
+	if (!groupItems.length) {
+		return null
+	}
 
 	const groupItemsOfCell: I[] = []
-	const startAndEndInSlow: {
+	const startAndEndInSlot: {
 		status: "in" | "before" | "after"
 		startSlot: number
 		endSlot: number
@@ -8128,12 +8131,15 @@ function TestCustomHeaderRowTimeSlot<
 		)
 		if (slotsArray[startAndEnd.startSlot] === timeSlot) {
 			groupItemsOfCell.push(item)
-			startAndEndInSlow.push(startAndEnd)
+			startAndEndInSlot.push(startAndEnd)
 		}
 	}
+	if (!groupItemsOfCell.length) {
+		return null
+	}
 
 	const leftAndWidths = groupItemsOfCell.map((it, i) => {
-		const startAndEnd = startAndEndInSlow[i]
+		const startAndEnd = startAndEndInSlot[i]
 		if (startAndEnd.status === "before" || startAndEnd.status === "after") {
 			return null
 		}
@@ -8148,6 +8154,10 @@ function TestCustomHeaderRowTimeSlot<
 		)
 	})
 
+	if (entries[0].items.length) {
+		console.log("LEFT", entries[0].items, leftAndWidths, startAndEndInSlot)
+	}
+
 	const cellWidth = tableCellRef.current?.offsetWidth ?? 70
 
 	const ret = leftAndWidths.map((it, i) =>
@@ -8180,7 +8190,7 @@ function CustomHeaderRowHeader<
 }: TimeTableTypes.CustomHeaderRowHeaderProps<G, I>) {
 	return (
 		<div className="bg-surface-pressed">
-			{entries[1].group.title} has {entries.length} entries
+			{entries[0].group.title} has {entries.length} entries
 		</div>
 	)
 }

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

@@ -44,7 +44,7 @@ const exampleEntries: TimeTableTypes.TimeTableEntry<
 		},
 		items: [],
 	},
-	/*{
+	{
 		group: {
 			id: "group-1",
 			title: "Group 1",
@@ -343,7 +343,7 @@ const exampleEntries: TimeTableTypes.TimeTableEntry<
 				title: "Item 7-1",
 			},
 		],
-	},*/
+	},
 ]
 
 function createTestItems(
@@ -435,7 +435,7 @@ function TestCustomHeaderRowTimeSlot<
 	entries,
 	tableCellRef,
 }: TimeTableTypes.CustomHeaderRowTimeSlotProps<G, I>) {
-	const groupItems = entries[0].items
+	const groupItems = entries[1].items
 	if (!groupItems.length) {
 		return null
 	}
@@ -480,10 +480,6 @@ function TestCustomHeaderRowTimeSlot<
 		)
 	})
 
-	if (entries[0].items.length) {
-		console.log("LEFT", entries[0].items, leftAndWidths, startAndEndInSlot)
-	}
-
 	const cellWidth = tableCellRef.current?.offsetWidth ?? 70
 
 	const ret = leftAndWidths.map((it, i) =>
@@ -516,7 +512,7 @@ function CustomHeaderRowHeader<
 }: TimeTableTypes.CustomHeaderRowHeaderProps<G, I>) {
 	return (
 		<div className="bg-surface-pressed">
-			{entries[0].group.title} has {entries.length} entries
+			{entries[1].group.title} has {entries.length} entries
 		</div>
 	)
 }
@@ -657,7 +653,6 @@ function Example() {
 	)
 
 	useEffect(() => {
-		/*requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
@@ -669,7 +664,8 @@ function Example() {
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
-		requestMoreEntriesCB()*/
+		requestMoreEntriesCB()
+		requestMoreEntriesCB()
 		/*requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()