From 991369b6a071bf0ce882e10f897d5557d77bdecc Mon Sep 17 00:00:00 2001 From: RoB Murdock Date: Wed, 5 Jul 2023 13:59:46 -0400 Subject: [PATCH] more use of new style --- .../pairassignments/AssignedPair.kt | 3 +-- .../pairassignments/PairAssignmentRow.kt | 18 ++++++-------- .../client/components/pin/PinConfig.kt | 3 +-- .../client/components/pin/PinConfigContent.kt | 24 ++++++++++--------- .../client/components/pin/PinSection.kt | 24 ++++++++++++------- .../coupling/client/demo/DemoPageFrame.kt | 5 ++-- 6 files changed, 39 insertions(+), 38 deletions(-) diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/AssignedPair.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/AssignedPair.kt index a6339f6612..a7726ee26a 100644 --- a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/AssignedPair.kt +++ b/client/components/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 { (party, pair, canDrag, swapCallback, p } } - add(PinSection(pinList = pair.pins.toList(), canDrag = canDrag)) + PinSection(pinList = pair.pins.toList(), canDrag = canDrag) } } diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRow.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRow.kt index fa29d4f9e8..f4d16557fe 100644 --- a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRow.kt +++ b/client/components/src/main/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 index 6777f1063f..622cf38929 100644 --- 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> { 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/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinConfigContent.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinConfigContent.kt index 47c02ee781..9180a0d387 100644 --- a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinConfigContent.kt +++ b/client/components/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, - val onChange: (ChangeEvent<*>) -> Unit, - val onSubmit: () -> Unit, - val onRemove: (() -> Unit)?, -) : DataPropsBind(pinConfigContent) +external interface PinConfigContentProps : Props { + var party: PartyDetails + var pin: Pin + var pinList: List + var onChange: (ChangeEvent<*>) -> Unit + var onSubmit: () -> Unit + var onRemove: (() -> Unit)? +} val pinConfigContentClassName = ClassName("pin-config-content") -val pinConfigContent by ntmFC { (party, pin, pinList, onChange, onSubmit, onRemove) -> +@ReactFunc +val PinConfigContent by nfc { (party, pin, pinList, onChange, onSubmit, onRemove) -> ConfigFrame { className = pinConfigContentClassName span { diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinSection.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinSection.kt index 179702e252..fd44514624 100644 --- a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinSection.kt +++ b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinSection.kt @@ -1,9 +1,10 @@ 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 @@ -11,14 +12,19 @@ import web.cssom.pct import web.cssom.px import web.cssom.unaryMinus -data class PinSection( - val pinList: List, - val scale: PinButtonScale = PinButtonScale.Small, - val canDrag: Boolean = false, - val className: ClassName = ClassName(""), -) : DataPropsBind(pinSection) +external interface PinSectionProps : Props { + var pinList: List + var scale: PinButtonScale? + var canDrag: Boolean? + var className: ClassName? +} -val pinSection by ntmFC { (pinList, scale, canDrag, className) -> +@ReactFunc +val PinSection by nfc { 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 index 498c06552f..090bd039cc 100644 --- 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(