Merge pull request #54 from hrach/modal-sheet-enhancements

Modal sheet enhancements

demo/src/main/kotlin/dev/hrach/navigation/demo/NavHost.kt

@@ -1,10 +1,23 @@
 package dev.hrach.navigation.demo
 
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.core.FastOutLinearInEasing
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
@@ -29,9 +42,14 @@ internal fun NavHost(
 	modalSheetNavigator: ModalSheetNavigator,
 	bottomSheetNavigator: BottomSheetNavigator,
 ) {
+	val density = LocalDensity.current
 	NavHost(
 		navController = navController,
 		startDestination = Destinations.Home,
+		enterTransition = { SharedXAxisEnterTransition(density) },
+		exitTransition = { SharedXAxisExitTransition(density) },
+		popEnterTransition = { SharedXAxisPopEnterTransition(density) },
+		popExitTransition = { SharedXAxisPopExitTransition(density) },
 	) {
 		composable<Destinations.Home> { Home(navController) }
 		composable<Destinations.List> { List() }
@@ -40,14 +58,62 @@ internal fun NavHost(
 		modalSheet<Destinations.Modal2> { Modal2() }
 		bottomSheet<Destinations.BottomSheet> { BottomSheet(navController) }
 	}
-	ModalSheetHost(modalSheetNavigator, containerColor = MaterialTheme.colorScheme.background)
+	ModalSheetHost(
+		modalSheetNavigator = modalSheetNavigator,
+		containerColor = MaterialTheme.colorScheme.background,
+		enterTransition = { SharedYAxisEnterTransition(density) },
+		exitTransition = { SharedYAxisExitTransition(density) },
+	)
 	BottomSheetHost(
-		bottomSheetNavigator,
-		shape = RoundedCornerShape( // optional, just an example of bottom sheet custom property
+		navigator = bottomSheetNavigator,
+		shape = RoundedCornerShape(
+			// optional, just an example of bottom sheet custom property
 			topStart = CornerSize(12.dp),
 			topEnd = CornerSize(12.dp),
 			bottomStart = CornerSize(0.dp),
 			bottomEnd = CornerSize(0.dp),
 		),
 	)
 }
+
+private val SharedXAxisEnterTransition: (Density) -> EnterTransition = { density ->
+	fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
+		slideInHorizontally(animationSpec = tween(durationMillis = 300)) {
+			with(density) { 30.dp.roundToPx() }
+		}
+}
+
+private val SharedXAxisPopEnterTransition: (Density) -> EnterTransition = { density ->
+	fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
+		slideInHorizontally(animationSpec = tween(durationMillis = 300)) {
+			with(density) { (-30).dp.roundToPx() }
+		}
+}
+
+private val SharedXAxisExitTransition: (Density) -> ExitTransition = { density ->
+	fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
+		slideOutHorizontally(animationSpec = tween(durationMillis = 300)) {
+			with(density) { (-30).dp.roundToPx() }
+		}
+}
+
+private val SharedXAxisPopExitTransition: (Density) -> ExitTransition = { density ->
+	fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
+		slideOutHorizontally(animationSpec = tween(durationMillis = 300)) {
+			with(density) { 30.dp.roundToPx() }
+		}
+}
+
+private val SharedYAxisEnterTransition: (Density) -> EnterTransition = { density ->
+	fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
+		slideInVertically(animationSpec = tween(durationMillis = 300)) {
+			with(density) { 30.dp.roundToPx() }
+		}
+}
+
+private val SharedYAxisExitTransition: (Density) -> ExitTransition = { density ->
+	fadeOut(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
+		slideOutVertically(animationSpec = tween(durationMillis = 300)) {
+			with(density) { 30.dp.roundToPx() }
+		}
+}

demo/src/main/kotlin/dev/hrach/navigation/demo/screens/Modal1.kt

@@ -1,22 +1,30 @@
 package dev.hrach.navigation.demo.screens
 
 import android.annotation.SuppressLint
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import dev.hrach.navigation.demo.Destinations
 import dev.hrach.navigation.results.NavigationResultEffect
@@ -33,15 +41,22 @@ internal fun Modal1(navController: NavController) {
 	}
 	Modal1(
 		navigate = navController::navigate,
+		close = navController::popBackStack,
 		bottomSheetResult = bottomSheetResult,
 	)
 }
 
 @Composable
 private fun Modal1(
 	navigate: (Any) -> Unit,
+	close: () -> Unit,
 	bottomSheetResult: Int,
 ) {
+	var disableBackHandling by rememberSaveable { mutableStateOf(false) }
+	BackHandler(disableBackHandling) {
+		// no-op
+	}
+
 	Surface(
 		color = MaterialTheme.colorScheme.inverseSurface,
 	) {
@@ -58,6 +73,18 @@ private fun Modal1(
 				Text("BottomSheet")
 			}
 			Text("BottomSheetResult: $bottomSheetResult")
+
+			Spacer(Modifier.height(32.dp))
+
+			Row(verticalAlignment = Alignment.CenterVertically) {
+				Text("Disable back handling")
+				Switch(disableBackHandling, onCheckedChange = { disableBackHandling = it })
+			}
+
+			Spacer(Modifier.height(32.dp))
+			OutlinedButton(onClick = close) {
+				Text("Close")
+			}
 		}
 	}
 }