From 846d628a9dc6111cf6e92a3c5e494d46b30fde9b Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Wed, 11 Jan 2023 08:59:00 +0000 Subject: [PATCH] chore: use banner from quo library (#14629) --- .../component_spec.cljs} | 12 +++- src/quo2/components/banners/banner/style.cljs | 31 ++++++--- src/quo2/components/banners/banner/view.cljs | 38 ++++++----- src/quo2/core_spec.cljs | 2 +- .../screens/chat/pin_limit_popover/style.cljs | 5 +- .../screens/chat/pin_limit_popover/view.cljs | 68 ++++++++++--------- .../ui2/screens/chat/pinned_banner/view.cljs | 36 ---------- src/status_im2/common/not_implemented.cljs | 5 +- .../chat/messages/pin/banner/view.cljs | 16 ++--- .../contexts/chat/messages/view.cljs | 65 ++++++++++-------- .../contexts/quo_preview/banners/banner.cljs | 11 +-- 11 files changed, 145 insertions(+), 144 deletions(-) rename src/quo2/components/banners/{__tests__/banner_component_spec.cljs => banner/component_spec.cljs} (55%) delete mode 100644 src/status_im/ui2/screens/chat/pinned_banner/view.cljs diff --git a/src/quo2/components/banners/__tests__/banner_component_spec.cljs b/src/quo2/components/banners/banner/component_spec.cljs similarity index 55% rename from src/quo2/components/banners/__tests__/banner_component_spec.cljs rename to src/quo2/components/banners/banner/component_spec.cljs index c3084021df..ca503d474f 100644 --- a/src/quo2/components/banners/__tests__/banner_component_spec.cljs +++ b/src/quo2/components/banners/banner/component_spec.cljs @@ -1,4 +1,4 @@ -(ns quo2.components.banners.--tests--.banner-component-spec +(ns quo2.components.banners.banner.component-spec (:require ["@testing-library/react-native" :as rtl] [quo2.components.banners.banner.view :as banner] [reagent.core :as reagent])) @@ -15,3 +15,13 @@ (.toBeTruthy)) (-> (js/expect (rtl/screen.getByText "5")) (.toBeTruthy)))) + +(js/global.test "banner component fires an event when pressed" + (let [mock-fn (js/jest.fn)] + (fn [] + (render-banner {:on-press mock-fn + :pins-count "5" + :latest-pin-text "this message"}) + (rtl/fireEvent.press (rtl/screen.getByText "this message")) + (-> (js/expect mock-fn) + (.toHaveBeenCalledTimes 1))))) diff --git a/src/quo2/components/banners/banner/style.cljs b/src/quo2/components/banners/banner/style.cljs index fae09bfe35..6de240f470 100644 --- a/src/quo2/components/banners/banner/style.cljs +++ b/src/quo2/components/banners/banner/style.cljs @@ -3,17 +3,26 @@ (def container - {:width "100%" - :height 50 - :background-color colors/primary-50-opa-20 - :flex-direction :row - :align-items :center - :padding-horizontal 20 - :padding-vertical 10}) + {:height 40 + :flex 1 + :background-color colors/primary-50-opa-20 + :flex-direction :row + :align-items :center + :padding-right 22 + :padding-left 20 + :padding-vertical 10}) (def counter - {:padding-right 22 - :height 20 - :width 20 + {:flex 1 :justify-content :center - :align-items :center}) \ No newline at end of file + :align-items :center}) + +(def icon + {:flex 1 + :margin-right 10}) + +(defn text + [hide-pin?] + {:flex (if hide-pin? 16 15) + :margin-right 10}) + diff --git a/src/quo2/components/banners/banner/view.cljs b/src/quo2/components/banners/banner/view.cljs index cc31584134..0d8c8f429b 100644 --- a/src/quo2/components/banners/banner/view.cljs +++ b/src/quo2/components/banners/banner/view.cljs @@ -3,22 +3,28 @@ [quo2.components.counter.counter :as counter] [quo2.components.icon :as icons] [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors] [react-native.core :as rn])) (defn banner - [{:keys [show-pin? latest-pin-text pins-count on-press]}] - [rn/touchable-opacity - {:accessibility-label :pinned-banner - :style style/container - :active-opacity 1 - :on-press on-press} - (when show-pin? [icons/icon :i/pin {:size 20}]) - [text/text - {:number-of-lines 1 - :size :paragraph-2 - :style {:margin-left 10 :margin-right 50}} - latest-pin-text] - [rn/view - {:accessibility-label :pins-count - :style style/counter} - (when (pos? pins-count) [counter/counter {:type :secondary} pins-count])]]) \ No newline at end of file + [{:keys [hide-pin? latest-pin-text pins-count on-press]}] + (when (pos? pins-count) + [rn/touchable-opacity + {:accessibility-label :pinned-banner + :style style/container + :active-opacity 1 + :on-press on-press} + (when-not hide-pin? + [rn/view {:style style/icon} + [icons/icon :i/pin + {:color (colors/theme-colors colors/neutral-100 colors/white) + :size 20}]]) + [rn/view {:style (style/text hide-pin?)} + [text/text + {:number-of-lines 1 + :size :paragraph-2} + latest-pin-text]] + [rn/view + {:accessibility-label :pins-count + :style style/counter} + (when (> pins-count 1) [counter/counter {:type :secondary} pins-count])]])) \ No newline at end of file diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 7b1068b247..b276262b94 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -1,5 +1,5 @@ (ns quo2.core-spec - (:require [quo2.components.banners.--tests--.banner-component-spec] + (:require [quo2.components.banners.banner.component-spec] [quo2.components.buttons.--tests--.buttons-component-spec] [quo2.components.counter.--tests--.counter-component-spec] [quo2.components.dividers.--tests--.divider-label-component-spec] diff --git a/src/status_im/ui2/screens/chat/pin_limit_popover/style.cljs b/src/status_im/ui2/screens/chat/pin_limit_popover/style.cljs index ff6d411d0b..045c98b957 100644 --- a/src/status_im/ui2/screens/chat/pin_limit_popover/style.cljs +++ b/src/status_im/ui2/screens/chat/pin_limit_popover/style.cljs @@ -3,9 +3,8 @@ (defn pin-popover [width] - {:position :absolute - :width (- width 16) - :left 8 + {:width (- width 16) + :margin-left 8 :background-color (colors/theme-colors colors/neutral-80-opa-90 colors/white-opa-90) :flex-direction :row :border-radius 16 diff --git a/src/status_im/ui2/screens/chat/pin_limit_popover/view.cljs b/src/status_im/ui2/screens/chat/pin_limit_popover/view.cljs index 8ccd5def5f..fe9b743ac5 100644 --- a/src/status_im/ui2/screens/chat/pin_limit_popover/view.cljs +++ b/src/status_im/ui2/screens/chat/pin_limit_popover/view.cljs @@ -24,38 +24,40 @@ (reanimated/with-timing (if show-pin-limit-modal? 1 0))) (reanimated/set-shared-value z-index-animation (reanimated/with-timing (if show-pin-limit-modal? 10 -1))))) - [reanimated/view - {:style (reanimated/apply-animations-to-style - {:opacity opacity-animation - :z-index z-index-animation} - (style/pin-popover width)) - :accessibility-label :pin-limit-popover} - [rn/view {:style (style/pin-alert-container)} - [rn/view {:style style/pin-alert-circle} - [rn/text {:style {:color colors/danger-50}} "!"]]] - [rn/view {:style {:margin-left 8}} - [quo/text {:weight :semi-bold :color (colors/theme-colors colors/white colors/neutral-100)} - (i18n/label :t/cannot-pin-title)] - [quo/text {:size :paragraph-2 :color (colors/theme-colors colors/white colors/neutral-100)} - (i18n/label :t/cannot-pin-desc)] - [rn/touchable-opacity - {:accessibility-label :view-pinned-messages - :active-opacity 1 - :on-press (fn [] - (rf/dispatch [:pin-message/hide-pin-limit-modal chat-id]) - (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])) - :style style/view-pinned-messages} - [quo/text {:size :paragraph-2 :weight :medium :color colors/white} - (i18n/label :t/view-pinned-messages)]]] - [rn/touchable-opacity - {:accessibility-label :close-pin-limit-popover - :active-opacity 1 - :on-press #(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id]) - :style {:position :absolute - :top 16 - :right 16}} - [quo/icon :i/close - {:color (colors/theme-colors colors/white colors/neutral-100) - :size 12}]]]))]) + (when show-pin-limit-modal? + [reanimated/view + {:style (reanimated/apply-animations-to-style + {:opacity opacity-animation + :z-index z-index-animation} + (style/pin-popover width)) + :accessibility-label :pin-limit-popover} + [rn/view {:style (style/pin-alert-container)} + [rn/view {:style style/pin-alert-circle} + [rn/text {:style {:color colors/danger-50}} "!"]]] + [rn/view {:style {:margin-left 8}} + [quo/text {:weight :semi-bold :color (colors/theme-colors colors/white colors/neutral-100)} + (i18n/label :t/cannot-pin-title)] + [quo/text {:size :paragraph-2 :color (colors/theme-colors colors/white colors/neutral-100)} + (i18n/label :t/cannot-pin-desc)] + [rn/touchable-opacity + {:accessibility-label :view-pinned-messages + :active-opacity 1 + :on-press (fn [] + (rf/dispatch [:pin-message/hide-pin-limit-modal chat-id]) + (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list + chat-id])) + :style style/view-pinned-messages} + [quo/text {:size :paragraph-2 :weight :medium :color colors/white} + (i18n/label :t/view-pinned-messages)]]] + [rn/touchable-opacity + {:accessibility-label :close-pin-limit-popover + :active-opacity 1 + :on-press #(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id]) + :style {:position :absolute + :top 16 + :right 16}} + [quo/icon :i/close + {:color (colors/theme-colors colors/white colors/neutral-100) + :size 12}]]])))]) diff --git a/src/status_im/ui2/screens/chat/pinned_banner/view.cljs b/src/status_im/ui2/screens/chat/pinned_banner/view.cljs deleted file mode 100644 index 09eb4b1f5f..0000000000 --- a/src/status_im/ui2/screens/chat/pinned_banner/view.cljs +++ /dev/null @@ -1,36 +0,0 @@ -(ns status-im.ui2.screens.chat.pinned-banner.view - (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn])) - -;; TODO (flexsurfer) this should be a banner component in quo2 -;; https://github.com/status-im/status-mobile/issues/14528 -(defn pinned-banner - [{:keys [latest-pin-text pins-count on-press]}] - [rn/touchable-opacity - {:accessibility-label :pinned-banner - :style {:height 50 - :background-color colors/primary-50-opa-20 - :flex-direction :row - :align-items :center - :padding-horizontal 20 - :padding-vertical 10} - :active-opacity 1 - :on-press on-press} - [quo/icon :i/pin {:size 20}] - [quo/text - {:number-of-lines 1 - :size :paragraph-2 - :style {:margin-left 10 :margin-right 50}} - latest-pin-text] - [rn/view - {:accessibility-label :pins-count - :style {:position :absolute - :right 22 - :height 20 - :width 20 - :border-radius 8 - :justify-content :center - :align-items :center - :background-color colors/neutral-80-opa-5}} - [quo/text {:size :label :weight :medium} pins-count]]]) diff --git a/src/status_im2/common/not_implemented.cljs b/src/status_im2/common/not_implemented.cljs index ebb4bdc6fb..a2fb91e080 100644 --- a/src/status_im2/common/not_implemented.cljs +++ b/src/status_im2/common/not_implemented.cljs @@ -3,5 +3,6 @@ (defn not-implemented [content] - [rn/view {:border-color :red :border-width 1} - content]) + (when content + [rn/view {:border-color :red :border-width 1} + content])) diff --git a/src/status_im2/contexts/chat/messages/pin/banner/view.cljs b/src/status_im2/contexts/chat/messages/pin/banner/view.cljs index 8ac71fbb48..65962262af 100644 --- a/src/status_im2/contexts/chat/messages/pin/banner/view.cljs +++ b/src/status_im2/contexts/chat/messages/pin/banner/view.cljs @@ -1,5 +1,5 @@ (ns status-im2.contexts.chat.messages.pin.banner.view - (:require [status-im.ui2.screens.chat.pinned-banner.view :as pinned-banner] + (:require [quo2.core :as quo] [utils.re-frame :as rf])) (defn banner @@ -7,14 +7,14 @@ (let [pinned-messages (rf/sub [:chats/pinned chat-id]) latest-pin-id (-> pinned-messages vals - last + first (get :message-id)) latest-pin-text (get-in (rf/sub [:chats/chat-messages chat-id]) [latest-pin-id :content :text]) pins-count (count (seq pinned-messages))] - (when (> pins-count 0) - ;; TODO (flexsurfer) this should be banner component in quo2 - [pinned-banner/pinned-banner - {:latest-pin-text latest-pin-text - :pins-count pins-count - :on-press #(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])}]))) + [quo/banner + {:latest-pin-text latest-pin-text + :pins-count pins-count + :on-press #(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])}])) + + diff --git a/src/status_im2/contexts/chat/messages/view.cljs b/src/status_im2/contexts/chat/messages/view.cljs index ec6ed4b53f..9f71a87b42 100644 --- a/src/status_im2/contexts/chat/messages/view.cljs +++ b/src/status_im2/contexts/chat/messages/view.cljs @@ -11,7 +11,8 @@ [status-im2.navigation.state :as navigation.state] [utils.debounce :as debounce] [utils.re-frame :as rf] - [status-im2.common.not-implemented :as not-implemented])) + [status-im2.common.not-implemented :as not-implemented] + [quo2.foundations.colors :as colors])) (defn navigate-back-handler [] @@ -32,41 +33,49 @@ [quo/page-nav {:align-mid? true - :mid-section - (if group-chat - {:type :text-only - :main-text display-name} - {:type :user-avatar - :avatar {:full-name display-name - :online? online? - :profile-picture photo-path - :size :medium} - :main-text display-name - :on-press #(debounce/dispatch-and-chill [:chat.ui/show-profile chat-id] 1000)}) + :mid-section (if group-chat + {:type :text-only + :main-text display-name} + {:type :user-avatar + :avatar {:full-name display-name + :online? online? + :profile-picture photo-path + :size :medium} + :main-text display-name + :on-press #(debounce/dispatch-and-chill [:chat.ui/show-profile chat-id] + 1000)}) - :left-section - {:on-press #(do - (rf/dispatch [:close-chat]) - (rf/dispatch [:navigate-back])) - :icon :i/arrow-left - :accessibility-label :back-button} + :left-section {:on-press #(do + (rf/dispatch [:close-chat]) + (rf/dispatch [:navigate-back])) + :icon :i/arrow-left + :accessibility-label :back-button} - :right-section-buttons - [{:on-press #() - :style {:border-width 1 :border-color :red} - :icon :i/options - :accessibility-label :options-button}]}])) + :right-section-buttons [{:on-press #() + :style {:border-width 1 + :border-color :red} + :icon :i/options + :accessibility-label :options-button}]}])) (defn chat-render [] (let [;;NOTE: we want to react only on these fields, do not use full chat map here {:keys [chat-id show-input?] :as chat} (rf/sub [:chats/current-chat-chat-view])] - [rn/keyboard-avoiding-view {:style {:flex 1}} + [rn/keyboard-avoiding-view {:style {:position :relative :flex 1}} + [rn/view + {:style {:position :absolute + :top 56 + :z-index 2 + :background-color (colors/theme-colors colors/white colors/neutral-100) + :width "100%"}} + + [pin.banner/banner chat-id] + [not-implemented/not-implemented + [pin-limit-popover/pin-limit-popover chat-id]] + ] [page-nav] - [not-implemented/not-implemented - [pin-limit-popover/pin-limit-popover chat-id]] - [not-implemented/not-implemented - [pin.banner/banner chat-id]] + + [messages.list/messages-list {:chat chat :show-input? show-input?}] (when show-input? [composer/composer chat-id])])) diff --git a/src/status_im2/contexts/quo_preview/banners/banner.cljs b/src/status_im2/contexts/quo_preview/banners/banner.cljs index a4f539afda..6214ba1959 100644 --- a/src/status_im2/contexts/quo_preview/banners/banner.cljs +++ b/src/status_im2/contexts/quo_preview/banners/banner.cljs @@ -12,16 +12,17 @@ {:label "number of messages" :key :pins-count :type :text} - {:label "show pin icon?" - :key :show-pin? + {:label "hide pin icon?" + :key :hide-pin? :type :boolean} ]) (defn cool-preview [] - (let [state (reagent/atom {:show-pin? true - :pins-count 2 - :latest-pin-text "Be respectful of fellow community member..."})] + (let [state (reagent/atom + {:hide-pin? false + :pins-count 2 + :latest-pin-text "Be respectful of fellow community members, even if they"})] (fn [] [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/view {:padding-bottom 150}