Replace deprecated Clickable with Box (#55)

app/src/main/java/com/example/jetpackcompose/core/Utils.kt

@@ -18,7 +18,7 @@ data class Amenity(
 )
 
 // Methods
-fun getPersonList() = listOf<Person>(
+fun getPersonList() = listOf(
     Person("Grace Hopper", 25),
     Person("Ada Lovelace", 29),
     Person("John Smith", 28),

app/src/main/java/com/example/jetpackcompose/material/AlertDialogActivity.kt

@@ -8,8 +8,9 @@ import androidx.compose.setValue
 import androidx.compose.state
 import androidx.ui.core.Modifier
 import androidx.ui.core.setContent
-import androidx.ui.foundation.Clickable
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Text
+import androidx.ui.foundation.clickable
 import androidx.ui.foundation.shape.corner.RoundedCornerShape
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Column
@@ -55,11 +56,12 @@ fun ClickableText() {
     // text "Click to see dialog" is clicked. Every time the value of this variable changes,
     // the relevant sub-composables that use showPopup are automatically recomposed.
     var showPopup by state { false }
-    // Clickable wraps the child composable and enables it to react to a click through the onClick
-    // callback similar to the onClick listener that we are accustomed to on Android.
+    // Box with clickable modifier wraps the child composable and enables it to react to a click
+    // through the onClick callback similar to the onClick listener that we are accustomed to
+    // on Android.
     // Here, we just change the value of showPopup to be true every time we click on the text that
     // says "Click to see Popup"
-    Clickable(onClick = { showPopup = true }) {
+    Box(Modifier.clickable(onClick = { showPopup = true }), children = {
         // You can think of Modifiers as implementations of the decorators pattern that are used to
         // modify the composable that its applied to. In the example below, we add a padding of
         // 8dp to the Card composable and 16dp to the Text composable.
@@ -72,7 +74,7 @@ fun ClickableText() {
                     fontFamily = FontFamily.Serif)
             )
         }
-    }
+    })
 
     // A lambda that toggles the showPopup value to off. We pass it to the onDismiss equivalent
     // callback of the AlertDialog.

app/src/main/java/com/example/jetpackcompose/material/DrawerAppActivity.kt

@@ -8,15 +8,14 @@ import androidx.compose.state
 import androidx.ui.core.Modifier
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
-import androidx.ui.foundation.Clickable
 import androidx.ui.foundation.ContentGravity
 import androidx.ui.foundation.Icon
 import androidx.ui.foundation.Text
+import androidx.ui.foundation.clickable
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Column
 import androidx.ui.layout.fillMaxSize
 import androidx.ui.layout.fillMaxWidth
-import androidx.ui.layout.offset
 import androidx.ui.layout.padding
 import androidx.ui.material.DrawerState
 import androidx.ui.material.IconButton
@@ -105,18 +104,19 @@ fun DrawerContentComponent(
     Column(modifier = Modifier.fillMaxSize()) {
         // We want to have 3 rows in this column to represent the 3 screens in this activity.
         for (index in DrawerAppScreen.values().indices) {
-            // Clickable wraps the child composable and enables it to react to a click through the onClick
-            // callback similar to the onClick listener that we are accustomed to on Android.
+            // Box with clickable modifier wraps the child composable and enables it to react to a
+            // click through the onClick callback similar to the onClick listener that we are
+            // accustomed to on Android.
             // Here, we just update the currentScreen variable to hold the appropriate value based on
             // the row that is clicked i.e if the first row is clicked, we set the value of
             // currentScreen to DrawerAppScreen.Screen1, when second row is clicked we set it to
             // DrawerAppScreen.Screen2 and so on and so forth.
             val screen = getScreenBasedOnIndex(index)
-            Clickable(onClick = {
+            Box(Modifier.clickable(onClick = {
                 currentScreen.value = screen
                 // We also close the drawer when an option from the drawer is selected.
                 closeDrawer()
-            }) {
+            }), children = {
                 // Surface is a composable provided to fulfill the needs of the "Surface" metaphor from
                 // the Material Design specification. It's generally used to change the background
                 // color, add elevation, clip or add background shape to its children composables.
@@ -134,7 +134,7 @@ fun DrawerContentComponent(
                     // composable to render text on the screen
                     Text(text = screen.name, modifier = Modifier.padding(16.dp))
                 }
-            }
+            })
         }
     }
 }

app/src/main/java/com/example/jetpackcompose/material/FlowRowActivity.kt

@@ -9,8 +9,8 @@ import androidx.compose.state
 import androidx.ui.core.Modifier
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
-import androidx.ui.foundation.Clickable
 import androidx.ui.foundation.Text
+import androidx.ui.foundation.clickable
 import androidx.ui.foundation.drawBackground
 import androidx.ui.foundation.shape.corner.RoundedCornerShape
 import androidx.ui.layout.Column
@@ -80,13 +80,14 @@ fun SimpleFlowRow(amenityList: List<Amenity>) {
             mainAxisSize = SizeMode.Expand
         ) {
             amenityList.forEachIndexed { index, amenity ->
-                // Clickable wraps the child composable and enables it to react to a click through 
-                // the onClick callback similar to the onClick listener that we are accustomed to on 
-                // Android. Here, we just add the current index to the selectedIndices set every
+                // Box with clickable modifier wraps the child composable and enables it to react to
+                // a click through the onClick callback similar to the onClick listener that we are
+                // accustomed to on Android.
+                // Here, we just add the current index to the selectedIndices set every
                 // time a user taps on it.
-                Clickable(onClick = { selectedIndices.add(index) }) {
-                    // Text is a predefined composable that does exactly what you'd expect it to - 
-                    // display text on the screen. It allows you to customize its appearance using 
+                Box(Modifier.clickable(onClick = { selectedIndices.add(index) }), children = {
+                    // Text is a predefined composable that does exactly what you'd expect it to -
+                    // display text on the screen. It allows you to customize its appearance using
                     // style, fontWeight, fontSize, etc.
                     Text(
                         text = if (selectedIndices.contains(index)) "✓ ${amenity.name}" else amenity.name,
@@ -95,7 +96,7 @@ fun SimpleFlowRow(amenityList: List<Amenity>) {
                             color = colors[index % colors.size], shape = RoundedCornerShape(15.dp)) +
                                 Modifier.padding(8.dp)
                     )
-                }
+                })
             }
         }
     }

app/src/main/java/com/example/jetpackcompose/material/MaterialActivity.kt

@@ -11,10 +11,10 @@ import androidx.ui.core.ContextAmbient
 import androidx.ui.core.Modifier
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
-import androidx.ui.foundation.Clickable
 import androidx.ui.foundation.Image
 import androidx.ui.foundation.Text
 import androidx.ui.foundation.VerticalScroller
+import androidx.ui.foundation.clickable
 import androidx.ui.foundation.selection.ToggleableState
 import androidx.ui.foundation.shape.corner.RoundedCornerShape
 import androidx.ui.graphics.Color
@@ -503,11 +503,12 @@ fun MaterialRippleComponent() {
     // 8dp to the Card composable. In addition, we configure it out occupy the entire available
     // width using the Modifier.fillMaxWidth() modifier.
     Card(shape = RoundedCornerShape(4.dp), modifier = Modifier.padding(8.dp) + Modifier.fillMaxWidth()) {
-        // Clickable wraps the child composable and enables it to react to a click through the
-        // onClick callback similar to the onClick listener that we are accustomed to on Android.
+        // Box with clickable modifier wraps the child composable and enables it to react to a click
+        // through the onClick callback similar to the onClick listener that we are accustomed to
+        // on Android.
         // In order to show a ripple effect, we make use of the Modifier.ripple modifier with the
         // default values.
-        Clickable(onClick = {}, modifier = Modifier.ripple(bounded = true)) {
+        Box(modifier = Modifier.ripple(bounded = true) + Modifier.clickable(onClick = {}), children = {
             // Box is a predefined convenience composable that allows you to apply common
             // draw & layout logic.
             Box(backgroundColor = Color.LightGray, shape = RoundedCornerShape(4.dp)) {
@@ -518,7 +519,7 @@ fun MaterialRippleComponent() {
                 ))
             }
 
-        }
+        })
     }
 }
 

app/src/main/java/com/example/jetpackcompose/theme/DarkModeActivity.kt

@@ -7,9 +7,10 @@ import androidx.compose.MutableState
 import androidx.compose.state
 import androidx.ui.core.Modifier
 import androidx.ui.core.setContent
-import androidx.ui.foundation.Clickable
+import androidx.ui.foundation.Box
 import androidx.ui.foundation.Icon
 import androidx.ui.foundation.Text
+import androidx.ui.foundation.clickable
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Column
 import androidx.ui.layout.Row
@@ -178,36 +179,37 @@ fun ThemedDrawerContentComponent(
     // use the Scaffold composable that takes care of placing the drawer content in the correct
     // position. Look at [FixedActionButtonActivity] to see an example.
     Column(modifier = Modifier.fillMaxHeight()) {
-        // Clickable wraps the child composable and enables it to react to a click through the onClick
-        // callback similar to the onClick listener that we are accustomed to on Android.
+        // Box with clickable modifier wraps the child composable and enables it to react to a click
+        // through the onClick callback similar to the onClick listener that we are accustomed to
+        // on Android.
         // Here, we just update the currentScreen variable to hold the appropriate value based on
         // the row that is clicked i.e if the first row is clicked, we set the value of
         // currentScreen to DrawerAppScreen.Screen1, when second row is clicked we set it to
         // DrawerAppScreen.Screen2 and so on and so forth.
-        Clickable(onClick = {
+        Box(Modifier.clickable(onClick = {
             currentScreen.value = ThemedDrawerAppScreen.Screen1
             // We also close the drawer when an option from the drawer is selected.
             closeDrawer()
-        }) {
+        }), children = {
             // Text is a predefined composable that does exactly what you'd expect it to -
             // display text on the screen. It allows you to customize its appearance using
             // the style property.
             Text(text = ThemedDrawerAppScreen.Screen1.name, modifier = Modifier.padding(16.dp))
-        }
+        })
 
-        Clickable(onClick = {
+        Box(Modifier.clickable(onClick = {
             currentScreen.value = ThemedDrawerAppScreen.Screen2
             closeDrawer()
-        }) {
+        }), children = {
             Text(text = ThemedDrawerAppScreen.Screen2.name, modifier = Modifier.padding(16.dp))
-        }
+        })
 
-        Clickable(onClick = {
+        Box(Modifier.clickable(onClick = {
             currentScreen.value = ThemedDrawerAppScreen.Screen3
             closeDrawer()
-        }) {
+        }), children = {
             Text(text = ThemedDrawerAppScreen.Screen3.name, modifier = Modifier.padding(16.dp))
-        }
+        })
     }
 }