feat(text-inputs): allow value of type TextFieldValue

sample/src/main/java/com/decathlon/compose/sample/screens/TextInputs.kt

@@ -10,6 +10,8 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
@@ -116,6 +118,20 @@ object TextInputs : Screen {
                         },
                     )
                 }
+                item {
+                    VitaminTextInputs.Outlined(
+                        value = TextFieldValue(text = "Input", selection = TextRange(0, Integer.MAX_VALUE)),
+                        label = "Label",
+                        onValueChange = {},
+                    )
+                }
+                item {
+                    VitaminTextInputs.Outlined(
+                        value = TextFieldValue(text = "Input", selection = TextRange(2, 2)),
+                        label = "Label",
+                        onValueChange = {},
+                    )
+                }
                 item {
                     VitaminTextInputs.Outlined(
                         value = "",

text-inputs/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/VitaminTextInputs.kt

@@ -32,6 +32,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.disabled
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@@ -127,6 +128,88 @@ object VitaminTextInputs {
         )
     }
 
+    /**
+     * Outlined text input to get an input value from the user.
+     * @param value The value of your text input
+     * @param label The label to be displayed inside the text input container and pushed at the top
+     * of text input when the component takes the focus
+     * @param onValueChange The callback to be called when the user type a new character
+     * @param modifier The `Modifier` to be applied to the component
+     * @param helperText The optional helper text to be displayed at the start bottom outside the text input container
+     * @param counter The optional counter to be displayed the the end bottom outside the text input container
+     * @param singleLine True if the text input doesn't extend their height, otherwise, false
+     * @param maxLines The number of maximum lines the text input can have if the `singleLine` is set to `true`
+     * @param readOnly True if you don't want open the keyboard when the user click on the text field
+     * @param enabled True if you can type in the text input, otherwise false
+     * @param transformation Transforms the visual representation of the input value
+     * @param keyboardOptions When the text input emit an IME action, the corresponding callback is called
+     * @param keyboardActions Software keyboard options that contains such as KeyboardType and ImeAction
+     * @param interactionSource Representing the stream of interaction for the text input
+     * @param colors The color to notify your user if they are in normal, error or success state
+     * @param textStyle The typography of the text inside the text input
+     * @param icon The optional trailing icon to be displayed at the end of the text input container
+     */
+    @Composable
+    fun Outlined(
+        value: TextFieldValue,
+        label: String,
+        onValueChange: (TextFieldValue) -> Unit,
+        modifier: Modifier = Modifier,
+        helperText: String? = null,
+        counter: Pair<Int, Int>? = null,
+        singleLine: Boolean = false,
+        maxLines: Int = Int.MAX_VALUE,
+        readOnly: Boolean = false,
+        enabled: Boolean = true,
+        transformation: VisualTransformation = TextInputsTransformations.none,
+        keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+        keyboardActions: KeyboardActions = KeyboardActions.Default,
+        interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+        colors: TextInputStateColors = TextInputsState.normal(),
+        textStyle: TextStyle = VitaminTheme.typography.text2,
+        icon: @Composable (() -> Unit)? = null,
+    ) {
+        VitaminTextInputLayoutImpl(
+            helperText = helperText,
+            counter = counter,
+            colors = colors,
+            enabled = enabled,
+            textInput = {
+                OutlinedTextField(
+                    value = value,
+                    onValueChange = onValueChange,
+                    label = { Text(text = label) },
+                    colors = colors.outlinedTextFieldColors(),
+                    textStyle = textStyle,
+                    visualTransformation = transformation,
+                    interactionSource = interactionSource,
+                    keyboardOptions = keyboardOptions,
+                    keyboardActions = keyboardActions,
+                    singleLine = singleLine,
+                    maxLines = maxLines,
+                    modifier = Modifier.fillMaxWidth().vtmnSemantics(helperText, counter),
+                    enabled = enabled,
+                    readOnly = readOnly,
+                    isError = colors.state == State.ERROR,
+                    trailingIcon = {
+                        if (icon != null && colors.state != State.SUCCESS) {
+                            icon()
+                        } else if (
+                            colors.imageVector != null &&
+                            (colors.state == State.SUCCESS || colors.state == State.ERROR)
+                        ) {
+                            Icon(
+                                imageVector = colors.imageVector,
+                                contentDescription = null,
+                            )
+                        }
+                    },
+                )
+            },
+            modifier = modifier,
+        )
+    }
+
     /**
      * Outlined dropdown to get the input from a dropdown menu.
      * @param value The value of your text input
@@ -268,6 +351,88 @@ object VitaminTextInputs {
         )
     }
 
+    /**
+     * Filled text input to get an input value from the user.
+     * @param value The value of your text input
+     * @param label The label to be displayed inside the text input container and pushed at the top
+     * of text input when the component takes the focus
+     * @param onValueChange The callback to be called when the user type a new character
+     * @param modifier The `Modifier` to be applied to the component
+     * @param helperText The optional helper text to be displayed at the start bottom outside the text input container
+     * @param counter The optional counter to be displayed the the end bottom outside the text input container
+     * @param maxLines The number of maximum lines the text input can have if the `singleLine` is set to `true`
+     * @param singleLine True if the text input doesn't extend their height, otherwise, false
+     * @param readOnly True if you don't want open the keyboard when the user click on the text field
+     * @param enabled True if you can type in the text input, otherwise false
+     * @param transformation Transforms the visual representation of the input value
+     * @param keyboardOptions When the text input emit an IME action, the corresponding callback is called
+     * @param keyboardActions Software keyboard options that contains such as KeyboardType and ImeAction
+     * @param interactionSource Representing the stream of interaction for the text input
+     * @param colors The color to notify your user if they are in normal, error or success state
+     * @param textStyle The typography of the text inside the text input
+     * @param icon The optional trailing icon to be displayed at the end of the text input container
+     */
+    @Composable
+    fun Filled(
+        value: TextFieldValue,
+        label: String,
+        onValueChange: (TextFieldValue) -> Unit,
+        modifier: Modifier = Modifier,
+        helperText: String? = null,
+        counter: Pair<Int, Int>? = null,
+        maxLines: Int = Int.MAX_VALUE,
+        singleLine: Boolean = false,
+        readOnly: Boolean = false,
+        enabled: Boolean = true,
+        transformation: VisualTransformation = TextInputsTransformations.none,
+        keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+        keyboardActions: KeyboardActions = KeyboardActions.Default,
+        interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+        colors: TextInputStateColors = TextInputsState.normal(),
+        textStyle: TextStyle = VitaminTheme.typography.text2,
+        icon: @Composable (() -> Unit)? = null,
+    ) {
+        VitaminTextInputLayoutImpl(
+            helperText = helperText,
+            counter = counter,
+            colors = colors,
+            enabled = enabled,
+            textInput = {
+                TextField(
+                    value = value,
+                    onValueChange = onValueChange,
+                    label = { Text(text = label) },
+                    colors = colors.textFieldColors(),
+                    textStyle = textStyle,
+                    visualTransformation = transformation,
+                    interactionSource = interactionSource,
+                    keyboardOptions = keyboardOptions,
+                    keyboardActions = keyboardActions,
+                    singleLine = singleLine,
+                    maxLines = maxLines,
+                    modifier = Modifier.fillMaxWidth().vtmnSemantics(helperText, counter),
+                    enabled = enabled,
+                    isError = colors.state == State.ERROR,
+                    readOnly = readOnly,
+                    trailingIcon = {
+                        if (icon != null && colors.state != State.SUCCESS) {
+                            icon()
+                        } else if (
+                            colors.imageVector != null &&
+                            (colors.state == State.SUCCESS || colors.state == State.ERROR)
+                        ) {
+                            Icon(
+                                imageVector = colors.imageVector,
+                                contentDescription = null,
+                            )
+                        }
+                    },
+                )
+            },
+            modifier = modifier,
+        )
+    }
+
     /**
      * Filled dropdown to get the input from a dropdown menu.
      * @param value The value of your text input

text-inputs/text-inputs/src/test/kotlin/com/decathlon/vitamin/compose/textinputs/utils/TextInputVariantsFactory.kt

@@ -2,6 +2,8 @@ package com.decathlon.vitamin.compose.textinputs.utils
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.TextFieldValue
 import com.decathlon.vitamin.compose.textinputs.TextInputStateColors
 import com.decathlon.vitamin.compose.textinputs.VitaminTextInputs
 
@@ -17,6 +19,7 @@ object TextInputVariantsFactory {
         icon: @Composable (() -> Unit)? = null,
         label: String = "Input",
         value: String = "",
+        valueTextFieldValue: TextFieldValue = TextFieldValue("", TextRange.Zero),
         counter: Pair<Int, Int>? = Pair(9999, 9999),
         helperText: String? = "Helper text",
     ) {
@@ -34,6 +37,21 @@ object TextInputVariantsFactory {
                 value = value,
                 helperText = helperText
             )
+
+            Variant.OutlinedTextFieldValue -> VitaminTextInputs.Outlined(
+                modifier = modifier,
+                label = label,
+                enabled = enabled,
+                onValueChange = {
+                    // Nothing to do here
+                },
+                colors = colors,
+                icon = icon,
+                counter = counter,
+                value = valueTextFieldValue,
+                helperText = helperText
+            )
+
             Variant.OutlinedDropdown -> VitaminTextInputs.OutlinedDropdown(
                 label = label,
                 enabled = enabled,
@@ -55,6 +73,21 @@ object TextInputVariantsFactory {
                 value = value,
                 helperText = helperText
             )
+
+            Variant.FilledTextFieldValue -> VitaminTextInputs.Filled(
+                modifier = modifier,
+                label = label,
+                enabled = enabled,
+                onValueChange = {
+                    // Nothing to do here
+                },
+                colors = colors,
+                icon = icon,
+                counter = counter,
+                value = valueTextFieldValue,
+                helperText = helperText
+            )
+
             Variant.FilledDropdown -> VitaminTextInputs.FilledDropdown(
                 label = label,
                 enabled = enabled,

text-inputs/text-inputs/src/test/kotlin/com/decathlon/vitamin/compose/textinputs/utils/Variant.kt

@@ -1,5 +1,5 @@
 package com.decathlon.vitamin.compose.textinputs.utils
 
 enum class Variant {
-    Outlined, OutlinedDropdown, Filled, FilledDropdown
+    Outlined, OutlinedTextFieldValue, OutlinedDropdown, Filled, FilledTextFieldValue, FilledDropdown
 }