-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ANDROAPP-5571-mobile-ui-Create-InputEmail-component
Co-authored-by: Siddharth Agarwal <[email protected]>
- Loading branch information
Showing
6 changed files
with
416 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
105 changes: 105 additions & 0 deletions
105
common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputEmailScreen.kt
This file contains 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,105 @@ | ||
| package org.hisp.dhis.common.screens | ||
|
|
||
| import androidx.compose.foundation.layout.Spacer | ||
| import androidx.compose.foundation.layout.size | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.getValue | ||
| import androidx.compose.runtime.mutableStateOf | ||
| import androidx.compose.runtime.saveable.rememberSaveable | ||
| import androidx.compose.runtime.setValue | ||
| import androidx.compose.ui.Modifier | ||
| import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer | ||
| import org.hisp.dhis.mobile.ui.designsystem.component.InputEmail | ||
| import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState | ||
| import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle | ||
| import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData | ||
| import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState | ||
| import org.hisp.dhis.mobile.ui.designsystem.component.Title | ||
| import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing | ||
| import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor | ||
|
|
||
| @Composable | ||
| fun InputEmailScreen() { | ||
| ColumnComponentContainer { | ||
| Title("Input Email component", textColor = TextColor.OnSurfaceVariant) | ||
| SubTitle("Basic Email ", textColor = TextColor.OnSurfaceVariant) | ||
| var inputText1 by rememberSaveable { mutableStateOf("") } | ||
|
|
||
| InputEmail( | ||
| title = "Label", | ||
| supportingText = listOf(SupportingTextData("Example: [email protected]")), | ||
| inputText = inputText1, | ||
| onValueChanged = { | ||
| if (it != null) { | ||
| inputText1 = it | ||
| } | ||
| }, | ||
| onEmailActionCLicked = {}, | ||
| ) | ||
| Spacer(Modifier.size(Spacing.Spacing18)) | ||
|
|
||
| SubTitle("Basic Email with content ", textColor = TextColor.OnSurfaceVariant) | ||
| var inputText2 by rememberSaveable { mutableStateOf("[email protected]") } | ||
|
|
||
| InputEmail( | ||
| title = "Label", | ||
| supportingText = listOf(SupportingTextData("Example: [email protected]")), | ||
| inputText = inputText2, | ||
| onValueChanged = { | ||
| if (it != null) { | ||
| inputText2 = it | ||
| } | ||
| }, | ||
| onEmailActionCLicked = {}, | ||
| ) | ||
| Spacer(Modifier.size(Spacing.Spacing18)) | ||
|
|
||
| SubTitle("Error Email with content ", textColor = TextColor.OnSurfaceVariant) | ||
| var inputText3 by rememberSaveable { mutableStateOf("[email protected]") } | ||
|
|
||
| InputEmail( | ||
| title = "Label", | ||
| state = InputShellState.ERROR, | ||
| supportingText = listOf(SupportingTextData("Enter a valid email address", SupportingTextState.ERROR)), | ||
| inputText = inputText3, | ||
| onValueChanged = { | ||
| if (it != null) { | ||
| inputText3 = it | ||
| } | ||
| }, | ||
| onEmailActionCLicked = {}, | ||
| ) | ||
| Spacer(Modifier.size(Spacing.Spacing18)) | ||
|
|
||
| SubTitle("Error Email required field ", textColor = TextColor.OnSurfaceVariant) | ||
| var inputText4 by rememberSaveable { mutableStateOf("") } | ||
| InputEmail( | ||
| title = "Label", | ||
| state = InputShellState.ERROR, | ||
| supportingText = listOf(SupportingTextData("Enter email address", SupportingTextState.ERROR)), | ||
| inputText = inputText4, | ||
| isRequiredField = true, | ||
| onValueChanged = { | ||
| if (it != null) { | ||
| inputText4 = it | ||
| } | ||
| }, | ||
| onEmailActionCLicked = {}, | ||
| ) | ||
| Spacer(Modifier.size(Spacing.Spacing18)) | ||
|
|
||
| SubTitle("Disabled Email with content ", textColor = TextColor.OnSurfaceVariant) | ||
| var inputText5 by rememberSaveable { mutableStateOf("[email protected]") } | ||
| InputEmail( | ||
| title = "Label", | ||
| state = InputShellState.DISABLED, | ||
| inputText = inputText5, | ||
| onValueChanged = { | ||
| if (it != null) { | ||
| inputText5 = it | ||
| } | ||
| }, | ||
| onEmailActionCLicked = {}, | ||
| ) | ||
| } | ||
| } |
77 changes: 77 additions & 0 deletions
77
...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputEmail.kt
This file contains 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,77 @@ | ||
| package org.hisp.dhis.mobile.ui.designsystem.component | ||
|
|
||
| import androidx.compose.foundation.text.KeyboardOptions | ||
| import androidx.compose.material.icons.Icons | ||
| import androidx.compose.material.icons.outlined.Email | ||
| import androidx.compose.material3.Icon | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.platform.testTag | ||
| import androidx.compose.ui.text.input.ImeAction | ||
| import androidx.compose.ui.text.input.KeyboardType | ||
| import org.hisp.dhis.mobile.ui.designsystem.component.internal.RegExValidations | ||
|
|
||
| /** | ||
| * DHIS2 Input email. Wraps DHIS · [BasicTextInput]. | ||
| * @param title controls the text to be shown for the title | ||
| * @param state Manages the InputShell state | ||
| * @param supportingText is a list of SupportingTextData that | ||
| * manages all the messages to be shown | ||
| * @param legendData manages the legendComponent | ||
| * @param inputText manages the value of the text in the input field | ||
| * @param isRequiredField controls whether the field is mandatory or not | ||
| * @param onNextClicked gives access to the imeAction event | ||
| * @param onValueChanged gives access to the onValueChanged event | ||
| * @param onFocusChanged gives access to the onFocusChanged returns true if | ||
| * item is focused | ||
| * @param imeAction controls the imeAction button to be shown | ||
| * @param modifier allows a modifier to be passed externally | ||
| * @param onEmailActionCLicked callback to when email button is clicked | ||
| */ | ||
| @Composable | ||
| fun InputEmail( | ||
| title: String, | ||
| state: InputShellState = InputShellState.UNFOCUSED, | ||
| supportingText: List<SupportingTextData>? = null, | ||
| legendData: LegendData? = null, | ||
| inputText: String? = null, | ||
| isRequiredField: Boolean = false, | ||
| onNextClicked: (() -> Unit)? = null, | ||
| onValueChanged: ((String?) -> Unit)? = null, | ||
| onFocusChanged: ((Boolean) -> Unit)? = null, | ||
| imeAction: ImeAction = ImeAction.Next, | ||
| modifier: Modifier = Modifier, | ||
| onEmailActionCLicked: () -> Unit, | ||
| ) { | ||
| val isValidEmailAddress = RegExValidations.EMAIL.regex.matches(inputText.orEmpty()) | ||
| BasicTextInput( | ||
| title = title, | ||
| state = state, | ||
| supportingText = supportingText, | ||
| legendData = legendData, | ||
| inputText = inputText, | ||
| isRequiredField = isRequiredField, | ||
| onNextClicked = onNextClicked, | ||
| onValueChanged = onValueChanged, | ||
| keyboardOptions = KeyboardOptions( | ||
| imeAction = imeAction, | ||
| keyboardType = KeyboardType.Email, | ||
| ), | ||
| modifier = modifier, | ||
| testTag = "EMAIL", | ||
| onFocusChanged = onFocusChanged, | ||
| actionButton = { | ||
| SquareIconButton( | ||
| modifier = Modifier.testTag("EMAIL_BUTTON"), | ||
| enabled = isValidEmailAddress, | ||
| icon = { | ||
| Icon( | ||
| imageVector = Icons.Outlined.Email, | ||
| contentDescription = "email_icon", | ||
| ) | ||
| }, | ||
| onClick = onEmailActionCLicked, | ||
| ) | ||
| }, | ||
| ) | ||
| } |
This file contains 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
Oops, something went wrong.