Migrate configure camera widget to compose #6499
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -2,6 +2,7 @@ package io.homeassistant.companion.android.util.compose | |||||
|
|
||||||
| import androidx.annotation.StringRes | ||||||
| import androidx.compose.foundation.layout.fillMaxWidth | ||||||
| import androidx.compose.foundation.text.selection.TextSelectionColors | ||||||
| import androidx.compose.material.DropdownMenuItem | ||||||
| import androidx.compose.material.ExperimentalMaterialApi | ||||||
| import androidx.compose.material.ExposedDropdownMenuBox | ||||||
|
|
@@ -21,6 +22,17 @@ import io.homeassistant.companion.android.common.R as commonR | |||||
| import io.homeassistant.companion.android.database.server.Server | ||||||
| import io.homeassistant.companion.android.database.widget.WidgetBackgroundType | ||||||
| import io.homeassistant.companion.android.widgets.common.WidgetUtils | ||||||
| import androidx.compose.material3.DropdownMenuItem as DropdownMenuItemM3 | ||||||
| import androidx.compose.material3.ExperimentalMaterial3Api | ||||||
| import androidx.compose.material3.ExposedDropdownMenuBox as ExposedDropdownMenuBoxM3 | ||||||
| import androidx.compose.material3.ExposedDropdownMenuDefaults as ExposedDropdownMenuDefaultsM3 | ||||||
| import androidx.compose.material3.MenuAnchorType as MenuAnchorTypeM3 | ||||||
| import androidx.compose.material3.MenuItemColors | ||||||
| import androidx.compose.material3.TextField as TextFieldM3 | ||||||
| import androidx.compose.material3.Text as TextM3 | ||||||
| import androidx.compose.ui.graphics.Color | ||||||
| import io.homeassistant.companion.android.common.compose.composable.HATextField | ||||||
|
Comment on lines
+33
to
+34
There was a problem hiding this comment. These imports appear to be unused (Color, HATextField). Please remove them to keep the file ktlint-clean.
Suggested change
|
||||||
| import io.homeassistant.companion.android.common.compose.theme.LocalHAColorScheme | ||||||
|
|
||||||
| @OptIn(ExperimentalMaterialApi::class) | ||||||
| @Composable | ||||||
|
|
@@ -72,7 +84,7 @@ fun ServerExposedDropdownMenu( | |||||
| val keys = servers.map { it.friendlyName } | ||||||
| val ids = servers.map { it.id } | ||||||
| val currentIndex = servers.indexOfFirst { it.id == current }.takeUnless { it == -1 } | ||||||
| HAExposedDropdownMenu( | ||||||
| label = stringResource(title), | ||||||
| keys = keys, | ||||||
| currentIndex = currentIndex, | ||||||
|
|
@@ -92,11 +104,76 @@ fun WidgetBackgroundTypeExposedDropdownMenu( | |||||
| val keys = remember { WidgetUtils.getBackgroundOptionList(context) } | ||||||
| val currentIndex = | ||||||
| remember(current) { current?.let { WidgetUtils.getSelectedBackgroundOption(context, current, keys) } } | ||||||
| HAExposedDropdownMenu( | ||||||
| label = stringResource(title), | ||||||
| keys = keys.toList(), | ||||||
| currentIndex = currentIndex, | ||||||
| onSelected = { onSelected(WidgetUtils.getWidgetBackgroundType(context, keys[it])) }, | ||||||
| modifier = modifier, | ||||||
| ) | ||||||
| } | ||||||
|
|
||||||
|
|
||||||
| @OptIn(ExperimentalMaterial3Api::class) | ||||||
| @Composable | ||||||
| fun HAExposedDropdownMenu( | ||||||
|
Member
There was a problem hiding this comment. Let's not do that in this PR. We can't replace the It is a nice goal to migrate to M3, but we should make sure to not mix M2 and M3 and today this dropdown is used in a lot of place that are still in M2. So I would suggest to make a first PR about making a new version of the ServerExposedDropdownMenu close to the other HA* composable like the HAButton. Inspire yourself from the other components (it has tests and integration within the compose catalog and documentation). Then a second PR for the configure camera widget compose to M3.
Member
There was a problem hiding this comment. Actually another contributor is also migrating a screen to compose in this PR #6444 he took the approach to first migrate to compose and then do the migration to M3 later. I feel that both of you are going to miss the Menu for the server and color. If you don't do it I might help you by making the component so you can use it directly. I think you would learn some stuff by looking at the comments I left in the other PR that could help you on that one. |
||||||
| label: String, | ||||||
| keys: List<String>, | ||||||
Check failureCode scanning / Android Lint Immutable collections should ideally be used in Composables Error
Member
There was a problem hiding this comment. You can ignore the Immutable collections with an annotation for now. |
||||||
| currentIndex: Int?, | ||||||
| onSelected: (Int) -> Unit, | ||||||
| modifier: Modifier = Modifier, | ||||||
| ) { | ||||||
| var expanded by remember { mutableStateOf(false) } | ||||||
| val focusManager = LocalFocusManager.current | ||||||
| val colorScheme = LocalHAColorScheme.current | ||||||
| ExposedDropdownMenuBoxM3( | ||||||
| expanded = expanded, | ||||||
| onExpandedChange = { expanded = !expanded }, | ||||||
| modifier = modifier, | ||||||
| ) { | ||||||
| TextFieldM3( | ||||||
|
Member
There was a problem hiding this comment. Check the other existing components HATextField for instance. |
||||||
| readOnly = true, | ||||||
| value = currentIndex?.let { keys[it] } ?: "", | ||||||
| onValueChange = { }, | ||||||
| label = { TextM3(label) }, | ||||||
| trailingIcon = { ExposedDropdownMenuDefaultsM3.TrailingIcon(expanded = expanded) }, | ||||||
| colors = ExposedDropdownMenuDefaultsM3.textFieldColors( | ||||||
| unfocusedContainerColor = colorScheme.colorSurfaceDefault, | ||||||
| focusedContainerColor = colorScheme.colorSurfaceDefault, | ||||||
| unfocusedLabelColor = colorScheme.colorTextSecondary, | ||||||
| focusedLabelColor = colorScheme.colorOnPrimaryNormal, | ||||||
| unfocusedTrailingIconColor = colorScheme.colorTextSecondary, | ||||||
| focusedTrailingIconColor = colorScheme.colorOnPrimaryNormal, | ||||||
| unfocusedTextColor = colorScheme.colorTextPrimary, | ||||||
| focusedTextColor = colorScheme.colorTextPrimary, | ||||||
| focusedIndicatorColor = colorScheme.colorOnPrimaryNormal, | ||||||
| unfocusedIndicatorColor = colorScheme.colorBorderNeutralQuiet, | ||||||
| ), | ||||||
| modifier = Modifier.fillMaxWidth().menuAnchor(MenuAnchorTypeM3.PrimaryNotEditable), | ||||||
| ) | ||||||
| ExposedDropdownMenu( | ||||||
| expanded = expanded, | ||||||
| onDismissRequest = { expanded = false }, | ||||||
| containerColor = colorScheme.colorSurfaceDefault | ||||||
| ) { | ||||||
| keys.forEachIndexed { index, key -> | ||||||
| DropdownMenuItemM3( | ||||||
| text = { TextM3(key) }, | ||||||
| onClick = { | ||||||
| onSelected(index) | ||||||
| expanded = false | ||||||
| focusManager.clearFocus() | ||||||
| }, | ||||||
| colors = MenuItemColors( | ||||||
| textColor = colorScheme.colorTextPrimary, | ||||||
| leadingIconColor = colorScheme.colorOnPrimaryNormal, | ||||||
| trailingIconColor = colorScheme.colorOnPrimaryNormal, | ||||||
| disabledTextColor = colorScheme.colorTextSecondary, | ||||||
| disabledLeadingIconColor = colorScheme.colorTextDisabled, | ||||||
| disabledTrailingIconColor = colorScheme.colorTextDisabled, | ||||||
| ) | ||||||
| ) | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
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.
There are unused imports here (e.g., TextSelectionColors). These will be flagged by ktlint/IDE and should be removed.