[Feature] Implement Emoji Picker

Signed-off-by: Mohamed Javid <[email protected]>

Author: smohamedjavid

resources/images/icons2/20x20/[email protected]

@@ -420,6 +420,7 @@
     "react-native-transparent-video"                 react-native-transparent-video
     "react-native-orientation-locker"                react-native-orientation-locker
     "react-native-gifted-charts"                     react-native-gifted-charts
+    "../src/js/data/emojis.json"                     #js []
     "../src/js/worklets/core.js"                     worklet-factory
     "../src/js/worklets/shell/bottom_tabs.js"        #js {}
     "../src/js/worklets/shell/home_stack.js"         #js {}

resources/images/icons2/20x20/[email protected]

@@ -1,6 +1,10 @@
 (ns quo2.components.dividers.divider-label.style
   (:require [quo2.foundations.colors :as colors]))
 
+(defn get-height
+  [tight?]
+  (if tight? 34 42))
+
 (defn- get-border-color
   [blur? theme]
   (colors/theme-colors (if blur? colors/neutral-80-opa-5 colors/neutral-10)
@@ -17,6 +21,7 @@
   [blur? tight? chevron theme]
   {:border-top-width 1
    :border-top-color (get-border-color blur? theme)
+   :height           (get-height tight?)
    :padding-top      (if tight? 6 14)
    :padding-bottom   7
    :padding-left     (if (= :left chevron) 16 20)

resources/images/icons2/20x20/[email protected]

@@ -1,8 +1,10 @@
 (ns quo2.components.profile.showcase-nav.style
   (:require [quo2.foundations.colors :as colors]))
 
+(def height 56)
+
 (def root-container
-  {:height 56})
+  {:height height})
 
 (defn container
   [state theme]

resources/images/icons2/20x20/[email protected]

@@ -5,7 +5,7 @@
             [react-native.core :as rn]))
 
 (defn- render-button
-  [{:keys [icon id]} _ _ {:keys [state on-press active-id]}]
+  [{:keys [icon id]} index _ {:keys [state on-press active-id]}]
   (let [active?       (= id active-id)
         button-type   (if active? :grey :ghost)
         scroll-state? (= state :scroll)]
@@ -17,21 +17,21 @@
       :icon-only?          true
       :on-press            (fn []
                              (when on-press
-                               (on-press id)))
+                               (on-press id index)))
       :container-style     style/button-container}
      icon]))
 
 (defn- view-internal
   [{:keys [theme container-style default-active state data on-press active-id]}]
   [rn/view
-   {:style               style/root-container
+   {:style               (merge style/root-container container-style)
     :accessibility-label :showcase-nav}
    [rn/flat-list
     {:data                              data
-     :key-fn                            str
+     :key-fn                            :id
      :horizontal                        true
      :shows-horizontal-scroll-indicator false
-     :content-container-style           (merge (style/container state theme) container-style)
+     :content-container-style           (style/container state theme)
      :render-fn                         render-button
      :render-data                       {:state     state
                                          :on-press  on-press

resources/images/icons2/20x20/[email protected]

@@ -6,15 +6,15 @@
 
 (defn- wrap-render-fn
   [f render-data]
-  (fn [data]
-    (reagent/as-element [f (.-item ^js data) (.-index ^js data)
-                         (.-separators ^js data) render-data
-                         (.-isActive ^js data) (.-drag ^js data)])))
+  (fn [^js data]
+    (reagent/as-element [f (.-item data) (.-index data)
+                         (.-separators data) render-data
+                         (.-isActive data) (.-drag data)])))
 
 (defn- wrap-on-drag-end-fn
   [f]
-  (fn [data]
-    (f (.-from ^js data) (.-to ^js data) (.-data ^js data))))
+  (fn [^js data]
+    (f (.-from data) (.-to data) (.-data data))))
 
 (defn- wrap-key-fn
   [f]

resources/images/icons2/20x20/[email protected]

@@ -51,6 +51,7 @@
     status-im.wallet.choose-recipient.core
     [status-im.wallet.core :as wallet]
     status-im.wallet.custom-tokens.core
+    status-im2.contexts.emoji-picker.events
     status-im2.contexts.shell.activity-center.events
     status-im2.contexts.shell.activity-center.notification.contact-requests.events
     status-im2.contexts.shell.jump-to.events

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,21 @@
+(ns status-im2.contexts.emoji-picker.constants
+  (:require [react-native.core :as rn]))
+
+(def search-debounce-ms 600)
+
+(def emojis-per-row 7)
+
+(def emoji-size 32)
+
+(def emoji-row-padding-horizontal 20)
+
+(def emoji-section-header-margin-bottom 6)
+
+(def emoji-row-separator-height 16)
+
+(def emoji-item-margin-right
+  (/ (- (:width (rn/get-window)) (* emoji-row-padding-horizontal 2) (* emoji-size emojis-per-row))
+     (- emojis-per-row 1)))
+
+(def get-item-height
+  (+ emoji-size emoji-row-separator-height))

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,112 @@
+(ns status-im2.contexts.emoji-picker.data
+  (:require [status-im2.contexts.emoji-picker.constants :as constants]
+            [utils.transforms :as transforms]))
+
+;; The dataset is grouped by number to reduce the file size.
+;; It is then categorized below:
+;; - people (0 and 1)
+;; - nature (3)
+;; - food (4)
+;; - activity (6)
+;; - travel (5)
+;; - objects (7)
+;; - symbols (8)
+;; - flags (9)
+;;
+;; NOTE: smileys & emoticons (0) and people (1) are grouped in one section
+
+(def emoji-data (transforms/js->clj (js/require "../src/js/data/emojis.json")))
+
+(def list-data
+  [{:title :t/emoji-people
+    :icon  :i/faces ;; 0 and 1
+    :id    :people
+    :data  []}
+   {:title :t/emoji-nature
+    :icon  :i/nature ;; 3
+    :id    :nature
+    :data  []}
+   {:title :t/emoji-food
+    :icon  :i/food ;; 4
+    :id    :food
+    :data  []}
+   {:title :t/emoji-activity
+    :icon  :i/activity ;; 6
+    :id    :activity
+    :data  []}
+   {:title :t/emoji-travel
+    :icon  :i/travel ;; 5
+    :id    :travel
+    :data  []}
+   {:title :t/emoji-objects
+    :icon  :i/objects ;; 7
+    :id    :objects
+    :data  []}
+   {:title :t/emoji-symbols
+    :icon  :i/symbols ;; 8
+    :id    :symbols
+    :data  []}
+   {:title :t/emoji-flags
+    :icon  :i/flags ;; 9
+    :id    :flags
+    :data  []}])
+
+(def categorized-and-partitioned
+  (->> (reduce
+        (fn [acc {:keys [group] :as emoji}]
+          (case group
+
+            0
+            (update-in acc [0 :data] conj emoji)
+
+            1
+            (update-in acc [0 :data] conj emoji)
+
+            3
+            (update-in acc [1 :data] conj emoji)
+
+            4
+            (update-in acc [2 :data] conj emoji)
+
+            5
+            (update-in acc [4 :data] conj emoji)
+
+            6
+            (update-in acc [3 :data] conj emoji)
+
+            7
+            (update-in acc [5 :data] conj emoji)
+
+            8
+            (update-in acc [6 :data] conj emoji)
+
+            9
+            (update-in acc [7 :data] conj emoji)))
+        list-data
+        emoji-data)
+       (reduce (fn [acc {:keys [data] :as item}]
+                 (conj acc (assoc item :data (partition-all constants/emojis-per-row data))))
+               [])))
+
+(def flatten-data
+  (mapcat (fn [{:keys [title id data]}]
+            (into [{:title title :id id :header? true}] data))
+   categorized-and-partitioned))
+
+(def filter-section-header-index
+  (keep-indexed #(when (:header? %2) %1) flatten-data))
+
+(defn get-section-header-index-in-data
+  [index]
+  (nth filter-section-header-index index))
+
+(def section-group
+  {0 :people
+   1 :people
+   3 :nature
+   4 :food
+   6 :activity
+   5 :travel
+   7 :objects
+   8 :symbols
+   9 :flags})

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,7 @@
+(ns status-im2.contexts.emoji-picker.events
+  (:require [utils.re-frame :as rf]))
+
+(rf/defn open-emoji-picker
+  {:events [:emoji-picker/open]}
+  [_ {:keys [on-select]}]
+  {:dispatch [:open-modal :emoji-picker {:on-select on-select}]})

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,53 @@
+(ns status-im2.contexts.emoji-picker.style
+  (:require [quo2.components.profile.showcase-nav.style :as showcase-nav.style]
+            [quo2.foundations.colors :as colors]
+            [react-native.safe-area :as safe-area]
+            [status-im2.contexts.emoji-picker.constants :as constants]))
+
+(def flex-spacer {:flex 1})
+
+(def category-nav-height (+ (safe-area/get-bottom) showcase-nav.style/height))
+
+(def search-input-container
+  {:padding-horizontal 20
+   :padding-bottom     12})
+
+(defn section-header
+  [theme]
+  {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
+   :z-index          1
+   :margin-bottom    constants/emoji-section-header-margin-bottom})
+
+(def emoji-row-container
+  {:padding-horizontal constants/emoji-row-padding-horizontal
+   :padding-bottom     constants/emoji-row-separator-height
+   :flex-direction     :row
+   :overflow           :hidden})
+
+(defn emoji-container
+  [last-item-on-row?]
+  (cond-> {:height       constants/emoji-size
+           :width        constants/emoji-size
+           :margin-right constants/emoji-item-margin-right}
+
+    last-item-on-row?
+    (dissoc :margin-right)))
+
+(def list-container-style
+  {:padding-bottom showcase-nav.style/height})
+
+(def empty-results
+  {:margin-top 100})
+
+(def category-container
+  {:height   category-nav-height
+   :overflow :hidden
+   :position :absolute
+   :left     0
+   :right    0
+   :bottom   0
+   :z-index  1})
+
+(def category-blur-container
+  {:height   category-nav-height
+   :overflow :hidden})

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,17 @@
+(ns status-im2.contexts.emoji-picker.utils
+  (:require [clojure.string :as string]
+            [status-im2.contexts.emoji-picker.constants :as constants]
+            [status-im2.contexts.emoji-picker.data :refer [emoji-data]]))
+
+(defn search-emoji
+  [search-query]
+  (let [cleaned-query (string/lower-case (string/trim search-query))]
+    (->> (filter (fn [{:keys [label tags emoticon]}]
+                   (or (string/includes? label cleaned-query)
+                       (when emoticon
+                         (if (vector? emoticon)
+                           (some #(string/includes? (string/lower-case %) cleaned-query) emoticon)
+                           (string/includes? (string/lower-case emoticon) cleaned-query)))
+                       (some #(string/includes? % cleaned-query) tags)))
+                 emoji-data)
+         (partition-all constants/emojis-per-row))))