Completion on emoji WIP

vector/src/main/java/im/vector/riotx/features/autocomplete/emoji/AutocompleteEmojiController.kt

@@ -23,7 +23,6 @@ import im.vector.riotx.EmojiCompatFontProvider
 import im.vector.riotx.features.autocomplete.AutocompleteClickListener
 import im.vector.riotx.features.reactions.ReactionClickListener
 import im.vector.riotx.features.reactions.data.EmojiItem
-import im.vector.riotx.features.reactions.emojiSearchResultItem
 import javax.inject.Inject
 
 class AutocompleteEmojiController @Inject constructor(
@@ -49,16 +48,16 @@ class AutocompleteEmojiController @Inject constructor(
             return
         }
         data.forEach { emojiItem ->
-            emojiSearchResultItem {
+            autocompleteEmojiItem {
                 id(emojiItem.name)
                 emojiItem(emojiItem)
                 emojiTypeFace(emojiTypeface)
-                //currentQuery(data.query)
+                onClickListener(
-                onClickListener(object : ReactionClickListener {
+                        object : ReactionClickListener {
-                    override fun onReactionSelected(reaction: String) {
+                            override fun onReactionSelected(reaction: String) {
-                        listener?.onItemClick(reaction)
+                                listener?.onItemClick(reaction)
-                    }
+                            }
-                }
+                        }
                 )
             }
         }

vector/src/main/java/im/vector/riotx/features/autocomplete/emoji/AutocompleteEmojiItem.kt

@@ -16,37 +16,43 @@
 
 package im.vector.riotx.features.autocomplete.emoji
 
-import android.view.View
+import android.graphics.Typeface
 import android.widget.TextView
 import com.airbnb.epoxy.EpoxyAttribute
 import com.airbnb.epoxy.EpoxyModelClass
 import im.vector.riotx.R
 import im.vector.riotx.core.epoxy.VectorEpoxyHolder
 import im.vector.riotx.core.epoxy.VectorEpoxyModel
+import im.vector.riotx.core.extensions.setTextOrHide
+import im.vector.riotx.features.reactions.ReactionClickListener
+import im.vector.riotx.features.reactions.data.EmojiItem
 
-//@EpoxyModelClass(layout = R.layout.item_autocomplete_emoji)
+@EpoxyModelClass(layout = R.layout.item_autocomplete_emoji)
-//abstract class AutocompleteEmojiItem : VectorEpoxyModel<AutocompleteEmojiItem.Holder>() {
+abstract class AutocompleteEmojiItem : VectorEpoxyModel<AutocompleteEmojiItem.Holder>() {
-//
+
-//    @EpoxyAttribute
+    @EpoxyAttribute
-//    var name: CharSequence? = null
+    lateinit var emojiItem: EmojiItem
-//    @EpoxyAttribute
+
-//    var parameters: CharSequence? = null
+    @EpoxyAttribute
-//    @EpoxyAttribute
+    var emojiTypeFace: Typeface? = null
-//    var description: CharSequence? = null
+
-//    @EpoxyAttribute
+    @EpoxyAttribute
-//    var clickListener: View.OnClickListener? = null
+    var onClickListener: ReactionClickListener? = null
-//
+
-//    override fun bind(holder: Holder) {
+    override fun bind(holder: Holder) {
-//        holder.view.setOnClickListener(clickListener)
+        holder.emojiText.text = emojiItem.emoji
-//
+        holder.emojiText.typeface = emojiTypeFace ?: Typeface.DEFAULT
-//        holder.nameView.text = name
+        holder.emojiNameText.text = emojiItem.name
-//        holder.parametersView.text = parameters
+        holder.emojiKeywordText.setTextOrHide(emojiItem.keywords.joinToString())
-//        holder.descriptionView.text = description
+
-//    }
+        holder.view.setOnClickListener {
-//
+            onClickListener?.onReactionSelected(emojiItem.emoji)
-//    class Holder : VectorEpoxyHolder() {
+        }
-//        val nameView by bind<TextView>(R.id.commandName)
+    }
-//        val parametersView by bind<TextView>(R.id.commandParameter)
+
-//        val descriptionView by bind<TextView>(R.id.commandDescription)
+    class Holder : VectorEpoxyHolder() {
-//    }
+        val emojiText by bind<TextView>(R.id.itemAutocompleteEmoji)
-//}
+        val emojiNameText by bind<TextView>(R.id.itemAutocompleteEmojiName)
+        val emojiKeywordText by bind<TextView>(R.id.itemAutocompleteEmojiSubname)
+    }
+}

vector/src/main/java/im/vector/riotx/features/home/room/detail/AutoCompleter.kt

@@ -172,10 +172,20 @@ class AutoCompleter @Inject constructor(
                 .with(backgroundDrawable)
                 .with(object : AutocompleteCallback<String> {
                     override fun onPopupItemClicked(editable: Editable, item: String): Boolean {
-                        editable.clear()
+                        // Detect last ":" and remove it
-                        editable
+                        var startIndex = editable.lastIndexOf(":")
-                                .append(item)
+                        if (startIndex == -1) {
-                                .append(" ")
+                            startIndex = 0
+                        }
+
+                        // Detect next word separator
+                        var endIndex = editable.indexOf(" ", startIndex)
+                        if (endIndex == -1) {
+                            endIndex = editable.length
+                        }
+
+                        // Replace the word by its completion
+                        editable.replace(startIndex, endIndex, item)
                         return true
                     }
 

vector/src/main/res/layout/item_autocomplete_emoji.xml

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:background="?riotx_background"
+    android:foreground="?attr/selectableItemBackground"
+    android:orientation="horizontal"
+    android:padding="8dp">
+
+    <TextView
+        android:id="@+id/itemAutocompleteEmoji"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:textColor="@color/black"
+        android:textSize="20dp"
+        tools:ignore="SpUsage"
+        tools:text="@sample/reactions.json/data/reaction" />
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:layout_marginStart="8dp"
+        android:layout_marginLeft="8dp"
+        android:orientation="vertical">
+
+        <TextView
+            android:id="@+id/itemAutocompleteEmojiName"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_vertical"
+            android:maxLines="1"
+            android:textColor="?riotx_text_primary"
+            android:textSize="12sp"
+            android:textStyle="bold"
+            tools:text="name" />
+
+        <TextView
+            android:id="@+id/itemAutocompleteEmojiSubname"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_vertical"
+            android:layout_marginTop="2dp"
+            android:ellipsize="end"
+            android:maxLines="1"
+            android:textColor="?riotx_text_secondary"
+            android:textSize="12sp"
+            android:visibility="gone"
+            tools:text="name"
+            tools:visibility="visible" />
+
+    </LinearLayout>
+
+</LinearLayout>