hoisting popper to content level

robertfmurdock · Oct 14, 2024 · 2059bc8 · 2059bc8
1 parent bb6dcbb
commit 2059bc8
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 47 deletions.
diff --git a/.../jsMain/kotlin/com/zegreatrob/coupling/client/components/contribution/ContributionCard.kt b/.../jsMain/kotlin/com/zegreatrob/coupling/client/components/contribution/ContributionCard.kt
@@ -27,14 +27,17 @@ import web.cssom.fr
 import web.cssom.px
 import web.cssom.repeat
 import web.cssom.rgb
+import web.html.HTMLElement
 
 external interface ContributionCardProps : Props {
     var contribution: Contribution
     var contributors: List<Player>
+    var onPlayerClick: ((Player, HTMLElement) -> Unit)?
 }
 
 @ReactFunc
-val ContributionCard by nfc<ContributionCardProps> { (contribution, contributors) ->
+val ContributionCard by nfc<ContributionCardProps> { props ->
+    val (contribution, contributors) = props
     val shortId = contribution.id.asShortId()
 
     div {
@@ -57,7 +60,7 @@ val ContributionCard by nfc<ContributionCardProps> { (contribution, contributors
                 borderRadius = 1.em
                 padding = 1.em
             }
-            ContributionCardHeader(contribution, contributors)
+            ContributionCardHeader(contribution, contributors, props.onPlayerClick)
             div {
                 css {
                     display = Display.grid

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,6 +1,5 @@
 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
@@ -11,21 +10,10 @@ 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.dom.html.ReactHTML.span
-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
@@ -53,24 +41,13 @@ import web.html.HTMLElement
 external interface ContributionCardHeaderProps : Props {
     var contribution: Contribution
     var contributors: List<Player>
+    var onPlayerClick: ((Player, HTMLElement) -> Unit)?
 }
 
 @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 ContributionCardHeader by nfc<ContributionCardHeaderProps> { props ->
+    val (contribution, contributors) = props
     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)
@@ -136,10 +113,7 @@ val ContributionCardHeader by nfc<ContributionCardHeaderProps> { (contribution,
                 }.toSet(),
                 element = { tilt, player ->
                     span.create {
-                        onClick = {
-                            setReferenceElement(ReferenceElement(it.currentTarget))
-                            popperInstance.forceUpdate?.invoke()
-                        }
+                        onClick = { props.onPlayerClick?.invoke(player, it.currentTarget) }
                         PlayerCard(player = player, tilt = tilt, size = 30, key = player.id)
                     }
                 },
@@ -156,17 +130,3 @@ 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/...lin/com/zegreatrob/coupling/client/components/contribution/ContributionOverviewContent.kt b/...lin/com/zegreatrob/coupling/client/components/contribution/ContributionOverviewContent.kt
@@ -1,17 +1,30 @@
 package com.zegreatrob.coupling.client.components.contribution
 
+import com.zegreatrob.coupling.client.components.CouplingPopUp
 import com.zegreatrob.coupling.model.Contribution
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.player.Player
 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.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.h2
+import react.popper.UsePopperOptions
+import react.popper.usePopper
+import react.useRef
+import react.useState
 import web.cssom.AlignItems
 import web.cssom.Display
 import web.cssom.FlexDirection
+import web.html.HTMLElement
 
 external interface ContributionOverviewContentProps : Props {
     var party: PartyDetails
@@ -31,9 +44,43 @@ val ContributionOverviewContent by nfc<ContributionOverviewContentProps> { (_, c
             h2 {
                 +"Most Recent ${contributions.size} Contributions:"
             }
+            val popperRef = useRef<HTMLElement>()
+            val arrowRef = useRef<HTMLElement>()
+            val (referenceElement, setReferenceElement) = useState<ReferenceElement?>(null)
+            val popperInstance = usePopper(referenceElement, popperRef.current, popperOptions(arrowRef))
+            CouplingPopUp(
+                hide = referenceElement == null,
+                popperRef = popperRef,
+                arrowRef = arrowRef,
+                popperInstance = popperInstance,
+            ) {
+                +"Menu Goes here"
+            }
             contributions.forEach { contribution ->
-                ContributionCard(contribution = contribution, contributors = contributors, key = contribution.id)
+                ContributionCard(
+                    contribution = contribution,
+                    contributors = contributors,
+                    key = contribution.id,
+                    onPlayerClick = { _, element ->
+                        setReferenceElement(ReferenceElement(element))
+                        popperInstance.forceUpdate?.invoke()
+                    },
+                )
             }
         }
     }
 }
+
+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) }
+        },
+    )
+}