Thread
#compose
    Altynbek Nurtaza

    Altynbek Nurtaza

    1 year ago
    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
    @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
            )
        }
    }