feat(reactions): add emoji keyboard [WPB-4292]

app/build.gradle.kts

@@ -120,6 +120,9 @@ dependencies {
     // Compose iterative code, layout inspector, etc.
     debugImplementation(libs.compose.tooling)
 
+    // Emoji
+    implementation(libs.androidx.emoji.picker)
+
     // hilt
     implementation(libs.hilt.navigationCompose)
     implementation(libs.hilt.work)

app/src/main/kotlin/com/wire/android/ui/edit/ReactionOption.kt

@@ -19,9 +19,13 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
@@ -30,6 +34,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.wire.android.R
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.emoji.EmojiPickerBottomSheet
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireTypography
@@ -41,6 +46,7 @@ fun ReactionOption(
     onReactionClick: (emoji: String) -> Unit,
     emojiFontSize: TextUnit = 28.sp
 ) {
+    var isEmojiPickerVisible by remember { mutableStateOf(false) }
     CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.secondary) {
         Column {
             Row {
@@ -76,11 +82,8 @@ fun ReactionOption(
                 }
                 IconButton(
                     onClick = {
-                        // TODO show more emojis
+                        isEmojiPickerVisible = true
                     },
-                    modifier = Modifier
-                        // TODO remove when all emojis will be available
-                        .alpha(0.1F),
                 ) {
                     Icon(
                         painter = painterResource(id = R.drawable.ic_more_emojis),
@@ -90,6 +93,16 @@ fun ReactionOption(
             }
         }
     }
+    EmojiPickerBottomSheet(
+        isVisible = isEmojiPickerVisible,
+        onDismiss = {
+            isEmojiPickerVisible = false
+        },
+        onEmojiSelected = {
+            onReactionClick(it)
+            isEmojiPickerVisible = false
+        }
+    )
 }
 
 @PreviewMultipleThemes

app/src/main/kotlin/com/wire/android/ui/emoji/DraggableByHandleBottomSheetBehavior.kt

@@ -0,0 +1,39 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ */
+package com.wire.android.ui.emoji
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.MotionEvent
+import android.view.View
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+
+class DraggableByHandleBottomSheetBehavior<V : View>(
+    context: Context,
+    attributeSet: AttributeSet
+) : BottomSheetBehavior<V>(context, attributeSet) {
+    var dragHandle: View? = null
+
+    override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: V, event: MotionEvent): Boolean {
+        dragHandle?.let {
+            isDraggable = parent.isPointInChildBounds(it, event.x.toInt(), event.y.toInt())
+        }
+        return super.onInterceptTouchEvent(parent, child, event)
+    }
+}

app/src/main/kotlin/com/wire/android/ui/emoji/EmojiPicker.kt

@@ -0,0 +1,60 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ */
+package com.wire.android.ui.emoji
+
+import android.widget.LinearLayout
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalContext
+import androidx.emoji2.emojipicker.EmojiPickerView
+import com.google.android.material.bottomsheet.BottomSheetDragHandleView
+
+@Composable
+fun EmojiPickerBottomSheet(
+    isVisible: Boolean,
+    onDismiss: () -> Unit = {},
+    onEmojiSelected: (emoji: String) -> Unit // <--
+) {
+    val context = LocalContext.current
+    val dialog = remember {
+        HandleDraggableBottomSheetDialog(context).apply {
+            setContentView(
+                LinearLayout(context).apply {
+                    orientation = LinearLayout.VERTICAL
+                    val handle = BottomSheetDragHandleView(context)
+                    getBehavior().dragHandle = handle
+                    addView(handle)
+                    addView(
+                        EmojiPickerView(context).apply {
+                            setOnEmojiPickedListener { emojiViewItem ->
+                                onEmojiSelected(emojiViewItem.emoji)
+                            }
+                        }
+                    )
+                }
+            )
+            setOnCancelListener { onDismiss.invoke() }
+        }
+    }
+    // Dialog
+    if (isVisible) {
+        dialog.show()
+    } else {
+        dialog.hide()
+    }
+}