-
Notifications
You must be signed in to change notification settings - Fork 232
Adding TextField migration snippets #522
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
halilozercan
wants to merge
2
commits into
android:main
Choose a base branch
from
halilozercan:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
331 changes: 331 additions & 0 deletions
331
...se/snippets/src/main/java/com/example/compose/snippets/text/TextFieldMigrationSnippets.kt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,331 @@ | ||
package com.example.compose.snippets.text | ||
|
||
import androidx.compose.foundation.layout.Column | ||
import androidx.compose.foundation.text.input.InputTransformation | ||
import androidx.compose.foundation.text.input.OutputTransformation | ||
import androidx.compose.foundation.text.input.delete | ||
import androidx.compose.foundation.text.input.insert | ||
import androidx.compose.foundation.text.input.TextFieldLineLimits | ||
import androidx.compose.foundation.text.input.TextFieldState | ||
import androidx.compose.foundation.text.input.maxLength | ||
import androidx.compose.foundation.text.input.rememberTextFieldState | ||
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd | ||
//noinspection UsingMaterialAndMaterial3Libraries | ||
import androidx.compose.material.SecureTextField | ||
//noinspection UsingMaterialAndMaterial3Libraries | ||
import androidx.compose.material.Text | ||
//noinspection UsingMaterialAndMaterial3Libraries | ||
import androidx.compose.material.TextField | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.runtime.LaunchedEffect | ||
import androidx.compose.runtime.getValue | ||
import androidx.compose.runtime.mutableStateOf | ||
import androidx.compose.runtime.remember | ||
import androidx.compose.runtime.saveable.rememberSaveable | ||
import androidx.compose.runtime.setValue | ||
import androidx.compose.runtime.snapshotFlow | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.text.AnnotatedString | ||
import androidx.compose.ui.text.TextRange | ||
import androidx.compose.ui.text.input.OffsetMapping | ||
import androidx.compose.ui.text.input.PasswordVisualTransformation | ||
import androidx.compose.ui.text.input.TextFieldValue | ||
import androidx.compose.ui.text.input.TransformedText | ||
import androidx.compose.ui.text.input.VisualTransformation | ||
import androidx.compose.ui.text.substring | ||
import androidx.compose.ui.tooling.preview.Preview | ||
import androidx.lifecycle.ViewModel | ||
import androidx.lifecycle.compose.collectAsStateWithLifecycle | ||
import com.example.compose.snippets.touchinput.Button | ||
import kotlinx.coroutines.flow.MutableStateFlow | ||
import kotlinx.coroutines.flow.StateFlow | ||
import kotlinx.coroutines.flow.asStateFlow | ||
import kotlinx.coroutines.flow.collectLatest | ||
import kotlinx.coroutines.flow.update | ||
|
||
// [START android_compose_text_textfield_migration_old_simple] | ||
@Composable | ||
fun OldSimpleTextField() { | ||
var state by rememberSaveable { mutableStateOf("") } | ||
TextField( | ||
value = state, | ||
onValueChange = { state = it }, | ||
singleLine = true, | ||
) | ||
} | ||
// [END android_compose_text_textfield_migration_old_simple] | ||
|
||
// [START android_compose_text_textfield_migration_new_simple] | ||
@Composable | ||
fun NewSimpleTextField() { | ||
TextField( | ||
state = rememberTextFieldState(), | ||
lineLimits = TextFieldLineLimits.SingleLine | ||
) | ||
} | ||
// [END android_compose_text_textfield_migration_new_simple] | ||
|
||
// [START android_compose_text_textfield_migration_old_filtering] | ||
@Composable | ||
fun OldNoLeadingZeroes() { | ||
var input by rememberSaveable { mutableStateOf("") } | ||
TextField( | ||
value = input, | ||
onValueChange = { newText -> | ||
input = newText.trimStart { it == '0' } | ||
} | ||
) | ||
} | ||
// [END android_compose_text_textfield_migration_old_filtering] | ||
|
||
// [START android_compose_text_textfield_migration_new_filtering] | ||
|
||
@Preview | ||
@Composable | ||
fun NewNoLeadingZeros() { | ||
TextField( | ||
state = rememberTextFieldState(), | ||
inputTransformation = InputTransformation { | ||
while (length > 0 && charAt(0) == '0') delete(0, 1) | ||
} | ||
) | ||
} | ||
// [END android_compose_text_textfield_migration_new_filtering] | ||
|
||
// [START android_compose_text_textfield_migration_old_credit_card_formatter] | ||
@Composable | ||
fun OldTextFieldCreditCardFormatter() { | ||
var state by remember { mutableStateOf("") } | ||
TextField( | ||
value = state, | ||
onValueChange = { if(it.length <= 16) state = it }, | ||
visualTransformation = VisualTransformation { text -> | ||
// Making XXXX-XXXX-XXXX-XXXX string. | ||
var out = "" | ||
for (i in text.indices) { | ||
out += text[i] | ||
if (i % 4 == 3 && i != 15) out += "-" | ||
} | ||
|
||
|
||
TransformedText( | ||
text = AnnotatedString(out), | ||
offsetMapping = object : OffsetMapping { | ||
override fun originalToTransformed(offset: Int): Int { | ||
if (offset <= 3) return offset | ||
if (offset <= 7) return offset + 1 | ||
if (offset <= 11) return offset + 2 | ||
if (offset <= 16) return offset + 3 | ||
return 19 | ||
} | ||
|
||
|
||
override fun transformedToOriginal(offset: Int): Int { | ||
if (offset <= 4) return offset | ||
if (offset <= 9) return offset - 1 | ||
if (offset <= 14) return offset - 2 | ||
if (offset <= 19) return offset - 3 | ||
return 16 | ||
} | ||
}) | ||
} | ||
) | ||
} | ||
// [END android_compose_text_textfield_migration_old_credit_card_formatter] | ||
|
||
// [START android_compose_text_textfield_migration_new_credit_card_formatter] | ||
@Composable | ||
fun NewTextFieldCreditCardFormatter() { | ||
val state = rememberTextFieldState() | ||
TextField( | ||
state = state, | ||
inputTransformation = InputTransformation.maxLength(16), | ||
outputTransformation = OutputTransformation { | ||
if (length > 4) insert(4, "-") | ||
if (length > 9) insert(9, "-") | ||
if (length > 14) insert(14, "-") | ||
}, | ||
) | ||
} | ||
// [END android_compose_text_textfield_migration_new_credit_card_formatter] | ||
|
||
private object StateUpdateSimpleSnippet { | ||
object UserRepository { | ||
suspend fun fetchUsername(): String = TODO() | ||
} | ||
// [START android_compose_text_textfield_migration_old_update_state_simple] | ||
@Composable | ||
fun OldTextFieldStateUpdate(userRepository: UserRepository) { | ||
var username by remember { mutableStateOf("") } | ||
LaunchedEffect(Unit) { | ||
username = userRepository.fetchUsername() | ||
} | ||
TextField( | ||
value = username, | ||
onValueChange = { username = it } | ||
) | ||
} | ||
// [END android_compose_text_textfield_migration_old_update_state_simple] | ||
|
||
// [START android_compose_text_textfield_migration_new_update_state_simple] | ||
@Composable | ||
fun NewTextFieldStateUpdate(userRepository: UserRepository) { | ||
val usernameState = rememberTextFieldState() | ||
LaunchedEffect(Unit) { | ||
usernameState.setTextAndPlaceCursorAtEnd(userRepository.fetchUsername()) | ||
} | ||
TextField(state = usernameState) | ||
} | ||
// [END android_compose_text_textfield_migration_new_update_state_simple] | ||
} | ||
|
||
// [START android_compose_text_textfield_migration_old_state_update_complex] | ||
@Composable | ||
fun OldTextFieldAddMarkdownEmphasis() { | ||
var markdownState by remember { mutableStateOf(TextFieldValue()) } | ||
Button(onClick = { | ||
// add ** decorations around the current selection, also preserve the selection | ||
markdownState = with(markdownState) { | ||
copy( | ||
text = buildString { | ||
append(text.take(selection.min)) | ||
append("**") | ||
append(text.substring(selection)) | ||
append("**") | ||
append(text.drop(selection.max)) | ||
}, | ||
selection = TextRange(selection.min + 2, selection.max + 2) | ||
) | ||
} | ||
}) { | ||
Text("Bold") | ||
} | ||
TextField( | ||
value = markdownState, | ||
onValueChange = { markdownState = it }, | ||
maxLines = 10 | ||
) | ||
} | ||
// [END android_compose_text_textfield_migration_old_state_update_complex] | ||
|
||
// [START android_compose_text_textfield_migration_new_state_update_complex] | ||
@Composable | ||
fun NewTextFieldAddMarkdownEmphasis() { | ||
val markdownState = rememberTextFieldState() | ||
LaunchedEffect(Unit) { | ||
// add ** decorations around the current selection | ||
markdownState.edit { | ||
insert(originalSelection.max, "**") | ||
insert(originalSelection.min, "**") | ||
selection = TextRange(originalSelection.min + 2, originalSelection.max + 2) | ||
} | ||
} | ||
TextField( | ||
state = markdownState, | ||
lineLimits = TextFieldLineLimits.MultiLine(1, 10) | ||
) | ||
} | ||
// [END android_compose_text_textfield_migration_new_state_update_complex] | ||
|
||
private object ViewModelMigrationOldSnippet { | ||
// [START android_compose_text_textfield_migration_old_viewmodel] | ||
class LoginViewModel : ViewModel() { | ||
private val _uiState = MutableStateFlow(UiState()) | ||
val uiState: StateFlow<UiState> | ||
get() = _uiState.asStateFlow() | ||
|
||
fun updateUsername(username: String) = _uiState.update { it.copy(username = username) } | ||
|
||
fun updatePassword(password: String) = _uiState.update { it.copy(password = password) } | ||
} | ||
|
||
data class UiState( | ||
val username: String = "", | ||
val password: String = "" | ||
) | ||
|
||
@Composable | ||
fun LoginForm( | ||
loginViewModel: LoginViewModel, | ||
modifier: Modifier = Modifier | ||
) { | ||
val uiState by loginViewModel.uiState.collectAsStateWithLifecycle() | ||
Column(modifier) { | ||
TextField( | ||
value = uiState.username, | ||
onValueChange = { loginViewModel.updateUsername(it) } | ||
) | ||
TextField( | ||
value = uiState.password, | ||
onValueChange = { loginViewModel.updatePassword(it) }, | ||
visualTransformation = PasswordVisualTransformation() | ||
) | ||
} | ||
} | ||
// [END android_compose_text_textfield_migration_old_viewmodel] | ||
} | ||
|
||
private object ViewModelMigrationNewSimpleSnippet { | ||
// [START android_compose_text_textfield_migration_new_viewmodel_simple] | ||
class LoginViewModel : ViewModel() { | ||
val usernameState = TextFieldState() | ||
val passwordState = TextFieldState() | ||
} | ||
|
||
@Composable | ||
fun LoginForm( | ||
loginViewModel: LoginViewModel, | ||
modifier: Modifier = Modifier | ||
) { | ||
Column(modifier) { | ||
TextField(state = loginViewModel.usernameState,) | ||
SecureTextField(state = loginViewModel.passwordState) | ||
} | ||
} | ||
// [END android_compose_text_textfield_migration_new_viewmodel_simple] | ||
} | ||
|
||
private object ViewModelMigrationNewConformingSnippet { | ||
// [START android_compose_text_textfield_migration_new_viewmodel_conforming] | ||
class LoginViewModel : ViewModel() { | ||
private val _uiState = MutableStateFlow(UiState()) | ||
val uiState: StateFlow<UiState> | ||
get() = _uiState.asStateFlow() | ||
|
||
fun updateUsername(username: String) = _uiState.update { it.copy(username = username) } | ||
|
||
fun updatePassword(password: String) = _uiState.update { it.copy(password = password) } | ||
} | ||
|
||
data class UiState( | ||
val username: String = "", | ||
val password: String = "" | ||
) | ||
|
||
@Composable | ||
fun LoginForm( | ||
loginViewModel: LoginViewModel, | ||
modifier: Modifier = Modifier | ||
) { | ||
val initialUiState = remember(loginViewModel) { loginViewModel.uiState.value } | ||
Column(modifier) { | ||
val usernameState = rememberTextFieldState(initialUiState.username) | ||
LaunchedEffect(usernameState) { | ||
snapshotFlow { usernameState.text.toString() }.collectLatest { | ||
loginViewModel.updateUsername(it) | ||
} | ||
} | ||
TextField(usernameState) | ||
|
||
val passwordState = rememberTextFieldState(initialUiState.password) | ||
LaunchedEffect(usernameState) { | ||
snapshotFlow { usernameState.text.toString() }.collectLatest { | ||
loginViewModel.updatePassword(it) | ||
} | ||
} | ||
SecureTextField(passwordState) | ||
} | ||
} | ||
// [END android_compose_text_textfield_migration_new_viewmodel_conforming] | ||
} | ||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unfortunately the latest Material3 stable release does not have the new TextField. It's still in alpha track.