swapping over coupling button to the new system, which required updat…

…ing the library to handle unset keys properly
robertfmurdock · Jul 6, 2023 · 014b971 · 014b971
1 parent 4d3431d
commit 014b971
Show file tree

Hide file tree

Showing 29 changed files with 141 additions and 175 deletions.
diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/Button.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/Button.kt
@@ -1,10 +1,10 @@
 package com.zegreatrob.coupling.client.components
 
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.children
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import csstype.PropertiesBuilder
 import emotion.react.css
+import react.PropsWithChildren
 import react.dom.html.ButtonHTMLAttributes
 import react.dom.html.ReactHTML.button
 import web.cssom.AnimationPlayState
@@ -152,31 +152,37 @@ val black: PropertiesBuilder.() -> Unit = {
     }
 }
 
-data class CouplingButton(
-    val sizeRuleSet: PropertiesBuilder.() -> Unit = medium,
-    val colorRuleSet: PropertiesBuilder.() -> Unit = black,
-    @JsName("className")
-    val className: ClassName = ClassName(""),
-    val onClick: () -> Unit = {},
-    val attrs: ButtonHTMLAttributes<*>.() -> Unit = {},
-    val css: PropertiesBuilder.() -> Unit = {},
-) : DataPropsBind<CouplingButton>(couplingButton)
+external interface CouplingButtonProps : PropsWithChildren {
+    var sizeRuleSet: ((PropertiesBuilder) -> Unit)?
+    var colorRuleSet: ((PropertiesBuilder) -> Unit)?
+    var className: (ClassName)?
+    var onClick: (() -> Unit)?
+    var attrs: ((ButtonHTMLAttributes<*>) -> Unit)?
+    var css: ((PropertiesBuilder) -> Unit)?
+}
+
+@ReactFunc
+val CouplingButton by nfc<CouplingButtonProps> { props ->
+    val sizeRuleSet = props.sizeRuleSet ?: medium
+    val colorRuleSet = props.colorRuleSet ?: black
+    val className = props.className ?: ClassName("")
+    val onClick = props.onClick ?: {}
+    val attrs = props.attrs ?: {}
+    val css = props.css ?: {}
 
-val couplingButton by ntmFC<CouplingButton> { props ->
-    val (sizeRuleSet, colorRuleSet, className, onClick, block, css) = props
     button {
         type = ButtonType.button
         this.onClick = { onClick() }
-        block(this)
+        attrs(this)
 
         css(className, ClassName("button")) {
             "*" { verticalAlign = VerticalAlign.middle }
             buttonRuleset()
-            sizeRuleSet()
-            colorRuleSet()
-            css()
+            sizeRuleSet(this)
+            colorRuleSet(this)
+            css(this)
         }
 
-        children(props)
+        +props.children
     }
 }
diff --git a/.../components/src/main/kotlin/com/zegreatrob/coupling/client/components/ConfigSaveButton.kt b/.../components/src/main/kotlin/com/zegreatrob/coupling/client/components/ConfigSaveButton.kt
@@ -1,20 +1,18 @@
 package com.zegreatrob.coupling.client.components
 
-import com.zegreatrob.minreact.add
 import react.ChildrenBuilder
+import react.dom.html.ButtonHTMLAttributes
 import web.html.ButtonType
 
-fun ChildrenBuilder.configSaveButton(isSaving: Boolean) = add(
-    com.zegreatrob.coupling.client.components.CouplingButton(
-        sizeRuleSet = com.zegreatrob.coupling.client.components.supersize,
-        colorRuleSet = com.zegreatrob.coupling.client.components.blue,
-        attrs = {
-            type = ButtonType.submit
-            tabIndex = 0
-            value = "Save"
-            disabled = isSaving
-        },
-    ),
+fun ChildrenBuilder.configSaveButton(isSaving: Boolean) = CouplingButton(
+    sizeRuleSet = supersize,
+    colorRuleSet = blue,
+    attrs = fun ButtonHTMLAttributes<*>.() {
+        type = ButtonType.submit
+        tabIndex = 0
+        value = "Save"
+        disabled = isSaving
+    },
 ) {
     +"Save"
 }
diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/DemoButton.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/DemoButton.kt
@@ -1,6 +1,5 @@
 package com.zegreatrob.coupling.client.components
 
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import react.Props
 import react.dom.html.ReactHTML.i
@@ -13,7 +12,7 @@ val DemoButton by nfc<Props> {
         to = "/demo"
         tabIndex = -1
         draggable = false
-        add(CouplingButton(large, lightGreen)) {
+        CouplingButton(large, lightGreen) {
             i { className = ClassName("fa fa-play") }
             span { +" Demo" }
         }

diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/GqlButton.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/GqlButton.kt
@@ -1,6 +1,5 @@
 package com.zegreatrob.coupling.client.components
 
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import react.Props
 import react.dom.html.ReactHTML.img
@@ -11,7 +10,7 @@ val GqlButton by nfc<Props> {
         to = "/graphiql"
         tabIndex = -1
         draggable = false
-        add(CouplingButton(large, white)) {
+        CouplingButton(large, white) {
             img {
                 src = svgPath("graphql")
                 height = 18.0

diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/LogoutButton.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/LogoutButton.kt
@@ -1,6 +1,5 @@
 package com.zegreatrob.coupling.client.components
 
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import react.Props
 import react.dom.html.ReactHTML.i
@@ -13,7 +12,7 @@ val LogoutButton by nfc<Props> {
         to = "/logout"
         tabIndex = -1
         draggable = false
-        add(CouplingButton(large, red)) {
+        CouplingButton(large, red) {
             i { className = ClassName("fa fa-sign-out-alt") }
             span { +"Sign Out" }
         }

diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/RetireButton.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/RetireButton.kt
@@ -1,8 +1,5 @@
 package com.zegreatrob.coupling.client.components
 
-import com.zegreatrob.minreact.add
 import react.ChildrenBuilder
 
-fun ChildrenBuilder.retireButton(onRetire: () -> Unit) = add(CouplingButton(small, red, onClick = onRetire)) {
-    +"Retire"
-}
+fun ChildrenBuilder.retireButton(onRetire: () -> Unit) = CouplingButton(small, red, onClick = onRetire) { +"Retire" }
diff --git a/...nt/components/src/main/kotlin/com/zegreatrob/coupling/client/components/SettingsButton.kt b/...nt/components/src/main/kotlin/com/zegreatrob/coupling/client/components/SettingsButton.kt
@@ -1,7 +1,7 @@
 package com.zegreatrob.coupling.client.components
 
 import com.zegreatrob.coupling.model.party.PartyDetails
-import com.zegreatrob.minreact.add
+import csstype.PropertiesBuilder
 import react.ChildrenBuilder
 import react.dom.html.ReactHTML.i
 import react.router.dom.Link
@@ -13,12 +13,10 @@ fun ChildrenBuilder.settingsButton(party: PartyDetails, className: ClassName = C
     to = "/${party.id.value}/edit"
     tabIndex = -1
     draggable = false
-    add(
-        CouplingButton(large, black, className) {
-            fontSize = 24.px
-            padding = Padding(1.px, 4.px, 2.px)
-        },
-    ) {
+    CouplingButton(large, black, className, css = fun PropertiesBuilder.() {
+        fontSize = 24.px
+        padding = Padding(1.px, 4.px, 2.px)
+    }) {
         i { this.className = ClassName("fa fa-cog") }
     }
 }
diff --git a/.../com/zegreatrob/coupling/client/components/pairassignments/CurrentPairAssignmentsPanel.kt b/.../com/zegreatrob/coupling/client/components/pairassignments/CurrentPairAssignmentsPanel.kt
@@ -16,6 +16,7 @@ import com.zegreatrob.coupling.model.pin.Pin
 import com.zegreatrob.minreact.DataPropsBind
 import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.ntmFC
+import csstype.PropertiesBuilder
 import emotion.react.css
 import react.ChildrenBuilder
 import react.dom.html.ReactHTML.div
@@ -148,23 +149,19 @@ private fun List<PinnedCouplingPair>.findPairContainingPlayer(droppedPlayerId: S
     pair.pinnedPlayers.any { player -> player.player.id == droppedPlayerId }
 }
 
-private fun ChildrenBuilder.saveButton(onSave: () -> Unit) = add(
-    CouplingButton(
-        sizeRuleSet = supersize,
-        colorRuleSet = green,
-        onClick = onSave,
-        css = { margin = 4.px },
-    ),
+private fun ChildrenBuilder.saveButton(onSave: () -> Unit) = CouplingButton(
+    sizeRuleSet = supersize,
+    colorRuleSet = green,
+    onClick = onSave,
+    css = fun PropertiesBuilder.() { margin = 4.px },
 ) {
     +"Save!"
 }
 
-private fun ChildrenBuilder.cancelButton(onCancel: () -> Unit) = add(
-    CouplingButton(
-        sizeRuleSet = small,
-        colorRuleSet = red,
-        onClick = onCancel,
-    ),
+private fun ChildrenBuilder.cancelButton(onCancel: () -> Unit) = CouplingButton(
+    sizeRuleSet = small,
+    colorRuleSet = red,
+    onClick = onCancel,
 ) {
     +"Cancel"
 }
diff --git a/...ain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRow.kt b/...ain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRow.kt
@@ -13,7 +13,6 @@ import com.zegreatrob.coupling.model.pairassignmentdocument.PairAssignmentDocume
 import com.zegreatrob.coupling.model.pairassignmentdocument.PinnedPlayer
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.ntmFC
 import emotion.css.ClassName
 import emotion.react.css
@@ -78,12 +77,10 @@ private val pairAssignmentRow by ntmFC<PairAssignmentRow> { (party, document, co
     }
 }
 
-private fun ChildrenBuilder.deleteButton(onClickFunc: () -> Unit) = add(
-    CouplingButton(
-        sizeRuleSet = small,
-        colorRuleSet = red,
-        onClick = onClickFunc,
-    ),
+private fun ChildrenBuilder.deleteButton(onClickFunc: () -> Unit) = CouplingButton(
+    sizeRuleSet = small,
+    colorRuleSet = red,
+    onClick = onClickFunc,
 ) {
     +"DELETE"
 }

diff --git a/.../src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSection.kt b/.../src/main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSection.kt
@@ -18,6 +18,7 @@ import kotlinx.browser.window
 import org.w3c.dom.DataTransfer
 import react.ChildrenBuilder
 import react.MutableRefObject
+import react.dom.html.ButtonHTMLAttributes
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.i
 import react.useRef
@@ -60,13 +61,11 @@ private val pairSection by ntmFC<PairSection> { (party, players, pairs, allowSav
 
 private fun ChildrenBuilder.copyToClipboardButton(ref: MutableRefObject<HTMLElement>) {
     if (js("!!global.ClipboardItem").unsafeCast<Boolean>()) {
-        add(
-            CouplingButton(
-                sizeRuleSet = large,
-                colorRuleSet = white,
-                onClick = { ref.current?.copyToClipboardOnClick()?.invoke() },
-                attrs = { tabIndex = -1 },
-            ),
+        CouplingButton(
+            sizeRuleSet = large,
+            colorRuleSet = white,
+            onClick = { ref.current?.copyToClipboardOnClick()?.invoke() },
+            attrs = fun ButtonHTMLAttributes<*>.() { tabIndex = -1 },
         ) {
             i { className = ClassName("fa fa-clipboard") }
         }

diff --git a/...n/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PrepareToSpinButton.kt b/...n/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PrepareToSpinButton.kt
@@ -5,8 +5,8 @@ import com.zegreatrob.coupling.client.components.pink
 import com.zegreatrob.coupling.client.components.supersize
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.ntmFC
+import csstype.PropertiesBuilder
 import react.router.dom.Link
 import web.cssom.AnimationIterationCount
 import web.cssom.ClassName
@@ -22,20 +22,18 @@ private val prepareToSpinButton by ntmFC<PrepareToSpinButton> { (party) ->
         to = "/${party.id.value}/prepare/"
         tabIndex = -1
         draggable = false
-        add(
-            CouplingButton(
-                sizeRuleSet = supersize,
-                colorRuleSet = pink,
-                className = prepareToSpinButtonClassName,
-                css = {
-                    animationName = ident("pulsate")
-                    animationDuration = 2.s
-                    animationIterationCount = AnimationIterationCount.infinite
-                    hover {
-                        animationDuration = 0.75.s
-                    }
-                },
-            ),
+        CouplingButton(
+            sizeRuleSet = supersize,
+            colorRuleSet = pink,
+            className = prepareToSpinButtonClassName,
+            css = fun PropertiesBuilder.() {
+                animationName = ident("pulsate")
+                animationDuration = 2.s
+                animationIterationCount = AnimationIterationCount.infinite
+                hover {
+                    animationDuration = 0.75.s
+                }
+            },
         ) {
             +"Prepare to spin!"
         }

diff --git a/...ain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/ViewHistoryButton.kt b/...ain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/ViewHistoryButton.kt
@@ -4,7 +4,6 @@ import com.zegreatrob.coupling.client.components.CouplingButton
 import com.zegreatrob.coupling.client.components.large
 import com.zegreatrob.coupling.client.components.lightGreen
 import com.zegreatrob.coupling.model.party.PartyDetails
-import com.zegreatrob.minreact.add
 import react.ChildrenBuilder
 import react.dom.html.ReactHTML.i
 import react.router.dom.Link
@@ -14,7 +13,7 @@ fun ChildrenBuilder.viewHistoryButton(party: PartyDetails) = Link {
     to = "/${party.id.value}/history/"
     tabIndex = -1
     draggable = false
-    add(CouplingButton(large, lightGreen)) {
+    CouplingButton(large, lightGreen) {
         i { this.className = ClassName("fa fa-history") }
         +" History!"
     }

diff --git a/...ents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartySelectButton.kt b/...ents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartySelectButton.kt
@@ -2,7 +2,6 @@ package com.zegreatrob.coupling.client.components.party
 
 import com.zegreatrob.coupling.client.components.CouplingButton
 import com.zegreatrob.coupling.client.components.large
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import react.Props
 import react.dom.html.ReactHTML.i
@@ -15,7 +14,7 @@ val PartySelectButton by nfc<Props> {
         to = "/parties/"
         tabIndex = -1
         draggable = false
-        add(CouplingButton(large)) {
+        CouplingButton(large) {
             i { className = ClassName("fa fa-arrow-circle-up") }
             span { +"Party select" }
         }

diff --git a/...components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinListButton.kt b/...components/src/main/kotlin/com/zegreatrob/coupling/client/components/pin/PinListButton.kt
@@ -4,7 +4,6 @@ import com.zegreatrob.coupling.client.components.CouplingButton
 import com.zegreatrob.coupling.client.components.large
 import com.zegreatrob.coupling.client.components.white
 import com.zegreatrob.coupling.model.party.PartyDetails
-import com.zegreatrob.minreact.add
 import react.ChildrenBuilder
 import react.dom.html.ReactHTML.i
 import react.router.dom.Link
@@ -14,7 +13,7 @@ fun ChildrenBuilder.pinListButton(party: PartyDetails) = Link {
     to = "/${party.id.value}/pins/"
     tabIndex = -1
     draggable = false
-    add(CouplingButton(large, white)) {
+    CouplingButton(large, white) {
         i { this.className = ClassName("fa fa-peace") }
         +" Pin Bag!"
     }

diff --git a/...nents/src/main/kotlin/com/zegreatrob/coupling/client/components/player/AddPlayerButton.kt b/...nents/src/main/kotlin/com/zegreatrob/coupling/client/components/player/AddPlayerButton.kt
@@ -4,7 +4,6 @@ import com.zegreatrob.coupling.client.components.CouplingButton
 import com.zegreatrob.coupling.client.components.large
 import com.zegreatrob.coupling.client.components.orange
 import com.zegreatrob.coupling.model.party.PartyId
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import react.Props
 import react.router.dom.Link
@@ -19,7 +18,7 @@ val addPlayerButton by nfc<AddPlayerButtonProps> { props ->
         to = "/${props.partyId.value}/player/new/"
         tabIndex = -1
         draggable = false
-        add(CouplingButton(large, orange)) {
+        CouplingButton(large, orange) {
             +"Add Player!"
         }
     }