more use of new style

robertfmurdock · Jul 5, 2023 · 991369b · 991369b
1 parent 077b80d
commit 991369b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 38 deletions.
diff --git a/...src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/AssignedPair.kt b/...src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/AssignedPair.kt
@@ -14,7 +14,6 @@ import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.coupling.model.player.callsign.CallSign
 import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.create
 import com.zegreatrob.minreact.ntmFC
 import emotion.react.css
@@ -110,7 +109,7 @@ val assignedPair by ntmFC<AssignedPair> { (party, pair, canDrag, swapCallback, p
             }
         }
 
-        add(PinSection(pinList = pair.pins.toList(), canDrag = canDrag))
+        PinSection(pinList = pair.pins.toList(), canDrag = canDrag)
     }
 }
 

diff --git a/...ain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRow.kt b/...ain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRow.kt
@@ -101,17 +101,13 @@ private fun ChildrenBuilder.showPairs(document: PairAssignmentDocument) = div {
                 position = Position.relative
             }
             key = "$index"
-            pair.pinnedPlayers.map { pinnedPlayer: PinnedPlayer ->
-                showPlayer(pinnedPlayer)
-            }
-            add(
-                PinSection(
-                    pinList = pair.pins.toList(),
-                    scale = PinButtonScale.ExtraSmall,
-                    className = ClassName {
-                        bottom = 2.px
-                    },
-                ),
+            pair.pinnedPlayers.map(::showPlayer)
+            PinSection(
+                pinList = pair.pins.toList(),
+                scale = PinButtonScale.ExtraSmall,
+                className = ClassName {
+                    bottom = 2.px
+                },
             )
         }
     }

diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinConfig.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinConfig.kt
@@ -14,7 +14,6 @@ import com.zegreatrob.coupling.json.toSerializable
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.pin.Pin
 import com.zegreatrob.minreact.ReactFunc
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import js.core.jso
 import react.Props
@@ -52,6 +51,6 @@ val PinConfig by nfc<PinConfigProps<*>> { props ->
     if (redirectUrl != null) {
         Navigate { to = redirectUrl }
     } else {
-        add(PinConfigContent(party, updatedPin, pinList, onChange, onSubmit, onRemove))
+        PinConfigContent(party, updatedPin, pinList, onChange, onSubmit, onRemove)
     }
 }
diff --git a/...ponents/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinConfigContent.kt b/...ponents/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinConfigContent.kt
@@ -8,10 +8,11 @@ import com.zegreatrob.coupling.client.components.configInput
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.pin.Pin
 import com.zegreatrob.coupling.model.pin.PinTarget
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import emotion.react.css
 import react.ChildrenBuilder
+import react.Props
 import react.dom.events.ChangeEvent
 import react.dom.html.ReactHTML.a
 import react.dom.html.ReactHTML.div
@@ -31,18 +32,19 @@ import web.cssom.VerticalAlign
 import web.cssom.px
 import web.html.InputType
 
-data class PinConfigContent(
-    val party: PartyDetails,
-    val pin: Pin,
-    val pinList: List<Pin>,
-    val onChange: (ChangeEvent<*>) -> Unit,
-    val onSubmit: () -> Unit,
-    val onRemove: (() -> Unit)?,
-) : DataPropsBind<PinConfigContent>(pinConfigContent)
+external interface PinConfigContentProps : Props {
+    var party: PartyDetails
+    var pin: Pin
+    var pinList: List<Pin>
+    var onChange: (ChangeEvent<*>) -> Unit
+    var onSubmit: () -> Unit
+    var onRemove: (() -> Unit)?
+}
 
 val pinConfigContentClassName = ClassName("pin-config-content")
 
-val pinConfigContent by ntmFC<PinConfigContent> { (party, pin, pinList, onChange, onSubmit, onRemove) ->
+@ReactFunc
+val PinConfigContent by nfc<PinConfigContentProps> { (party, pin, pinList, onChange, onSubmit, onRemove) ->
     ConfigFrame {
         className = pinConfigContentClassName
         span {

diff --git a/...nt/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinSection.kt b/...nt/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinSection.kt
@@ -1,24 +1,30 @@
 package com.zegreatrob.coupling.client.components.pin
 
 import com.zegreatrob.coupling.model.pin.Pin
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import emotion.react.css
+import react.Props
 import react.dom.html.ReactHTML.div
 import web.cssom.ClassName
 import web.cssom.Position
 import web.cssom.pct
 import web.cssom.px
 import web.cssom.unaryMinus
 
-data class PinSection(
-    val pinList: List<Pin>,
-    val scale: PinButtonScale = PinButtonScale.Small,
-    val canDrag: Boolean = false,
-    val className: ClassName = ClassName(""),
-) : DataPropsBind<PinSection>(pinSection)
+external interface PinSectionProps : Props {
+    var pinList: List<Pin>
+    var scale: PinButtonScale?
+    var canDrag: Boolean?
+    var className: ClassName?
+}
 
-val pinSection by ntmFC<PinSection> { (pinList, scale, canDrag, className) ->
+@ReactFunc
+val PinSection by nfc<PinSectionProps> { props ->
+    val (pinList) = props
+    val scale = props.scale ?: PinButtonScale.Small
+    val canDrag = props.canDrag ?: false
+    val className = props.className ?: ClassName("")
     div {
         css(className) {
             marginLeft = -(pinList.size * 12 * scale.factor).px

diff --git a/client/src/main/kotlin/com/zegreatrob/coupling/client/demo/DemoPageFrame.kt b/client/src/main/kotlin/com/zegreatrob/coupling/client/demo/DemoPageFrame.kt
@@ -197,9 +197,8 @@ private fun ChildrenBuilder.playerConfigFrame(state: AddPlayer) = add(
     PlayerConfigContent(state.party, state.newPlayer, state.players, {}, {}, {}),
 )
 
-private fun ChildrenBuilder.pinConfigFrame(state: AddPin) = add(
-    PinConfigContent(state.party, state.newPin, state.pins, {}, {}, {}),
-)
+private fun ChildrenBuilder.pinConfigFrame(state: AddPin) =
+    PinConfigContent(state.party, state.newPin, state.pins, {}, {}, {})
 
 private fun ChildrenBuilder.pairAssignmentsFrame(state: CurrentPairs) = add(
     PairAssignments(