Implementation of Dynamic Button Component (#14127)

src/quo2/components/buttons/dynamic_button.cljs

@@ -0,0 +1,103 @@
+(ns quo2.components.buttons.dynamic-button
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [status-im.i18n.i18n :as i18n]
+            [quo2.components.icon :as icon]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.markdown.text :as text]))
+
+(defn- in?
+  "true if collection contains element"
+  [collection element]
+  (some #(= element %) collection))
+
+(defn- get-button-color [type pressed? customization-color]
+  (if (in? '(:jump-to :mention) type)
+    (if pressed?
+      (colors/custom-color-by-theme customization-color 60 50)
+      (colors/custom-color-by-theme customization-color 50 60))
+    (if pressed?
+      (colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80)
+      (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70))))
+
+(defn- get-icon-and-text-color [type]
+  (if (in? '(:jump-to :mention) type)
+    colors/white
+    (colors/theme-colors colors/white colors/neutral-100)))
+
+(defn- icon-view [type]
+  [icon/icon
+   (case type
+     :jump-to           :main-icons2/jump-to
+     :mention           :main-icons2/mention
+     :notification-down :main-icons2/arrow-down
+     :notification-up   :main-icons2/arrow-up
+     :search-with-label :main-icons2/search
+     :search            :main-icons2/search
+     :bottom            :main-icons2/arrow-down)
+   {:size            12
+    :color           (get-icon-and-text-color type)
+    :container-style {:margin-top    6
+                      :margin-bottom 6
+                      :margin-left   (case type
+                                       :jump-to           0
+                                       :mention           8
+                                       :notification-down 2
+                                       :notification-up   2
+                                       :search-with-label 8
+                                       :search            6
+                                       :bottom            6)
+                      :margin-right  (case type
+                                       :jump-to           8
+                                       :mention           2
+                                       :notification-down 8
+                                       :notification-up   8
+                                       :search-with-label 4
+                                       :search            6
+                                       :bottom            6)}}])
+
+(defn dynamic-button
+  "[:dynamic-button opts]
+   opts
+   {:type                :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:bottom
+    :on-press            fn
+    :count               mentions or notifications count
+    :customization-color customize jump-to and mention button color}"
+  [_]
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [type on-press count customization-color]
+          :or {customization-color :primary}}]
+      [rn/touchable-without-feedback
+       {:on-press-in      #(reset! pressed? true)
+        :on-press-out     #(reset! pressed? false)
+        :on-press         on-press}
+       [rn/view {:style {:flex-direction   :row
+                         :height           24
+                         :border-radius    12
+                         :background-color (get-button-color type @pressed? customization-color)}}
+        (when (in? '(:mention :search :search-with-label :bottom) type)
+          [icon-view type])
+        (when (in? '(:jump-to :mention :notification-down :notification-up :search-with-label) type)
+          [text/text {:weight :medium
+                      :size   :paragraph-2
+                      :style  {:color         (get-icon-and-text-color type)
+                               :margin-top    2.5
+                               :margin-bottom 3.5
+                               :margin-left   (case type
+                                                :jump-to           8
+                                                :mention           0
+                                                :notification-down 8
+                                                :notification-up   8
+                                                :search-with-label 0)
+                               :margin-right  (case type
+                                                :jump-to           0
+                                                :mention           8
+                                                :notification-down 0
+                                                :notification-up   0
+                                                :search-with-label 8)}}
+           (case type
+             :jump-to                                       (i18n/label :t/jump-to)
+             :search-with-label                             (i18n/label :t/back)
+             (:mention :notification-down :notification-up) (str count))])
+        (when (in? '(:jump-to :notification-down :notification-up) type)
+          [icon-view type])]])))

src/quo2/screens/buttons/dynamic_button.cljs

@@ -0,0 +1,45 @@
+(ns quo2.screens.buttons.dynamic-button
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.buttons.dynamic-button :as quo2]))
+
+(def descriptor [{:label   "Type:"
+                  :key     :type
+                  :type    :select
+                  :options [{:key   :jump-to
+                             :value "Jump To"}
+                            {:key   :mention
+                             :value "Mention"}
+                            {:key   :notification-down
+                             :value "Notification Down"}
+                            {:key   :notification-up
+                             :value "Notification Up"}
+                            {:key   :search
+                             :value "Search"}
+                            {:key   :search-with-label
+                             :value "Search With Label"}
+                            {:key   :bottom
+                             :value "Bottom"}]}
+                 {:label "Count"
+                  :key   :count
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:count 5 :type :jump-to})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view {:padding-vertical 60
+                  :align-items      :center}
+         [quo2/dynamic-button @state]]]])))
+
+(defn preview-dynamic-button []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/main.cljs

@@ -13,6 +13,7 @@
             [quo2.screens.avatars.user-avatar :as user-avatar]
             [quo2.screens.avatars.wallet-user-avatar :as wallet-user-avatar]
             [quo2.screens.buttons.button :as button]
+            [quo2.screens.buttons.dynamic-button :as dynamic-button]
             [quo2.screens.counter.counter :as counter]
             [quo2.screens.community.community-card-view :as community-card]
             [quo2.screens.dividers.divider-label :as divider-label]
@@ -64,7 +65,10 @@
              :component channel-avatar/preview-channel-avatar}]
    :buttons [{:name      :button
               :insets    {:top false}
-              :component button/preview-button}]
+              :component button/preview-button}
+             {:name      :dynamic-button
+              :insets    {:top false}
+              :component dynamic-button/preview-dynamic-button}]
    :community [{:name      :community-cards
                 :insets    {:top false}
                 :component community-card/preview-community-card}]

translations/en.json

@@ -1807,5 +1807,6 @@
     "admin": "Admin",
     "replies": "Replies",
     "identity-verification": "Identity verification",
-    "membership": "Membership"
+    "membership": "Membership",
+    "jump-to": "Jump to"
 }