status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: use banner from quo library (#14629)

This commit is contained in:
Jamie Caprani 2023-01-11 08:59:00 +00:00 committed by GitHub
parent 9ed89ac97d
commit 846d628a9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 145 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/quo2/components/banners/__tests__/banner_component_spec.cljs → src/quo2/components/banners/banner/component_spec.cljs
View File

@ -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] (:require ["@testing-library/react-native" :as rtl]
[quo2.components.banners.banner.view :as banner] [quo2.components.banners.banner.view :as banner]
[reagent.core :as reagent])) [reagent.core :as reagent]))
@ -15,3 +15,13 @@
(.toBeTruthy)) (.toBeTruthy))
(-> (js/expect (rtl/screen.getByText "5")) (-> (js/expect (rtl/screen.getByText "5"))
(.toBeTruthy)))) (.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)))))

31
src/quo2/components/banners/banner/style.cljs
View File

@ -3,17 +3,26 @@
(def container (def container
{:width "100%" {:height 40
:height 50 :flex 1
:background-color colors/primary-50-opa-20 :background-color colors/primary-50-opa-20
:flex-direction :row :flex-direction :row
:align-items :center :align-items :center
:padding-horizontal 20 :padding-right 22
:padding-vertical 10}) :padding-left 20
:padding-vertical 10})
(def counter (def counter
{:padding-right 22 {:flex 1
:height 20
:width 20
:justify-content :center :justify-content :center
:align-items :center}) :align-items :center})
(def icon
{:flex 1
:margin-right 10})
(defn text
[hide-pin?]
{:flex (if hide-pin? 16 15)
:margin-right 10})

38
src/quo2/components/banners/banner/view.cljs
View File

@ -3,22 +3,28 @@
[quo2.components.counter.counter :as counter] [quo2.components.counter.counter :as counter]
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn banner (defn banner
[{:keys [show-pin? latest-pin-text pins-count on-press]}] [{:keys [hide-pin? latest-pin-text pins-count on-press]}]
[rn/touchable-opacity (when (pos? pins-count)
{:accessibility-label :pinned-banner [rn/touchable-opacity
:style style/container {:accessibility-label :pinned-banner
:active-opacity 1 :style style/container
:on-press on-press} :active-opacity 1
(when show-pin? [icons/icon :i/pin {:size 20}]) :on-press on-press}
[text/text (when-not hide-pin?
{:number-of-lines 1 [rn/view {:style style/icon}
:size :paragraph-2 [icons/icon :i/pin
:style {:margin-left 10 :margin-right 50}} {:color (colors/theme-colors colors/neutral-100 colors/white)
latest-pin-text] :size 20}]])
[rn/view [rn/view {:style (style/text hide-pin?)}
{:accessibility-label :pins-count [text/text
:style style/counter} {:number-of-lines 1
(when (pos? pins-count) [counter/counter {:type :secondary} pins-count])]]) :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])]]))

2
src/quo2/core_spec.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.core-spec (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.buttons.--tests--.buttons-component-spec]
[quo2.components.counter.--tests--.counter-component-spec] [quo2.components.counter.--tests--.counter-component-spec]
[quo2.components.dividers.--tests--.divider-label-component-spec] [quo2.components.dividers.--tests--.divider-label-component-spec]

5
src/status_im/ui2/screens/chat/pin_limit_popover/style.cljs
View File

@ -3,9 +3,8 @@
(defn pin-popover (defn pin-popover
[width] [width]
{:position :absolute {:width (- width 16)
:width (- width 16) :margin-left 8
:left 8
:background-color (colors/theme-colors colors/neutral-80-opa-90 colors/white-opa-90) :background-color (colors/theme-colors colors/neutral-80-opa-90 colors/white-opa-90)
:flex-direction :row :flex-direction :row
:border-radius 16 :border-radius 16

68
src/status_im/ui2/screens/chat/pin_limit_popover/view.cljs
View File

@ -24,38 +24,40 @@
(reanimated/with-timing (if show-pin-limit-modal? 1 0))) (reanimated/with-timing (if show-pin-limit-modal? 1 0)))
(reanimated/set-shared-value z-index-animation (reanimated/set-shared-value z-index-animation
(reanimated/with-timing (if show-pin-limit-modal? 10 -1))))) (reanimated/with-timing (if show-pin-limit-modal? 10 -1)))))
[reanimated/view (when show-pin-limit-modal?
{:style (reanimated/apply-animations-to-style [reanimated/view
{:opacity opacity-animation {:style (reanimated/apply-animations-to-style
:z-index z-index-animation} {:opacity opacity-animation
(style/pin-popover width)) :z-index z-index-animation}
:accessibility-label :pin-limit-popover} (style/pin-popover width))
[rn/view {:style (style/pin-alert-container)} :accessibility-label :pin-limit-popover}
[rn/view {:style style/pin-alert-circle} [rn/view {:style (style/pin-alert-container)}
[rn/text {:style {:color colors/danger-50}} "!"]]] [rn/view {:style style/pin-alert-circle}
[rn/view {:style {:margin-left 8}} [rn/text {:style {:color colors/danger-50}} "!"]]]
[quo/text {:weight :semi-bold :color (colors/theme-colors colors/white colors/neutral-100)} [rn/view {:style {:margin-left 8}}
(i18n/label :t/cannot-pin-title)] [quo/text {:weight :semi-bold :color (colors/theme-colors colors/white colors/neutral-100)}
[quo/text {:size :paragraph-2 :color (colors/theme-colors colors/white colors/neutral-100)} (i18n/label :t/cannot-pin-title)]
(i18n/label :t/cannot-pin-desc)] [quo/text {:size :paragraph-2 :color (colors/theme-colors colors/white colors/neutral-100)}
[rn/touchable-opacity (i18n/label :t/cannot-pin-desc)]
{:accessibility-label :view-pinned-messages [rn/touchable-opacity
:active-opacity 1 {:accessibility-label :view-pinned-messages
:on-press (fn [] :active-opacity 1
(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id]) :on-press (fn []
(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])) (rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
:style style/view-pinned-messages} (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list
[quo/text {:size :paragraph-2 :weight :medium :color colors/white} chat-id]))
(i18n/label :t/view-pinned-messages)]]] :style style/view-pinned-messages}
[rn/touchable-opacity [quo/text {:size :paragraph-2 :weight :medium :color colors/white}
{:accessibility-label :close-pin-limit-popover (i18n/label :t/view-pinned-messages)]]]
:active-opacity 1 [rn/touchable-opacity
:on-press #(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id]) {:accessibility-label :close-pin-limit-popover
:style {:position :absolute :active-opacity 1
:top 16 :on-press #(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
:right 16}} :style {:position :absolute
[quo/icon :i/close :top 16
{:color (colors/theme-colors colors/white colors/neutral-100) :right 16}}
:size 12}]]]))]) [quo/icon :i/close
{:color (colors/theme-colors colors/white colors/neutral-100)
:size 12}]]])))])

36
src/status_im/ui2/screens/chat/pinned_banner/view.cljs
View File

@ -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]]])

5
src/status_im2/common/not_implemented.cljs
View File

@ -3,5 +3,6 @@
(defn not-implemented (defn not-implemented
[content] [content]
[rn/view {:border-color :red :border-width 1} (when content
content]) [rn/view {:border-color :red :border-width 1}
content]))

16
src/status_im2/contexts/chat/messages/pin/banner/view.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.chat.messages.pin.banner.view (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])) [utils.re-frame :as rf]))
(defn banner (defn banner
@ -7,14 +7,14 @@
(let [pinned-messages (rf/sub [:chats/pinned chat-id]) (let [pinned-messages (rf/sub [:chats/pinned chat-id])
latest-pin-id (-> pinned-messages latest-pin-id (-> pinned-messages
vals vals
last first
(get :message-id)) (get :message-id))
latest-pin-text (get-in (rf/sub [:chats/chat-messages chat-id]) latest-pin-text (get-in (rf/sub [:chats/chat-messages chat-id])
[latest-pin-id :content :text]) [latest-pin-id :content :text])
pins-count (count (seq pinned-messages))] pins-count (count (seq pinned-messages))]
(when (> pins-count 0) [quo/banner
;; TODO (flexsurfer) this should be banner component in quo2 {:latest-pin-text latest-pin-text
[pinned-banner/pinned-banner :pins-count pins-count
{:latest-pin-text latest-pin-text :on-press #(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])}]))
:pins-count pins-count
:on-press #(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list chat-id])}])))

65
src/status_im2/contexts/chat/messages/view.cljs
View File

@ -11,7 +11,8 @@
[status-im2.navigation.state :as navigation.state] [status-im2.navigation.state :as navigation.state]
[utils.debounce :as debounce] [utils.debounce :as debounce]
[utils.re-frame :as rf] [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 (defn navigate-back-handler
[] []
@ -32,41 +33,49 @@
[quo/page-nav [quo/page-nav
{:align-mid? true {:align-mid? true
:mid-section :mid-section (if group-chat
(if group-chat {:type :text-only
{:type :text-only :main-text display-name}
:main-text display-name} {:type :user-avatar
{:type :user-avatar :avatar {:full-name display-name
:avatar {:full-name display-name :online? online?
:online? online? :profile-picture photo-path
:profile-picture photo-path :size :medium}
:size :medium} :main-text display-name
:main-text display-name :on-press #(debounce/dispatch-and-chill [:chat.ui/show-profile chat-id]
:on-press #(debounce/dispatch-and-chill [:chat.ui/show-profile chat-id] 1000)}) 1000)})
:left-section :left-section {:on-press #(do
{:on-press #(do (rf/dispatch [:close-chat])
(rf/dispatch [:close-chat]) (rf/dispatch [:navigate-back]))
(rf/dispatch [:navigate-back])) :icon :i/arrow-left
:icon :i/arrow-left :accessibility-label :back-button}
:accessibility-label :back-button}
:right-section-buttons :right-section-buttons [{:on-press #()
[{:on-press #() :style {:border-width 1
:style {:border-width 1 :border-color :red} :border-color :red}
:icon :i/options :icon :i/options
:accessibility-label :options-button}]}])) :accessibility-label :options-button}]}]))
(defn chat-render (defn chat-render
[] []
(let [;;NOTE: we want to react only on these fields, do not use full chat map here (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])] {: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] [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?}] [messages.list/messages-list {:chat chat :show-input? show-input?}]
(when show-input? (when show-input?
[composer/composer chat-id])])) [composer/composer chat-id])]))

11
src/status_im2/contexts/quo_preview/banners/banner.cljs
View File

@ -12,16 +12,17 @@
{:label "number of messages" {:label "number of messages"
:key :pins-count :key :pins-count
:type :text} :type :text}
{:label "show pin icon?" {:label "hide pin icon?"
:key :show-pin? :key :hide-pin?
:type :boolean} :type :boolean}
]) ])
(defn cool-preview (defn cool-preview
[] []
(let [state (reagent/atom {:show-pin? true (let [state (reagent/atom
:pins-count 2 {:hide-pin? false
:latest-pin-text "Be respectful of fellow community member..."})] :pins-count 2
:latest-pin-text "Be respectful of fellow community members, even if they"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}