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

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

@ -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})
(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.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])]])
[{: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])]]))

2
src/quo2/core_spec.cljs
View File

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

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

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

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/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}]]])))])

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
[content]
[rn/view {:border-color :red :border-width 1}
content])
(when 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
(: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])}]))

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

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

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

@ -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}