From 13d2cf73fbadb97c95836545d408a75fa06b8bca Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 29 Jul 2020 13:16:21 -0400
Subject: [PATCH] feat: add emoji search

(cherry picked from commit 3cc9a98ce584a48f6c430a57126bd548e9dedc7e)
---
 .../AppLayouts/Chat/components/EmojiPopup.qml | 10 +++-
 .../Chat/components/EmojiSection.qml          | 46 +++++++++++++++----
 2 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/ui/app/AppLayouts/Chat/components/EmojiPopup.qml b/ui/app/AppLayouts/Chat/components/EmojiPopup.qml
index 10ac0bdde2..704dbbfa18 100644
--- a/ui/app/AppLayouts/Chat/components/EmojiPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/EmojiPopup.qml
@@ -11,6 +11,7 @@ import "./emojiList.js" as EmojiJSON
 Popup {
     property var addToChat: function () {}
     property var categories: []
+    property string searchString: searchBox.text
 
     id: popup
     modal: false
@@ -40,7 +41,6 @@ Popup {
                 categoryNames[emoji.category] = newCategories.length
                 newCategories.push([])
             }
-
             newCategories[categoryNames[emoji.category]].push(emoji)
         })
         if (newCategories[categoryNames.recent].length === 0) {
@@ -53,6 +53,10 @@ Popup {
         categories = newCategories
     }
 
+    onOpened: {
+        searchBox.forceActiveFocus(Qt.MouseFocusReason)
+    }
+
     contentItem: ColumnLayout {
         anchors.fill: parent
         spacing: 0
@@ -146,7 +150,9 @@ Popup {
                 id: emojiSectionsRepeater
                 model: popup.categories
 
-                EmojiSection {}
+                EmojiSection {
+                    searchString: popup.searchString
+                }
             }
         }
 
diff --git a/ui/app/AppLayouts/Chat/components/EmojiSection.qml b/ui/app/AppLayouts/Chat/components/EmojiSection.qml
index 01edd97d8b..ddfddbf904 100644
--- a/ui/app/AppLayouts/Chat/components/EmojiSection.qml
+++ b/ui/app/AppLayouts/Chat/components/EmojiSection.qml
@@ -5,16 +5,22 @@ import "../../../../shared"
 
 
 Item {
+    property string searchString: ""
+    property string searchStringLowercase: searchString.toLowerCase()
     property int imageWidth: 26
     property int imageMargin: 4
+    property var emojis: []
+    property var allEmojis: []
 
     id: emojiSection
+    visible: emojis.length > 0 || !!(modelData && modelData.length && modelData[0].empty && searchString === "")
 
     anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
     anchors.topMargin: index === 0 ? 0 : Style.current.padding
 
     width: parent.width
-    height: childrenRect.height + Style.current.padding
+    // childrenRect caused a binding loop here
+      height: this.visible ? emojiGrid.height + categoryText.height + noRecentText.height + Style.current.padding : 0
 
     StyledText {
         id: categoryText
@@ -24,6 +30,7 @@ Item {
     }
 
     StyledText {
+        id: noRecentText
         visible: !!(modelData && modelData.length && modelData[0].empty)
         text: qsTr("No recent emojis")
         color: Style.current.darkGrey
@@ -32,17 +39,35 @@ Item {
         anchors.topMargin: Style.current.smallPadding
     }
 
+    onSearchStringLowercaseChanged: {
+        if (emojiSection.searchStringLowercase === "") {
+            this.emojis = this.allEmojis
+            return
+        }
+        this.emojis = this.allEmojis.filter(function (emoji) {
+            return emoji.name.includes(emojiSection.searchStringLowercase) ||
+                    emoji.shortname.includes(emojiSection.searchStringLowercase) ||
+                    emoji.aliases.some(a => a.includes(emojiSection.searchStringLowercase))
+        })
+    }
+
     Component.onCompleted: {
+        var myEmojis = []
         modelData.forEach(function (emoji) {
             if (emoji.empty) {
                 return
             }
-            emojiModel.append({filename: emoji.unicode + '.png'})
+            myEmojis.push({
+                              filename: emoji.unicode + '.png',
+                              name: emoji.name,
+                              shortname: emoji.shortname,
+                              name: emoji.name,
+                              aliases: emoji.aliases
+                          })
         })
-    }
-
-    ListModel {
-        id: emojiModel
+        // We use two arrays for filtering purposes
+        this.emojis = myEmojis
+        this.allEmojis = myEmojis
     }
 
     GridView {
@@ -54,12 +79,13 @@ Item {
         visible: count > 0
         cellWidth: emojiSection.imageWidth + emojiSection.imageMargin * 2
         cellHeight: emojiSection.imageWidth + emojiSection.imageMargin * 2
-        model: emojiModel
+        model: emojiSection.emojis
         focus: true
         clip: true
         interactive: false
 
         delegate: Item {
+            id: emojiContainer
             width: emojiGrid.cellWidth
             height: emojiGrid.cellHeight
 
@@ -71,14 +97,14 @@ Item {
                 SVGImage {
                     width: emojiSection.imageWidth
                     height: emojiSection.imageWidth
-                    source: "../../../../imports/twemoji/26x26/" + filename
+                    source: "../../../../imports/twemoji/26x26/" + modelData.filename
 
                     MouseArea {
                         cursorShape: Qt.PointingHandCursor
                         anchors.fill: parent
                         onClicked: {
-                            const extenstionIndex = filename.lastIndexOf('.');
-                            let iconCodePoint = filename
+                            const extenstionIndex = modelData.filename.lastIndexOf('.');
+                            let iconCodePoint = modelData.filename
                             if (extenstionIndex > -1) {
                                 iconCodePoint = iconCodePoint.substring(0, extenstionIndex)
                             }