https://kotlinlang.org logo
#compose-android
Title
# compose-android
m

Mahmoud Ali Yousuf

11/03/2023, 10:17 AM
I was hoisting this function so I doubt if this function is stateless now or if it still needs some improvement.
Copy code
@Composable
private fun MediaItemDropdownMenu(
     isExpanded: Boolean,
     onExpendedChange: (Boolean) -> Unit,
     options: List<String>,
     onDismissRequest: () -> Unit
 ) {
     var selectedOptionText by rememberSaveable { mutableStateOf("Select item") }
 
     ExposedDropdownMenuBox(
         expanded = isExpanded,
         onExpandedChange = onExpendedChange
     ) {
         OutlinedTextField(
             value = selectedOptionText,
             onValueChange = {},
             readOnly = true,
             label = { Text(text = selectedOptionText) },
             trailingIcon = {
                 ExposedDropdownMenuDefaults.TrailingIcon(expanded = isExpanded)
             },
             colors = ExposedDropdownMenuDefaults.textFieldColors(
                 focusedIndicatorColor = MaterialTheme.colorScheme.outlineVariant,
                 unfocusedIndicatorColor = MaterialTheme.colorScheme.outlineVariant,
                 containerColor = Transparent
             ),
             modifier = Modifier
                 .menuAnchor()
                 .fillMaxWidth()
         )
         ExposedDropdownMenu(
             expanded = isExpanded,
             onDismissRequest = onDismissRequest
         ) {
             options.forEach { option ->
                 DropdownMenuItem(
                     text = { Text(text = option) },
                     onClick = {
                         selectedOptionText = option
                         onExpendedChange(isExpanded)
                     },
                     contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding
                 )
             }
         }
     }
 }
s

Stylianos Gakis

11/03/2023, 10:28 AM
If it contains a
mutableStateOf
, it is not stateless. With that said, the decision to make something stateless or not depends on your use case, having something be stateful is not always guaranteed to be a bad thing.
👍 1
1
m

Mahmoud Ali Yousuf

11/03/2023, 10:51 AM
@Stylianos Gakis I tried to move
selectedOptionText
variable but since it's updated inside the
DropdownMenuItem()
I faced an issue and left it there. So is there a way it can be moved?
s

Stylianos Gakis

11/03/2023, 10:58 AM
Sure, you can just hoist it as you would any other state, but again doing it just to do it isn’t always necessary, it really depends. At least this one is better previewable now though.
Copy code
@Composable
private fun OtherComposable(
  isExpanded: Boolean,
  onExpendedChange: (Boolean) -> Unit,
  options: List<String>,
  onDismissRequest: () -> Unit
) {
  var selectedOptionText by rememberSaveable { mutableStateOf("Select item") }
  MediaItemDropdownMenu(
    isExpanded = isExpanded,
    onExpendedChange = onExpendedChange,
    options = options,
    onDismissRequest = onDismissRequest,
    selectedOptionText = selectedOptionText,
    setSelectedOptionText = { selectedOptionText = it }
  )
}

@Composable
private fun MediaItemDropdownMenu(
  isExpanded: Boolean,
  onExpendedChange: (Boolean) -> Unit,
  options: List<String>,
  onDismissRequest: () -> Unit,
  selectedOptionText: String,
  setSelectedOptionText: (String) -> Unit,
) {
  ExposedDropdownMenuBox(
    expanded = isExpanded,
    onExpandedChange = onExpendedChange
  ) {
    OutlinedTextField(
      value = selectedOptionText,
      onValueChange = {},
      readOnly = true,
      label = { Text(text = selectedOptionText) },
      trailingIcon = {
        ExposedDropdownMenuDefaults.TrailingIcon(expanded = isExpanded)
      },
      colors = ExposedDropdownMenuDefaults.textFieldColors(
        focusedIndicatorColor = MaterialTheme.colorScheme.outlineVariant,
        unfocusedIndicatorColor = MaterialTheme.colorScheme.outlineVariant,
        containerColor = Transparent
      ),
      modifier = Modifier
        .menuAnchor()
        .fillMaxWidth()
    )
    ExposedDropdownMenu(
      expanded = isExpanded,
      onDismissRequest = onDismissRequest
    ) {
      options.forEach { option ->
        DropdownMenuItem(
          text = { Text(text = option) },
          onClick = {
            setSelectedOptionText(option)
            onExpendedChange(isExpanded)
          },
          contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding
        )
      }
    }
  }
}
🙌 1
👍 1
m

Mahmoud Ali Yousuf

11/03/2023, 12:34 PM
@Stylianos Gakis didn't look at it from this perspective thanks. This will help me so much
2 Views