gistfile1.txt

@OptIn(ExperimentalAnimationApi::class)
@Composable
private fun SetupScreenForTablet() {
    Surface(
        modifier = Modifier
            .fillMaxSize()
            .background(DsColors.staticBlack)
    ) {
        var isPopupVisible by remember { mutableStateOf(false) }
        var popupCoordinates by remember { mutableStateOf(Pair(0, 0)) }

        ConstraintLayout(
            modifier = Modifier.fillMaxSize()
        ) {
            val (topLeft, topCenter, topRight,
                centerLeft, center, centerRight,
                bottomLeft, bottomCenter, bottomRight
            ) = createRefs()

            var firstButtonCoordinates by remember { mutableStateOf(Pair(0, 0)) }
            PrimaryButton(
                modifier = Modifier.constrainAs(topLeft) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                }
                    .onGloballyPositioned { layoutCoordinates ->
                        firstButtonCoordinates = Pair(
                            layoutCoordinates.positionInRoot().x.toInt(),
                            layoutCoordinates.positionInRoot().y.toInt()
                        )
                    },
                text = "Show Actions",
                sizeVariant = Button.SizeVariant.Small,
                onClick = {
                    isPopupVisible = false
                    popupCoordinates = firstButtonCoordinates
                    isPopupVisible = true
                })

            var secondButtonCoordinates by remember { mutableStateOf(Pair(0, 0)) }
            PrimaryButton(
                modifier = Modifier.constrainAs(topCenter) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
                    .onGloballyPositioned { layoutCoordinates ->
                        secondButtonCoordinates = Pair(
                            layoutCoordinates.positionInRoot().x.toInt(),
                            layoutCoordinates.positionInRoot().y.toInt()
                        )
                    },
                text = "Show Actions",
                sizeVariant = Button.SizeVariant.Small,
                onClick = {
                    isPopupVisible = false
                    popupCoordinates = secondButtonCoordinates
                    isPopupVisible = true
                }
            )

            var thirdButtonCoordinates by remember { mutableStateOf(Pair(0, 0)) }
            PrimaryButton(
                modifier = Modifier.constrainAs(topRight) {
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                }
                    .onGloballyPositioned { layoutCoordinates ->
                        thirdButtonCoordinates = Pair(
                            layoutCoordinates.positionInRoot().x.toInt(),
                            layoutCoordinates.positionInRoot().y.toInt()
                        )
                    },
                text = "Show Actions",
                sizeVariant = Button.SizeVariant.Small,
                onClick = {
                    isPopupVisible = false
                    popupCoordinates = thirdButtonCoordinates
                    isPopupVisible = true
                }
            )

            var fourthButtonCoordinates by remember { mutableStateOf(Pair(0, 0)) }
            PrimaryButton(
                modifier = Modifier.constrainAs(centerLeft) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
                    .onGloballyPositioned { layoutCoordinates ->
                        fourthButtonCoordinates = Pair(
                            layoutCoordinates.positionInRoot().x.toInt(),
                            layoutCoordinates.positionInRoot().y.toInt()
                        )
                    },
                text = "Show Actions",
                sizeVariant = Button.SizeVariant.Small,
                onClick = {
                    isPopupVisible = false
                    popupCoordinates = fourthButtonCoordinates
                    isPopupVisible = true
                })

            var fifthButtonCoordinates by remember { mutableStateOf(Pair(0, 0)) }
            PrimaryButton(
                modifier = Modifier.constrainAs(center) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
                    .onGloballyPositioned { layoutCoordinates ->
                        fifthButtonCoordinates = Pair(
                            layoutCoordinates.positionInRoot().x.toInt(),
                            layoutCoordinates.positionInRoot().y.toInt()
                        )
                    },
                text = "Show Actions",
                sizeVariant = Button.SizeVariant.Small,
                onClick = {
                    isPopupVisible = false
                    popupCoordinates = fifthButtonCoordinates
                    isPopupVisible = true
                }
            )

            var sixthButtonCoordinates by remember { mutableStateOf(Pair(0, 0)) }
            PrimaryButton(
                modifier = Modifier.constrainAs(centerRight) {
                    end.linkTo(parent.end)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
                    .onGloballyPositioned { layoutCoordinates ->
                        sixthButtonCoordinates = Pair(
                            layoutCoordinates.positionInRoot().x.toInt(),
                            layoutCoordinates.positionInRoot().y.toInt()
                        )
                    },
                text = "Show Actions",
                sizeVariant = Button.SizeVariant.Small,
                onClick = {
                    isPopupVisible = false
                    popupCoordinates = sixthButtonCoordinates
                    isPopupVisible = true
                }
            )

            var seventhButtonCoordinates by remember { mutableStateOf(Pair(0, 0)) }
            PrimaryButton(
                modifier = Modifier.constrainAs(bottomLeft) {
                    start.linkTo(parent.start)
                    bottom.linkTo(parent.bottom)
                }
                    .onGloballyPositioned { layoutCoordinates ->
                        seventhButtonCoordinates = Pair(
                            layoutCoordinates.positionInRoot().x.toInt(),
                            layoutCoordinates.positionInRoot().y.toInt()
                        )
                    },
                text = "Show Actions",
                sizeVariant = Button.SizeVariant.Small,
                onClick = {
                    isPopupVisible = false
                    popupCoordinates = seventhButtonCoordinates
                    isPopupVisible = true
                })

            var eightButtonCoordinates by remember { mutableStateOf(Pair(0, 0)) }
            PrimaryButton(
                modifier = Modifier.constrainAs(bottomCenter) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom)
                }
                    .onGloballyPositioned { layoutCoordinates ->
                        eightButtonCoordinates = Pair(
                            layoutCoordinates.positionInRoot().x.toInt(),
                            layoutCoordinates.positionInRoot().y.toInt()
                        )
                    },
                text = "Show Actions",
                sizeVariant = Button.SizeVariant.Small,
                onClick = {
                    isPopupVisible = false
                    popupCoordinates = eightButtonCoordinates
                    isPopupVisible = true
                }
            )

            var ninethButtonCoordinates by remember { mutableStateOf(Pair(0, 0)) }
            PrimaryButton(
                modifier = Modifier.constrainAs(bottomRight) {
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom)
                }
                    .onGloballyPositioned { layoutCoordinates ->
                        ninethButtonCoordinates = Pair(
                            layoutCoordinates.positionInRoot().x.toInt(),
                            layoutCoordinates.positionInRoot().y.toInt()
                        )
                    },
                text = "Show Actions",
                sizeVariant = Button.SizeVariant.Small,
                onClick = {
                    isPopupVisible = false
                    popupCoordinates = ninethButtonCoordinates
                    isPopupVisible = true
                }
            )
        }


        ActionList(
            isPopupVisible = isPopupVisible,
            layoutCoordinates = popupCoordinates,
            onDismiss = {
                isPopupVisible = false
            }
        ) {
            Column(
                modifier = Modifier
                    .wrapContentHeight()
                    .fillMaxWidth()
            ) {
                ActionRow(
                    modifier = Modifier,
                    title = ActionRow.Title(
                        text = "タイトル",
                        alignment = ActionRow.TitleAlignment.Center
                    ),
                    showBottomSeparator = true,
                    onClick = {}
                )
                ActionRow(
                    modifier = Modifier,
                    title = ActionRow.Title(
                        text = "タイトル",
                        alignment = ActionRow.TitleAlignment.Center
                    ),
                    showBottomSeparator = true,
                    onClick = {}
                )
                ActionRow(
                    modifier = Modifier,
                    title = ActionRow.Title(
                        text = "タイトル",
                        alignment = ActionRow.TitleAlignment.Center
                    ),
                    showBottomSeparator = true,
                    onClick = {}
                )
                ActionRow(
                    modifier = Modifier,
                    title = ActionRow.Title(
                        text = "タイトル",
                        alignment = ActionRow.TitleAlignment.Center
                    ),
                    showBottomSeparator = true,
                    onClick = {}
                )
                ActionRow(
                    modifier = Modifier,
                    title = ActionRow.Title(
                        text = "Cancel",
                        alignment = ActionRow.TitleAlignment.Center
                    ),
                    showBottomSeparator = true,
                    onClick = {}
                )
            }
        }
    }
}



@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ActionList(
    isPopupVisible: Boolean,
    layoutCoordinates: Pair<Int, Int>,
    onDismiss: () -> Unit,
    content: @Composable () -> Unit
) {
    AnimatedVisibility(
        visible = isPopupVisible,
        enter = fadeIn(animationSpec = tween(delayMillis = 5000)),
        exit = fadeOut(),
        initiallyVisible = false
    ) {
        Popup(
            offset = IntOffset(
                layoutCoordinates.first,
                layoutCoordinates.second
            ),
            onDismissRequest = onDismiss
        ) {
            val navigationBarHeight = LocalContext.current.resources.getIdentifier("navigation_bar_height", "dimen", "android");

            // Draw a rectangle shape with rounded corners inside the popup
            Surface(
                modifier = Modifier
                    .width(DsSizing.measure360)
                    .wrapContentHeight()
                    .padding(
                        top = DsSizing.spacing8,
                        start = DsSizing.spacing8,
                        end = DsSizing.spacing8
                    )
                    .background(DsColors.backgroundPrimary, RoundedCornerShape(DsRadius.large)),
                elevation = DsShadows.middleFloor,
                shape = RoundedCornerShape(DsRadius.large)
            ) {
                content()
            }
        }
    }
}