wip: PreviewPopUp

meteor/client/ui/PreviewPopUp/PreviewPopUp.tsx

@@ -1,29 +1,27 @@
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import classNames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Padding, Placement, VirtualElement } from '@popperjs/core'
 
-export function PreviewPopUp({
- anchor,
- padding,
- placement,
- hidden,
- size,
- preview,
- controls,
- contentInfo,
- warnings,
-}: {
- anchor: HTMLElement | VirtualElement | null
- padding: Padding
- placement: Placement
- size: 'small' | 'large'
- hidden?: boolean
- preview?: React.ReactNode
- controls?: React.ReactNode
- contentInfo?: React.ReactNode
- warnings?: React.ReactNode
-}): React.JSX.Element {
+export const PreviewPopUp = React.forwardRef<
+ {
+ update: () => void
+ },
+ {
+ anchor: HTMLElement | VirtualElement | null
+ padding: Padding
+ placement: Placement
+ size: 'small' | 'large'
+ hidden?: boolean
+ preview?: React.ReactNode
+ controls?: React.ReactNode
+ contentInfo?: React.ReactNode
+ warnings?: React.ReactNode
+ }
+>(function PreviewPopUp(
+ { anchor, padding, placement, hidden, size, preview, controls, contentInfo, warnings },
+ ref
+): React.JSX.Element {
  const warningsCount = React.Children.count(warnings)
 
  const [popperEl, setPopperEl] = useState<HTMLDivElement | null>(null)
@@ -62,7 +60,26 @@ export function PreviewPopUp({
  }),
  [padding]
  )
- const { styles, attributes } = usePopper(anchor, popperEl, popperOptions)
+ const { styles, attributes, update } = usePopper(anchor, popperEl, popperOptions)
+
+ const updateRef = useRef(update)
+
+ useEffect(() => {
+ updateRef.current = update
+ }, [update])
+
+ useImperativeHandle(
+ ref,
+ () => {
+ return {
+ update: () => {
+ if (!updateRef.current) return
+ updateRef.current().catch(console.error)
+ },
+ }
+ },
+ []
+ )
 
  return (
  <div
@@ -87,4 +104,4 @@ export function PreviewPopUp({
  )}
  </div>
  )
-}
+})

meteor/client/ui/PreviewPopUp/PreviewPopUpContext.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
 
 type VirtualElement = {
  getBoundingClientRect: () => DOMRect
@@ -26,8 +26,14 @@ export type PreviewContent =
  content: string
  }
 
+interface IPreviewPopUpHandle {
+ update: Readonly<(content?: PreviewContent) => void>
+ close: Readonly<() => void>
+ onClosed?: () => void
+}
+
 interface IPreviewPopUpContext {
- display: (
+ requestPreview(
  anchor: HTMLElement | VirtualElement,
  content: PreviewContent,
  opts?: {
@@ -36,19 +42,34 @@ interface IPreviewPopUpContext {
  contentInfo?: React.ReactNode
  warnings?: React.ReactNode
  }
- ) => void
- hide: () => void
+ ): IPreviewPopUpHandle
 }
 
 const PreviewPopUpContext = React.createContext<IPreviewPopUpContext>({
- display: () => void {},
- hide: () => void {},
+ requestPreview: () => {
+ throw new Error('Preview PopUp needs to set up with `PreviewPopUpContextProvider`.')
+ },
 })
 
 export function PreviewPopUpContextProvider({ children }: React.PropsWithChildren<{}>): React.ReactNode {
+ const [isVisible, setVisible] = useState(false)
+ const [currentHandle, setCurrentHandle] = useRef()
+
  const context: IPreviewPopUpContext = {
- display: () => void {},
- hide: () => void {},
+ requestPreview: (anchor, content, opts) => {
+ setVisible(true)
+
+ const handle: IPreviewPopUpHandle = {
+ close: () => {
+ setVisible(false)
+ },
+ update: () => {
+ // todo test
+ },
+ }
+
+ return handle
+ },
  }
 
  return <PreviewPopUpContext.Provider value={context}>{children}</PreviewPopUpContext.Provider>