Merge pull request #93 from linked-planet/dev

fixed nowbar moving with slot selection

Author: marcus-wishes

library/src/components/timetable/TimeTable.tsx

@@ -625,50 +625,23 @@ function moveNowBar(
 
 	const startSlot = startAndEndSlot.startSlot
 
-	// the first row in the body is used for the time slot bars
-	let childIdx = 0
-	let tbodyFirstRow = tableBody.children[childIdx] as
-		| HTMLTableRowElement
-		| undefined
-	// now get the current time slot index element (not -1 because the first empty element for the groups)
-
-	// find the first rendered row
-	while (tbodyFirstRow && tbodyFirstRow.children.length === 0) {
-		childIdx++
-		tbodyFirstRow = tableBody.children[childIdx] as
-			| HTMLTableRowElement
-			| undefined
-	}
-
-	if (!tbodyFirstRow) {
-		console.warn(
-			"LPTimeTable - unable to find time slot row for the now bar",
-		)
-		return
-	}
-
-	const slotBar = tbodyFirstRow?.children[startSlot + 1] as
-		| HTMLDivElement
-		| undefined
-	if (!slotBar) {
-		console.warn(
-			"LPTimeTable - unable to find time slot column for the now bar: ",
-			startSlot,
-		)
+	// add orange border
+	const nowTimeSlotCell = headerTimeSlotCells[startSlot + 1]
+	if (!nowTimeSlotCell) {
+		console.error("unable to find header for time slot of the current time")
 		return
 	}
 
-	// adjust the nowbar div to the right parent, or create it if it doesn't exist
 	if (nowBar) {
-		if (nowBar.parentElement !== slotBar) {
-			slotBar.appendChild(nowBar)
+		if (nowBar.parentElement !== nowTimeSlotCell) {
+			nowTimeSlotCell.appendChild(nowBar)
 		}
 	} else {
 		nowBar = document.createElement("div")
 		//nowBar.className = styles.nowBar
 		nowBar.className =
 			"absolute opacity-60 bg-orange-bold top-0 bottom-0 z-[2] w-[2px]"
-		slotBar.appendChild(nowBar)
+		//slotBar.appendChild(nowBar)
 		nowBarRef.current = nowBar
 	}
 
@@ -682,14 +655,8 @@ function moveNowBar(
 
 	const diffPerc = diffNow / timeSlotMinutes
 	nowBar.style.left = `${diffPerc * 100}%`
-	nowBar.style.height = `${tableBody.getBoundingClientRect().bottom - slotBar.getBoundingClientRect().top}px`
-
-	// add orange border
-	const nowTimeSlotCell = headerTimeSlotCells[startSlot + 1]
-	if (!nowTimeSlotCell) {
-		console.error("unable to find header for time slot of the current time")
-		return
-	}
+	nowBar.style.top = "100%"
+	nowBar.style.height = `${tableBody.getBoundingClientRect().bottom - nowTimeSlotCell.getBoundingClientRect().top}px`
 
 	nowTimeSlotCell.classList.remove(
 		"border-b-border-bold",

library/src/components/timetable/TimeTableHeader.tsx

@@ -203,7 +203,7 @@ export const LPTimeTableHeader = function TimeTableHeader<
 					)
 				})}
 			</colgroup>
-			<thead ref={tableHeaderRef} className="sticky top-0 z-[5]">
+			<thead ref={tableHeaderRef} className="sticky top-0 z-[4]">
 				<tr>
 					<th
 						style={{

package-lock.json

@@ -76,8 +76,8 @@
 		]
 	},
 	"dependencies": {
-		"@atlaskit/empty-state": "^7.12.3",
-		"@atlaskit/icon": "^22.28.0",
+		"@atlaskit/empty-state": "^8.0.1",
+		"@atlaskit/icon": "^23.1.0",
 		"@emotion/css": "^11.13.5",
 		"@hello-pangea/dnd": "^17.0.0",
 		"@radix-ui/react-accordion": "^1.2.1",

package.json

@@ -2214,6 +2214,32 @@ export default CodeBlockShowcase
 import { Collapsible } from "@linked-planet/ui-kit-ts/components/Collapsible"
 import type { ShowcaseProps } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
 import ShowcaseWrapperItem from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
+import { useState } from "react"
+import { Button } from "@linked-planet/ui-kit-ts"
+
+//#region collapsible-controlled
+function CollapsibleControlled() {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button
+				onClick={() => setOpen(!open)}
+				className="btn btn-primary"
+				type="button"
+			>
+				{open ? "Close" : "Open"}
+			</Button>
+			<Collapsible
+				header={<h4>Collapsible Title</h4>}
+				open={open}
+				onChanged={setOpen}
+			>
+				<div className="p-4">collapsible content</div>
+			</Collapsible>
+		</>
+	)
+}
+//#endregion collapsible-controlled
 
 export default function CollapsibleShowcase(props: ShowcaseProps) {
 	//#region collapsible
@@ -2264,6 +2290,11 @@ export default function CollapsibleShowcase(props: ShowcaseProps) {
 					example: example1,
 					sourceCodeExampleId: "collapsible1",
 				},
+				{
+					title: "Controlled",
+					example: <CollapsibleControlled />,
+					sourceCodeExampleId: "collapsible-controlled",
+				},
 			]}
 		/>
 	)