Skip to content

Commit f84b469

Browse files
hrachhrach
authored
Merge pull request #54 from hrach/modal-sheet-enhancements
Modal sheet enhancements
2 parents b21174d + a6f87e2 commit f84b469

File tree

6 files changed

+128
-269
lines changed

6 files changed

+128
-269
lines changed

‎.idea/kotlinc.xml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
11
package dev.hrach.navigation.demo
22

3+
import androidx.compose.animation.EnterTransition
4+
import androidx.compose.animation.ExitTransition
5+
import androidx.compose.animation.core.FastOutLinearInEasing
6+
import androidx.compose.animation.core.LinearOutSlowInEasing
7+
import androidx.compose.animation.core.tween
8+
import androidx.compose.animation.fadeIn
9+
import androidx.compose.animation.fadeOut
10+
import androidx.compose.animation.slideInHorizontally
11+
import androidx.compose.animation.slideInVertically
12+
import androidx.compose.animation.slideOutHorizontally
13+
import androidx.compose.animation.slideOutVertically
314
import androidx.compose.foundation.shape.CornerSize
415
import androidx.compose.foundation.shape.RoundedCornerShape
516
import androidx.compose.material3.ExperimentalMaterial3Api
617
import androidx.compose.material3.MaterialTheme
718
import androidx.compose.runtime.Composable
19+
import androidx.compose.ui.platform.LocalDensity
20+
import androidx.compose.ui.unit.Density
821
import androidx.compose.ui.unit.dp
922
import androidx.navigation.NavHostController
1023
import androidx.navigation.compose.NavHost
@@ -29,9 +42,14 @@ internal fun NavHost(
2942
modalSheetNavigator: ModalSheetNavigator,
3043
bottomSheetNavigator: BottomSheetNavigator,
3144
) {
45+
val density = LocalDensity.current
3246
NavHost(
3347
navController = navController,
3448
startDestination = Destinations.Home,
49+
enterTransition = { SharedXAxisEnterTransition(density) },
50+
exitTransition = { SharedXAxisExitTransition(density) },
51+
popEnterTransition = { SharedXAxisPopEnterTransition(density) },
52+
popExitTransition = { SharedXAxisPopExitTransition(density) },
3553
) {
3654
composable<Destinations.Home> { Home(navController) }
3755
composable<Destinations.List> { List() }
@@ -40,14 +58,62 @@ internal fun NavHost(
4058
modalSheet<Destinations.Modal2> { Modal2() }
4159
bottomSheet<Destinations.BottomSheet> { BottomSheet(navController) }
4260
}
43-
ModalSheetHost(modalSheetNavigator, containerColor = MaterialTheme.colorScheme.background)
61+
ModalSheetHost(
62+
modalSheetNavigator = modalSheetNavigator,
63+
containerColor = MaterialTheme.colorScheme.background,
64+
enterTransition = { SharedYAxisEnterTransition(density) },
65+
exitTransition = { SharedYAxisExitTransition(density) },
66+
)
4467
BottomSheetHost(
45-
bottomSheetNavigator,
46-
shape = RoundedCornerShape( // optional, just an example of bottom sheet custom property
68+
navigator = bottomSheetNavigator,
69+
shape = RoundedCornerShape(
70+
// optional, just an example of bottom sheet custom property
4771
topStart = CornerSize(12.dp),
4872
topEnd = CornerSize(12.dp),
4973
bottomStart = CornerSize(0.dp),
5074
bottomEnd = CornerSize(0.dp),
5175
),
5276
)
5377
}
78+
79+
private val SharedXAxisEnterTransition: (Density) -> EnterTransition = { density ->
80+
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
81+
slideInHorizontally(animationSpec = tween(durationMillis = 300)) {
82+
with(density) { 30.dp.roundToPx() }
83+
}
84+
}
85+
86+
private val SharedXAxisPopEnterTransition: (Density) -> EnterTransition = { density ->
87+
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
88+
slideInHorizontally(animationSpec = tween(durationMillis = 300)) {
89+
with(density) { (-30).dp.roundToPx() }
90+
}
91+
}
92+
93+
private val SharedXAxisExitTransition: (Density) -> ExitTransition = { density ->
94+
fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
95+
slideOutHorizontally(animationSpec = tween(durationMillis = 300)) {
96+
with(density) { (-30).dp.roundToPx() }
97+
}
98+
}
99+
100+
private val SharedXAxisPopExitTransition: (Density) -> ExitTransition = { density ->
101+
fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
102+
slideOutHorizontally(animationSpec = tween(durationMillis = 300)) {
103+
with(density) { 30.dp.roundToPx() }
104+
}
105+
}
106+
107+
private val SharedYAxisEnterTransition: (Density) -> EnterTransition = { density ->
108+
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
109+
slideInVertically(animationSpec = tween(durationMillis = 300)) {
110+
with(density) { 30.dp.roundToPx() }
111+
}
112+
}
113+
114+
private val SharedYAxisExitTransition: (Density) -> ExitTransition = { density ->
115+
fadeOut(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
116+
slideOutVertically(animationSpec = tween(durationMillis = 300)) {
117+
with(density) { 30.dp.roundToPx() }
118+
}
119+
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
11
package dev.hrach.navigation.demo.screens
22

33
import android.annotation.SuppressLint
4+
import androidx.activity.compose.BackHandler
45
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.Spacer
58
import androidx.compose.foundation.layout.WindowInsets
69
import androidx.compose.foundation.layout.fillMaxSize
10+
import androidx.compose.foundation.layout.height
711
import androidx.compose.foundation.layout.systemBars
812
import androidx.compose.foundation.layout.windowInsetsPadding
913
import androidx.compose.material3.MaterialTheme
1014
import androidx.compose.material3.OutlinedButton
1115
import androidx.compose.material3.Surface
16+
import androidx.compose.material3.Switch
1217
import androidx.compose.material3.Text
1318
import androidx.compose.runtime.Composable
1419
import androidx.compose.runtime.getValue
1520
import androidx.compose.runtime.mutableIntStateOf
21+
import androidx.compose.runtime.mutableStateOf
1622
import androidx.compose.runtime.remember
1723
import androidx.compose.runtime.saveable.rememberSaveable
1824
import androidx.compose.runtime.setValue
25+
import androidx.compose.ui.Alignment
1926
import androidx.compose.ui.Modifier
27+
import androidx.compose.ui.unit.dp
2028
import androidx.navigation.NavController
2129
import dev.hrach.navigation.demo.Destinations
2230
import dev.hrach.navigation.results.NavigationResultEffect
@@ -33,15 +41,22 @@ internal fun Modal1(navController: NavController) {
3341
}
3442
Modal1(
3543
navigate = navController::navigate,
44+
close = navController::popBackStack,
3645
bottomSheetResult = bottomSheetResult,
3746
)
3847
}
3948

4049
@Composable
4150
private fun Modal1(
4251
navigate: (Any) -> Unit,
52+
close: () -> Unit,
4353
bottomSheetResult: Int,
4454
) {
55+
var disableBackHandling by rememberSaveable { mutableStateOf(false) }
56+
BackHandler(disableBackHandling) {
57+
// no-op
58+
}
59+
4560
Surface(
4661
color = MaterialTheme.colorScheme.inverseSurface,
4762
) {
@@ -58,6 +73,18 @@ private fun Modal1(
5873
Text("BottomSheet")
5974
}
6075
Text("BottomSheetResult: $bottomSheetResult")
76+
77+
Spacer(Modifier.height(32.dp))
78+
79+
Row(verticalAlignment = Alignment.CenterVertically) {
80+
Text("Disable back handling")
81+
Switch(disableBackHandling, onCheckedChange = { disableBackHandling = it })
82+
}
83+
84+
Spacer(Modifier.height(32.dp))
85+
OutlinedButton(onClick = close) {
86+
Text("Close")
87+
}
6188
}
6289
}
6390
}

0 commit comments

Comments
 (0)