Hey everyone! I wrote an address selector that you...

# compose

[Altynbek Nurtaza]

Hey everyone! I wrote an address selector that you can drag to expand and select from the list. One thing I couldn’t manage to do is to hide the list when clicked/touched outside a composable. Can anybody help? code in the comments

screen-20210824-235601.mp4

[Altynbek Nurtaza]

@ExperimentalAnimationApi
@Composable
fun BranchSelector(
    selectedBranchId: Long,
    branches: List<Branch>,
    selectBranchId: (Long) -> Unit,
    modifier: Modifier = Modifier,
) {
    var expanded by remember { mutableStateOf(false) }
    val vibrator = systemService<Vibrator>()
    // position of a specific branch in a list
    var dragListPosition by remember { mutableStateOf<Int?>(null) }

    // height of a single branch item
    val height = 56.dp

    Column(
        modifier = modifier
            .onFocusChanged {
                Log.d("BranchSelector", "1: ${it.hasFocus}")
                Log.d("BranchSelector", "2: ${it.isFocused}")
                Log.d("BranchSelector", "3: ${it.isCaptured}")
                if (!it.hasFocus) {
                    expanded = false
                }
            }
            .pointerInput(Unit) {
                detectDragGestures(
                    onDragStart = {
                        expanded = true
                    },
                    onDragEnd = {
                        expanded = false
                        dragListPosition?.let {
                            selectBranchId(branches[it].id)
                            dragListPosition = null
                        }
                    },
                    onDragCancel = {
                        expanded = false
                        dragListPosition = null
                    },
                    onDrag = { change, _ ->

                        val position = floor(change.position.y / height.toPx()).toInt() - 1
                        val newDragListPosition = if (position in branches.indices) {
                            position
                        } else {
                            null
                        }

                        if (newDragListPosition != dragListPosition) {
                            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                                vibrator?.vibrate(
                                    VibrationEffect.createOneShot(10, 10)
                                )
                            }
                        }
                        dragListPosition = newDragListPosition

                        change.consumeAllChanges()
                    }
                )
            }
    ) {
        SelectedBranch(
            branches.find {
                it.id!! == selectedBranchId
            }!!,
            expanded
        ) { expanded = it }
        AnimatedVisibility(visible = expanded) {
            Column {
                branches.forEachIndexed { index, branch ->
                    BranchListItem(branch, selectedBranchId, index == dragListPosition) {
                        selectBranchId(branch.id)
                        expanded = false
                    }
                }
            }
        }
        Divider(
            color = Color(0x1f000000).copy(alpha = 0.12f),
            thickness = 1.dp,
            startIndent = 0.dp
        )
    }
}