Merge pull request #751 from arkivanov/sample-shared-anim

Sample Shared Transitions example without predictive back support
arkivanov · Aug 6, 2024 · 1e9dba3 · 1e9dba3
2 parents 6182a79 + fc679ef
commit 1e9dba3
Show file tree

Hide file tree

Showing 35 changed files with 497 additions and 79 deletions.
diff --git a/sample/app-desktop/saved_state.dat b/sample/app-desktop/saved_state.dat
diff --git a/sample/app-ios/app-ios/KittenView.swift b/sample/app-ios/app-ios/KittenView.swift
@@ -10,7 +10,7 @@ struct KittenView: View {
     private var model: KittenComponentModel
 
     private var imageName: String {
-        switch model.imageType {
+        switch model.imageResourceId {
         case .cat1: return "cat1"
         case .cat2: return "cat2"
         case .cat3: return "cat3"
@@ -77,8 +77,3 @@ struct KittenView_Previews: PreviewProvider {
         KittenView(PreviewKittenComponent(), .large)
     }
 }
-
-class PreviewKittenComponent: KittenComponent {
-    var model: Value<KittenComponentModel> = mutableValue(KittenComponentModel(imageType: .cat1, text: "000"))
-}
-
diff --git a/sample/shared/compose/src/commonMain/kotlin/com/arkivanov/sample/shared/PainterResource.kt b/sample/shared/compose/src/commonMain/kotlin/com/arkivanov/sample/shared/PainterResource.kt
@@ -0,0 +1,25 @@
+package com.arkivanov.sample.shared
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.painter.Painter
+import decompose.sample.shared.compose.generated.resources.Res
+import decompose.sample.shared.compose.generated.resources.cat1
+import decompose.sample.shared.compose.generated.resources.cat2
+import decompose.sample.shared.compose.generated.resources.cat3
+import decompose.sample.shared.compose.generated.resources.cat4
+import decompose.sample.shared.compose.generated.resources.cat5
+import org.jetbrains.compose.resources.ExperimentalResourceApi
+import org.jetbrains.compose.resources.painterResource
+
+@OptIn(ExperimentalResourceApi::class)
+@Composable
+internal fun painterResource(imageResourceId: ImageResourceId): Painter =
+    painterResource(
+        when (imageResourceId) {
+            ImageResourceId.CAT_1 -> Res.drawable.cat1
+            ImageResourceId.CAT_2 -> Res.drawable.cat2
+            ImageResourceId.CAT_3 -> Res.drawable.cat3
+            ImageResourceId.CAT_4 -> Res.drawable.cat4
+            ImageResourceId.CAT_5 -> Res.drawable.cat5
+        }
+    )
diff --git a/...mpose/src/commonMain/kotlin/com/arkivanov/sample/shared/customnavigation/KittenContent.kt b/...mpose/src/commonMain/kotlin/com/arkivanov/sample/shared/customnavigation/KittenContent.kt
@@ -1,5 +1,6 @@
 package com.arkivanov.sample.shared.customnavigation
 
+import androidx.compose.desktop.ui.tooling.preview.Preview
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -16,20 +17,12 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.arkivanov.decompose.extensions.compose.subscribeAsState
-import decompose.sample.shared.compose.generated.resources.Res
-import decompose.sample.shared.compose.generated.resources.cat1
-import decompose.sample.shared.compose.generated.resources.cat2
-import decompose.sample.shared.compose.generated.resources.cat3
-import decompose.sample.shared.compose.generated.resources.cat4
-import decompose.sample.shared.compose.generated.resources.cat5
-import org.jetbrains.compose.resources.ExperimentalResourceApi
-import org.jetbrains.compose.resources.painterResource
+import com.arkivanov.sample.shared.painterResource
 
 @Composable
 internal fun KittenContent(
@@ -41,7 +34,7 @@ internal fun KittenContent(
 
     Box(modifier = modifier) {
         Image(
-            painter = getKittenPainter(imageType = model.imageType),
+            painter = painterResource(model.imageResourceId),
             contentDescription = "Kitten image",
             modifier = Modifier.fillMaxSize(),
             contentScale = ContentScale.Crop,
@@ -63,15 +56,11 @@ internal fun KittenContent(
     }
 }
 
-@OptIn(ExperimentalResourceApi::class)
+@Preview
 @Composable
-internal fun getKittenPainter(imageType: KittenComponent.ImageType): Painter =
-    painterResource(
-        when (imageType) {
-            KittenComponent.ImageType.CAT_1 -> Res.drawable.cat1
-            KittenComponent.ImageType.CAT_2 -> Res.drawable.cat2
-            KittenComponent.ImageType.CAT_3 -> Res.drawable.cat3
-            KittenComponent.ImageType.CAT_4 -> Res.drawable.cat4
-            KittenComponent.ImageType.CAT_5 -> Res.drawable.cat5
-        }
+internal fun KittenContentPreview() {
+    KittenContent(
+        component = PreviewKittenComponent(),
+        textStyle = TextStyle.Default,
     )
+}
diff --git a/sample/shared/compose/src/commonMain/kotlin/com/arkivanov/sample/shared/menu/MenuContent.kt b/sample/shared/compose/src/commonMain/kotlin/com/arkivanov/sample/shared/menu/MenuContent.kt
@@ -36,6 +36,7 @@ internal fun MenuContent(
             TextButton(text = "Dynamic Features", onClick = component.onDynamicFeaturesItemSelected)
             TextButton(text = "Custom Navigation", onClick = component.onCustomNavigationItemSelected)
             TextButton(text = "Pages", onClick = component.onPagesItemSelected)
+            TextButton(text = "Shared Transitions", onClick = component.onSharedTransitionsItemSelected)
         }
     }
 }

diff --git a/...le/shared/compose/src/commonMain/kotlin/com/arkivanov/sample/shared/pages/PagesContent.kt b/...le/shared/compose/src/commonMain/kotlin/com/arkivanov/sample/shared/pages/PagesContent.kt
@@ -11,28 +11,24 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.LocalContentColor
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.OutlinedButton
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.automirrored.filled.ArrowForward
-import androidx.compose.material.icons.filled.Close
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.arkivanov.decompose.ExperimentalDecomposeApi
 import com.arkivanov.decompose.extensions.compose.pages.Pages
 import com.arkivanov.decompose.extensions.compose.pages.PagesScrollAnimation
 import com.arkivanov.sample.shared.customnavigation.KittenContent
+import com.arkivanov.sample.shared.utils.CloseButton
 
 @OptIn(ExperimentalFoundationApi::class, ExperimentalDecomposeApi::class)
 @Composable
-fun PagesContent(component: PagesComponent, modifier: Modifier = Modifier) {
+internal fun PagesContent(component: PagesComponent, modifier: Modifier = Modifier) {
     Box(modifier = modifier) {
         Pages(
             pages = component.pages,
@@ -47,20 +43,10 @@ fun PagesContent(component: PagesComponent, modifier: Modifier = Modifier) {
             )
         }
 
-        CompositionLocalProvider(LocalContentColor provides Color.White) {
-            IconButton(
-                onClick = component::onCloseClicked,
-                modifier = Modifier
-                    .align(Alignment.TopStart)
-                    .statusBarsPadding()
-                    .padding(4.dp),
-            ) {
-                Icon(
-                    imageVector = Icons.Default.Close,
-                    contentDescription = "Close button",
-                )
-            }
-        }
+        CloseButton(
+            onClick = component::onCloseClicked,
+            modifier = Modifier.align(Alignment.TopStart).statusBarsPadding(),
+        )
 
         Row(
             modifier = Modifier.align(Alignment.BottomCenter).padding(bottom = 16.dp).navigationBarsPadding(),