Merge pull request #37 from dokar3/v0.4.0-beta

V0.4.0 beta

README.md

@@ -13,17 +13,24 @@ implementation "io.github.dokar3:chiptextfield:latest_version"
 **Default (filled style)** 
 
 ```kotlin
-var value by remember { mutableStateOf("") }
+var value by remember { mutableStateOf("Initial text") }
 val state = rememberChipTextFieldState<Chip>(
     value = value,
     onValueChange = { value = it },
 )
 ChipTextField(
     state = state,
-    onSubmit = {
-        state.addChip(Chip(value))
-        value = ""
-    },
+    onSubmit = { textFieldValue -> Chip(textFieldValue.text) },
+)
+```
+
+Simplified version if do not care about the text field value:
+
+```kotlin
+val state = rememberChipTextFieldState<Chip>()
+ChipTextField(
+    state = state,
+    onSubmit = { textFieldValue -> Chip(textFieldValue.text) },
 )
 ```
 
@@ -32,17 +39,10 @@ ChipTextField(
 **Outlined**
 
 ```kotlin
-var value by remember { mutableStateOf("") }
-val state = rememberChipTextFieldState<Chip>(
-    value = value,
-    onValueChange = { value = it },
-)
+val state = rememberChipTextFieldState<Chip>()
 OutlinedChipTextField(
     state = state,
-    onSubmit = {
-        state.addChip(Chip(value))
-        value = ""
-    },
+    onSubmit = { Chip(it.text) },
 )
 ```
 
@@ -51,17 +51,10 @@ OutlinedChipTextField(
 **Need a classic underline style?**
 
 ```kotlin
-var value by remember { mutableStateOf("") }
-val state = rememberChipTextFieldState<Chip>(
-    value = value,
-    onValueChange = { value = it },
-)
+val state = rememberChipTextFieldState<Chip>()
 ChipTextField(
     state = state, 
-    onSubmit = {
-        state.addChip(Chip(value))
-        value = ""
-    },
+    onSubmit = { Chip(it.text) },
     colors = TextFieldDefaults.textFieldColors(
         backgroundColor = Color.Transparent
     ),
@@ -79,16 +72,15 @@ class CheckableChip(text: String, isChecked: Boolean = false) : Chip(text) {
 }
 
 val state = rememberChipTextFieldState(
-    value = "",
-    onValueChange = {},
     chips = listOf(CheckableChip(""), ...),
 )
 BasicChipTextField(
-        state = state,
-        readOnly = true, // Disable editing
-        chipLeadingIcon = { chip -> CheckIcon(chip) }, // Show check icon if checked
-        chipTrailingIcon = {}, // Hide default close button
-        onChipClick = { chip -> chip.isChecked = !chip.isChecked }
+    state = state,
+    onSubmit = { null },
+    readOnly = true, // Disable editing
+    chipLeadingIcon = { chip -> CheckIcon(chip) }, // Show check icon if checked
+    chipTrailingIcon = {}, // Hide default close button
+    onChipClick = { chip -> chip.isChecked = !chip.isChecked }
 )
 
 @Composable
@@ -102,18 +94,11 @@ fun CheckIcon(chip: CheckableChip, modifier: Modifier = Modifier) { ... }
 ```kotlin
 class AvatarChip(text: String, val avatarUrl: String) : Chip(text)
 
-var value by remember { mutableStateOf("") }
-val state = rememberChipTextFieldState<AvatarChip>(
-    value = value,
-    onValueChange = { value = it },
-)
+val state = rememberChipTextFieldState<AvatarChip>()
 ChipTextField(
-        state = state,
-        onSubmit = { 
-            state.addChip(AvatarChip(value, AVATAR_URL))
-            value = ""
-        },
-        chipLeadingIcon = { chip -> Avatar(chip) } // Load and display avatar
+    state = state,
+    onSubmit = { AvatarChip(it.text, AVATAR_URL) },
+    chipLeadingIcon = { chip -> Avatar(chip) } // Load and display avatar
 )
 
 @Composable

build.gradle

@@ -1,10 +1,12 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 buildscript {
     ext {
-        compose_version = '1.2.1'
-        compose_compiler_version = '1.3.0'
+        compose_version = '1.3.0-beta02'
+        compose_compiler_version = '1.3.1'
         kotlin_version = '1.7.10'
-        accompanist_version = '0.25.1'
+        accompanist_version = '0.26.3-beta'
+        compile_sdk = 33
+        target_sdk = 33
     }
     repositories {
         google()

gradle.properties

@@ -22,7 +22,7 @@ kotlin.code.style=official
 
 GROUP=io.github.dokar3
 POM_ARTIFACT_ID=chiptextfield
-VERSION_NAME=0.4.0-alpha
+VERSION_NAME=0.4.0-beta
 
 POM_NAME=ChipTextField
 POM_DESCRIPTION=Editable chip layout in Jetpack Compose.

library/build.gradle

@@ -5,11 +5,11 @@ plugins {
 }
 
 android {
-    compileSdk 32
+    compileSdk compile_sdk
 
     defaultConfig {
         minSdk 21
-        targetSdk 32
+        targetSdk target_sdk
 
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         consumerProguardFiles "consumer-rules.pro"

library/src/main/java/com/dokar/chiptextfield/BasicChipTextField.kt

@@ -43,6 +43,7 @@ import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -57,7 +58,7 @@ import kotlinx.coroutines.flow.filter
  *
  * @param state Use [rememberChipTextFieldState] to create new state.
  * @param modifier Modifier for chip text field.
- * @param onSubmit Called after pressing enter key.
+ * @param onSubmit Called after pressing enter key, used to create new chips.
  * @param enabled Enabled state, if false, user will not able to edit and select.
  * @param readOnly If true, edit will be disabled, but user can still select text.
  * @param readOnlyChips If true, chips are no more editable, but the text field can still be edited
@@ -84,8 +85,8 @@ import kotlinx.coroutines.flow.filter
 @Composable
 fun <T : Chip> BasicChipTextField(
     state: ChipTextFieldState<T>,
+    onSubmit: (value: TextFieldValue) -> T?,
     modifier: Modifier = Modifier,
-    onSubmit: (() -> Unit)? = null,
     enabled: Boolean = true,
     readOnly: Boolean = false,
     readOnlyChips: Boolean = readOnly,
@@ -310,7 +311,7 @@ private fun <T : Chip> Chips(
 @Composable
 private fun <T : Chip> Input(
     state: ChipTextFieldState<T>,
-    onSubmit: (() -> Unit)?,
+    onSubmit: (value: TextFieldValue) -> T?,
     enabled: Boolean,
     readOnly: Boolean,
     isError: Boolean,
@@ -329,13 +330,27 @@ private fun <T : Chip> Input(
     val textColor = textStyle.color.takeOrElse {
         colors.textColor(enabled).value
     }
+
+    fun tryAddNewChip(value: TextFieldValue): Boolean {
+        val newChip = onSubmit(value)
+        return if (newChip != null) {
+            state.addChip(newChip)
+            true
+        } else {
+            false
+        }
+    }
+
     BasicTextField(
         value = value,
         onValueChange = filterNewLine { newValue, hasNewLine ->
-            state.onValueChange(newValue)
             if (hasNewLine && newValue.text.isNotEmpty()) {
-                onSubmit?.invoke()
+                if (tryAddNewChip(newValue)) {
+                    state.value = TextFieldValue()
+                    return@filterNewLine
+                }
             }
+            state.onValueChange(newValue)
         },
         modifier = modifier
             .focusRequester(focusRequester)
@@ -357,7 +372,7 @@ private fun <T : Chip> Input(
         keyboardActions = KeyboardActions(
             onDone = {
                 if (value.text.isNotEmpty()) {
-                    onSubmit?.invoke()
+                    tryAddNewChip(value)
                 }
             }
         ),

library/src/main/java/com/dokar/chiptextfield/ChipTextField.kt

@@ -17,6 +17,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -31,8 +32,8 @@ import androidx.compose.ui.unit.dp
 @Composable
 fun <T : Chip> ChipTextField(
     state: ChipTextFieldState<T>,
+    onSubmit: (value: TextFieldValue) -> T?,
     modifier: Modifier = Modifier,
-    onSubmit: (() -> Unit)? = null,
     enabled: Boolean = true,
     readOnly: Boolean = false,
     readOnlyChips: Boolean = readOnly,

library/src/main/java/com/dokar/chiptextfield/ChipTextFieldState.kt

@@ -8,6 +8,24 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.text.input.TextFieldValue
 
+
+/**
+ * Return a new remembered [ChipTextFieldState]
+ *
+ * @param chips Default chips
+ */
+@Composable
+fun <T : Chip> rememberChipTextFieldState(
+    chips: List<T> = emptyList()
+): ChipTextFieldState<T> {
+    var value by remember { mutableStateOf("") }
+    return rememberChipTextFieldState(
+        value = value,
+        onValueChange = { value = it },
+        chips = chips,
+    )
+}
+
 /**
  * Return a new remembered [ChipTextFieldState]
  *

library/src/main/java/com/dokar/chiptextfield/OutlinedChipTextField.kt

@@ -17,6 +17,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -32,8 +33,8 @@ import com.dokar.chiptextfield.util.runIf
 @Composable
 fun <T : Chip> OutlinedChipTextField(
     state: ChipTextFieldState<T>,
+    onSubmit: (value: TextFieldValue) -> T?,
     modifier: Modifier = Modifier,
-    onSubmit: (() -> Unit)? = null,
     enabled: Boolean = true,
     readOnly: Boolean = false,
     readOnlyChips: Boolean = readOnly,

sample/build.gradle

@@ -4,12 +4,12 @@ plugins {
 }
 
 android {
-    compileSdk 32
+    compileSdk compile_sdk
 
     defaultConfig {
         applicationId "com.dokar.chiptextfield.sample"
         minSdk 21
-        targetSdk 32
+        targetSdk target_sdk
         versionCode 1
         versionName "1.0"
 

sample/src/main/java/com/dokar/chiptextfield/sample/AvatarChips.kt

@@ -10,10 +10,7 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.TextFieldDefaults
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -32,25 +29,18 @@ import com.dokar.chiptextfield.sample.data.SampleChips
 internal fun AvatarChips(
     chipFieldStyle: ChipFieldStyle
 ) {
-    val chips = remember { SampleChips.getAvatarChips() }
-    var value by remember { mutableStateOf("Android") }
     val state = rememberChipTextFieldState(
-        value = value,
-        onValueChange = { value = it },
-        chips = chips,
+        chips = remember { SampleChips.getAvatarChips() },
     )
 
     ChipsHeader("Avatar chips")
 
     ChipTextField(
         state = state,
+        onSubmit = { AvatarChip(it.text, SampleChips.randomAvatarUrl()) },
         modifier = Modifier
             .fillMaxWidth()
             .padding(8.dp),
-        onSubmit = {
-            state.addChip(AvatarChip(value, SampleChips.randomAvatarUrl()))
-            value = ""
-        },
         colors = TextFieldDefaults.textFieldColors(
             cursorColor = chipFieldStyle.cursorColor,
             backgroundColor = Color.Transparent,

sample/src/main/java/com/dokar/chiptextfield/sample/CheckableChips.kt

@@ -25,17 +25,15 @@ import com.dokar.chiptextfield.sample.data.SampleChips
 internal fun CheckableChips(
     chipFieldStyle: ChipFieldStyle
 ) {
-    val chips = remember { SampleChips.getCheckableChips() }
     val state = rememberChipTextFieldState(
-        value = "",
-        onValueChange = {},
-        chips = chips,
+        chips = remember { SampleChips.getCheckableChips() }
     )
 
     ChipsHeader("Checkable chips")
 
     BasicChipTextField(
         state = state,
+        onSubmit = { null },
         modifier = Modifier
             .fillMaxWidth()
             .padding(8.dp),