initial pop up positioning

robertfmurdock · Oct 14, 2024 · d445162 · d445162
1 parent 8421819
commit d445162
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/...rob/coupling/client/demo/CouplingPopUp.kt → ...upling/client/components/CouplingPopUp.kt b/...rob/coupling/client/demo/CouplingPopUp.kt → ...upling/client/components/CouplingPopUp.kt
@@ -1,4 +1,4 @@
-package com.zegreatrob.coupling.client.demo
+package com.zegreatrob.coupling.client.components
 
 import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.nfc
@@ -27,7 +27,7 @@ import web.html.HTMLElement
 import kotlin.js.Json
 
 external interface CouplingPopUpProps : PropsWithChildren {
-    var show: Boolean
+    var hide: Boolean
     var popperRef: MutableRefObject<HTMLElement>
     var arrowRef: MutableRefObject<HTMLElement>
     var popperInstance: PopperInstance
@@ -38,7 +38,7 @@ val CouplingPopUp by nfc<CouplingPopUpProps> { props ->
     val (_, popperRef, arrowRef, popperInstance) = props
     div {
         css {
-            if (props.show) display = None.none
+            if (props.hide) display = None.none
         }
         div {
             css {

diff --git a/...n/kotlin/com/zegreatrob/coupling/client/components/contribution/ContributionCardHeader.kt b/...n/kotlin/com/zegreatrob/coupling/client/components/contribution/ContributionCardHeader.kt
@@ -1,18 +1,30 @@
 package com.zegreatrob.coupling.client.components.contribution
 
+import com.zegreatrob.coupling.client.components.CouplingPopUp
 import com.zegreatrob.coupling.client.components.TiltedPlayerList
 import com.zegreatrob.coupling.client.components.format
 import com.zegreatrob.coupling.client.components.player.PlayerCard
-import com.zegreatrob.coupling.client.components.player.create
 import com.zegreatrob.coupling.client.components.pngPath
 import com.zegreatrob.coupling.model.Contribution
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.coupling.model.player.emails
 import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.nfc
 import emotion.react.css
+import js.objects.jso
+import popper.core.Placement
+import popper.core.ReferenceElement
+import popper.core.modifier
+import popper.core.modifiers.Arrow
+import popper.core.modifiers.Offset
+import react.MutableRefObject
 import react.Props
+import react.create
 import react.dom.html.ReactHTML.div
+import react.popper.UsePopperOptions
+import react.popper.usePopper
+import react.useRef
+import react.useState
 import web.cssom.AlignItems
 import web.cssom.BackgroundRepeat
 import web.cssom.Color
@@ -35,6 +47,7 @@ import web.cssom.rotatex
 import web.cssom.scale
 import web.cssom.translate
 import web.cssom.url
+import web.html.HTMLElement
 
 external interface ContributionCardHeaderProps : Props {
     var contribution: Contribution
@@ -43,7 +56,20 @@ external interface ContributionCardHeaderProps : Props {
 
 @ReactFunc
 val ContributionCardHeader by nfc<ContributionCardHeaderProps> { (contribution, contributors) ->
+    val popperRef = useRef<HTMLElement>()
+    val arrowRef = useRef<HTMLElement>()
+    val (referenceElement, setReferenceElement) = useState<ReferenceElement?>(null)
+    val popperInstance = usePopper(referenceElement, popperRef.current, popperOptions(arrowRef))
+
     val shortId = contribution.id.asShortId()
+    CouplingPopUp(
+        hide = referenceElement == null,
+        popperRef = popperRef,
+        arrowRef = arrowRef,
+        popperInstance = popperInstance,
+    ) {
+        +"Menu Goes here"
+    }
     div {
         css {
             margin = Margin(0.2.em, 0.px)
@@ -108,7 +134,13 @@ val ContributionCardHeader by nfc<ContributionCardHeaderProps> { (contribution,
                     contributors.find { it.emails.contains(email) }
                 }.toSet(),
                 element = { tilt, player ->
-                    PlayerCard.create(player = player, tilt = tilt, size = 30, key = player.id)
+                    div.create {
+                        onClick = {
+                            setReferenceElement(ReferenceElement(it.currentTarget))
+                            popperInstance.forceUpdate?.invoke()
+                        }
+                        PlayerCard(player = player, tilt = tilt, size = 30, key = player.id)
+                    }
                 },
             )
         }
@@ -123,3 +155,17 @@ val ContributionCardHeader by nfc<ContributionCardHeaderProps> { (contribution,
         }
     }
 }
+
+private fun popperOptions(arrowRef: MutableRefObject<HTMLElement>): UsePopperOptions = jso {
+    this.placement = Placement.right
+    this.modifiers = arrayOf(
+        Arrow.modifier {
+            this.options = jso {
+                this.element = arrowRef.current
+            }
+        },
+        Offset.modifier {
+            this.options = jso { offset = Offset(0.0, 10.0) }
+        },
+    )
+}
diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/DemoPageFrame.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/DemoPageFrame.kt
@@ -4,6 +4,7 @@ import com.zegreatrob.coupling.action.SpinCommand
 import com.zegreatrob.coupling.action.pairassignmentdocument.DeletePairAssignmentsCommand
 import com.zegreatrob.coupling.client.aboutPageContent
 import com.zegreatrob.coupling.client.components.Controls
+import com.zegreatrob.coupling.client.components.CouplingPopUp
 import com.zegreatrob.coupling.client.components.DispatchFunc
 import com.zegreatrob.coupling.client.components.external.reactmarkdown.Markdown
 import com.zegreatrob.coupling.client.components.pairassignments.PairAssignments
@@ -102,7 +103,7 @@ fun ChildrenBuilder.popperDiv(
     state: DemoAnimationState,
     popperInstance: PopperInstance,
 ) = CouplingPopUp(
-    show = state.description.isBlank(),
+    hide = state.description.isBlank(),
     popperRef = popperRef,
     arrowRef = arrowRef,
     popperInstance = popperInstance,