Skip to content

Commit

Permalink
fix: [ANDROAPP-5900] set initial composition to 0, manage textfieldVa…
Browse files Browse the repository at this point in the history 
…lue correctly on value change (#186)

* bug: [ANDROAPP-5900] set initial composition to 0, manage textfieldValue correctly on value change

* fix: [ANDROAPP-5900] extract rememberable variable to avoid unnecessary recompositions and use TextFieldValue for Inputs to maintain cursor, selection and composition control.

* fix: [ANDROAPP-5900] amend build gradle changes

* bug: [ANDROAPP-5900] set initial composition to 0, manage textfieldValue correctly on value change

* fix: [ANDROAPP-5900] extract rememberable variable to avoid unnecessary recompositions and use TextFieldValue for Inputs to maintain cursor, selection and composition control.

* fix: [ANDROAPP-5900] amend build gradle changes

* fix: [ANDROAPP-5900] allow null values and correct Input Negative Integer
  • Loading branch information
@xavimolloy
xavimolloy authored Feb 6, 2024
1 parent db6b670 commit 6b4b9ba
Show file tree
Hide file tree
Showing 55 changed files with 578 additions and 565 deletions.
65 changes: 33 additions & 32 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/FormShellsScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import org.hisp.dhis.common.screens.previews.lorem
import org.hisp.dhis.common.screens.previews.regularLegendList
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
Expand All @@ -28,11 +29,11 @@ fun FormShellsScreen() {
ColumnComponentContainer(title = "Form Shells") {
SubTitle("Outer frames for form elements", TextColor.OnSurface)
Description("Focused/Unfocused", TextColor.OnSurface)
var inputValue1 by rememberSaveable { mutableStateOf("Input") }
var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }

InputText(
"Label",
inputText = inputValue1,
inputTextFieldValue = inputValue1,
onValueChanged = {
if (it != null) {
inputValue1 = it
Expand All @@ -44,10 +45,10 @@ fun FormShellsScreen() {

Description("Focused/Unfocused with content", TextColor.OnSurface)

var inputValue2 by rememberSaveable { mutableStateOf("Input") }
var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
InputText(
"Label",
inputText = inputValue2,
inputTextFieldValue = inputValue2,
onValueChanged = {
if (it != null) {
inputValue2 = it
Expand All @@ -58,11 +59,11 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Error", TextColor.OnSurface)
var inputValue3 by rememberSaveable { mutableStateOf("") }
var inputValue3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
InputText(
"Label",
state = InputShellState.ERROR,
inputText = inputValue3,
inputTextFieldValue = inputValue3,
onValueChanged = {
if (it != null) {
inputValue3 = it
Expand All @@ -72,11 +73,11 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Error with content", TextColor.OnSurface)
var inputValue4 by rememberSaveable { mutableStateOf("Input") }
var inputValue4 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }

InputText(
"Label",
inputText = inputValue4,
inputTextFieldValue = inputValue4,
state = InputShellState.ERROR,
onValueChanged = {
if (it != null) {
Expand All @@ -87,11 +88,11 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Disabled", TextColor.OnSurface)
var inputValue5 by rememberSaveable { mutableStateOf("") }
var inputValue5 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
InputText(
"Label",
state = InputShellState.DISABLED,
inputText = inputValue5,
inputTextFieldValue = inputValue5,
onValueChanged = {
if (it != null) {
inputValue5 = it
Expand All @@ -101,10 +102,10 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Disabled with content", TextColor.OnSurface)
var inputValue6 by rememberSaveable { mutableStateOf("Input") }
var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
InputText(
"Label",
inputText = inputValue6,
inputTextFieldValue = inputValue6,
state = InputShellState.DISABLED,
onValueChanged = {
if (it != null) {
Expand All @@ -115,11 +116,11 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Required field", TextColor.OnSurface)
var inputValue7 by rememberSaveable { mutableStateOf("") }
var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
InputText(
"Label",
isRequiredField = true,
inputText = inputValue7,
inputTextFieldValue = inputValue7,
onValueChanged = {
if (it != null) {
inputValue7 = it
Expand All @@ -130,10 +131,10 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Required field with error", TextColor.OnSurface)
var inputValue8 by rememberSaveable { mutableStateOf("Input") }
var inputValue8 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
InputText(
"Label",
inputText = inputValue8,
inputTextFieldValue = inputValue8,
isRequiredField = true,
state = InputShellState.ERROR,
onValueChanged = {
Expand All @@ -146,7 +147,7 @@ fun FormShellsScreen() {

SubTitle("Supporting text", TextColor.OnSurface)
Description("Short text", TextColor.OnSurface)
var inputValue9 by rememberSaveable { mutableStateOf("") }
var inputValue9 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
InputText(
"Label",
supportingText = listOf(
Expand All @@ -155,7 +156,7 @@ fun FormShellsScreen() {
SupportingTextState.DEFAULT,
),
),
inputText = inputValue9,
inputTextFieldValue = inputValue9,
onValueChanged = {
if (it != null) {
inputValue9 = it
Expand All @@ -166,7 +167,7 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Long text", TextColor.OnSurface)
var inputValue10 by rememberSaveable { mutableStateOf("") }
var inputValue10 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
InputText(
"Label",
supportingText = listOf(
Expand All @@ -175,7 +176,7 @@ fun FormShellsScreen() {
SupportingTextState.DEFAULT,
),
),
inputText = inputValue10,
inputTextFieldValue = inputValue10,
onValueChanged = {
if (it != null) {
inputValue10 = it
Expand All @@ -187,10 +188,10 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Error", TextColor.OnSurface)
var inputValue11 by rememberSaveable { mutableStateOf("Input") }
var inputValue11 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
InputText(
"Label",
inputText = inputValue11,
inputTextFieldValue = inputValue11,
supportingText = listOf(
SupportingTextData(
"Supporting Text",
Expand All @@ -207,10 +208,10 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Warning", TextColor.OnSurface)
var inputValue12 by rememberSaveable { mutableStateOf("Input") }
var inputValue12 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
InputText(
"Label",
inputText = inputValue12,
inputTextFieldValue = inputValue12,
supportingText = listOf(
SupportingTextData(
"Supporting Text",
Expand All @@ -227,10 +228,10 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Error and Warning", TextColor.OnSurface)
var inputValue13 by rememberSaveable { mutableStateOf("Input") }
var inputValue13 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
InputText(
"Label",
inputText = inputValue13,
inputTextFieldValue = inputValue13,
supportingText = listOf(
SupportingTextData(
lorem,
Expand All @@ -257,11 +258,11 @@ fun FormShellsScreen() {
SubTitle("Form with legend", TextColor.OnSurface)

Description("Just legend", TextColor.OnSurface)
var inputValue14 by rememberSaveable { mutableStateOf("Input") }
var inputValue14 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }

InputText(
"Label",
inputText = inputValue14,
inputTextFieldValue = inputValue14,
legendData = LegendData(SurfaceColor.CustomGreen, "Legend", popUpLegendDescriptionData = regularLegendList),
onValueChanged = {
if (it != null) {
Expand All @@ -271,10 +272,10 @@ fun FormShellsScreen() {
state = InputShellState.UNFOCUSED,
)

var inputValue15 by rememberSaveable { mutableStateOf("Input") }
var inputValue15 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
InputText(
"Label",
inputText = inputValue15,
inputTextFieldValue = inputValue15,
legendData = LegendData(SurfaceColor.CustomYellow, "Legend", popUpLegendDescriptionData = regularLegendList),
onValueChanged = {
if (it != null) {
Expand All @@ -286,10 +287,10 @@ fun FormShellsScreen() {
Spacer(Modifier.size(Spacing.Spacing18))

Description("Legend and supporting text", TextColor.OnSurface)
var inputValue16 by rememberSaveable { mutableStateOf("Input") }
var inputValue16 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
InputText(
"Label",
inputText = inputValue16,
inputTextFieldValue = inputValue16,
legendData = LegendData(SurfaceColor.CustomYellow, "Legend", popUpLegendDescriptionData = regularLegendList),
supportingText = listOf(
SupportingTextData(
Expand Down
5 changes: 3 additions & 2 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/FormsComponentsScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.TextFieldValue
import org.hisp.dhis.common.screens.previews.InputShellPreview
import org.hisp.dhis.mobile.ui.designsystem.component.BasicTextField
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
Expand Down Expand Up @@ -46,11 +47,11 @@ fun FormsComponentsScreen() {
inputField = {
BasicTextField(
helper = "Helper",
inputText = inputField,
inputTextValue = TextFieldValue(inputField),
enabled = true,
helperStyle = InputStyle.WITH_HELPER_BEFORE,
onInputChanged = {
inputField = it
inputField = it.text
},
)
},
Expand Down
35 changes: 14 additions & 21 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputBarCodeScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.input.TextFieldValue
import org.hisp.dhis.common.screens.previews.threeButtonCarousel
import org.hisp.dhis.mobile.ui.designsystem.component.BarcodeBlock
import org.hisp.dhis.mobile.ui.designsystem.component.BottomSheetShell
Expand All @@ -32,7 +33,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
@Composable
fun InputBarCodeScreen() {
ColumnComponentContainer {
var inputValue1 by rememberSaveable { mutableStateOf("889026a1-d01e-4d34-8209-81e8ed5c614b") }
var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) }
var showEnabledBarCodeBottomSheet by rememberSaveable { mutableStateOf(false) }

Description("Default Input Barcode", textColor = TextColor.OnSurfaceVariant)
Expand All @@ -42,11 +43,9 @@ fun InputBarCodeScreen() {
onActionButtonClicked = {
showEnabledBarCodeBottomSheet = !showEnabledBarCodeBottomSheet
},
inputText = inputValue1,
inputTextFieldValue = inputValue1,
onValueChanged = {
if (it != null) {
inputValue1 = it
}
inputValue1 = it ?: TextFieldValue()
},
)

Expand All @@ -63,7 +62,7 @@ fun InputBarCodeScreen() {
},
content = {
Row(horizontalArrangement = Arrangement.Center) {
BarcodeBlock(data = inputValue1)
BarcodeBlock(data = inputValue1.text)
}
},
buttonBlock = {
Expand All @@ -77,52 +76,46 @@ fun InputBarCodeScreen() {
}
Spacer(Modifier.size(Spacing.Spacing18))

var inputValue2 by rememberSaveable { mutableStateOf("") }
var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
Description("Required field Input Barcode", textColor = TextColor.OnSurfaceVariant)
InputBarCode(
"label",
state = InputShellState.ERROR,
onActionButtonClicked = {
},
inputText = inputValue2,
inputTextFieldValue = inputValue2,
onValueChanged = {
if (it != null) {
inputValue2 = it
}
inputValue2 = it ?: TextFieldValue()
},
isRequiredField = true,
supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)),
)

Spacer(Modifier.size(Spacing.Spacing18))
var inputValue by rememberSaveable { mutableStateOf("") }
var inputValue by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
Description("Disabled Input Barcode", textColor = TextColor.OnSurfaceVariant)
InputBarCode(
"label",
state = InputShellState.DISABLED,
onActionButtonClicked = {
},
inputText = inputValue,
inputTextFieldValue = inputValue,
onValueChanged = {
if (it != null) {
inputValue = it
}
inputValue = it ?: TextFieldValue()
},
)

Spacer(Modifier.size(Spacing.Spacing18))
var inputValue3 by rememberSaveable { mutableStateOf("889026a1-d01e-4d34-8209-81e8ed5c614b") }
var inputValue3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) }
Description("Disabled Input Barcode with content", textColor = TextColor.OnSurfaceVariant)
InputBarCode(
"label",
state = InputShellState.DISABLED,
onActionButtonClicked = {
},
inputText = inputValue3,
inputTextFieldValue = inputValue3,
onValueChanged = {
if (it != null) {
inputValue3 = it
}
inputValue3 = it ?: TextFieldValue()
},
)
}
Expand Down
Loading

0 comments on commit 6b4b9ba

Please sign in to comment.