Extract Modifier.toAttrs

ShreckYe · ShreckYe · commit d4de7c317444 · 2024-05-09T09:42:58.000+08:00
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Spacer.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Spacer.js.kt
@@ -2,12 +2,12 @@ package com.huanshankeji.compose.foundation.layout
 
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import org.jetbrains.compose.web.dom.Div
 
 @Composable
 actual fun Spacer(modifier: Modifier) {
     AddKobwebComposeStyleSheet()
-    Div(attrs = modifier.platformModifier.toAttrs { classes("kobweb-spacer") })
+    Div(attrs = modifier.toAttrs { classes("kobweb-spacer") })
     //com.varabyte.kobweb.compose.foundation.layout.Spacer() // use this when `Modifier` is supported
 }
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/text/BasicText.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/text/BasicText.js.kt
@@ -2,7 +2,7 @@ package com.huanshankeji.compose.foundation.text
 
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import org.jetbrains.compose.web.dom.Span
 import org.jetbrains.compose.web.dom.Text
 
@@ -17,4 +17,4 @@ actual fun BasicText(text: String) =
 
 @Composable
 actual fun BasicText(text: String, modifier: Modifier) =
-    Span(modifier.platformModifier.toAttrs()) { Text(text) }
+    Span(modifier.toAttrs()) { Text(text) }
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/Modifier.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/Modifier.js.kt
@@ -1,5 +1,8 @@
 package com.huanshankeji.compose.ui
 
+import com.varabyte.kobweb.compose.ui.toAttrs
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.w3c.dom.Element
 import com.varabyte.kobweb.compose.ui.Modifier as PlatformModifier
 
 typealias PlatformModifier = PlatformModifier
@@ -34,3 +37,6 @@ actual interface Modifier {
 
 fun PlatformModifier.toCommonModifier() =
     Modifier.Impl(this)
+
+fun <A : AttrsScope<Element>> Modifier.toAttrs(finalHandler: (A.() -> Unit)? = null): A.() -> Unit =
+    platformModifier.toAttrs(finalHandler)
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Button.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Button.js.kt
@@ -6,7 +6,7 @@ import com.huanshankeji.compose.foundation.layout.RowScope
 import com.huanshankeji.compose.material2.ext.ButtonType
 import com.huanshankeji.compose.material2.ext.toMDCButtonType
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import dev.petuska.kmdc.button.MDCButton
 import dev.petuska.kmdc.button.MDCButtonScope
 import org.w3c.dom.HTMLButtonElement
@@ -20,7 +20,7 @@ internal fun CommonButton(
 ) =
     MDCButton(
         buttonType.toMDCButtonType(),
-        attrs = modifier.platformModifier.toAttrs {
+        attrs = modifier.toAttrs {
             onClick { onClick() }
         },
         content = content
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Checkbox.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Checkbox.js.kt
@@ -2,7 +2,7 @@ package com.huanshankeji.compose.material2
 
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import dev.petuska.kmdc.checkbox.MDCCheckbox
 
 // https://github.com/mpetuska/kmdc/blob/master/sandbox/src/jsMain/showcases/MDCCheckbox.kt
@@ -13,6 +13,6 @@ actual fun Checkbox(
     modifier: Modifier,
     enabled: Boolean
 ) =
-    MDCCheckbox(checked, !enabled, attrs = modifier.platformModifier.toAttrs {
+    MDCCheckbox(checked, !enabled, attrs = modifier.toAttrs {
         onCheckedChange?.let { onInput { it(!checked) } }
     })
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Divider.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Divider.js.kt
@@ -2,12 +2,12 @@ package com.huanshankeji.compose.material2
 
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import org.jetbrains.compose.web.dom.Hr
 
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
 // see: https://github.com/varabyte/kobweb/blob/main/frontend/silk-widgets/src/jsMain/kotlin/com/varabyte/kobweb/silk/components/layout/Divider.kt
 // see: https://github.com/mpetuska/kmdc/blob/master/katalog/katalog-runtime/src/jsMain/kotlin/layout/Divider.kt
 @Composable
 actual fun Divider(modifier: Modifier) =
-    Hr(modifier.platformModifier.toAttrs())
+    Hr(modifier.toAttrs())
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Icon.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Icon.js.kt
@@ -5,14 +5,14 @@ import com.huanshankeji.compose.contentDescription
 import com.huanshankeji.compose.material.icons.Icon
 import com.huanshankeji.compose.material2.icons.toMDCIcon
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import dev.petuska.kmdcx.icons.MDCIconSpan
 
 /**
  * There is often a better alternative of adding the CSS rule to the parent element to using this composable directly.
  */
 @Composable
 actual fun Icon(icon: Icon, contentDescription: String?, modifier: Modifier) =
-    MDCIconSpan(icon.toMDCIcon(), attrs = modifier.platformModifier.toAttrs {
+    MDCIconSpan(icon.toMDCIcon(), attrs = modifier.toAttrs {
         contentDescription(contentDescription)
     })
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/IconButton.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/IconButton.js.kt
@@ -2,7 +2,7 @@ package com.huanshankeji.compose.material2
 
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import dev.petuska.kmdc.icon.button.MDCIconButton
 
 @Composable
@@ -11,7 +11,7 @@ actual fun IconButton(
     modifier: Modifier,
     content: @Composable () -> Unit
 ) =
-    MDCIconButton(attrs = modifier.platformModifier.toAttrs {
+    MDCIconButton(attrs = modifier.toAttrs {
         onClick { onClick() }
     }) { content() }
 
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Switch.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Switch.js.kt
@@ -2,7 +2,7 @@ package com.huanshankeji.compose.material2
 
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import dev.petuska.kmdc.switch.MDCSwitch
 import org.jetbrains.compose.web.attributes.disabled
 
@@ -16,7 +16,7 @@ internal fun CommonSwitch(
     modifier: Modifier,
     enabled: Boolean
 ) =
-    MDCSwitch(checked, label, modifier.platformModifier.toAttrs {
+    MDCSwitch(checked, label, modifier.toAttrs {
         if (!enabled) disabled()
         onCheckedChange?.let { onClick { it(!checked) } }
     })
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/Radio.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/Radio.js.kt
@@ -2,20 +2,20 @@ package com.huanshankeji.compose.material2.ext
 
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import dev.petuska.kmdc.form.field.MDCFormField
 import dev.petuska.kmdc.radio.MDCRadio
 
 // see: https://github.com/mpetuska/kmdc/blob/master/sandbox/src/jsMain/showcases/MDCRadio.kt
 
 @Composable
 actual fun RadioRow(selected: Boolean, label: String, onClick: () -> Unit, modifier: Modifier, enabled: Boolean) =
-    MDCRadio(selected, disabled = !enabled, label = label, attrs = modifier.platformModifier.toAttrs {
+    MDCRadio(selected, disabled = !enabled, label = label, attrs = modifier.toAttrs {
         onClick { onClick() }
     })
 
 @Composable
 actual fun RadioGroupRow(modifier: Modifier, content: @Composable () -> Unit) =
-    MDCFormField(attrs = modifier.platformModifier.toAttrs()) {
+    MDCFormField(attrs = modifier.toAttrs()) {
         content()
     }
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TextField.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TextField.js.kt
@@ -6,7 +6,7 @@ import com.huanshankeji.compose.foundation.text.KeyboardOptions
 import com.huanshankeji.compose.foundation.text.attrsFrom
 import com.huanshankeji.compose.material.icons.Icon
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import dev.petuska.kmdc.core.MDCContent
 import dev.petuska.kmdc.textfield.MDCTextArea
 import dev.petuska.kmdc.textfield.MDCTextField
@@ -37,7 +37,7 @@ fun CommonTextFieldWithMDCContentIcons(
         label,
         leadingIcon = leadingIcon,
         trailingIcon = trailingIcon,
-        attrs = modifier.platformModifier.toAttrs {
+        attrs = modifier.toAttrs {
             onInput { onValueChange(it.value) }
 
             attrsFrom(keyboardOptions, keyboardActions)
@@ -220,6 +220,6 @@ actual fun TextArea(
         disabled = !enabled,
         label = label,
         rows = lines.toUInt(),
-        attrs = modifier.platformModifier.toAttrs {
+        attrs = modifier.toAttrs {
             onInput { onValueChange(it.value) }
         })
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt
@@ -4,7 +4,7 @@ import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.contentDescription
 import com.huanshankeji.compose.material.icons.Icon
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 import dev.petuska.kmdc.top.app.bar.*
 import dev.petuska.kmdcx.icons.mdcIcon
 import org.jetbrains.compose.web.dom.Text
@@ -44,7 +44,7 @@ actual fun TopAppBarScaffold(
     content: @Composable () -> Unit
 ) =
     MDCTopAppBar {
-        TopAppBar(topAppBarModifier.platformModifier.toAttrs()) {
+        TopAppBar(topAppBarModifier.toAttrs()) {
             Row {
                 Section(align = MDCTopAppBarSectionAlign.Start) {
                     navigationIcon?.let { NavigationIconScope(this@Section).it() }
diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/Checkbox.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/Checkbox.js.kt
@@ -3,10 +3,10 @@ package com.huanshankeji.compose.material3
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.html.material3.MdCheckbox
 import com.huanshankeji.compose.ui.Modifier
+import com.huanshankeji.compose.ui.toAttrs
 import com.huanshankeji.compose.web.attributes.ext.onInput
 import com.huanshankeji.compose.web.attributes.isFalseOrNull
 import com.huanshankeji.compose.web.attributes.isTrueOrNull
-import com.varabyte.kobweb.compose.ui.toAttrs
 
 @Composable
 actual fun Checkbox(
@@ -18,7 +18,7 @@ actual fun Checkbox(
     MdCheckbox(
         checked.isTrueOrNull(),
         enabled.isFalseOrNull(),
-        attrs = modifier.platformModifier.toAttrs {
+        attrs = modifier.toAttrs {
             /*
             Use `onInput` here because it wraps an `input` element.
             Also see: https://stackoverflow.com/questions/58016503/click-vs-input-vs-change-for-checkboxes
diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/CommonButton.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/CommonButton.js.kt
@@ -1,11 +1,11 @@
 package com.huanshankeji.compose.material3
 
 import com.huanshankeji.compose.ui.Modifier
+import com.huanshankeji.compose.ui.toAttrs
 import com.huanshankeji.compose.web.attributes.Attrs
-import com.varabyte.kobweb.compose.ui.toAttrs
 import org.w3c.dom.HTMLElement
 
 internal fun Modifier.toCommonButtonAttrs(onClick: () -> Unit): Attrs<HTMLElement> =
-    platformModifier.toAttrs {
+    toAttrs {
         onClick { onClick() }
     }
diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/Icon.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/Icon.js.kt
@@ -5,14 +5,14 @@ import com.huanshankeji.compose.contentDescription
 import com.huanshankeji.compose.html.material3.MdIcon
 import com.huanshankeji.compose.material.icons.Icon
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 
 @Composable
 actual fun Icon(
     icon: Icon,
     contentDescription: String?,
     modifier: Modifier
 ) =
-    MdIcon(attrs = modifier.platformModifier.toAttrs {
+    MdIcon(attrs = modifier.toAttrs {
         contentDescription(contentDescription)
     }, materialIconName = icon.name)
diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/IconButton.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/IconButton.js.kt
@@ -5,19 +5,19 @@ import com.huanshankeji.compose.foundation.layout.Box
 import com.huanshankeji.compose.html.material3.*
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.PlatformModifier
+import com.huanshankeji.compose.ui.toAttrs
 import com.huanshankeji.compose.ui.toCommonModifier
 import com.huanshankeji.compose.web.attributes.ext.onInput
 import com.huanshankeji.compose.web.attributes.isFalseOrNull
 import com.huanshankeji.compose.web.attributes.isTrueOrNull
 import com.varabyte.kobweb.compose.ui.attrsModifier
-import com.varabyte.kobweb.compose.ui.toAttrs
 import org.jetbrains.compose.web.attributes.AttrsScope
 import org.w3c.dom.HTMLElement
 
 internal fun Modifier.toCommonIconToggleButtonAttrs(
     checked: Boolean, onCheckedChange: (Boolean) -> Unit
 ): AttrsScope<HTMLElement>.() -> Unit =
-    platformModifier.toAttrs {
+    toAttrs {
         // note that `onInput` is used here
         onInput { onCheckedChange(!checked) }
     }
diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/Switch.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/Switch.js.kt
@@ -3,10 +3,10 @@ package com.huanshankeji.compose.material3
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.html.material3.MdSwitch
 import com.huanshankeji.compose.ui.Modifier
+import com.huanshankeji.compose.ui.toAttrs
 import com.huanshankeji.compose.web.attributes.ext.onInput
 import com.huanshankeji.compose.web.attributes.isFalseOrNull
 import com.huanshankeji.compose.web.attributes.isTrueOrNull
-import com.varabyte.kobweb.compose.ui.toAttrs
 
 @Composable
 actual fun Switch(
@@ -18,6 +18,6 @@ actual fun Switch(
     MdSwitch(
         enabled.isFalseOrNull(),
         checked.isTrueOrNull(),
-        attrs = modifier.platformModifier.toAttrs {
+        attrs = modifier.toAttrs {
             onCheckedChange?.let { onInput { onCheckedChange(!checked) } }
         })
diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/Card.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/Card.js.kt
@@ -6,19 +6,19 @@ import com.huanshankeji.compose.html.material3.MdElevatedCard
 import com.huanshankeji.compose.html.material3.MdFilledCard
 import com.huanshankeji.compose.html.material3.MdOutlinedCard
 import com.huanshankeji.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toAttrs
 
 @Composable
 actual fun Card(modifier: Modifier, content: @Composable () -> Unit) =
     @OptIn(MaterialWebLabsApi::class)
-    MdFilledCard(modifier.platformModifier.toAttrs()) { content() }
+    MdFilledCard(modifier.toAttrs()) { content() }
 
 @Composable
 actual fun ElevatedCard(modifier: Modifier, content: @Composable () -> Unit) =
     @OptIn(MaterialWebLabsApi::class)
-    MdElevatedCard(modifier.platformModifier.toAttrs()) { content() }
+    MdElevatedCard(modifier.toAttrs()) { content() }
 
 @Composable
 actual fun OutlinedCard(modifier: Modifier, content: @Composable () -> Unit) =
     @OptIn(MaterialWebLabsApi::class)
-    MdOutlinedCard(modifier.platformModifier.toAttrs()) { content() }
+    MdOutlinedCard(modifier.toAttrs()) { content() }
diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/TextField.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/TextField.js.kt
@@ -10,20 +10,20 @@ import com.huanshankeji.compose.html.material3.MdOutlinedTextField
 import com.huanshankeji.compose.html.material3.MdTextFieldScope
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.PlatformModifier
+import com.huanshankeji.compose.ui.toAttrs
 import com.huanshankeji.compose.ui.toCommonModifier
 import com.huanshankeji.compose.web.attributes.ext.onInput
 import com.huanshankeji.compose.web.attributes.isFalseOrNull
 import com.huanshankeji.compose.web.attributes.isTrueOrNull
 import com.huanshankeji.compose.web.dom.ext.value
 import com.varabyte.kobweb.compose.ui.attrsModifier
-import com.varabyte.kobweb.compose.ui.toAttrs
 import org.jetbrains.compose.web.attributes.AttrsScope
 import org.w3c.dom.HTMLElement
 
 private fun Modifier.toTextFieldAttrs(
     onValueChange: (String) -> Unit, keyboardOptions: KeyboardOptions, keyboardActions: KeyboardActions,
 ): AttrsScope<HTMLElement>.() -> Unit =
-    platformModifier.toAttrs {
+    toAttrs {
         // see https://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text
         onInput { onValueChange(it.target.value) }
 
diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt
@@ -8,6 +8,7 @@ import com.huanshankeji.compose.html.material3.MdListScope
 import com.huanshankeji.compose.runtime.DeferredComposableRunner
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.PlatformModifier
+import com.huanshankeji.compose.ui.toAttrs
 import com.huanshankeji.compose.ui.toCommonModifier
 import com.varabyte.kobweb.compose.ui.attrsModifier
 import com.varabyte.kobweb.compose.ui.toAttrs
@@ -39,7 +40,7 @@ actual class ListScope(val mdListScope: MdListScope) {
 
     @Composable
     private fun ListItem(content: ListItemComponents) =
-        mdListScope.MdListItem(attrs = content.contentModifier.platformModifier.toAttrs()) {
+        mdListScope.MdListItem(attrs = content.contentModifier.toAttrs()) {
             contentFromComponents(content)
         }
 
