refactor: update text input logic to v2 TextFieldState, part 1 [WPB-8779]

app/src/main/kotlin/com/wire/android/ui/authentication/create/common/handle/UsernameTextField.kt

@@ -18,51 +18,46 @@
 package com.wire.android.ui.authentication.create.common.handle
 
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.text.input.InputTransformation
+import androidx.compose.foundation.text.input.TextFieldState
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.input.ImeAction
-import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.text.input.TextFieldValue
 import com.wire.android.R
 import com.wire.android.ui.common.ShakeAnimation
 import com.wire.android.ui.common.error.CoreFailureErrorDialog
+import com.wire.android.ui.common.textfield.DefaultEmail
 import com.wire.android.ui.common.textfield.WireTextField
 import com.wire.android.ui.common.textfield.WireTextFieldState
+import com.wire.android.ui.common.textfield.maxLengthWithCallback
+import com.wire.android.ui.common.textfield.patternWithCallback
 import com.wire.android.ui.theme.wireDimensions
+import com.wire.android.util.Patterns
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun UsernameTextField(
-    animateUsernameError: Boolean,
     errorState: HandleUpdateErrorState,
-    username: TextFieldValue,
+    username: TextFieldState,
     onErrorDismiss: () -> Unit,
-    onUsernameChange: (TextFieldValue) -> Unit,
-    onUsernameErrorAnimated: () -> Unit
 ) {
     if (errorState is HandleUpdateErrorState.DialogError.GenericError) {
         CoreFailureErrorDialog(errorState.coreFailure, onErrorDismiss)
     }
 
     val keyboardController = LocalSoftwareKeyboardController.current
     ShakeAnimation { animate ->
-        if (animateUsernameError) {
-            animate()
-            onUsernameErrorAnimated()
-        }
         WireTextField(
-            value = username,
-            onValueChange = onUsernameChange,
+            textState = username,
             placeholderText = stringResource(R.string.create_account_username_placeholder),
             labelText = stringResource(R.string.create_account_username_label),
+            inputTransformation = InputTransformation
+                .patternWithCallback(Patterns.HANDLE, animate)
+                .maxLengthWithCallback(255, animate),
             leadingIcon = {
                 Icon(
                     painter = painterResource(id = R.drawable.ic_mention),
@@ -81,8 +76,8 @@ fun UsernameTextField(
                     WireTextFieldState.Error(stringResource(id = R.string.create_account_username_description))
             } else WireTextFieldState.Default,
             descriptionText = stringResource(id = R.string.create_account_username_description),
-            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email, imeAction = ImeAction.Done),
-            keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
+            keyboardOptions = KeyboardOptions.DefaultEmail,
+            onKeyboardAction = { keyboardController?.hide() },
             modifier = Modifier.padding(horizontal = MaterialTheme.wireDimensions.spacing16x)
         )
     }

app/src/main/kotlin/com/wire/android/ui/authentication/create/email/CreateAccountEmailScreen.kt

@@ -28,7 +28,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.ClickableText
-import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.MaterialTheme
 import com.wire.android.ui.common.scaffold.WireScaffold
@@ -177,7 +176,7 @@ private fun EmailContent(
                 state = if (state.error is CreateAccountEmailViewState.EmailError.None) WireTextFieldState.Default
                 else WireTextFieldState.Error(),
                 keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email, imeAction = ImeAction.Done),
-                keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
+                onKeyboardAction = { keyboardController?.hide() },
                 modifier = Modifier
                     .padding(horizontal = MaterialTheme.wireDimensions.spacing16x)
                     .testTag("emailField")

app/src/main/kotlin/com/wire/android/ui/authentication/create/username/CreateAccountUsernameScreen.kt

@@ -23,15 +23,13 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.input.TextFieldState
 import androidx.compose.material3.MaterialTheme
-import com.wire.android.ui.common.scaffold.WireScaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.input.TextFieldValue
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.ramcosta.composedestinations.annotation.Destination
@@ -43,10 +41,13 @@ import com.wire.android.navigation.Navigator
 import com.wire.android.ui.authentication.create.common.handle.UsernameTextField
 import com.wire.android.ui.common.button.WireButtonState
 import com.wire.android.ui.common.button.WirePrimaryButton
+import com.wire.android.ui.common.scaffold.WireScaffold
 import com.wire.android.ui.common.topappbar.WireCenterAlignedTopAppBar
 import com.wire.android.ui.destinations.InitialSyncScreenDestination
+import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireDimensions
 import com.wire.android.ui.theme.wireTypography
+import com.wire.android.util.ui.PreviewMultipleThemes
 
 @RootNavGraph
 @Destination
@@ -56,25 +57,23 @@ fun CreateAccountUsernameScreen(
     viewModel: CreateAccountUsernameViewModel = hiltViewModel()
 ) {
     UsernameContent(
+        textState = viewModel.textState,
         state = viewModel.state,
-        onUsernameChange = viewModel::onUsernameChange,
         onContinuePressed = {
             viewModel.onContinue {
                 navigator.navigate(NavigationCommand(InitialSyncScreenDestination, BackStackMode.CLEAR_WHOLE))
             }
         },
         onErrorDismiss = viewModel::onErrorDismiss,
-        onUsernameErrorAnimated = viewModel::onUsernameErrorAnimated
     )
 }
 
 @Composable
 private fun UsernameContent(
+    textState: TextFieldState,
     state: CreateAccountUsernameViewState,
-    onUsernameChange: (TextFieldValue) -> Unit,
     onContinuePressed: () -> Unit,
     onErrorDismiss: () -> Unit,
-    onUsernameErrorAnimated: () -> Unit
 ) {
     WireScaffold(
         topBar = {
@@ -102,11 +101,8 @@ private fun UsernameContent(
             )
 
             UsernameTextField(
-                username = state.username,
+                username = textState,
                 errorState = state.error,
-                animateUsernameError = state.animateUsernameError,
-                onUsernameChange = onUsernameChange,
-                onUsernameErrorAnimated = onUsernameErrorAnimated,
                 onErrorDismiss = onErrorDismiss,
             )
 
@@ -126,7 +122,7 @@ private fun UsernameContent(
 }
 
 @Composable
-@Preview
-private fun PreviewCreateAccountUsernameScreen() {
-    UsernameContent(CreateAccountUsernameViewState(), {}, {}, {}, {})
+@PreviewMultipleThemes
+private fun PreviewCreateAccountUsernameScreen() = WireTheme {
+    UsernameContent(TextFieldState(), CreateAccountUsernameViewState(), {}, {})
 }

app/src/main/kotlin/com/wire/android/ui/authentication/create/username/CreateAccountUsernameViewModel.kt

@@ -18,18 +18,21 @@
 
 package com.wire.android.ui.authentication.create.username
 
+import androidx.compose.foundation.text.input.TextFieldState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.text.input.TextFieldValue
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.wire.android.ui.authentication.create.common.handle.HandleUpdateErrorState
+import com.wire.android.ui.common.textfield.textAsFlow
 import com.wire.kalium.logic.feature.auth.ValidateUserHandleResult
 import com.wire.kalium.logic.feature.auth.ValidateUserHandleUseCase
 import com.wire.kalium.logic.feature.user.SetUserHandleResult
 import com.wire.kalium.logic.feature.user.SetUserHandleUseCase
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.flow.dropWhile
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
@@ -38,40 +41,30 @@ class CreateAccountUsernameViewModel @Inject constructor(
     private val validateUserHandleUseCase: ValidateUserHandleUseCase,
     private val setUserHandleUseCase: SetUserHandleUseCase
 ) : ViewModel() {
-    var state: CreateAccountUsernameViewState by mutableStateOf(CreateAccountUsernameViewState())
-        private set
-
-    fun onUsernameChange(newText: TextFieldValue) {
-        state = validateUserHandleUseCase(newText.text).let { textState ->
-            when (textState) {
-                is ValidateUserHandleResult.Valid -> state.copy(
-                    username = newText.copy(text = textState.handle),
-                    error = HandleUpdateErrorState.None,
-                    continueEnabled = !state.loading,
-                    animateUsernameError = false
-                )
 
-                is ValidateUserHandleResult.Invalid.InvalidCharacters -> state.copy(
-                    username = newText.copy(text = textState.handle),
-                    error = HandleUpdateErrorState.None,
-                    continueEnabled = !state.loading,
-                    animateUsernameError = true
-                )
+    val textState: TextFieldState = TextFieldState()
+    var state: CreateAccountUsernameViewState by mutableStateOf(CreateAccountUsernameViewState(continueEnabled = false))
+        private set
 
-                is ValidateUserHandleResult.Invalid.TooLong -> state.copy(
-                    username = newText.copy(text = textState.handle),
-                    error = HandleUpdateErrorState.None,
-                    continueEnabled = false,
-                    animateUsernameError = false
-                )
+    init {
+        viewModelScope.launch {
+            textState.textAsFlow()
+                .dropWhile { it.isEmpty() } // ignore first empty value to not show the error before the user typed anything
+                .collectLatest { newHandle ->
+                    validateUserHandleUseCase(newHandle.toString()).let { validateResult ->
+                        state = when (validateResult) {
+                            is ValidateUserHandleResult.Valid -> state.copy(
+                                error = HandleUpdateErrorState.None,
+                                continueEnabled = !state.loading,
+                            )
 
-                is ValidateUserHandleResult.Invalid.TooShort -> state.copy(
-                    username = newText.copy(text = textState.handle),
-                    error = HandleUpdateErrorState.None,
-                    continueEnabled = false,
-                    animateUsernameError = false
-                )
-            }
+                            is ValidateUserHandleResult.Invalid -> state.copy(
+                                error = HandleUpdateErrorState.TextFieldError.UsernameInvalidError,
+                                continueEnabled = false,
+                            )
+                        }
+                    }
+                }
         }
     }
 
@@ -82,31 +75,16 @@ class CreateAccountUsernameViewModel @Inject constructor(
     fun onContinue(onSuccess: () -> Unit) {
         state = state.copy(loading = true, continueEnabled = false)
         viewModelScope.launch {
-            // FIXME: no need to check the handle again since it's checked every time the text change
-            val usernameError = if (validateUserHandleUseCase(state.username.text.trim()) is ValidateUserHandleResult.Invalid) {
-                HandleUpdateErrorState.TextFieldError.UsernameInvalidError
-            } else {
-                when (val result = setUserHandleUseCase(state.username.text.trim())) {
-                    is SetUserHandleResult.Failure.Generic ->
-                        HandleUpdateErrorState.DialogError.GenericError(result.error)
-
-                    SetUserHandleResult.Failure.HandleExists ->
-                        HandleUpdateErrorState.TextFieldError.UsernameTakenError
-
-                    SetUserHandleResult.Failure.InvalidHandle ->
-                        HandleUpdateErrorState.TextFieldError.UsernameInvalidError
-
-                    SetUserHandleResult.Success -> HandleUpdateErrorState.None
-                }
+            val usernameError = when (val result = setUserHandleUseCase(textState.text.toString().trim())) {
+                is SetUserHandleResult.Failure.Generic -> HandleUpdateErrorState.DialogError.GenericError(result.error)
+                SetUserHandleResult.Failure.HandleExists -> HandleUpdateErrorState.TextFieldError.UsernameTakenError
+                SetUserHandleResult.Failure.InvalidHandle -> HandleUpdateErrorState.TextFieldError.UsernameInvalidError
+                SetUserHandleResult.Success -> HandleUpdateErrorState.None
             }
             state = state.copy(loading = false, continueEnabled = true, error = usernameError)
             if (usernameError is HandleUpdateErrorState.None) {
                 onSuccess()
             }
         }
     }
-
-    fun onUsernameErrorAnimated() {
-        state = state.copy(animateUsernameError = false)
-    }
 }

app/src/main/kotlin/com/wire/android/ui/authentication/create/username/CreateAccountUsernameViewState.kt

@@ -18,12 +18,9 @@
 
 package com.wire.android.ui.authentication.create.username
 
-import androidx.compose.ui.text.input.TextFieldValue
 import com.wire.android.ui.authentication.create.common.handle.HandleUpdateErrorState
 
 data class CreateAccountUsernameViewState(
-    val username: TextFieldValue = TextFieldValue(""),
-    val animateUsernameError: Boolean = false,
     val continueEnabled: Boolean = false,
     val loading: Boolean = false,
     val error: HandleUpdateErrorState = HandleUpdateErrorState.None

app/src/main/kotlin/com/wire/android/ui/common/ShakeAnimation.kt

@@ -21,34 +21,31 @@ package com.wire.android.ui.common
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.keyframes
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.offset
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 
 @Composable
-fun ShakeAnimation(offset: Dp = 8.dp, duration: Int = 160, animateContent: @Composable (() -> Unit) -> Unit) {
+fun ShakeAnimation(offset: Dp = dimensions().spacing12x, duration: Int = 160, animateContent: @Composable (() -> Unit) -> Unit) {
     val offsetX = remember { Animatable(0f) }
     val coroutineScope = rememberCoroutineScope()
     val animate: () -> Unit = {
         coroutineScope.launch {
-            launch {
-                repeat(3) {
-                    offsetX.animateTo(
-                        targetValue = 0f, // return to the starting position
-                        animationSpec = keyframes {
-                            durationMillis = duration
-                            offset.value at duration / 4        // max right offset after 25% of animation time
-                            -offset.value at duration * 3 / 4   // max left offset after 75% of animation time
-                        }
-                    )
+            offsetX.animateTo(
+                targetValue = 0f, // return to the starting position
+                animationSpec = keyframes {
+                    durationMillis = duration
+                    offset.value at duration * 1 / 8  // max right offset after 12.5% of animation time
+                    -offset.value at duration * 3 / 8 // max left offset after 37.5% of animation time (passes 0 at 25% of animation time)
+                    offset.value at duration * 5 / 8  // max right offset after 62.5% of animation time (passes 0 at 50% of animation time)
+                    -offset.value at duration * 7 / 8 // max left offset after 87.5% of animation time (passes 0 at 75% of animation time)
                 }
-            }
+            )
         }
     }
-    Box(modifier = Modifier.offset(x = offsetX.value.dp)) { animateContent(animate) }
+    Box(modifier = Modifier.graphicsLayer { translationX = offsetX.value }) { animateContent(animate) }
 }

app/src/main/kotlin/com/wire/android/ui/common/groupname/GroupConversationNameComponent.kt

@@ -26,7 +26,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
@@ -114,7 +113,7 @@ fun GroupNameScreen(
                                 labelText = stringResource(R.string.group_name_title).uppercase(),
                                 state = computeGroupMetadataState(error),
                                 keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Done),
-                                keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
+                                onKeyboardAction = { keyboardController?.hide() },
                                 modifier = Modifier.padding(horizontal = MaterialTheme.wireDimensions.spacing16x)
                             )
                         }