chore: add composer button to quo2 and use in app (#16902)

src/quo2/components/buttons/composer_button/component_spec.cljs

@@ -0,0 +1,38 @@
+(ns quo2.components.buttons.composer-button.component-spec
+  (:require [quo2.components.buttons.composer-button.view :as composer-button]
+            [test-helpers.component :as h]))
+
+(h/describe "button tests"
+  (h/test "default render of composer button component"
+    (h/render [composer-button/view
+               {:icon                :i/placeholder
+                :accessibility-label "test-button"}])
+    (h/is-truthy (h/get-by-label-text "test-button")))
+
+  (h/test "button on-press works"
+    (let [event (h/mock-fn)]
+      (h/render [composer-button/view
+                 {:icon                :i/placeholder
+                  :on-press            event
+                  :accessibility-label "test-button"}])
+      (h/fire-event :press (h/get-by-label-text "test-button"))
+      (h/was-called event)))
+
+  (h/test "button on-press disabled when disabled"
+    (let [event (h/mock-fn)]
+      (h/render [composer-button/view
+                 {:icon                :i/placeholder
+                  :on-press            event
+                  :accessibility-label "test-button"
+                  :disabled?           true}])
+      (h/fire-event :press (h/get-by-label-text "test-button"))
+      (h/was-not-called event)))
+
+  (h/test "button on-long-press works"
+    (let [event (h/mock-fn)]
+      (h/render [composer-button/view
+                 {:icon                :i/placeholder
+                  :on-long-press       event
+                  :accessibility-label "test-button"}])
+      (h/fire-event :long-press (h/get-by-label-text "test-button"))
+      (h/was-called event))))

src/quo2/components/buttons/composer_button/style.cljs

@@ -0,0 +1,29 @@
+(ns quo2.components.buttons.composer-button.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-border-color
+  [{:keys [pressed? blur? theme]}]
+  (cond
+    (and pressed? blur?) (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
+    (= pressed? true)    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+    (= blur? true)       (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+    :else                (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)))
+
+(defn get-label-color
+  [{:keys [blur? theme]}]
+  (cond
+    blur? (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
+    :else (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
+
+(defn main
+  [{:keys [pressed? blur? theme disabled?]}]
+  {:border-color    (get-border-color {:pressed? pressed?
+                                       :blur?    blur?
+                                       :theme    theme})
+   :border-width    1
+   :border-radius   10
+   :width           32
+   :height          32
+   :justify-content :center
+   :align-items     :center
+   :opacity         (when disabled? 0.3)})

src/quo2/components/buttons/composer_button/view.cljs

@@ -0,0 +1,29 @@
+(ns quo2.components.buttons.composer-button.view
+  (:require [quo2.components.icon :as quo2.icons]
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [quo2.components.buttons.composer-button.style :as style]))
+
+(defn- view-internal
+  [_ _]
+  (let [pressed? (reagent/atom false)]
+    (fn
+      [{:keys [on-press on-long-press disabled? theme blur? icon accessibility-label container-style]}]
+      [rn/pressable
+       {:accessibility-label (or accessibility-label :composer-button)
+        :on-press            on-press
+        :on-press-in         #(reset! pressed? true)
+        :on-press-out        #(reset! pressed? nil)
+        :on-long-press       on-long-press
+        :disabled            disabled?
+        :style               (merge (style/main {:pressed?  @pressed?
+                                                 :blur?     blur?
+                                                 :theme     theme
+                                                 :disabled? disabled?})
+                                    container-style)}
+       [quo2.icons/icon icon
+        {:color (style/get-label-color {:blur? blur?
+                                        :theme theme})}]])))
+
+(def view (theme/with-theme view-internal))

src/quo2/core.cljs

@@ -9,6 +9,7 @@
     quo2.components.avatars.wallet-user-avatar
     quo2.components.banners.banner.view
     quo2.components.buttons.button.view
+    quo2.components.buttons.composer-button.view
     quo2.components.buttons.dynamic-button.view
     quo2.components.buttons.predictive-keyboard.view
     quo2.components.buttons.slide-button.view
@@ -129,6 +130,7 @@
 
 ;;;; Buttons
 (def button quo2.components.buttons.button.view/button)
+(def composer-button quo2.components.buttons.composer-button.view/view)
 (def dynamic-button quo2.components.buttons.dynamic-button.view/view)
 (def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view)
 (def slide-button quo2.components.buttons.slide-button.view/view)

src/quo2/core_spec.cljs

@@ -3,14 +3,15 @@
     [quo2.components.avatars.account-avatar.component-spec]
     [quo2.components.avatars.user-avatar.component-spec]
     [quo2.components.banners.banner.component-spec]
+    [quo2.components.browser.browser-input.component-spec]
     [quo2.components.buttons.button.component-spec]
+    [quo2.components.buttons.composer-button.component-spec]
     [quo2.components.buttons.predictive-keyboard.component-spec]
     [quo2.components.buttons.slide-button.component-spec]
     [quo2.components.calendar.calendar.component-spec]
     [quo2.components.calendar.calendar-day.component-spec]
     [quo2.components.calendar.calendar.month-picker.component-spec]
     [quo2.components.calendar.calendar-year.component-spec]
-    [quo2.components.browser.browser-input.component-spec]
     [quo2.components.colors.color-picker.component-spec]
     [quo2.components.counter.counter.component-spec]
     [quo2.components.counter.step.component-spec]

src/status_im2/contexts/chat/composer/actions/view.cljs

@@ -72,12 +72,9 @@
 
 (defn disabled-audio-button
   []
-  [quo/button
+  [quo/composer-button
-   {:on-press   #(js/alert "to be implemented")
+   {:on-press #(js/alert "to be implemented")
-    :icon-only? true
+    :icon     :i/audio}])
-    :type       :outline
-    :size       32}
-   :i/audio])
 
 (defn audio-button
   [{:keys [record-reset-fn input-ref]}
@@ -169,13 +166,11 @@
 (defn camera-button
   []
   (let [images-count (count (vals (rf/sub [:chats/sending-image])))]
-    [quo/button
+    [quo/composer-button
      {:on-press        #(go-to-camera images-count)
-      :icon-only?      true
+      :icon            :i/camera
-      :type            :outline
-      :size            32
       :container-style {:margin-right 12}}
-     :i/camera]))
+    ]))
 
 (defn open-photo-selector
   [{:keys [input-ref]}
@@ -196,33 +191,24 @@
 
 (defn image-button
   [props animations insets]
-  [quo/button
+  [quo/composer-button
    {:on-press            #(open-photo-selector props animations insets)
     :accessibility-label :open-images-button
-    :icon-only?          true
+    :container-style     {:margin-right 12}
-    :type                :outline
+    :icon                :i/image}])
-    :size                32
-    :container-style     {:margin-right 12}}
-   :i/image])
 
 (defn reaction-button
   []
-  [quo/button
+  [quo/composer-button
-   {:on-press        #(js/alert "to be implemented")
+   {:icon            :i/reaction
-    :icon-only?      true
+    :on-press        #(js/alert "to be implemented")
-    :type            :outline
+    :container-style {:margin-right 12}}])
-    :size            32
-    :container-style {:margin-right 12}}
-   :i/reaction])
 
 (defn format-button
   []
-  [quo/button
+  [quo/composer-button
-   {:on-press   #(js/alert "to be implemented")
+   {:on-press #(js/alert "to be implemented")
-    :icon-only? true
+    :icon     :i/format}])
-    :type       :outline
-    :size       32}
-   :i/format])
 
 (defn view
   [props state animations window-height insets {:keys [edit images]}]

src/status_im2/contexts/quo_preview/buttons/composer_button.cljs

@@ -0,0 +1,49 @@
+(ns status-im2.contexts.quo-preview.buttons.composer-button
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo2.theme]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.common.resources :as resources]))
+
+(def descriptor
+  [{:label "Blur?:"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Disabled?:"
+    :key   :disabled?
+    :type  :boolean}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:icon          :i/placeholder
+                             :on-press      #(js/alert "pressed")
+                             :on-long-press #(js/alert "long pressed")})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:flex 1 :padding-bottom 20}
+        [rn/view {:height 200}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:flex            1
+          :align-items     :center
+          :justify-content :center}
+         (when (:blur? @state)
+           [rn/image
+            {:source (if (= :light (quo2.theme/get-theme))
+                       (resources/get-mock-image :community-cover)
+                       (resources/get-mock-image :dark-blur-bg))
+             :style  {:position :absolute
+                      :top      200
+                      :left     0
+                      :right    0
+                      :bottom   0}}])
+         [quo/composer-button @state]]]])))
+
+(defn preview-composer-button
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-95)
+    :flex             1}
+   [cool-preview]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -16,6 +16,7 @@
     [status-im2.contexts.quo-preview.avatars.wallet-user-avatar :as wallet-user-avatar]
     [status-im2.contexts.quo-preview.banners.banner :as banner]
     [status-im2.contexts.quo-preview.buttons.button :as button]
+    [status-im2.contexts.quo-preview.buttons.composer-button :as composer-button]
     [status-im2.contexts.quo-preview.buttons.slide-button :as slide-button]
     [status-im2.contexts.quo-preview.buttons.dynamic-button :as dynamic-button]
     [status-im2.contexts.quo-preview.buttons.predictive-keyboard :as predictive-keyboard]
@@ -147,6 +148,9 @@
    :buttons           [{:name      :button
                         :options   {:topBar {:visible true}}
                         :component button/preview-button}
+                       {:name      :composer-button
+                        :options   {:topBar {:visible true}}
+                        :component composer-button/preview-composer-button}
                        {:name      :dynamic-button
                         :options   {:topBar {:visible true}}
                         :component dynamic-button/preview-dynamic-button}