Refactor demos, add ListItem and clickable modifier

README.md

@@ -55,7 +55,7 @@ fun HelloPlatform() {
     }
 }
 ```
-<img src="https://github.com/cl3m/multiplatform-compose/blob/develop/screenshots/HelloPlatform.png?raw=true" height="620">
+![Hello Platform Screenshot](https://github.com/cl3m/multiplatform-compose/blob/develop/screenshots/HelloPlatform.png?raw=true)
 
 More advance sample are in the test library.
 

multiplatform-compose/src/androidMain/kotlin/com/rouge41/kmm/compose/ListItem.kt

@@ -0,0 +1,6 @@
+package com.rouge41.kmm.compose
+
+import androidx.compose.material.ListItem as _ListItem
+
+@Composable
+actual fun ListItem(modifier: Modifier, text: @Composable () -> Unit) = _ListItem(modifier = modifier, text = text)

multiplatform-compose/src/androidMain/kotlin/com/rouge41/kmm/compose/Modifier.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.padding as _padding
 import androidx.compose.foundation.layout.preferredHeight as _preferredHeight
 import androidx.compose.foundation.layout.preferredWidth as _preferredWidth
 import androidx.compose.foundation.layout.width as _width
+import androidx.compose.foundation.clickable as _clickable
 
 actual typealias Modifier = androidx.compose.ui.Modifier
 actual fun Modifier.fillMaxSize(): Modifier = _fillMaxSize()
@@ -20,3 +21,5 @@ actual fun Modifier.width(dp: Dp): Modifier = _width(dp)
 actual fun Modifier.height(dp: Dp): Modifier = _height(dp)
 actual fun Modifier.preferredWidth(dp: Dp): Modifier = _preferredWidth(dp)
 actual fun Modifier.preferredHeight(dp: Dp): Modifier = _preferredHeight(dp)
+@Composable
+actual fun Modifier.clickable(onClick: () -> Unit): Modifier = _clickable(onClick = onClick)

multiplatform-compose/src/commonMain/kotlin/com/rouge41/kmm/compose/ListItem.kt

@@ -0,0 +1,4 @@
+package com.rouge41.kmm.compose
+
+@Composable
+expect fun ListItem(modifier: Modifier, text: @Composable () -> Unit)

multiplatform-compose/src/commonMain/kotlin/com/rouge41/kmm/compose/Modifier.kt

@@ -12,3 +12,5 @@ expect fun Modifier.width(dp: Dp): Modifier
 expect fun Modifier.height(dp: Dp): Modifier
 expect fun Modifier.preferredWidth(dp: Dp): Modifier
 expect fun Modifier.preferredHeight(dp: Dp): Modifier
+@Composable
+expect fun Modifier.clickable(onClick: () -> Unit): Modifier

multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/ComposeView.kt

@@ -1,9 +1,7 @@
 package com.rouge41.kmm.compose
 
 import cocoapods.YogaKit.*
-import kotlinx.cinterop.CValue
-import kotlinx.cinterop.cValue
-import kotlinx.cinterop.useContents
+import kotlinx.cinterop.*
 import platform.CoreGraphics.*
 import platform.Foundation.NSLog
 import platform.UIKit.*
@@ -15,8 +13,10 @@ interface ComposeView {
     var identifier: String
 }*/
 
+@ExportObjCClass
 class UIComposeView(val contentIdentifier: String) : UIView(frame = cValue { CGRectZero }) {
     var isDirty: Boolean = false
+    var onClick: (() -> Unit)? = null
 
     companion object {
         fun createOrReuse(contentIdentifier: String): UIComposeView {
@@ -29,6 +29,11 @@ class UIComposeView(val contentIdentifier: String) : UIView(frame = cValue { CGR
             return UIComposeView(contentIdentifier)
         }
     }
+
+    @ObjCAction
+    fun tap() {
+        onClick?.invoke()
+    }
 }
 
 class UIComposeScrollView(val contentIdentifier: String) : UIScrollView(frame = cValue { CGRectZero }) {

multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/ListItem.kt

@@ -0,0 +1,11 @@
+package com.rouge41.kmm.compose
+
+@Composable
+actual fun ListItem(modifier: Modifier, text: @Composable () -> Unit) {
+    Column(
+        modifier = modifier.fillMaxWidth().padding(15.dp),
+        verticalArrangement = Arrangement.Top,
+        horizontalAlignment = Alignment.Start) {
+        text.invoke()
+    }
+}

multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/Modifier.kt

@@ -1,6 +1,8 @@
 package com.rouge41.kmm.compose
 
 import cocoapods.YogaKit.*
+import platform.Foundation.NSLog
+import platform.Foundation.NSSelectorFromString
 import platform.UIKit.*
 
 actual interface Modifier {
@@ -17,6 +19,8 @@ actual interface Modifier {
 class iosModifier : Modifier {
     var changes = mutableListOf<Layout>()
     var backgroundColor: Color? = null
+    var onClick: (() -> Unit)? = null
+
 
     sealed class Layout {
         data class padding(val dp: Dp) : Layout()
@@ -31,6 +35,18 @@ class iosModifier : Modifier {
         backgroundColor?.let {
             view.backgroundColor = it.toUIColor()
         }
+        onClick?.let {
+            if (view is UIComposeView) {
+                val tapController = UITapGestureRecognizer()
+                tapController.addTarget(
+                    target = view,
+                    action = NSSelectorFromString("tap"),
+                )
+                view.userInteractionEnabled = true
+                view.onClick = it
+                view.addGestureRecognizer(tapController)
+            }
+        }
         view.configureLayoutWithBlock { layout ->
             for (change in this.changes) {
                 when (change) {
@@ -90,3 +106,10 @@ actual fun Modifier.height(dp: Dp): Modifier {
 
 actual fun Modifier.preferredWidth(dp: Dp): Modifier = width(dp)
 actual fun Modifier.preferredHeight(dp: Dp): Modifier = height(dp)
+
+@Composable
+actual fun Modifier.clickable(onClick: () -> Unit): Modifier {
+    val modifier = if (this is iosModifier) { this } else { iosModifier() }
+    modifier.onClick = onClick
+    return modifier
+}

test/src/androidMain/kotlin/com/rouge41/kmm/compose/test/BottomNavigation.kt

@@ -18,25 +18,29 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.*
+import com.rouge41.kmm.compose.MutableState
+import com.rouge41.kmm.compose.test.demos.Counter
+import com.rouge41.kmm.compose.test.demos.Layout
+import com.rouge41.kmm.compose.test.demos.Lorem
 
-fun Page.icon(): ImageVector {
+fun Tab.icon(): ImageVector {
     return when (this) {
-        Page.Page1 -> Icons.Filled.Home
-        Page.Page2 -> Icons.Filled.Call
-        Page.Page3 -> Icons.Filled.Info
-        Page.Page4 -> Icons.Filled.Info
+        Tab.Tab1 -> Icons.Filled.Home
+        Tab.Tab2 -> Icons.Filled.Call
+        Tab.Tab3 -> Icons.Filled.Info
+        Tab.Tab4 -> Icons.Filled.Info
     }
 }
 
 @Composable
-actual fun BottomNavigation() {
+actual fun BottomNavigation(state: MutableState<Boolean>, resources: Resources) {
     val navController = rememberNavController()
     Scaffold(
         bottomBar = {
             BottomNavigation {
                 val navBackStackEntry by navController.currentBackStackEntryAsState()
                 val currentRoute = navBackStackEntry?.arguments?.getString(KEY_ROUTE)
-                Page.values().forEach { screen ->
+                Tab.values().forEach { screen ->
                     BottomNavigationItem(
                         icon = { Icon(screen.icon()) },
                         label = { Text(screen.toString(), style = TextStyle(color = Color.White)) },
@@ -52,21 +56,21 @@ actual fun BottomNavigation() {
             }
         }
     ) {
-        NavHost(navController, startDestination = Page.values().first().toString()) {
-            Page.values().forEach { screen ->
+        NavHost(navController, startDestination = Tab.values().first().toString()) {
+            Tab.values().forEach { screen ->
                 composable(screen.toString()) {
                     when (screen) {
-                        Page.Page1 -> {
+                        Tab.Tab1 -> Navigation(state, resources)
+                        Tab.Tab2 -> {
                             ScrollableColumn() {
                                 Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dui erat, consequat eget felis malesuada, gravida pellentesque massa. Suspendisse id aliquet ex. Praesent diam dui, consectetur et orci eu, interdum cursus tortor. Aenean quis laoreet lectus, quis consectetur orci. Quisque ac diam varius, malesuada lacus varius, semper nulla. Ut vitae faucibus justo. Fusce nibh tortor, pulvinar viverra urna et, porttitor viverra ipsum. Proin et lacus ac leo lacinia tempus. Suspendisse dictum tortor nec efficitur faucibus.")
                                 Counter()
                                 Lorem()
                                 Spacer(modifier = Modifier.height(60.dp))
                             }
                         }
-                        Page.Page2 -> Text ("Page 2")
-                        Page.Page3 -> Counter ()
-                        Page.Page4 -> Layout ()
+                        Tab.Tab3 -> Layout ()
+                        Tab.Tab4 -> Counter ()
                     }
                 }
             }

test/src/androidMain/kotlin/com/rouge41/kmm/compose/test/DrawerNavigation.kt

@@ -11,11 +11,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.navigation.compose.*
+import com.rouge41.kmm.compose.MutableState
 import com.rouge41.kmm.compose.SafeArea
 import com.rouge41.kmm.compose.ScrollableColumn
+import com.rouge41.kmm.compose.test.demos.*
 
 @Composable
-fun DrawerNavigation(resources: Resources) {
+fun DrawerNavigation(state: MutableState<Boolean>, resources: Resources) {
     val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))
     val navController = rememberNavController()
     val navBackStackEntry by navController.currentBackStackEntryAsState()
@@ -38,39 +40,26 @@ fun DrawerNavigation(resources: Resources) {
             )
         },
         drawerContent = {
-            contents().forEach { screen ->
-                ListItem(
-                    text = {
-                        Text(
-                            screen.toString(),
-                            style = TextStyle(color = if (currentRoute == screen.toString()) MaterialTheme.colors.primary else Color.Black)
-                        )
-                    },
-                    modifier = Modifier.clickable(
-                        onClick = {
-                            navController.navigate(screen.toString()) {
-                                launchSingleTop = true
-                            }
-                            scaffoldState.drawerState.close()
-                        }
-                    )
-                )
+            Menu(state) { route ->
+                navController.navigate(route) {
+                    launchSingleTop = true
+                }
+                scaffoldState.drawerState.close()
             }
         },
         scaffoldState = scaffoldState
     ) {
-        NavHost(navController, startDestination = contents().first().toString()) {
-            contents().forEach { screen ->
+        NavHost(navController, startDestination = Demo.values().first().toString()) {
+            Demo.values().dropLast(4).forEach { screen ->
                 composable(screen.toString()) {
                     when (screen) {
-                        ContentType.HelloPlatform -> HelloPlatform()
-                        ContentType.Lorem -> ScrollableColumn { Lorem() }
-                        ContentType.Counter -> Counter()
-                        ContentType.BackPress -> BackPress()
-                        ContentType.Layout -> Layout()
-                        ContentType.Images ->  Images(resources)
-                        ContentType.TextStyles -> Column { TextStyles() }
-                        ContentType.BottomNavigation -> BottomNavigation()
+                        Demo.HelloPlatform -> HelloPlatform()
+                        Demo.Lorem -> ScrollableColumn { Lorem() }
+                        Demo.Counter -> Counter()
+                        Demo.BackPress -> BackPress()
+                        Demo.Layout -> Layout()
+                        Demo.Images ->  Images(resources)
+                        Demo.TextStyles -> Column { TextStyles() }
                     }
                 }
             }
@@ -79,4 +68,4 @@ fun DrawerNavigation(resources: Resources) {
 }
 
 @Composable
-actual fun Navigation(resources: Resources) = DrawerNavigation(resources)
+actual fun Navigation(state: MutableState<Boolean>, resources: Resources) = DrawerNavigation(state, resources)

test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/App.kt

@@ -0,0 +1,9 @@
+package com.rouge41.kmm.compose.test
+
+import com.rouge41.kmm.compose.Composable
+import com.rouge41.kmm.compose.MutableState
+
+@Composable
+fun App(state: MutableState<Boolean>, resources: Resources) {
+    BottomNavigation(state, resources)
+}

test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/BottomNavigation.kt

@@ -3,11 +3,11 @@ package com.rouge41.kmm.compose.test
 import com.rouge41.kmm.compose.*
 
 @Composable
-expect fun BottomNavigation()
+expect fun BottomNavigation(state: MutableState<Boolean>, resources: Resources)
 
-enum class Page {
-    Page1,
-    Page2,
-    Page3,
-    Page4
+enum class Tab {
+    Tab1,
+    Tab2,
+    Tab3,
+    Tab4
 }

test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/Content.kt

@@ -1,59 +1,33 @@
 package com.rouge41.kmm.compose.test
 
 import com.rouge41.kmm.compose.*
+import com.rouge41.kmm.compose.test.demos.*
 
 data class Resources(val logo: ImageResource)
 
 @Composable
 fun Content(resources: Resources) {
     Theme {
-        val state = remember { ContentState() }
-        when (state.current) {
-            ContentType.Root -> SafeArea { Root(state) }
-            ContentType.HelloPlatform -> SafeArea { HelloPlatform() }
-            ContentType.Lorem -> SafeArea { ScrollableColumn { Lorem() } }
-            ContentType.Counter -> SafeArea { Counter() }
-            ContentType.BackPress -> SafeArea { BackPress() }
-            ContentType.Layout -> SafeArea { Layout() }
-            ContentType.TextStyles -> SafeArea { TextStyles() }
-            ContentType.Images -> SafeArea { Images(resources) }
-            ContentType.BottomNavigation -> BottomNavigation()
-            ContentType.Navigation -> Navigation(resources)
+        var state = remember { mutableStateOf(true) }
+        if (state.value) {
+            App(state, resources)
+        } else {
+            Raw(state, resources)
         }
     }
 }
 
-@Composable
-fun Root(state: ContentState) {
-    Column(
-        modifier = Modifier.fillMaxSize(),
-        verticalArrangement = Arrangement.Top,
-        horizontalAlignment = Alignment.Start) {
-        Text("ROOT")
-        Button(modifier = Modifier.background(Color.Green).fillMaxWidth(), onClick = { state.current = ContentType.Navigation }, colors = ButtonDefaults.buttonColors()) { Text("Navigation", style = TextStyle(color = Color.White)) }
-        Spacer(modifier = Modifier.preferredHeight(16.dp))
-        for (content in contents()) {
-            Button(onClick = { state.current = content }) { Text(content.toString()) }
-            Spacer(modifier = Modifier.preferredHeight(16.dp))
-        }
-    }
-}
-
-class ContentState {
-    var current by mutableStateOf(ContentType.Root)
-}
-
-enum class ContentType {
-    Root,
+enum class Demo {
     HelloPlatform,
     Lorem,
     Counter,
     BackPress,
     Layout,
     TextStyles,
     Images,
+    // Below are dropped in navigation demos
     BottomNavigation,
-    Navigation
-}
-
-fun contents() = ContentType.values().toMutableList().drop(1).dropLast(1)
+    Navigation,
+    App,
+    Raw,
+}