Merge pull request #2 from huanshankeji/text-field

Implement `TextField`

Author: ShreckYe

README.md

@@ -36,6 +36,7 @@ This project is prototype and there is no documentation yet. Check out [the demo
 - `IconButton`
 - `ScrollableList`/`LazyColumn` (visually inconsistent for now)
 - `Text`/`MaterialText`
+- `TextField`
 - `TopAppBarScaffold`
 
 ### Styles

compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScope.kt

@@ -13,6 +13,11 @@ import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.w3c.dom.HTMLElement
 
+/*
+fun <TElement : Element, TAttrsScope : AttrsScope<TElement>> ModifierOrAttrs<TElement>.toAttrs2(): (TAttrsScope.() -> Unit)? =
+    this?.let { { ModifierOrAttrsScope(this).it() } }
+*/
+
 fun <TElement : Element> ModifierOrAttrs<TElement>.toAttrs(): AttrBuilderContext<TElement>? =
     this?.let { { ModifierOrAttrsScope(this).it() } }
 

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/TextField.kt

@@ -0,0 +1,22 @@
+package com.huanshankeji.compose.material
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+
+expect abstract class TextFieldElement : Element
+
+@Composable
+expect fun TextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifierOrAttrs: ModifierOrAttrs<TextFieldElement> = null,
+    enabled: Boolean = true,
+    label: String? = null,
+    /*
+    placeholder: String? = null,
+    helperText: String? = null,
+    */
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+)

compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/material/TextField.kt

@@ -0,0 +1,30 @@
+package com.huanshankeji.compose.material
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import com.huanshankeji.compose.ui.toAttrs
+import dev.petuska.kmdc.textfield.MDCTextField
+import org.w3c.dom.HTMLInputElement
+
+actual typealias TextFieldElement = HTMLInputElement
+
+@Composable
+actual fun TextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifierOrAttrs: ModifierOrAttrs<TextFieldElement>,
+    enabled: Boolean,
+    label: String?,
+    leadingIcon: @Composable (() -> Unit)?,
+    trailingIcon: @Composable (() -> Unit)?,
+) =
+    MDCTextField(value,
+        attrs = {
+            onInput { onValueChange(it.value) }
+            modifierOrAttrs.toAttrs()?.let { it() }
+        },
+        disabled = !enabled,
+        label = label,
+        leadingIcon = leadingIcon?.let { { it() } },
+        trailingIcon = trailingIcon?.let { { it() } }
+    )

compose-multiplatform-material/src/jvmMain/kotlin/com/huanshankeji/compose/material/TextField.kt

@@ -0,0 +1,28 @@
+package com.huanshankeji.compose.material
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import com.huanshankeji.compose.ui.toModifier
+
+actual abstract class TextFieldElement : Element()
+
+@Composable
+actual fun TextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifierOrAttrs: ModifierOrAttrs<TextFieldElement>,
+    enabled: Boolean,
+    label: String?,
+    leadingIcon: @Composable (() -> Unit)?,
+    trailingIcon: @Composable (() -> Unit)?,
+) =
+    androidx.compose.material.TextField(
+        value,
+        onValueChange,
+        modifierOrAttrs.toModifier(),
+        enabled = enabled,
+        label = label?.let { { Text(it) } },
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon
+    )

demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt

@@ -105,6 +105,13 @@ fun App() {
                     DemoSquare(rgbaColor(0xFFU, 0U, 0U, 0x80U))
                     DemoSquare(rgbaColor(0xFFU, 0U, 0U, 0.5F))
                 }
+
+                var text by remember { mutableStateOf("") }
+                TextField(
+                    text, { text = it },
+                    label = "Demo text field",
+                    leadingIcon = { Icon(MaterialIcons.Add, null) },
+                    trailingIcon = { Icon(MaterialIcons.Menu, null) })
             }
         }
     }