feat: more WIP

Author: jstarpl

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.tsx

@@ -4,9 +4,7 @@ import { usePopper } from 'react-popper'
 import { Padding, Placement, VirtualElement } from '@popperjs/core'
 
 export const PreviewPopUp = React.forwardRef<
-	{
-		update: () => void
-	},
+	PreviewPopUpHandle,
 	React.PropsWithChildren<{
 		anchor: HTMLElement | VirtualElement | null
 		padding: Padding
@@ -16,13 +14,13 @@ export const PreviewPopUp = React.forwardRef<
 		preview?: React.ReactNode
 		controls?: React.ReactNode
 		contentInfo?: React.ReactNode
-		warnings?: React.ReactNode
+		warnings?: React.ReactNode[]
 	}>
 >(function PreviewPopUp(
 	{ anchor, padding, placement, hidden, size, children, controls, contentInfo, warnings },
 	ref
 ): React.JSX.Element {
-	const warningsCount = React.Children.count(warnings)
+	const warningsCount = warnings?.length ?? 0
 
 	const [popperEl, setPopperEl] = useState<HTMLDivElement | null>(null)
 	const popperOptions = useMemo(
@@ -97,11 +95,17 @@ export const PreviewPopUp = React.forwardRef<
 			{contentInfo && <div className="preview-popUp__content-info">{contentInfo}</div>}
 			{warnings && warningsCount > 0 && (
 				<div className="preview-popUp__warnings">
-					{React.Children.map(warnings, (child) => (
-						<div className="preview-popUp__warning-row">{child}</div>
+					{React.Children.map(warnings, (child, index) => (
+						<div className="preview-popUp__warning-row" key={index}>
+							{child}
+						</div>
 					))}
 				</div>
 			)}
 		</div>
 	)
 })
+
+export type PreviewPopUpHandle = {
+	readonly update: () => void
+}

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContext.tsx

@@ -1,4 +1,6 @@
 import React, { useRef, useState } from 'react'
+import { PreviewPopUp, PreviewPopUpHandle } from './PreviewPopUp'
+import { Padding, Placement } from '@popperjs/core'
 
 type VirtualElement = {
 	getBoundingClientRect: () => DOMRect
@@ -25,24 +27,54 @@ export type PreviewContent =
 			type: 'text'
 			content: string
 	  }
+	| {
+			type: 'boxLayout'
+			content: unknown
+	  }
 
-interface IPreviewPopUpHandle {
-	update: Readonly<(content?: PreviewContent) => void>
-	close: Readonly<() => void>
+interface IPreviewPopUpSession {
+	/**
+	 * Update the open preview with new content or modify the content already being previewed, such as change current showing
+	 * time in the video, etc.
+	 */
+	readonly update: (content?: PreviewContent) => void
+	/**
+	 * Close the preview
+	 */
+	readonly close: () => void
+	/**
+	 * Callback for when the preview session is closed by using close() or another preview starting
+	 */
 	onClosed?: () => void
 }
 
+interface PreviewRequestOptions {
+	/** Padding to be used for placing the Preview PopUp around the anchor element */
+	padding?: Padding
+	/** Where to place the Preview popUp around the anchor element */
+	placement?: Placement
+	/** Which  size of the preview to use. Will default to small. */
+	size?: 'small' | 'large'
+	/** Show additional controls underneath the preview content area */
+	controls?: React.ReactNode
+	/** Additional content information that's not part of the preview */
+	contentInfo?: React.ReactNode
+	/** Warnings for the content being previewed */
+	warnings?: React.ReactNode[]
+}
+
 interface IPreviewPopUpContext {
+	/**
+	 * Request a new preview session
+	 * @param anchor The HTML element the preview
+	 * @param content The description of what is to be previewed
+	 * @param opts
+	 */
 	requestPreview(
 		anchor: HTMLElement | VirtualElement,
 		content: PreviewContent,
-		opts?: {
-			size?: 'small' | 'large'
-			controls?: React.ReactNode
-			contentInfo?: React.ReactNode
-			warnings?: React.ReactNode
-		}
-	): IPreviewPopUpHandle
+		opts?: PreviewRequestOptions
+	): IPreviewPopUpSession
 }
 
 const PreviewPopUpContext = React.createContext<IPreviewPopUpContext>({
@@ -51,26 +83,68 @@ const PreviewPopUpContext = React.createContext<IPreviewPopUpContext>({
 	},
 })
 
+interface PreviewSession {
+	anchor: HTMLElement | VirtualElement
+	padding: Padding
+	placement: Placement
+	size: 'small' | 'large'
+	/** Show additional controls underneath the preview content area */
+	controls?: React.ReactNode
+	/** Additional content information that's not part of the preview */
+	contentInfo?: React.ReactNode
+	/** Warnings for the content being previewed */
+	warnings?: React.ReactNode[]
+}
+
 export function PreviewPopUpContextProvider({ children }: React.PropsWithChildren<{}>): React.ReactNode {
-	const [isVisible, setVisible] = useState(false)
-	const [currentHandle, setCurrentHandle] = useRef()
+	const currentHandle = useRef<IPreviewPopUpSession>()
+	const previewRef = useRef<PreviewPopUpHandle>(null)
+
+	const [previewSession, setPreviewSession] = useState<PreviewSession | null>(null)
+	const [previewContent, setPreviewContent] = useState<PreviewContent | null>(null)
 
 	const context: IPreviewPopUpContext = {
 		requestPreview: (anchor, content, opts) => {
-			setVisible(true)
+			setPreviewSession({
+				anchor,
+				padding: opts?.padding ?? 0,
+				placement: opts?.placement ?? 'top',
+				size: opts?.size ?? 'small',
+				controls: opts?.controls,
+				contentInfo: opts?.contentInfo,
+				warnings: opts?.warnings,
+			})
+			setPreviewContent(content)
 
-			const handle: IPreviewPopUpHandle = {
+			const handle: IPreviewPopUpSession = {
 				close: () => {
-					setVisible(false)
+					setPreviewSession(null)
 				},
 				update: () => {
-					// todo test
+					previewRef.current?.update()
 				},
 			}
+			currentHandle.current = handle
 
 			return handle
 		},
 	}
 
-	return <PreviewPopUpContext.Provider value={context}>{children}</PreviewPopUpContext.Provider>
+	return (
+		<PreviewPopUpContext.Provider value={context}>
+			{children}
+			{previewSession && (
+				<PreviewPopUp
+					ref={previewRef}
+					anchor={previewSession.anchor}
+					padding={previewSession.padding}
+					size={previewSession.size}
+					placement={previewSession.placement}
+					contentInfo={previewSession.contentInfo}
+					controls={previewSession.controls}
+					warnings={previewSession.warnings}
+				/>
+			)}
+		</PreviewPopUpContext.Provider>
+	)
 }