From 1cb16b4945eb2fc4f7029e08144fe1db62bf5a30 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Thu, 10 Aug 2023 13:27:25 +0200 Subject: [PATCH] chore: add composer button to quo2 and use in app (#16902) --- .../composer_button/component_spec.cljs | 38 ++++++++++++++ .../buttons/composer_button/style.cljs | 29 +++++++++++ .../buttons/composer_button/view.cljs | 29 +++++++++++ src/quo2/core.cljs | 2 + src/quo2/core_spec.cljs | 3 +- .../contexts/chat/composer/actions/view.cljs | 46 ++++++----------- .../quo_preview/buttons/composer_button.cljs | 49 +++++++++++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 4 ++ 8 files changed, 169 insertions(+), 31 deletions(-) create mode 100644 src/quo2/components/buttons/composer_button/component_spec.cljs create mode 100644 src/quo2/components/buttons/composer_button/style.cljs create mode 100644 src/quo2/components/buttons/composer_button/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/buttons/composer_button.cljs diff --git a/src/quo2/components/buttons/composer_button/component_spec.cljs b/src/quo2/components/buttons/composer_button/component_spec.cljs new file mode 100644 index 0000000000..91a9919de2 --- /dev/null +++ b/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)))) diff --git a/src/quo2/components/buttons/composer_button/style.cljs b/src/quo2/components/buttons/composer_button/style.cljs new file mode 100644 index 0000000000..d5c7c15d7d --- /dev/null +++ b/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)}) diff --git a/src/quo2/components/buttons/composer_button/view.cljs b/src/quo2/components/buttons/composer_button/view.cljs new file mode 100644 index 0000000000..5baf926e06 --- /dev/null +++ b/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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 5dd2f167ef..c20d95cdfa 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index ebb579e572..e86292d266 100644 --- a/src/quo2/core_spec.cljs +++ b/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] diff --git a/src/status_im2/contexts/chat/composer/actions/view.cljs b/src/status_im2/contexts/chat/composer/actions/view.cljs index 911174affb..ef21db40b8 100644 --- a/src/status_im2/contexts/chat/composer/actions/view.cljs +++ b/src/status_im2/contexts/chat/composer/actions/view.cljs @@ -72,12 +72,9 @@ (defn disabled-audio-button [] - [quo/button - {:on-press #(js/alert "to be implemented") - :icon-only? true - :type :outline - :size 32} - :i/audio]) + [quo/composer-button + {:on-press #(js/alert "to be implemented") + :icon :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 - :type :outline - :size 32 + :icon :i/camera :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 - :type :outline - :size 32 - :container-style {:margin-right 12}} - :i/image]) + :container-style {:margin-right 12} + :icon :i/image}]) (defn reaction-button [] - [quo/button - {:on-press #(js/alert "to be implemented") - :icon-only? true - :type :outline - :size 32 - :container-style {:margin-right 12}} - :i/reaction]) + [quo/composer-button + {:icon :i/reaction + :on-press #(js/alert "to be implemented") + :container-style {:margin-right 12}}]) (defn format-button [] - [quo/button - {:on-press #(js/alert "to be implemented") - :icon-only? true - :type :outline - :size 32} - :i/format]) + [quo/composer-button + {:on-press #(js/alert "to be implemented") + :icon :i/format}]) (defn view [props state animations window-height insets {:keys [edit images]}] diff --git a/src/status_im2/contexts/quo_preview/buttons/composer_button.cljs b/src/status_im2/contexts/quo_preview/buttons/composer_button.cljs new file mode 100644 index 0000000000..014d18fd5c --- /dev/null +++ b/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]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index c9638e4450..6620a7ff6e 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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}