Allow clickable on Text and LazyColumn improvements

jkgwak · Jan 22, 2021 · f77fcf4 · f77fcf4
1 parent c003974
commit f77fcf4
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 43 deletions.
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
-#Fri Jan 08 05:32:36 CET 2021
+#Fri Jan 22 09:15:46 CET 2021
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.8-rc-5-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.8-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
diff --git a/iosApp/iosApp/HostingController.swift b/iosApp/iosApp/HostingController.swift
@@ -32,11 +32,6 @@ class HostingControllerProxy: UIViewController {
         hostingController.viewDidLoad()
     }
 
-    override func viewDidAppear(_ animated: Bool) {
-        super.viewDidAppear(animated)
-        hostingController.refreshContent()
-    }
-
     override func viewWillLayoutSubviews() {
         super.viewWillLayoutSubviews()
         hostingController.viewWillLayoutSubviews()

diff --git a/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/Divider.kt b/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/Divider.kt
@@ -1,7 +1,10 @@
 package com.rouge41.kmm.compose
 
+import kotlinx.cinterop.useContents
+import platform.Foundation.NSLog
 import platform.UIKit.UIEdgeInsetsMake
 import platform.UIKit.UITableViewCell
+import platform.UIKit.layoutMargins
 import platform.UIKit.superview
 
 @Composable
@@ -13,6 +16,7 @@ actual fun Divider(
 ) {
     val cell = getCurrentView().superview
     if (cell is UITableViewCell) {
-        cell.separatorInset = UIEdgeInsetsMake(0.0, 15.0, 0.0, 0.0)
+        val left = cell.layoutMargins.useContents { left }
+        cell.separatorInset = UIEdgeInsetsMake(0.0, left, 0.0, 0.0)
     }
 }
diff --git a/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/HostingController.kt b/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/HostingController.kt
@@ -83,6 +83,9 @@ open class HostingController(val controller: UIViewController, val content: @Com
                 is ComposeSystemButton -> {
                     subview.isDirty = true
                 }
+                is ComposeLabel -> {
+                    subview.isDirty = true
+                }
                 else -> {
                     (subview as UIView).removeFromSuperview()
                 }
@@ -111,6 +114,8 @@ open class HostingController(val controller: UIViewController, val content: @Com
                 subview.removeFromSuperview()
             } else if (subview is ComposeSystemButton && subview.isDirty) {
                 subview.removeFromSuperview()
+            } else if (subview is ComposeLabel && subview.isDirty) {
+                subview.removeFromSuperview()
             } else {
                 removeDirtySubViews((subview as UIView))
             }

diff --git a/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/LazyColumn.kt b/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/LazyColumn.kt
@@ -3,6 +3,7 @@ package com.rouge41.kmm.compose
 import cocoapods.YogaKit.*
 import kotlinx.cinterop.ExportObjCClass
 import kotlinx.cinterop.useContents
+import platform.CoreGraphics.CGFLOAT_MAX
 import platform.CoreGraphics.CGFloat
 import platform.Foundation.NSIndexPath
 import platform.Foundation.NSLog
@@ -20,13 +21,21 @@ actual fun LazyColumn(
     horizontalAlignment: AlignmentHorizontal,
     content: LazyListScope.() -> Unit
 ) {
-    val controller = state
-    controller.tableView.setFrame(getCurrentView().bounds)
-    addSubview(controller.tableView) {
-        addController(controller) {
-            controller.items.clear()
-            content.invoke(iosLazyListScope())
-            controller.tableView.reloadData()
+    val view = UIComposeView.createOrReuse("${content::class}")
+    modifier.setup(view)
+    view.configureLayoutWithBlock { layout ->
+        layout?.width = YGPercentValue(100.0)
+        layout?.flexGrow = 1.0
+    }
+    addSubview(view) {
+        val controller = state
+        controller.tableView.setFrame(getCurrentView().bounds)
+        addSubview(controller.tableView) {
+            addController(controller) {
+                controller.items.clear()
+                content.invoke(iosLazyListScope())
+                controller.tableView.reloadData()
+            }
         }
     }
 }
@@ -113,15 +122,12 @@ class ComposeTableViewController() : UIViewController(nibName = null, bundle = n
 
     override fun tableView(tableView: UITableView, cellForRowAtIndexPath: NSIndexPath): UITableViewCell {
         var cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, cellForRowAtIndexPath)
-        if (cell == null) {
-            cell = UITableViewCell(UITableViewCellStyle.UITableViewCellStyleDefault, cellIdentifier)
-            cell.contentView.configureLayoutWithBlock { layout ->
-                layout?.isEnabled = true
-                layout?.width = YGPercentValue(100.0)
-            }
-        }
         cell.selectionStyle = UITableViewCellSelectionStyle.UITableViewCellSelectionStyleNone
         cell.separatorInset = UIEdgeInsetsMake(0.0, 0.0, 0.0, CGFloat.MAX_VALUE)
+        cell.contentView.configureLayoutWithBlock { layout ->
+            layout?.width = YGPointValue( cell.frame.useContents { size.width } )
+            layout?.height = YGPointValue( 10000.0 ) //Do not use CGFLOAT_MAX
+        }
         addViewAndLayout(cell.contentView) {
             items[cellForRowAtIndexPath.row.toInt()].invoke(iosLazyItemScope())
         }

diff --git a/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/State.kt b/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/State.kt
@@ -7,11 +7,14 @@ import kotlin.reflect.KProperty
 val cache = HashMap<String, Any>()
 
 @Composable actual fun <T> remember(calculation: @ComposableContract() () -> T): T {
-    return if (cache["${calculation::class}"] != null) {
-        cache["${calculation::class}"] as T
+    val controller = getCurrentController()
+    val key = "$controller ${calculation::class}"
+    NSLog(key)
+    return if (cache[key] != null) {
+        cache[key] as T
     } else {
         val value = calculation()
-        cache["${calculation::class}"] = value as Any
+        cache[key] = value as Any
         value
     }
 }

diff --git a/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/Text.kt b/multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/Text.kt
@@ -1,6 +1,14 @@
 package com.rouge41.kmm.compose
 
 import cocoapods.YogaKit.*
+import kotlinx.cinterop.ExportObjCClass
+import kotlinx.cinterop.ObjCAction
+import kotlinx.cinterop.cValue
+import kotlinx.cinterop.useContents
+import platform.CoreGraphics.CGFLOAT_MAX
+import platform.CoreGraphics.CGFloat
+import platform.CoreGraphics.CGRectZero
+import platform.CoreGraphics.CGSizeMake
 import platform.Foundation.NSLog
 import platform.UIKit.*
 
@@ -41,14 +49,49 @@ actual fun Text(
             overrideFontStyle = fontStyle, overrideFontWeight = fontWeight, overrideFontFamily = fontFamily)
         modifier.setup(view)
     } else {
+        val container = UIComposeView(text)
         val label = UILabel()
         label.numberOfLines = 0
         label.text = text
-        label.sizeToFit()
         color?.toUIColor()?.let { label.textColor = it }
         label.font = (style ?: TextStyle()).toUIFont(overrideFontSize = if (fontSize != TextUnit.Unspecified) fontSize else null,
             overrideFontStyle = fontStyle, overrideFontWeight = fontWeight, overrideFontFamily = fontFamily)
+        //Set cell margin before custom
+        val cell = getCurrentView().superview
+        if (cell is UITableViewCell) {
+            container.configureLayoutWithBlock { layout ->
+                layout?.paddingTop = YGPointValue( cell.layoutMargins.useContents { top } )
+                layout?.paddingLeft = YGPointValue( cell.layoutMargins.useContents { left } )
+                layout?.paddingBottom = YGPointValue( cell.layoutMargins.useContents { bottom } )
+                layout?.paddingRight = YGPointValue( cell.layoutMargins.useContents { right } )
+            }
+        }
+        modifier.setup(container)
         modifier.setup(label)
-        view.addSubview(label)
+        container.addSubview(label)
+        view.addSubview(container)
+    }
+}
+
+@ExportObjCClass
+class ComposeLabel(val contentIdentifier: String) : UILabel(frame = cValue { CGRectZero }) {
+    var isDirty: Boolean = false
+
+    init {
+        if (DEBUG_COMPOSE) NSLog("🔴 [init ComposeLabel]")
+    }
+
+    companion object {
+        fun createOrReuse(onClick: () -> Unit): ComposeLabel {
+            val contentIdentifier = "${onClick::class}"
+            for (view in getCurrentView().subviews) {
+                if (view is ComposeLabel && view.isDirty && view.contentIdentifier == contentIdentifier) {
+                    if (DEBUG_COMPOSE) NSLog("🟢 [reuse ComposeLabel] ${view.contentIdentifier}")
+                    view.isDirty = false
+                    return view
+                }
+            }
+            return ComposeLabel(contentIdentifier)
+        }
     }
 }
diff --git a/test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/Menu.kt b/test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/Menu.kt
@@ -4,16 +4,10 @@ import com.rouge41.kmm.compose.*
 
 @Composable
 fun Menu(state: MutableState<Boolean>, onClick: (String) -> Unit) {
-    Demo.values().dropLast(4).forEach { screen ->
-        ListItem(
-            text = {
-                Text(screen.toString())
-            },
-            modifier = Modifier.clickable(
-                onClick = {
-                    onClick.invoke(screen.toString())
-                }
-            )
-        )
+    LazyColumn {
+        items(Demo.values().dropLast(4)) { item ->
+            Text(item.toString(), modifier = Modifier.clickable { onClick.invoke(item.toString()) })
+            Divider()
+        }
     }
 }
diff --git a/test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/demos/LazyColumn.kt b/test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/demos/LazyColumn.kt
@@ -7,13 +7,13 @@ fun LazyColumn(){
     val items = (1..25).map { "Line $it" }
     LazyColumn(modifier = Modifier.fillMaxSize()) {
         item {
-            Text("Single")
-            Text("With")
-            Text("Multiple")
-            Text("Lines")
+            Text("Single\nWith\nMultiple\nLines")
+        }
+        item {
+            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.")
         }
         items(items) {
-            Text(it, modifier = Modifier.padding(10.dp))
+            Text(it)
             Divider()
         }
     }