Implementation of Floating Shell Button (#14154)

src/quo2/components/buttons/dynamic_button.cljs

@@ -6,13 +6,8 @@
             [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 (#{:jump-to :mention} type)
     (if pressed?
       (colors/custom-color-by-theme customization-color 60 50)
       (colors/custom-color-by-theme customization-color 50 60))
@@ -21,7 +16,7 @@
       (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)
+  (if (#{:jump-to :mention} type)
     colors/white
     (colors/theme-colors colors/white colors/neutral-100)))
 
@@ -57,7 +52,7 @@
                                        :bottom            6)}}])
 
 (defn dynamic-button
-  "[:dynamic-button opts]
+  "[dynamic-button opts]
    opts
    {:type                :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:bottom
     :on-press            fn
@@ -65,19 +60,20 @@
     :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}}]
+    (fn [{:keys [type on-press count customization-color style]}]
       [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)
+       [rn/view {:style (merge
+                         {:flex-direction   :row
+                          :height           24
+                          :border-radius    12
+                          :background-color (get-button-color type @pressed? (or customization-color :primary))}
+                         style)}
+        (when (#{:mention :search :search-with-label :bottom} type)
           [icon-view type])
-        (when (in? '(:jump-to :mention :notification-down :notification-up :search-with-label) type)
+        (when (#{: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)
@@ -99,5 +95,5 @@
              :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)
+        (when (#{:jump-to :notification-down :notification-up} type)
           [icon-view type])]])))

src/quo2/components/navigation/floating_shell_button.cljs

@@ -0,0 +1,35 @@
+(ns quo2.components.navigation.floating-shell-button
+  (:require [quo.react-native :as rn]
+            [quo2.components.buttons.dynamic-button :as dynamic-button]))
+
+(defn dynamic-button-view [type dynamic-buttons style]
+  (when-let [{:keys [count on-press customization-color]} (get dynamic-buttons type)]
+    [dynamic-button/dynamic-button
+     {:type                type
+      :on-press            on-press
+      :count               count
+      :style               style
+      :customization-color customization-color}]))
+
+(defn floating-shell-button
+  "[floating-shell-button dynamic-buttons style]
+  dynamic-buttons
+  {:button-type {:on-press on-press :count count}}"
+  [dynamic-buttons style]
+  [rn/view {:style (merge {:flex-direction    :row
+                           :margin-horizontal 12} style)}
+   ;; Left Section
+   [rn/view {:style {:flex 1}}
+    [dynamic-button-view :search dynamic-buttons {:position :absolute
+                                                  :right    8}]]
+   ;; Mid Section (jump-to)
+   [dynamic-button-view :jump-to dynamic-buttons nil]
+   ;; Right Section   
+   [rn/view {:style {:flex 1}}
+    [rn/view {:style {:position       :absolute
+                      :flex-direction :row
+                      :right          0}}
+     [dynamic-button-view :mention dynamic-buttons {:margin-left 8}]
+     [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}]
+     [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}]
+     [dynamic-button-view :bottom dynamic-buttons {:margin-left 8}]]]])

src/quo2/screens/buttons/dynamic_button.cljs

@@ -27,7 +27,7 @@
                   :type  :text}])
 
 (defn cool-preview []
-  (let [state (reagent/atom {:count 5 :type :jump-to})]
+  (let [state (reagent/atom {:count "5" :type :jump-to})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}

src/quo2/screens/main.cljs

@@ -34,6 +34,7 @@
             [quo2.screens.switcher.switcher-cards :as switcher-cards]
             [quo2.screens.navigation.top-nav :as top-nav]
             [quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
+            [quo2.screens.navigation.floating-shell-button :as floating-shell-button]
             [quo2.screens.tabs.account-selector :as account-selector]
             [quo2.screens.tabs.segmented-tab :as segmented]
             [quo2.screens.tabs.tabs :as tabs]
@@ -114,7 +115,10 @@
                  :component top-nav/preview-top-nav}
                 {:name      :page-nav
                  :insets    {:top false}
-                 :component page-nav/preview-page-nav}]
+                 :component page-nav/preview-page-nav}
+                {:name      :floating-shell-button
+                 :insets    {:top false}
+                 :component floating-shell-button/preview-floating-shell-button}]
    :notifications [{:name      :activity-logs
                     :insets    {:top false}
                     :component activity-logs/preview-activity-logs}]

src/quo2/screens/navigation/floating_shell_button.cljs

@@ -0,0 +1,59 @@
+(ns quo2.screens.navigation.floating-shell-button
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [reagent.core :as reagent]
+            [quo2.components.navigation.floating-shell-button :as quo2]
+            [quo2.foundations.colors :as colors]))
+
+(def descriptor [{:label "Show jump to?"
+                  :key   :show-jump-to?
+                  :type  :boolean}
+                 {:label "Show search?"
+                  :key   :show-search?
+                  :type  :boolean}
+                 {:label "Show mention?"
+                  :key   :show-mention?
+                  :type  :boolean}
+                 {:label   "Scroll Type"
+                  :key     :scroll-type
+                  :type    :select
+                  :options [{:key   :notification-up
+                             :value "Notification Up"}
+                            {:key   :notification-down
+                             :value "Notification Down"}
+                            {:key   :scroll-to-bottom
+                             :value "Scroll To Bottom"}]}])
+
+(defn mock-data [{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
+  (cond-> {}
+    show-jump-to?
+    (assoc :jump-to {:on-press #()})
+    show-search?
+    (assoc :search {:on-press #()})
+    show-mention?
+    (assoc :mention {:on-press #() :count 6 :customization-color :turquoise})
+    (= scroll-type :notification-up)
+    (assoc :notification-up {:on-press #() :count 8})
+    (= scroll-type :notification-down)
+    (assoc :notification-down {:on-press #() :count 8})
+    (= scroll-type :scroll-to-bottom)
+    (assoc :bottom {:on-press #()})))
+
+(defn cool-preview []
+  (let [state (reagent/atom {:show-jump-to? true
+                             :scroll-type   :notification-down})]
+    (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/floating-shell-button (mock-data @state)]]]])))
+
+(defn preview-floating-shell-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}]])