Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ad-hoc): Edge-to-edge dialog #261

Merged
merged 5 commits into from
Feb 7, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,22 +1,34 @@
package com.processout.sdk.ui.core.component

import android.os.Build
import android.view.ViewGroup
import android.view.WindowManager
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Card
import androidx.compose.material3.CardColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import androidx.compose.material3.Surface
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import androidx.compose.ui.window.DialogWindowProvider
import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi
import com.processout.sdk.ui.core.component.PODialog.cardColors
import com.processout.sdk.ui.core.style.PODialogStyle
import com.processout.sdk.ui.core.theme.ProcessOutTheme
import com.processout.sdk.ui.core.theme.ProcessOutTheme.colors
import com.processout.sdk.ui.core.theme.ProcessOutTheme.dimensions
import com.processout.sdk.ui.core.theme.ProcessOutTheme.shapes
import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing

/** @suppress */
Expand All @@ -36,22 +48,45 @@ fun PODialog(
properties = DialogProperties(
dismissOnBackPress = false,
dismissOnClickOutside = false,
usePlatformDefaultWidth = false
usePlatformDefaultWidth = true, // needs to be 'true', otherwise breaks edge-to-edge insets
decorFitsSystemWindows = false
)
) {
EnableEdgeToEdge()
var scrimAlpha by remember { mutableFloatStateOf(0f) }
LaunchedEffect(Unit) { scrimAlpha = 0.32f }
Box(
modifier = Modifier
.fillMaxSize()
.background(color = PODialog.ScrimColor),
.background(
color = Color.Black.copy(
alpha = animateFloatAsState(
targetValue = scrimAlpha,
animationSpec = tween(
durationMillis = 200,
easing = FastOutLinearInEasing
)
).value
)
),
contentAlignment = Alignment.Center
) {
with(ProcessOutTheme) {
Card(
AnimatedVisibility(
visibleState = remember {
MutableTransitionState(initialState = false)
.apply { targetState = true }
},
enter = fadeIn() + scaleIn(initialScale = 0.9f),
exit = fadeOut()
) {
Surface(
modifier = Modifier
.fillMaxWidth()
.padding(spacing.extraLarge),
shape = shapes.roundedCornersLarge,
colors = cardColors(style.backgroundColor)
color = style.backgroundColor,
contentColor = Color.Unspecified,
shadowElevation = 3.dp
) {
Column(
modifier = Modifier
Expand Down Expand Up @@ -103,6 +138,19 @@ fun PODialog(
}
}

@Composable
private fun EnableEdgeToEdge() {
with((LocalView.current.parent as DialogWindowProvider).window) {
setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
setWindowAnimations(-1)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
attributes.fitInsetsTypes = 0
attributes.fitInsetsSides = 0
}
}
}

/** @suppress */
@ProcessOutInternalApi
object PODialog {
Expand Down Expand Up @@ -143,13 +191,4 @@ object PODialog {
backgroundColor = colorResource(id = backgroundColorResId)
)
}

internal val ScrimColor = Color.Black.copy(alpha = 0.32f)

internal fun cardColors(backgroundColor: Color) = CardColors(
containerColor = backgroundColor,
contentColor = Color.Unspecified,
disabledContainerColor = Color.Unspecified,
disabledContentColor = Color.Unspecified
)
}