Merge pull request #47 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/DropdownMenu.tsx

@@ -172,29 +172,51 @@ function ItemGroup({
 	hasSeparator,
 	children,
 	className,
+	titleClassName,
+	separatorClassName,
 	style,
+	titleStyle,
+	separatorStyle,
+	...props
 }: {
 	title?: string
 	hasSeparator?: boolean
 	children: React.ReactNode
 	className?: string
+	titleClassName?: string
+	separatorClassName?: string
 	style?: React.CSSProperties
+	titleStyle?: React.CSSProperties
+	separatorStyle?: React.CSSProperties
 }) {
-	return useMemo(
-		() => (
-			<RDd.Group className={twMerge("py-3", className)} style={style}>
-				{hasSeparator && (
-					<RDd.Separator className="border-border border-t-2 pb-4" />
-				)}
-				{title && (
-					<RDd.Label className="px-4 py-3 text-[11px] font-bold uppercase">
-						{title}
-					</RDd.Label>
-				)}
-				{children}
-			</RDd.Group>
-		),
-		[children, hasSeparator, title, className, style],
+	return (
+		<RDd.Group
+			{...props}
+			className={twMerge("py-3", className)}
+			style={style}
+		>
+			{hasSeparator && (
+				<RDd.Separator
+					className={twMerge(
+						"border-border border-t-2 pb-4",
+						separatorClassName,
+					)}
+					style={separatorStyle}
+				/>
+			)}
+			{title && (
+				<RDd.Label
+					className={twMerge(
+						"px-4 py-3 text-[11px] font-bold uppercase",
+						titleClassName,
+					)}
+					style={titleStyle}
+				>
+					{title}
+				</RDd.Label>
+			)}
+			{children}
+		</RDd.Group>
 	)
 }
 

library/src/components/timetable/TimeTable.tsx

@@ -33,6 +33,7 @@ import {
 	type onTimeRangeSelectedType,
 } from "./TimeTableSelectionStore"
 import { getStartAndEndSlot, useGroupRows } from "./useGoupRows"
+import { twMerge } from "tailwind-merge"
 
 export interface TimeSlotBooking {
 	title: string
@@ -177,6 +178,9 @@ export interface LPTimeTableProps<
 	 * For those who require to start the week on Sunday, this can be set to true.
 	 */
 	weekStartsOnSunday?: boolean
+
+	className?: string
+	style?: React.CSSProperties
 }
 
 const nowbarUpdateIntervall = 1000 * 60 // 1 minute
@@ -232,16 +236,14 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
 	dateHeaderTextFormat,
 	weekStartsOnSunday = false,
 	disableMessages = false,
+	className,
+	style,
 }: LPTimeTableProps<G, I>) => {
 	// if we have viewType of days, we need to round the start and end date to the start and end of the day
 	const { setMessage, translatedMessage } = useTimeTableMessage(
 		!disableMessages,
 	)
 
-	useEffect(() => {
-		console.log("START DATE", startDate.format(), endDate.format())
-	}, [startDate, endDate])
-
 	// change on viewType
 	useEffect(() => {
 		setMessage?.(undefined) // clear the message on time frame change
@@ -460,57 +462,57 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
 					/>
 				)}
 			</div>
-			<div className="size-full relative">
-				<TimeTableIdentProvider ident={storeIdent}>
-					<div
-						className="overflow-auto relative"
-						style={{
-							height: `calc(${height} - ${inlineMessageRef.current?.clientHeight}px)`,
-						}}
-						ref={intersectionContainerRef}
+
+			<TimeTableIdentProvider ident={storeIdent}>
+				<div
+					className={twMerge("overflow-auto relative", className)}
+					style={{
+						height: `calc(${height} - ${inlineMessageRef.current?.clientHeight}px)`,
+						...style,
+					}}
+					ref={intersectionContainerRef}
+				>
+					<table
+						className={
+							"table w-full table-fixed border-separate border-spacing-0 select-none overflow-auto"
+						}
+						ref={tableRef}
 					>
-						<table
-							className={
-								"table w-full table-fixed border-separate border-spacing-0 select-none overflow-auto"
+						<LPTimeTableHeader
+							slotsArray={slotsArray}
+							columnWidth={columnWidth}
+							groupHeaderColumnWidth={groupHeaderColumnWidth}
+							startDate={startDate}
+							endDate={endDate}
+							viewType={viewType}
+							timeFrameDay={timeFrameDay}
+							showTimeSlotHeader={
+								showTimeSlotHeader === undefined ||
+								showTimeSlotHeader === null
+									? viewType === "hours"
+									: showTimeSlotHeader
 							}
-							ref={tableRef}
-						>
-							<LPTimeTableHeader
-								slotsArray={slotsArray}
-								columnWidth={columnWidth}
-								groupHeaderColumnWidth={groupHeaderColumnWidth}
-								startDate={startDate}
-								endDate={endDate}
-								viewType={viewType}
-								timeFrameDay={timeFrameDay}
-								showTimeSlotHeader={
-									showTimeSlotHeader === undefined ||
-									showTimeSlotHeader === null
-										? viewType === "hours"
-										: showTimeSlotHeader
+							dateHeaderTextFormat={dateHeaderTextFormat}
+							weekStartsOnSunday={weekStartsOnSunday}
+							locale={locale}
+							ref={tableHeaderRef}
+						/>
+						<tbody ref={tableBodyRef} className="table-fixed">
+							<TimeTableRows<G, I>
+								entries={entries}
+								selectedTimeSlotItem={selectedTimeSlotItem}
+								onTimeSlotItemClick={onTimeSlotItemClick}
+								onGroupClick={onGroupClick}
+								groupRows={groupRows}
+								intersectionContainerRef={
+									intersectionContainerRef
 								}
-								dateHeaderTextFormat={dateHeaderTextFormat}
-								weekStartsOnSunday={weekStartsOnSunday}
-								locale={locale}
-								ref={tableHeaderRef}
+								headerRef={tableHeaderRef}
 							/>
-							<tbody ref={tableBodyRef} className="table-fixed">
-								<TimeTableRows<G, I>
-									entries={entries}
-									selectedTimeSlotItem={selectedTimeSlotItem}
-									onTimeSlotItemClick={onTimeSlotItemClick}
-									onGroupClick={onGroupClick}
-									groupRows={groupRows}
-									intersectionContainerRef={
-										intersectionContainerRef
-									}
-									headerRef={tableHeaderRef}
-								/>
-							</tbody>
-						</table>
-					</div>
-				</TimeTableIdentProvider>
-			</div>
+						</tbody>
+					</table>
+				</div>
+			</TimeTableIdentProvider>
 		</>
 	)
 }