-
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.
- Loading branch information
Siddharth Agarwal
committed
Oct 10, 2023
1 parent
b32d251
commit eea9884
Showing
5 changed files
with
388 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
102 changes: 102 additions & 0 deletions
102
common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputDropDownScreen.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,102 @@ | ||
| package org.hisp.dhis.common.screens | ||
|
|
||
| import androidx.compose.foundation.layout.Spacer | ||
| import androidx.compose.foundation.layout.size | ||
| import androidx.compose.material3.DropdownMenu | ||
| import androidx.compose.material3.DropdownMenuItem | ||
| import androidx.compose.material3.Text | ||
| 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.InputDropDown | ||
| 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.Title | ||
| import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing | ||
| import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor | ||
|
|
||
| @Composable | ||
| fun InputDropDownScreen() { | ||
| ColumnComponentContainer { | ||
| val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6", "Option 7") | ||
| var expanded by rememberSaveable { mutableStateOf(false) } | ||
|
|
||
| Title("Input Dropdown", textColor = TextColor.OnSurfaceVariant) | ||
|
|
||
| SubTitle("Basic Input Dropdown ", textColor = TextColor.OnSurfaceVariant) | ||
| var selectedItem by rememberSaveable { mutableStateOf<String?>(null) } | ||
| InputDropDown( | ||
| title = "Label", | ||
| state = InputShellState.UNFOCUSED, | ||
| selectedItem = selectedItem, | ||
| onResetButtonClicked = { | ||
| selectedItem = null | ||
| }, | ||
| onArrowDropDownButtonClicked = { | ||
| expanded = !expanded | ||
| }, | ||
| ) | ||
| DropdownMenu( | ||
| expanded = expanded, | ||
| onDismissRequest = { expanded = false }, | ||
| ) { | ||
| options.forEach { | ||
| DropdownMenuItem( | ||
| text = { Text(it) }, | ||
| onClick = { | ||
| selectedItem = it | ||
| expanded = false | ||
| }, | ||
| ) | ||
| } | ||
| } | ||
| Spacer(Modifier.size(Spacing.Spacing18)) | ||
|
|
||
| SubTitle("Basic Input Dropdown with content ", textColor = TextColor.OnSurfaceVariant) | ||
| var selectedItem1 by rememberSaveable { mutableStateOf<String?>(options[0]) } | ||
| InputDropDown( | ||
| title = "Label", | ||
| state = InputShellState.UNFOCUSED, | ||
| selectedItem = selectedItem1, | ||
| onResetButtonClicked = { | ||
| selectedItem1 = null | ||
| }, | ||
| onArrowDropDownButtonClicked = { | ||
| }, | ||
| ) | ||
| Spacer(Modifier.size(Spacing.Spacing18)) | ||
|
|
||
| SubTitle("Error Input Dropdown ", textColor = TextColor.OnSurfaceVariant) | ||
| var selectedItem2 by rememberSaveable { mutableStateOf<String?>(null) } | ||
| InputDropDown( | ||
| title = "Label", | ||
| state = InputShellState.ERROR, | ||
| selectedItem = selectedItem2, | ||
| onResetButtonClicked = { | ||
| selectedItem2 = null | ||
| }, | ||
| onArrowDropDownButtonClicked = { | ||
| }, | ||
| ) | ||
| Spacer(Modifier.size(Spacing.Spacing18)) | ||
|
|
||
| SubTitle("Disabled Input Dropdown with content ", textColor = TextColor.OnSurfaceVariant) | ||
| var selectedItem3 by rememberSaveable { mutableStateOf<String?>(options[1]) } | ||
| InputDropDown( | ||
| title = "Label", | ||
| state = InputShellState.DISABLED, | ||
| selectedItem = selectedItem3, | ||
| onResetButtonClicked = { | ||
| selectedItem3 = null | ||
| }, | ||
| onArrowDropDownButtonClicked = { | ||
| expanded = !expanded | ||
| }, | ||
| ) | ||
| Spacer(Modifier.size(Spacing.Spacing18)) | ||
| } | ||
| } |
121 changes: 121 additions & 0 deletions
121
...tem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.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,121 @@ | ||
| package org.hisp.dhis.mobile.ui.designsystem.component | ||
|
|
||
| import androidx.compose.material.icons.Icons | ||
| import androidx.compose.material.icons.outlined.ArrowDropDown | ||
| import androidx.compose.material.icons.outlined.Cancel | ||
| import androidx.compose.material3.Icon | ||
| import androidx.compose.material3.MaterialTheme | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.remember | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.focus.FocusRequester | ||
| import androidx.compose.ui.focus.focusRequester | ||
| import androidx.compose.ui.focus.onFocusChanged | ||
| import androidx.compose.ui.platform.testTag | ||
| import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor | ||
|
|
||
| /** | ||
| * DHIS2 Input dropdown. Wraps DHIS · [InputShell]. | ||
| * @param title controls the text to be shown for the title | ||
| * @param state Manages the InputShell state | ||
| * @param selectedItem manages the value of the selected item | ||
| * @param supportingTextData is a list of SupportingTextData that | ||
| * manages all the messages to be shown | ||
| * @param legendData manages the legendComponent | ||
| * @param isRequiredField controls whether the field is mandatory or not | ||
| * @param onFocusChanged gives access to the onFocusChanged returns true if | ||
| * item is focused | ||
| * @param modifier allows a modifier to be passed externally | ||
| * @param onResetButtonClicked callback to when reset button is clicked | ||
| * @param onArrowDropDownButtonClicked callback to when arrow drop down button is clicked | ||
| */ | ||
| @Composable | ||
| fun InputDropDown( | ||
| title: String, | ||
| state: InputShellState, | ||
| selectedItem: String? = null, | ||
| supportingTextData: List<SupportingTextData>? = null, | ||
| legendData: LegendData? = null, | ||
| isRequiredField: Boolean = false, | ||
| modifier: Modifier = Modifier, | ||
| onFocusChanged: ((Boolean) -> Unit)? = null, | ||
| onResetButtonClicked: () -> Unit, | ||
| onArrowDropDownButtonClicked: () -> Unit, | ||
| ) { | ||
| val focusRequester = remember { FocusRequester() } | ||
| InputShell( | ||
| modifier = modifier | ||
| .testTag("INPUT_DROPDOWN") | ||
| .focusRequester(focusRequester), | ||
| title = title, | ||
| state = state, | ||
| isRequiredField = isRequiredField, | ||
| onFocusChanged = onFocusChanged, | ||
| supportingText = { | ||
| supportingTextData?.forEach { label -> | ||
| SupportingText( | ||
| label.text, | ||
| label.state, | ||
| modifier = modifier.testTag("INPUT_DROPDOWN_SUPPORTING_TEXT"), | ||
| ) | ||
| } | ||
| }, | ||
| legend = { | ||
| legendData?.let { | ||
| Legend(legendData, modifier.testTag("INPUT_DROPDOWN_LEGEND")) | ||
| } | ||
| }, | ||
| inputField = { | ||
| Text( | ||
| modifier = Modifier.testTag("INPUT_DROPDOWN_TEXT"), | ||
| text = selectedItem ?: "", | ||
| style = MaterialTheme.typography.bodyLarge.copy( | ||
| color = if (state != InputShellState.DISABLED) { | ||
| TextColor.OnSurface | ||
| } else { | ||
| TextColor.OnDisabledSurface | ||
| }, | ||
| ), | ||
| ) | ||
| }, | ||
| primaryButton = { | ||
| IconButton( | ||
| modifier = Modifier.testTag("INPUT_DROPDOWN_ARROW_BUTTON").onFocusChanged { | ||
| onFocusChanged?.invoke(it.isFocused) | ||
| }, | ||
| enabled = state != InputShellState.DISABLED, | ||
| icon = { | ||
| Icon( | ||
| imageVector = Icons.Outlined.ArrowDropDown, | ||
| contentDescription = "Dropdown Button", | ||
| ) | ||
| }, | ||
| onClick = { | ||
| focusRequester.requestFocus() | ||
| onArrowDropDownButtonClicked.invoke() | ||
| }, | ||
| ) | ||
| }, | ||
| secondaryButton = | ||
| if (!selectedItem.isNullOrEmpty() && state != InputShellState.DISABLED) { | ||
| { | ||
| IconButton( | ||
| modifier = Modifier.testTag("INPUT_DROPDOWN_RESET_BUTTON"), | ||
| icon = { | ||
| Icon( | ||
| imageVector = Icons.Outlined.Cancel, | ||
| contentDescription = "Reset Button", | ||
| ) | ||
| }, | ||
| onClick = { | ||
| focusRequester.requestFocus() | ||
| onResetButtonClicked.invoke() | ||
| }, | ||
| ) | ||
| } | ||
| } else { | ||
| null | ||
| }, | ||
| ) | ||
| } |
Oops, something went wrong.