From 15b843031db83db4314a271fed8fef7132bc0401 Mon Sep 17 00:00:00 2001 From: "Markus T." <19794318+marcus-wishes@users.noreply.github.com> Date: Wed, 27 Nov 2024 10:32:14 +0100 Subject: [PATCH] time table - changed types of custom header row, enabled showcase examples again --- .../src/components/timetable/TimeTable.tsx | 2 +- .../components/timetable/TimeTableHeader.tsx | 8 +++--- showcase/public/showcase-sources.txt | 28 +++++++++++++------ .../showcase/wrapper/TimeTableShowcase.tsx | 16 ++++------- 4 files changed, 30 insertions(+), 24 deletions(-) diff --git a/library/src/components/timetable/TimeTable.tsx b/library/src/components/timetable/TimeTable.tsx index 6bfaae09..0eee86a1 100644 --- a/library/src/components/timetable/TimeTable.tsx +++ b/library/src/components/timetable/TimeTable.tsx @@ -188,7 +188,7 @@ export interface LPTimeTableProps< /** custom header row */ customHeaderRow?: { - timeSlot: (props: CustomHeaderRowTimeSlotProps) => JSX.Element + timeSlot: (props: CustomHeaderRowTimeSlotProps) => React.ReactNode header: (props: CustomHeaderRowHeaderProps) => JSX.Element } diff --git a/library/src/components/timetable/TimeTableHeader.tsx b/library/src/components/timetable/TimeTableHeader.tsx index 12536191..1c358916 100644 --- a/library/src/components/timetable/TimeTableHeader.tsx +++ b/library/src/components/timetable/TimeTableHeader.tsx @@ -103,8 +103,8 @@ type TimeTableHeaderProps< entries: TimeTableEntry[] customHeaderRow?: { - timeSlot: (props: CustomHeaderRowTimeSlotProps) => JSX.Element - header: (props: CustomHeaderRowHeaderProps) => JSX.Element + timeSlot: (props: CustomHeaderRowTimeSlotProps) => React.ReactNode + header: (props: CustomHeaderRowHeaderProps) => React.ReactNode } tableHeaderRef: React.Ref @@ -356,8 +356,8 @@ function CustomHeaderRowCell< slotsArray: readonly Dayjs[] showTimeSlotHeader: boolean customHeaderRow: { - timeSlot: (props: CustomHeaderRowTimeSlotProps) => JSX.Element - header: (props: CustomHeaderRowHeaderProps) => JSX.Element + timeSlot: (props: CustomHeaderRowTimeSlotProps) => React.ReactNode + header: (props: CustomHeaderRowHeaderProps) => React.ReactNode } }) { // this is the same as in the TableCell component diff --git a/showcase/public/showcase-sources.txt b/showcase/public/showcase-sources.txt index 7b807556..cacc5c95 100644 --- a/showcase/public/showcase-sources.txt +++ b/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) { - 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) { return (
- {entries[1].group.title} has {entries.length} entries + {entries[0].group.title} has {entries.length} entries
) } diff --git a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx b/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx index b8efb028..7cf70188 100644 --- a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx +++ b/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) { - 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) { return (
- {entries[0].group.title} has {entries.length} entries + {entries[1].group.title} has {entries.length} entries
) } @@ -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()