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

fix: action/reaction drawer UI issue (#19630)

This commit is contained in:
yqrashawn 2024-05-17 20:12:03 +08:00 committed by GitHub
parent afd92d2df1
commit cfe9d6e539
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 289 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/quo/components/drawers/drawer_action/component_spec.cljs
View File

@ -6,24 +6,26 @@
(h/describe "Drawers: drawer-action"
(h/test "default render"
(h/render-with-theme-provider [drawer-action/view {}])
(h/render-with-theme-provider [drawer-action/view {:accessibility-label :container}])
(h/is-truthy (h/query-by-label-text :container)))
(h/test "on-press-in changes internal state to :pressed"
(h/render-with-theme-provider [drawer-action/view {}])
(h/render-with-theme-provider [drawer-action/view {:accessibility-label :container}])
(h/fire-event :on-press-in (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/resolve-color :blue :light 5)})))
(h/test "render default action with state :selected"
(h/render-with-theme-provider [drawer-action/view {:state :selected}])
(h/render-with-theme-provider [drawer-action/view
{:state :selected :accessibility-label :container}])
(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/resolve-color :blue :light 5)})
(h/is-truthy (h/query-by-label-text :check-icon)))
(h/test "call on-press"
(let [on-press (h/mock-fn)]
(h/render-with-theme-provider [drawer-action/view {:on-press on-press}])
(h/render-with-theme-provider [drawer-action/view
{:on-press on-press :accessibility-label :container}])
(h/fire-event :on-press (h/get-by-label-text :container))
(h/was-called on-press)))
@ -38,8 +40,9 @@
(h/test "render :toggle action with state :selected"
(h/render-with-theme-provider [drawer-action/view
{:action :toggle
:state :selected}])
{:accessibility-label :container
:action :toggle
:state :selected}])
(h/is-truthy (h/query-by-label-text "toggle-on"))
(h/has-style (h/query-by-label-text :container)
{:backgroundColor :transparent}))
@ -51,4 +54,5 @@
:description "Just a small desc"}])
(h/is-truthy (h/query-by-label-text :left-icon))
(h/is-truthy (h/query-by-text "Check contact"))
(h/has-style (h/query-by-text "Check contact") {:color colors/neutral-100})
(h/is-truthy (h/query-by-text "Just a small desc"))))

2
src/quo/components/drawers/drawer_action/schema.cljs
View File

@ -4,6 +4,8 @@
[:=>
[:cat
[:map {:closed true}
[:accessibility-label {:optional true} [:maybe :keyword]]
[:type {:optional true} [:maybe [:enum :main :danger]]]
[:action {:optional true} [:maybe [:enum :arrow :toggle]]]
[:icon {:optional true} [:maybe :keyword]]
[:description {:optional true} [:maybe :string]]

27
src/quo/components/drawers/drawer_action/style.cljs
View File

@ -28,6 +28,23 @@
{:flex 1
:margin-right 12})
(defn text
[{:keys [theme blur? type]}]
(let [base {:weight :medium}
theme-with-blur (if blur? :blue theme)
matcher [theme-with-blur type]
color
(case matcher
([:dark :main] [:light :main]) (colors/theme-colors colors/neutral-100
colors/white
theme)
[:blur :main] colors/white-70-blur
([:dark :danger] [:light :danger]) (colors/theme-colors colors/danger-50
colors/danger-60
theme)
[:blur :danger] colors/danger-60)]
(assoc-in base [:style :color] color)))
(defn- neutral-color
[theme blur?]
(if blur?
@ -41,8 +58,14 @@
:margin-top 1})
(defn icon-color
[{:keys [theme blur?]}]
(neutral-color theme blur?))
[{:keys [theme blur? type]}]
(let [theme-with-blur (if blur? :blue theme)
matcher [theme-with-blur type]]
(case matcher
([:dark :main] [:light :main]) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
[:blur :main] colors/white-70-blur
([:dark :danger] [:light :danger]) (colors/theme-colors colors/danger-50 colors/danger-60 theme)
[:blur :danger] colors/danger-60)))
(defn desc
[{:keys [theme blur?]}]

22
src/quo/components/drawers/drawer_action/view.cljs
View File

@ -10,11 +10,13 @@
[schema.core :as schema]))
(defn view-internal
[{:keys [action icon description state title on-press
customization-color blur?]
:or {customization-color :blue
blur? false}}]
[{:keys [action icon description state title on-press customization-color
blur? accessibility-label]
action-type :type
:or {customization-color :blue
blur? false}}]
(let [theme (quo.theme/use-theme)
action-type (or action-type :main)
[pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))]
@ -29,16 +31,21 @@
:pressed? pressed?
:description? (not-empty description)
:blur? blur?})
:accessibility-label :container}
:accessibility-label accessibility-label}
(when icon
[icon/icon icon
{:accessibility-label :left-icon
:container-style (style/left-icon)
:color (style/icon-color {:theme theme
:type action-type
:blur? blur?})}])
[rn/view {:style (style/text-container)}
[text/text {:weight :medium}
[rn/view
{:style (style/text-container)}
[text/text
(style/text {:theme theme
:type action-type
:blur? blur?})
title]
(when (seq description)
@ -61,6 +68,7 @@
[icon/icon :i/chevron-right
{:accessibility-label :arrow-icon
:color (style/icon-color {:theme theme
:type action-type
:blur? blur?})}]
(= state :selected)

59
src/quo/components/messages/author/style.cljs
View File

@ -3,39 +3,14 @@
[quo.foundations.colors :as colors]
[react-native.platform :as platform]))
(defn- primary-name-top-offset
[size]
(when (= size 15)
(cond platform/ios? 1
platform/android? -0.5
:else 0)))
(defn- primary-name-margin-bottom-offset
[size]
(when (and (= size 15)
(or platform/ios? platform/android?))
-0.25))
(defn- primary-name-layout-offsets
[size]
;; NOTE(seanstrom): We need to sometimes offset the primary-name to align the baseline of the text
;; while avoiding shifting elements downward.
{:top (primary-name-top-offset size)
:margin-bottom (primary-name-margin-bottom-offset size)})
(defn container
[size]
{:flex-shrink 1
:flex-wrap :nowrap
:flex-direction :row
:align-items :baseline
;; NOTE(seanstrom): Because we're offseting the primary-name we need to inverse the offset on the
;; container to avoid shifting elements downward
:top (* -1 (primary-name-top-offset size))})
(def details-container
{:flex-direction :row
:margin-left 8})
(cond->
{:flex-shrink 1
:flex-wrap :nowrap
:flex-direction :row
:align-items :center
:height (if (= size 15) 22 18)}))
(defn middle-dot
[theme]
@ -48,11 +23,15 @@
(defn primary-name
[muted? theme size]
(merge (primary-name-layout-offsets size)
{:color (if muted?
colors/neutral-50
(colors/theme-colors colors/neutral-100 colors/white theme))
:flex-shrink 1}))
{:color (if muted?
colors/neutral-50
(colors/theme-colors colors/neutral-100 colors/white theme))
;; iOS: primary-name height is 22.3 / 18.7
;; Android: primary-name height is 21.8 / 18.5
:margin-vertical (if (= size 15)
(if platform/ios? -0.15 0)
(if platform/ios? -0.35 -0.25))
:flex-shrink 1})
(defn secondary-name
[theme]
@ -60,13 +39,9 @@
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
(defn icon-container
[is-first?]
[is-first? size]
{:margin-left (if is-first? 4 2)
;; NOTE(seanstrom): Because we're using flex baseline to align elements
;; we need to offset the icon container to match the designs.
:top (cond platform/ios? 1
platform/android? 2
:else 0)})
:padding-top (if (= size 15) 6 4)})
(defn time-text
[theme]

68
src/quo/components/messages/author/view.cljs
View File

@ -13,7 +13,35 @@
[{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
muted? size]
:or {size 13}}]
(let [theme (quo.theme/use-theme)]
(let [theme (quo.theme/use-theme)
short-chat-key-component
(when (and (not verified?) short-chat-key)
[text/text
{:weight :monospace
:size :label
:number-of-lines 1
:style (style/chat-key-text theme)}
short-chat-key])
time-str-component
(when time-str
[text/text
{:monospace true
:size :label
:accessibility-label :message-timestamp
:number-of-lines 1
:style (style/time-text theme)}
time-str])
middle-dot-seperator-component
(when (and short-chat-key-component time-str-component)
[text/text
{:monospace true
:size :label
:number-of-lines 1
:style (style/middle-dot theme)}
middle-dot])]
[rn/view
{:style (merge (style/container size) style)}
[text/text
@ -23,7 +51,7 @@
:accessibility-label :author-primary-name
:style (style/primary-name muted? theme size)}
primary-name]
(when (not (string/blank? secondary-name))
(when-not (string/blank? secondary-name)
[:<>
[text/text
{:size :label
@ -41,38 +69,22 @@
[icons/icon :main-icons2/contact
{:size 12
:no-color true
:container-style (style/icon-container true)}])
:container-style (style/icon-container true size)}])
(cond
verified?
[icons/icon :main-icons2/verified
{:size 12
:no-color true
:container-style (style/icon-container contact?)}]
:container-style (style/icon-container contact? size)}]
untrustworthy?
[icons/icon :main-icons2/untrustworthy
{:size 12
:no-color true
:container-style (style/icon-container contact?)}])
[rn/view {:style style/details-container}
(when (and (not verified?) short-chat-key)
[text/text
{:weight :monospace
:size :label
:number-of-lines 1
:style (style/chat-key-text theme)}
short-chat-key])
(when (and (not verified?) time-str short-chat-key)
[text/text
{:monospace true
:size :label
:number-of-lines 1
:style (style/middle-dot theme)}
middle-dot])
(when time-str
[text/text
{:monospace true
:size :label
:accessibility-label :message-timestamp
:number-of-lines 1
:style (style/time-text theme)}
time-str])]]))
:container-style (style/icon-container contact? size)}])
(when (or short-chat-key-component time-str-component)
[rn/view {:style {:width 8}}])
short-chat-key-component
middle-dot-seperator-component
time-str-component]))

5
src/quo/components/selectors/react/view.cljs
View File

@ -5,7 +5,8 @@
[react-native.core :as rn]))
(defn view
[{:keys [reactions on-press on-long-press add-reaction? on-press-add use-case container-style]}]
[{:keys [reactions on-press on-long-press hide-new-reaction-button? on-press-add use-case
container-style]}]
[rn/view {:style (merge style/container container-style)}
(for [emoji-reaction reactions
:let [{:keys [emoji emoji-id emoji-reaction-id quantity own]} emoji-reaction]]
@ -19,7 +20,7 @@
:on-press #(on-press emoji-reaction)
:on-long-press #(on-long-press emoji-reaction)
:accessibility-label (str "emoji-reaction-" emoji-id)}])
(when add-reaction?
(when-not hide-new-reaction-button?
[react-selector/view
{:on-press on-press-add
:state :add-reaction

33
src/quo/components/selectors/reactions_selector/style.cljs
View File

@ -1,12 +1,31 @@
(ns quo.components.selectors.reactions-selector.style
(:require
[quo.foundations.colors :as colors]))
[quo.foundations.colors :as colors]
[react-native.platform :as platform]))
(defn container
[pressed? theme]
{:padding 10
:border-radius 12
:border-width 1
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
:background-color (when pressed?
(colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))})
(merge
{:border-radius 12
:border-width 1
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
:background-color (when pressed?
(colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))}
(if platform/ios?
{:padding 9.5
:padding-horizontal 8}
{:padding 8})))
(def emoji-text-style
(merge
{:line-height 20
:text-align :center}
(if platform/ios?
{:line-height 20
:font-size 17
:text-align :center}
{:font-size 18
:height 24
:width 24
:text-align :center
:text-align-vertical :center})))

4
src/quo/components/selectors/reactions_selector/view.cljs
View File

@ -20,4 +20,6 @@
:style (merge (style/container pressed? theme)
container-style)
:on-press on-press}
[rn/text (reactions.resource/system-emojis emoji)]]))
[rn/text
{:style style/emoji-text-style}
(reactions.resource/system-emojis emoji)]]))

1
src/status_im/common/bottom_sheet/style.cljs
View File

@ -8,7 +8,6 @@
(defn sheet
[{:keys [max-height]}]
{:position :absolute
:overflow :hidden
:bottom 0
:left 0
:right 0

48
src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs
View File

@ -15,7 +15,7 @@
:emoji-id emoji-id}])))
(defn- on-long-press
[{:keys [message-id emoji-id user-message-content reactions-order theme]}]
[{:keys [message-id emoji-id user-message-content-render-fn reactions-order theme]}]
(rf/dispatch
[:reactions/get-authors-by-message-id
{:message-id message-id
@ -31,19 +31,19 @@
[drawers/reaction-authors
{:reactions-order reactions-order
:theme theme}])
:selected-item (fn [] user-message-content)
:selected-item (fn [] [user-message-content-render-fn
{:hide-reactions? true}])
:padding-bottom-override 0}]))}]))
(defn- on-press-add
[{:keys [chat-id message-id user-message-content]}]
[{:keys [chat-id message-id user-message-content-render-fn]}]
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch
[:show-bottom-sheet
{:content (fn [] [drawers/reactions
{:chat-id chat-id
:message-id message-id}])
:selected-item (fn []
user-message-content)}]))
:selected-item (fn [] [user-message-content-render-fn])}]))
(defn- add-emoji-key
[reaction]
@ -52,23 +52,25 @@
(get constants/reactions (:emoji-id reaction))))
(defn message-reactions-row
[{:keys [message-id chat-id pinned-by preview?]} user-message-content]
[{:keys [message-id chat-id pinned-by hide-new-reaction-button?]} user-message-content-render-fn]
(let [theme (quo.theme/use-theme)
reactions (rf/sub [:chats/message-reactions message-id chat-id])]
[:<>
(when (seq reactions)
[quo/react
{:container-style {:margin-left 44
:margin-top 8}
:reactions (map add-emoji-key reactions)
:add-reaction? (not preview?)
:use-case (when pinned-by :pinned)
:on-press #(on-press (assoc % :message-id message-id))
:on-long-press #(on-long-press (assoc %
:message-id message-id
:theme theme
:reactions-order (map :emoji-id reactions)
:user-message-content user-message-content))
:on-press-add #(on-press-add {:chat-id chat-id
:message-id message-id
:user-message-content user-message-content})}])]))
(when (seq reactions)
[quo/react
{:container-style {:margin-left 44
:margin-top 8}
:reactions (map add-emoji-key reactions)
:hide-new-reaction-button? hide-new-reaction-button?
:use-case (when pinned-by :pinned)
:on-press #(on-press (assoc % :message-id message-id))
:on-long-press #(on-long-press (assoc %
:message-id message-id
:theme theme
:reactions-order (map :emoji-id
reactions)
:user-message-content-render-fn
user-message-content-render-fn))
:on-press-add #(on-press-add {:chat-id chat-id
:message-id message-id
:user-message-content-render-fn
user-message-content-render-fn})}])))

22
src/status_im/contexts/chat/messenger/messages/content/style.cljs
View File

@ -16,22 +16,20 @@
(assoc :margin-top 4)))
(defn user-message-content
[{:keys [outgoing outgoing-status six-reactions? window-scale small-screen? preview?]}]
[{:keys [outgoing outgoing-status six-reactions? window-scale small-screen?]}]
{:border-radius 16
:padding-horizontal (if preview? 12 8)
:padding-top (if preview? 8 4)
:padding-bottom (if preview?
12
(if (or small-screen?
(and
(> 3 window-scale)
six-reactions?))
(* message-padding-scaling-ratio window-scale)
4))
:padding-horizontal 8
:padding-top 4
:padding-bottom (if (or small-screen?
(and
(> 3 window-scale)
six-reactions?))
(* message-padding-scaling-ratio window-scale)
4)
:opacity (if (and outgoing (= outgoing-status :sending))
0.5
1)})
(def drawer-message-container
{:padding-top 4
:padding-bottom 8})
:padding-bottom 4})

88
src/status_im/contexts/chat/messenger/messages/content/view.cljs
View File

@ -35,19 +35,19 @@
(def delivery-state-showing-time-ms 3000)
(defn avatar-container
[{:keys [content last-in-group? pinned-by quoted-message from]} show-reactions?
in-reaction-and-action-menu? show-user-info? in-pinned-view?]
[{:keys [content last-in-group? pinned-by quoted-message from]} hide-reactions?
in-reaction-or-action-menu? show-user-info? in-pinned-view?]
(if (or (and (seq (:response-to content))
quoted-message)
last-in-group?
show-user-info?
pinned-by
(not show-reactions?)
in-reaction-and-action-menu?)
hide-reactions?
in-reaction-or-action-menu?)
[avatar/avatar
{:public-key from
:size :small
:hide-ring? (or in-pinned-view? in-reaction-and-action-menu?)}]
:hide-ring? (or in-pinned-view? in-reaction-or-action-menu?)}]
[rn/view {:padding-top 4 :width 32}]))
(defn author
@ -58,15 +58,15 @@
quoted-message
from
timestamp]}
show-reactions?
in-reaction-and-action-menu?
hide-reactions?
in-reaction-or-action-menu?
show-user-info?]
(when (or (and (seq (:response-to content)) quoted-message)
last-in-group?
pinned-by
show-user-info?
(not show-reactions?)
in-reaction-and-action-menu?)
hide-reactions?
in-reaction-or-action-menu?)
(let [[primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity from])
{:keys [ens-verified added?]} (rf/sub [:contacts/contact-by-address from])]
[quo/author
@ -158,8 +158,8 @@
(defn user-message-content
[]
(let [show-delivery-state? (reagent/atom false)]
(fn [{:keys [message-data context keyboard-shown? show-reactions? in-reaction-and-action-menu?
show-user-info? preview?]}]
(fn [{:keys [message-data context keyboard-shown? hide-reactions?
in-reaction-or-action-menu? show-user-info?]}]
(let [theme (quo.theme/use-theme)
{:keys [content-type quoted-message content outgoing outgoing-status pinned-by pinned
last-in-group? message-id chat-id]} message-data
@ -198,13 +198,13 @@
:message-sent)
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
:style (style/user-message-content
{:first-in-group? (:first-in-group? message-data)
:outgoing outgoing
:outgoing-status outgoing-status
:small-screen? rn/small-screen?
:window-scale window-scale
:six-reactions? six-reactions?
:preview? preview?})
{:first-in-group? (:first-in-group? message-data)
:outgoing outgoing
:outgoing-status outgoing-status
:small-screen? rn/small-screen?
:window-scale window-scale
:six-reactions? six-reactions?
:in-reaction-or-action-menu? in-reaction-or-action-menu?})
:on-press (fn []
(if (and platform/ios? keyboard-shown?)
(do
@ -226,18 +226,16 @@
[rn/view
{:style {:padding-horizontal 4
:flex-direction :row}}
[avatar-container message-data show-reactions? in-reaction-and-action-menu? show-user-info?
[avatar-container message-data hide-reactions? in-reaction-or-action-menu? show-user-info?
(:in-pinned-view? context)]
(into
(if show-reactions?
[rn/view]
[gesture/scroll-view])
(if hide-reactions?
[gesture/scroll-view]
[rn/view])
[{:style {:margin-left 8
:flex 1
:gap 1
:max-height (when-not show-reactions?
(* 0.4 height))}}
[author message-data show-reactions? in-reaction-and-action-menu? show-user-info?]
:max-height (when hide-reactions? (* 0.4 height))}}
[author message-data hide-reactions? in-reaction-or-action-menu? show-user-info?]
(condp = content-type
constants/content-type-text
[content.text/text-content message-data context]
@ -272,17 +270,19 @@
(when @show-delivery-state?
[status/status outgoing-status])])]
(when show-reactions?
[reactions/message-reactions-row (assoc message-data :preview? preview?)
[rn/view {:pointer-events :none}
[user-message-content
{:theme theme
:message-data message-data
:context context
:in-reaction-and-action-menu? true
:keyboard-shown? keyboard-shown?
:preview? true
:show-reactions? true}]]])]]))))
(when-not hide-reactions?
[reactions/message-reactions-row (assoc message-data :hide-new-reaction-button? true)
(fn [override-opts]
[rn/view
{:pointer-events :none
:style style/drawer-message-container}
[user-message-content
(merge {:theme theme
:message-data message-data
:context context
:in-reaction-or-action-menu? true
:keyboard-shown? keyboard-shown?}
override-opts)]])])]]))))
(defn on-long-press
[{:keys [deleted? deleted-for-me?] :as message-data} context keyboard-shown?]
@ -299,12 +299,11 @@
{:pointer-events :none
:style style/drawer-message-container}
[user-message-content
{:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:in-reaction-and-action-menu? true
:show-user-info? false
:show-reactions? true}]]))}]))
{:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:in-reaction-or-action-menu? true
:show-user-info? false}]]))}]))
(defn check-if-system-message?
[content-type]
@ -349,5 +348,4 @@
[user-message-content
{:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:show-reactions? true}])]))
:keyboard-shown? keyboard-shown?}])]))

102
src/status_im/contexts/chat/messenger/messages/drawers/view.cljs
View File

@ -105,61 +105,67 @@
;; https://github.com/status-im/status-mobile/issues/15298 is implemented
(not= content-type constants/content-type-image)
(not= content-type constants/content-type-audio))
[{:type :main
:on-press #(rf/dispatch [:chat.ui/edit-message message-data])
:label (i18n/label :t/edit-message)
:icon :i/edit
:id :edit}])
[{:type :main
:on-press #(rf/dispatch [:chat.ui/edit-message message-data])
:label (i18n/label :t/edit-message)
:icon :i/edit
:accessibility-label :edit-message
:id :edit}])
(when (and able-to-send-message? (not= outgoing-status :sending) (not (or deleted? deleted-for-me?)))
[{:type :main
:on-press #(rf/dispatch [:chat.ui/reply-to-message message-data])
:label (i18n/label :t/message-reply)
:icon :i/reply
:id :reply}])
[{:type :main
:on-press #(rf/dispatch [:chat.ui/reply-to-message message-data])
:label (i18n/label :t/message-reply)
:icon :i/reply
:accessibility-label :reply-message
:id :reply}])
(when (and (not (or deleted? deleted-for-me?))
(not= content-type constants/content-type-audio))
[{:type :main
:on-press #(clipboard/set-string
(reply/get-quoted-text-with-mentions
(get content :parsed-text)))
:label (i18n/label :t/copy-text)
:icon :i/copy
:id :copy}])
[{:type :main
:on-press #(clipboard/set-string
(reply/get-quoted-text-with-mentions
(get content :parsed-text)))
:label (i18n/label :t/copy-text)
:accessibility-label :copy-text
:icon :i/copy
:id :copy}])
;; pinning images are temporarily disabled
(when (and message-pin-enabled
(not= content-type constants/content-type-image))
[{:type :main
:on-press #(pin-message message-data)
:label (i18n/label (if pinned-by
(if community? :t/unpin-from-channel :t/unpin-from-chat)
(if community? :t/pin-to-channel :t/pin-to-chat)))
:icon :i/pin
:id (if pinned-by :unpin :pin)}])
[{:type :main
:on-press #(pin-message message-data)
:label (i18n/label (if pinned-by
(if community? :t/unpin-from-channel :t/unpin-from-chat)
(if community? :t/pin-to-channel :t/pin-to-chat)))
:accessibility-label (if pinned-by :unpin-message :pin-message)
:icon :i/pin
:id (if pinned-by :unpin :pin)}])
(when-not (or deleted? deleted-for-me?)
[{:type :danger
:on-press (fn []
(rf/dispatch
[:hide-bottom-sheet])
(rf/dispatch [:chat.ui/delete-message-for-me message-data
config/delete-message-for-me-undo-time-limit-ms]))
[{:type :danger
:on-press (fn []
(rf/dispatch
[:hide-bottom-sheet])
(rf/dispatch [:chat.ui/delete-message-for-me message-data
config/delete-message-for-me-undo-time-limit-ms]))
:label (i18n/label :t/delete-for-me)
:icon :i/delete
:id :delete-for-me}])
:label (i18n/label :t/delete-for-me)
:accessibility-label :delete-for-me
:icon :i/delete
:id :delete-for-me}])
(when (cond
deleted? false
outgoing true
community? can-delete-message-for-everyone?
group-chat group-admin?
:else false)
[{:type :danger
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:chat.ui/delete-message message-data
config/delete-message-undo-time-limit-ms]))
:label (i18n/label :t/delete-for-everyone)
:icon :i/delete
:id :delete-for-all}])))
[{:type :danger
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:chat.ui/delete-message message-data
config/delete-message-undo-time-limit-ms]))
:label (i18n/label :t/delete-for-everyone)
:accessibility-label :delete-for-everyone
:icon :i/delete
:id :delete-for-all}])))
(defn extract-id
[reactions id]
@ -180,7 +186,7 @@
[rn/view
{:style {:flex-direction :row
:justify-content :space-between
:padding-horizontal 30
:padding-horizontal 22
:padding-top 5
:padding-bottom 15}}
(for [[id reaction-name] constants/reactions
@ -221,10 +227,10 @@
(for [action main-actions]
(let [on-press (:on-press action)]
^{:key (:id action)}
[quo/menu-item
[quo/drawer-action
{:type :main
:title (:label action)
:accessibility-label (:label action)
:accessibility-label (:accessibility-label action)
:icon (:icon action)
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
@ -238,10 +244,10 @@
(for [action danger-actions]
(let [on-press (:on-press action)]
^{:key (:id action)}
[quo/menu-item
[quo/drawer-action
{:type :danger
:title (:label action)
:accessibility-label (:label action)
:accessibility-label (:accessibility-label action)
:icon (:icon action)
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
@ -255,10 +261,10 @@
(for [action admin-actions]
(let [on-press (:on-press action)]
^{:key (:id action)}
[quo/menu-item
[quo/drawer-action
{:type :danger
:title (:label action)
:accessibility-label (:label action)
:accessibility-label (:accessibility-label action)
:icon (:icon action)
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])

32
src/status_im/contexts/preview/quo/selectors/react.cljs
View File

@ -15,7 +15,7 @@
(def ^:private memo-gen-quantity (memoize gen-quantity))
(def ^:private descriptor
[{:key :add-reaction?
[{:key :hide-new-reaction-button?
:type :boolean}
{:label "Reactions"
:key :reaction-ids
@ -37,10 +37,10 @@
(defn preview-react
[]
(let [state (reagent/atom {:add-reaction? true
:max-count 1000
:reaction-ids [1 2 3]
:use-case :default})
(let [state (reagent/atom {:hide-new-reaction-button? true
:max-count 1000
:reaction-ids [1 2 3]
:use-case :default})
pressed-reactions (reagent/atom #{1})]
(fn []
@ -63,14 +63,14 @@
(colors/custom-color :blue 50 10))
:align-items :flex-start}
[quo/react
{:reactions reactions
:add-reaction? (:add-reaction? @state)
:use-case (:use-case @state)
:on-press (fn [reaction]
(let [reaction-id (:emoji-id reaction)
change-pressed (partial swap! pressed-reactions)]
(if (contains? @pressed-reactions reaction-id)
(change-pressed disj reaction-id)
(change-pressed conj reaction-id))))
:on-long-press identity
:on-press-new identity}]]]))))
{:reactions reactions
:hide-new-reaction-button? (:hide-new-reaction-button? @state)
:use-case (:use-case @state)
:on-press (fn [reaction]
(let [reaction-id (:emoji-id reaction)
change-pressed (partial swap! pressed-reactions)]
(if (contains? @pressed-reactions reaction-id)
(change-pressed disj reaction-id)
(change-pressed conj reaction-id))))
:on-long-press identity
:on-press-new identity}]]]))))