diff --git a/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs b/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs index d38fb20b1a..1639d2b1b8 100644 --- a/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs @@ -2,29 +2,39 @@ (:require [quo.foundations.colors :as colors] [react-native.platform :as platform] - [react-native.reanimated :as reanimated] [status-im.contexts.chat.messenger.composer.constants :as constants])) -(defn shadow - [theme] +(defn- add-shadow + [theme styles] (if platform/ios? - {:shadow-radius (colors/theme-colors 30 50 theme) - :shadow-opacity (colors/theme-colors 0.1 0.7 theme) - :shadow-color colors/neutral-100 - :shadow-offset {:width 0 :height (colors/theme-colors 8 12 theme)}} - {:elevation 10})) + (assoc styles + :shadow-radius (colors/theme-colors 30 50 theme) + :shadow-opacity (colors/theme-colors 0.1 0.7 theme) + :shadow-color colors/neutral-100 + :shadow-offset {:width 0 :height (colors/theme-colors 8 12 theme)}) + (assoc styles :elevation 10))) + +(defn inner + [top theme] + (add-shadow theme + {:position :absolute + :top (- (+ 8 top)) + :left 8 + :right 8 + :border-radius 16 + :z-index 4 + :max-height constants/mentions-max-height + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})) (defn container [opacity top theme] - (reanimated/apply-animations-to-style - {:opacity opacity} - (merge - {:position :absolute - :top (- (+ 8 top)) - :left 8 - :right 8 - :border-radius 16 - :z-index 4 - :max-height constants/mentions-max-height - :background-color (colors/theme-colors colors/white colors/neutral-95 theme)} - (shadow theme)))) + [{:opacity opacity} + (add-shadow theme + {:position :absolute + :top (- (+ 8 top)) + :left 8 + :right 8 + :border-radius 16 + :z-index 4 + :max-height constants/mentions-max-height + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})]) diff --git a/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs b/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs index 1321209916..9a6b74dc64 100644 --- a/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs @@ -10,37 +10,36 @@ [status-im.contexts.chat.messenger.messages.constants :as messages.constants] [utils.re-frame :as rf])) -(defn mention-item - [user] - [contact-list-item/contact-list-item - {:on-press #(rf/dispatch [:chat.ui/select-mention user])} - user]) +(defn- mention-item + [[user-key user]] + (with-meta + [contact-list-item/contact-list-item {:on-press #(rf/dispatch [:chat.ui/select-mention user])} + user] + {:key user-key})) (defn view [layout-height] - (let [suggestions (rf/sub [:chat/mention-suggestions]) - suggestions? (seq suggestions) - theme (quo.theme/use-theme) - opacity (reanimated/use-shared-value (if suggestions? 1 0)) - [suggestions-state set-suggestions-state] (rn/use-state suggestions) - top (min constants/mentions-max-height - (* (count suggestions-state) 56) - (- @layout-height - (+ (safe-area/get-top) - messages.constants/top-bar-height - 5)))] + (let [suggestions (rf/sub [:chat/mention-suggestions]) + suggestions? (seq suggestions) + theme (quo.theme/use-theme) + opacity (reanimated/use-shared-value (if suggestions? 1 0)) + [suggestions-state + set-suggestions-state] (rn/use-state suggestions) + top (min constants/mentions-max-height + (* (count suggestions-state) 56) + (- @layout-height + (+ (safe-area/get-top) + messages.constants/top-bar-height + 5)))] (rn/use-effect (fn [] (if suggestions? (set-suggestions-state suggestions) (js/setTimeout #(set-suggestions-state suggestions) 300)) (reanimated/animate opacity (if suggestions? 1 0))) - [suggestions?]) - [reanimated/view - {:style (style/container opacity top theme)} - [rn/flat-list - {:keyboard-should-persist-taps :always - :data (vals suggestions-state) - :key-fn :key - :render-fn mention-item - :accessibility-label :mentions-list}]])) + [suggestions]) + [reanimated/view {:style (style/container opacity top theme)} + [rn/scroll-view + {:accessibility-label :mentions-list + :keyboard-should-persist-taps :always} + (map mention-item suggestions-state)]])) diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs index d7589f64b2..5b6002405c 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -225,7 +225,8 @@ distance-from-list-top chat-list-scroll-y (on-scroll-fn distance-atom layout-height))) - :style {:background-color (colors/theme-colors colors/white + :style {:height "100%" + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)} :content-container-style (style/list-paddings add-padding-bottom?)