[13524] React component (#13631)

src/quo2/components/reacts.cljs

@@ -0,0 +1,65 @@
+(ns quo2.components.reacts
+  (:require [quo2.components.text :as quo2-text]
+            [quo.react-native :as rn]
+            [quo.theme :as theme]
+            [quo2.foundations.colors :as colors]
+            [status-im.ui.components.icons.icons :as icons]))
+
+(def reaction-styling
+  {:flex-direction :row
+   :justify-content :center
+   :align-items :center
+   :padding-vertical 3
+   :padding-horizontal 8
+   :border-radius 8})
+
+(defn open-reactions-menu
+  [{:keys [on-press]}]
+  (let [dark? (theme/dark?)]
+    [rn/touchable-opacity {:on-press on-press
+                           :style (merge reaction-styling
+                                         {:margin-top 25
+                                          :border-width 1
+                                          :border-color (if dark?
+                                                          colors/white-opa-5
+                                                          colors/neutral-80)})}
+     [icons/icon :main-icons/add-reaction20
+      {:color (if dark?
+                colors/white
+                colors/black)}]]))
+
+(defn render-react
+  "Add your emoji as a param here"
+  [{:keys [emoji clicks neutral? on-press]}]
+  (let [dark? (theme/dark?)
+        text-color (if dark? colors/white
+                       colors/black)
+        numeric-value (int clicks)
+        clicks-positive? (pos? numeric-value)]
+    [rn/touchable-opacity {:on-press on-press
+                           :style (merge reaction-styling
+                                         (cond-> {:background-color
+                                                  (if dark?
+                                                    (if neutral?
+                                                      colors/neutral-70
+                                                      :transparent)
+                                                    (if neutral?
+                                                      colors/neutral-30
+                                                      :transparent))}
+                                           (and dark? (not neutral?)) (assoc :border-color colors/neutral-70
+                                                                             :border-width 1)
+                                           (and (not dark?) (not neutral?)) (assoc :border-color colors/neutral-30
+                                                                                   :border-width 1)))}
+     [icons/icon emoji {:no-color true
+                        :width 16
+                        :height 16}]
+     [quo2-text/text {:size :paragraph-2
+                      :weight :semi-bold
+                      :color text-color
+                      :flex-direction :row
+                      :align-items :center
+                      :justify-content :center}
+      (if clicks-positive?
+        (str " " numeric-value)
+        "")]]))
+

src/quo2/screens/main.cljs

@@ -24,6 +24,7 @@
             [quo2.screens.token-tag :as token-tag]
             [quo2.screens.wallet-user-avatar :as wallet-user-avatar]
             [quo2.screens.user-avatar :as user-avatar]
+            [quo2.screens.reacts :as reacts]
             [re-frame.core :as re-frame]))
 
 (def screens [{:name      :quo2-texts
@@ -35,6 +36,9 @@
               {:name      :quo2-user-avatar
                :insets    {:top false}
                :component user-avatar/preview-user-avatar}
+              {:name      :quo2-reacts
+               :insets    {:top false}
+               :component reacts/preview-reacts}
               {:name      :quo2-button
                :insets    {:top false}
                :component button/preview-button}

src/quo2/screens/reacts.cljs

@@ -0,0 +1,45 @@
+(ns quo2.screens.reacts
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [reagent.core :as reagent]
+            [quo2.components.reacts :as quo2]
+            [quo.design-system.colors :as colors]))
+
+(def descriptor [{:label "Count"
+                  :key   :clicks
+                  :type  :text}
+                 {:label "Emoji"
+                  :key   :emoji
+                  :type  :select
+                  :options [{:key :main-icons/love16
+                             :value "Love"}
+                            {:key :main-icons/thumbs-up16
+                             :value "Thumbs Up"}
+                            {:key :main-icons/thumbs-down16
+                             :value "Thumbs Down"}
+                            {:key :main-icons/laugh16
+                             :value "Laugh"}
+                            {:key :main-icons/sad16
+                             :value "Sad"}]}
+                 {:label "Neutral"
+                  :key   :neutral?
+                  :type  :boolean}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:emoji :main-icons/love16})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/render-react @state]
+        [quo2/open-reactions-menu @state]]])))
+
+(defn preview-reacts []
+  [rn/view {:background-color (:ui-background @colors/theme)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])