fix(messenger): List of users overlap composer input (#21641)
* Fix mentions overlapped * Fix rendering blink
This commit is contained in:
parent
9f50686042
commit
763b291629
|
@ -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)})])
|
||||
|
|
|
@ -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)]]))
|
||||
|
|
|
@ -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?)
|
||||
|
|
Loading…
Reference in New Issue