Top bar stability & animation improvements (#17170)
* Top bar stability improvements Style updates Style updates, bugfixes * Display name update * Style fix
This commit is contained in:
parent
b645686684
commit
c1c8c210e8
|
@ -9,7 +9,6 @@
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im2.common.alert.events :as alert]
|
[status-im2.common.alert.events :as alert]
|
||||||
[status-im2.contexts.chat.composer.constants :as comp-constants]
|
[status-im2.contexts.chat.composer.constants :as comp-constants]
|
||||||
[status-im2.contexts.chat.messages.list.view :as messages.list]
|
|
||||||
[status-im2.common.device-permissions :as device-permissions]
|
[status-im2.common.device-permissions :as device-permissions]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
[utils.re-frame :as rf]
|
[utils.re-frame :as rf]
|
||||||
|
@ -20,7 +19,9 @@
|
||||||
[{:keys [sending-images? sending-links?]}
|
[{:keys [sending-images? sending-links?]}
|
||||||
{:keys [text-value focused? maximized?]}
|
{:keys [text-value focused? maximized?]}
|
||||||
{:keys [height saved-height last-height opacity background-y container-opacity]}
|
{:keys [height saved-height last-height opacity background-y container-opacity]}
|
||||||
window-height edit]
|
window-height
|
||||||
|
edit
|
||||||
|
scroll-to-bottom-fn]
|
||||||
(reanimated/animate height comp-constants/input-height)
|
(reanimated/animate height comp-constants/input-height)
|
||||||
(reanimated/set-shared-value saved-height comp-constants/input-height)
|
(reanimated/set-shared-value saved-height comp-constants/input-height)
|
||||||
(reanimated/set-shared-value last-height comp-constants/input-height)
|
(reanimated/set-shared-value last-height comp-constants/input-height)
|
||||||
|
@ -38,14 +39,13 @@
|
||||||
(reset! text-value "")
|
(reset! text-value "")
|
||||||
(reset! sending-links? false)
|
(reset! sending-links? false)
|
||||||
(reset! sending-images? false)
|
(reset! sending-images? false)
|
||||||
(when-not (some? edit)
|
(when (and (not (some? edit)) scroll-to-bottom-fn)
|
||||||
(messages.list/scroll-to-bottom)))
|
(scroll-to-bottom-fn)))
|
||||||
|
|
||||||
(defn f-send-button
|
(defn f-send-button
|
||||||
[props {:keys [text-value] :as state}
|
[props state animations window-height images? btn-opacity scroll-to-bottom-fn z-index edit]
|
||||||
animations window-height images?
|
(let [{:keys [text-value]} state
|
||||||
btn-opacity z-index edit]
|
customization-color (rf/sub [:profile/customization-color])]
|
||||||
(let [customization-color (rf/sub [:profile/customization-color])]
|
|
||||||
(rn/use-effect (fn []
|
(rn/use-effect (fn []
|
||||||
(if (or (seq @text-value) images?)
|
(if (or (seq @text-value) images?)
|
||||||
(when (or (not= @z-index 1) (not= (reanimated/get-shared-value btn-opacity) 1))
|
(when (or (not= @z-index 1) (not= (reanimated/get-shared-value btn-opacity) 1))
|
||||||
|
@ -60,17 +60,19 @@
|
||||||
[reanimated/view
|
[reanimated/view
|
||||||
{:style (style/send-button btn-opacity @z-index)}
|
{:style (style/send-button btn-opacity @z-index)}
|
||||||
[quo/button
|
[quo/button
|
||||||
{:icon-only? true
|
{:icon-only? true
|
||||||
:size 32
|
:size 32
|
||||||
:customization-color customization-color
|
:customization-color customization-color
|
||||||
:accessibility-label :send-message-button
|
:accessibility-label :send-message-button
|
||||||
:on-press #(send-message props state animations window-height edit)}
|
:on-press #(send-message props state animations window-height edit scroll-to-bottom-fn)}
|
||||||
:i/arrow-up]]))
|
:i/arrow-up]]))
|
||||||
|
|
||||||
(defn send-button
|
(defn send-button
|
||||||
[props {:keys [text-value] :as state} animations window-height images? edit btn-opacity]
|
[props {:keys [text-value] :as state} animations window-height images? edit btn-opacity
|
||||||
|
scroll-to-bottom-fn]
|
||||||
(let [z-index (reagent/atom (if (and (empty? @text-value) (not images?)) 0 1))]
|
(let [z-index (reagent/atom (if (and (empty? @text-value) (not images?)) 0 1))]
|
||||||
[:f> f-send-button props state animations window-height images? btn-opacity z-index edit]))
|
[:f> f-send-button props state animations window-height images? btn-opacity scroll-to-bottom-fn
|
||||||
|
z-index edit]))
|
||||||
|
|
||||||
(defn disabled-audio-button
|
(defn disabled-audio-button
|
||||||
[opacity]
|
[opacity]
|
||||||
|
@ -214,7 +216,7 @@
|
||||||
:icon :i/format}])
|
:icon :i/format}])
|
||||||
|
|
||||||
(defn view
|
(defn view
|
||||||
[props state animations window-height insets {:keys [edit images]}]
|
[props state animations window-height insets scroll-to-bottom-fn {:keys [edit images]}]
|
||||||
(let [send-btn-opacity (reanimated/use-shared-value 0)
|
(let [send-btn-opacity (reanimated/use-shared-value 0)
|
||||||
audio-btn-opacity (reanimated/interpolate send-btn-opacity [0 1] [1 0])]
|
audio-btn-opacity (reanimated/interpolate send-btn-opacity [0 1] [1 0])]
|
||||||
[rn/view {:style style/actions-container}
|
[rn/view {:style style/actions-container}
|
||||||
|
@ -225,7 +227,8 @@
|
||||||
[image-button props animations insets]
|
[image-button props animations insets]
|
||||||
[reaction-button]
|
[reaction-button]
|
||||||
[format-button]]
|
[format-button]]
|
||||||
[:f> send-button props state animations window-height images edit send-btn-opacity]
|
[:f> send-button props state animations window-height images edit send-btn-opacity
|
||||||
|
scroll-to-bottom-fn]
|
||||||
(when (and (not edit) (not images))
|
(when (and (not edit) (not images))
|
||||||
;; TODO(alwx): needs to be replaced with an `audio-button` later.
|
;; TODO(alwx): needs to be replaced with an `audio-button` later.
|
||||||
;; See https://github.com/status-im/status-mobile/issues/16084 for more details.
|
;; See https://github.com/status-im/status-mobile/issues/16084 for more details.
|
||||||
|
|
|
@ -6,7 +6,6 @@
|
||||||
[status-im2.config :as config]
|
[status-im2.config :as config]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
[status-im2.contexts.chat.composer.style :as style]
|
[status-im2.contexts.chat.composer.style :as style]
|
||||||
[status-im2.contexts.chat.messages.list.view :as messages.list]
|
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
|
@ -25,16 +24,16 @@
|
||||||
[:f> f-blur-view layout-height focused?])
|
[:f> f-blur-view layout-height focused?])
|
||||||
|
|
||||||
(defn- f-shell-button
|
(defn- f-shell-button
|
||||||
[{:keys [focused?]}]
|
[{:keys [focused?]} scroll-to-bottom-fn show-floating-scroll-down-button?]
|
||||||
(let [customization-color (rf/sub [:profile/customization-color])
|
(let [customization-color (rf/sub [:profile/customization-color])
|
||||||
hide-shell? (or @focused? @messages.list/show-floating-scroll-down-button)
|
hide-shell? (or @focused? @show-floating-scroll-down-button?)
|
||||||
y-shell (reanimated/use-shared-value (if hide-shell? 35 0))
|
y-shell (reanimated/use-shared-value (if hide-shell? 35 0))
|
||||||
opacity (reanimated/use-shared-value (if hide-shell? 0 1))]
|
opacity (reanimated/use-shared-value (if hide-shell? 0 1))]
|
||||||
(rn/use-effect
|
(rn/use-effect
|
||||||
(fn []
|
(fn []
|
||||||
(reanimated/animate opacity (if hide-shell? 0 1))
|
(reanimated/animate opacity (if hide-shell? 0 1))
|
||||||
(reanimated/animate y-shell (if hide-shell? 35 0)))
|
(reanimated/animate y-shell (if hide-shell? 35 0)))
|
||||||
[@focused? @messages.list/show-floating-scroll-down-button])
|
[@focused? @show-floating-scroll-down-button?])
|
||||||
[:<>
|
[:<>
|
||||||
[reanimated/view
|
[reanimated/view
|
||||||
{:style (style/shell-button y-shell opacity)}
|
{:style (style/shell-button y-shell opacity)}
|
||||||
|
@ -48,11 +47,11 @@
|
||||||
:label (i18n/label :t/jump-to)
|
:label (i18n/label :t/jump-to)
|
||||||
:style {:align-self :center}}}
|
:style {:align-self :center}}}
|
||||||
{}]]
|
{}]]
|
||||||
(when @messages.list/show-floating-scroll-down-button
|
(when @show-floating-scroll-down-button?
|
||||||
[quo/floating-shell-button
|
[quo/floating-shell-button
|
||||||
{:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}}
|
{:scroll-to-bottom {:on-press scroll-to-bottom-fn}}
|
||||||
style/scroll-to-bottom-button])]))
|
style/scroll-to-bottom-button])]))
|
||||||
|
|
||||||
(defn shell-button
|
(defn shell-button
|
||||||
[state animations subscriptions]
|
[state scroll-to-bottom-fn show-floating-scroll-down-button?]
|
||||||
[:f> f-shell-button state animations subscriptions])
|
[:f> f-shell-button state scroll-to-bottom-fn show-floating-scroll-down-button?])
|
||||||
|
|
|
@ -26,7 +26,13 @@
|
||||||
[quo2.theme :as theme]))
|
[quo2.theme :as theme]))
|
||||||
|
|
||||||
(defn sheet-component
|
(defn sheet-component
|
||||||
[{:keys [insets window-height blur-height opacity background-y]} props state]
|
[{:keys [insets
|
||||||
|
scroll-to-bottom-fn
|
||||||
|
show-floating-scroll-down-button?
|
||||||
|
window-height
|
||||||
|
blur-height
|
||||||
|
opacity
|
||||||
|
background-y]} props state]
|
||||||
(let [{:keys [chat-screen-loaded?]
|
(let [{:keys [chat-screen-loaded?]
|
||||||
:as subscriptions} (utils/init-subs)
|
:as subscriptions} (utils/init-subs)
|
||||||
content-height (reagent/atom (or (:input-content-height
|
content-height (reagent/atom (or (:input-content-height
|
||||||
|
@ -76,7 +82,7 @@
|
||||||
(:edit subscriptions)])
|
(:edit subscriptions)])
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style style/composer-sheet-and-jump-to-container}
|
{:style style/composer-sheet-and-jump-to-container}
|
||||||
[sub-view/shell-button state]
|
[sub-view/shell-button state scroll-to-bottom-fn show-floating-scroll-down-button?]
|
||||||
[gesture/gesture-detector
|
[gesture/gesture-detector
|
||||||
{:gesture
|
{:gesture
|
||||||
(drag-gesture/drag-gesture props state animations subscriptions dimensions keyboard-shown)}
|
(drag-gesture/drag-gesture props state animations subscriptions dimensions keyboard-shown)}
|
||||||
|
@ -127,20 +133,23 @@
|
||||||
[gradients/view props state animations show-bottom-gradient?]
|
[gradients/view props state animations show-bottom-gradient?]
|
||||||
[link-preview/view]
|
[link-preview/view]
|
||||||
[images/images-list]])]
|
[images/images-list]])]
|
||||||
[:f> actions/view props state animations window-height insets subscriptions]]]]]))
|
[:f> actions/view props state animations window-height insets scroll-to-bottom-fn
|
||||||
|
subscriptions]]]]]))
|
||||||
|
|
||||||
(defn composer
|
(defn composer
|
||||||
[insets]
|
[{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?]}]
|
||||||
(let [window-height (:height (rn/get-window))
|
(let [window-height (:height (rn/get-window))
|
||||||
opacity (reanimated/use-shared-value 0)
|
opacity (reanimated/use-shared-value 0)
|
||||||
background-y (reanimated/use-shared-value (- window-height))
|
background-y (reanimated/use-shared-value (- window-height))
|
||||||
blur-height (reanimated/use-shared-value (+ constants/composer-default-height
|
blur-height (reanimated/use-shared-value (+ constants/composer-default-height
|
||||||
(:bottom insets)))
|
(:bottom insets)))
|
||||||
extra-params {:insets insets
|
extra-params {:insets insets
|
||||||
:window-height window-height
|
:window-height window-height
|
||||||
:blur-height blur-height
|
:scroll-to-bottom-fn scroll-to-bottom-fn
|
||||||
:opacity opacity
|
:show-floating-scroll-down-button? show-floating-scroll-down-button?
|
||||||
:background-y background-y}
|
:blur-height blur-height
|
||||||
|
:opacity opacity
|
||||||
|
:background-y background-y}
|
||||||
props (utils/init-props)
|
props (utils/init-props)
|
||||||
state (utils/init-state)]
|
state (utils/init-state)]
|
||||||
[rn/view (when platform/ios? {:style {:z-index 1}})
|
[rn/view (when platform/ios? {:style {:z-index 1}})
|
||||||
|
|
|
@ -1,25 +1,25 @@
|
||||||
(ns status-im2.contexts.chat.messages.list.view
|
(ns status-im2.contexts.chat.messages.list.view
|
||||||
(:require [oops.core :as oops]
|
(:require
|
||||||
[quo2.core :as quo]
|
[oops.core :as oops]
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.core :as quo]
|
||||||
[react-native.background-timer :as background-timer]
|
[quo2.foundations.colors :as colors]
|
||||||
[react-native.core :as rn]
|
[react-native.background-timer :as background-timer]
|
||||||
[react-native.hooks :as hooks]
|
[react-native.core :as rn]
|
||||||
[react-native.platform :as platform]
|
[react-native.hooks :as hooks]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.platform :as platform]
|
||||||
[react-native.safe-area :as safe-area]
|
[react-native.reanimated :as reanimated]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.ui.screens.chat.group :as chat.group]
|
[status-im.ui.screens.chat.group :as chat.group]
|
||||||
[status-im.ui.screens.chat.message.gap :as message.gap]
|
[status-im.ui.screens.chat.message.gap :as message.gap]
|
||||||
[status-im2.constants :as constants]
|
[status-im2.constants :as constants]
|
||||||
[status-im2.contexts.chat.messages.content.view :as message]
|
[status-im2.contexts.chat.messages.content.view :as message]
|
||||||
[status-im2.contexts.chat.messages.list.state :as state]
|
[status-im2.contexts.chat.messages.list.state :as state]
|
||||||
[status-im2.contexts.chat.messages.list.style :as style]
|
[status-im2.contexts.chat.messages.list.style :as style]
|
||||||
[status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
|
[status-im2.contexts.chat.composer.constants :as composer.constants]
|
||||||
[status-im2.contexts.chat.composer.constants :as composer.constants]
|
[status-im2.contexts.chat.messages.navigation.style :as navigation.style]
|
||||||
[status-im2.contexts.chat.messages.navigation.style :as navigation.style]
|
[status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
(defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
|
(defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
|
||||||
(defonce ^:const loading-indicator-extra-spacing 250)
|
(defonce ^:const loading-indicator-extra-spacing 250)
|
||||||
|
@ -27,10 +27,11 @@
|
||||||
(defonce ^:const scroll-animation-input-range [50 125])
|
(defonce ^:const scroll-animation-input-range [50 125])
|
||||||
(defonce ^:const min-message-height 32)
|
(defonce ^:const min-message-height 32)
|
||||||
|
|
||||||
|
(defonce extra-keyboard-height (reagent/atom 0))
|
||||||
(defonce messages-list-ref (atom nil))
|
(defonce messages-list-ref (atom nil))
|
||||||
(defonce messages-view-height (reagent/atom 0))
|
(defonce messages-view-height (reagent/atom 0))
|
||||||
(defonce messages-view-header-height (reagent/atom 0))
|
(defonce messages-view-header-height (reagent/atom 0))
|
||||||
(defonce show-floating-scroll-down-button (reagent/atom false))
|
(defonce show-floating-scroll-down-button? (reagent/atom false))
|
||||||
|
|
||||||
(defn list-key-fn [{:keys [message-id value]}] (or message-id value))
|
(defn list-key-fn [{:keys [message-id value]}] (or message-id value))
|
||||||
(defn list-ref [ref] (reset! messages-list-ref ref))
|
(defn list-ref [ref] (reset! messages-list-ref ref))
|
||||||
|
@ -48,9 +49,9 @@
|
||||||
threshold-height (* (/ layout-height 100)
|
threshold-height (* (/ layout-height 100)
|
||||||
threshold-percentage-to-show-floating-scroll-down-button)
|
threshold-percentage-to-show-floating-scroll-down-button)
|
||||||
reached-threshold? (> y threshold-height)]
|
reached-threshold? (> y threshold-height)]
|
||||||
(when (not= reached-threshold? @show-floating-scroll-down-button)
|
(when (not= reached-threshold? @show-floating-scroll-down-button?)
|
||||||
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets))
|
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets))
|
||||||
(reset! show-floating-scroll-down-button reached-threshold?))))
|
(reset! show-floating-scroll-down-button? reached-threshold?))))
|
||||||
|
|
||||||
(defn on-viewable-items-changed
|
(defn on-viewable-items-changed
|
||||||
[e]
|
[e]
|
||||||
|
@ -296,10 +297,9 @@
|
||||||
:on-viewable-items-changed on-viewable-items-changed
|
:on-viewable-items-changed on-viewable-items-changed
|
||||||
:on-content-size-change (fn [_ y]
|
:on-content-size-change (fn [_ y]
|
||||||
;; NOTE(alwx): here we set the initial value of `scroll-y`
|
;; NOTE(alwx): here we set the initial value of `scroll-y`
|
||||||
;; which is needed because by default the chat is scrolled to
|
;; which is needed because by default the chat is
|
||||||
;; the
|
;; scrolled to the bottom and no initial `on-scroll`
|
||||||
;; bottom
|
;; event is getting triggered
|
||||||
;; and no initial `on-scroll` event is getting triggered
|
|
||||||
(let [scroll-y-shared (reanimated/get-shared-value
|
(let [scroll-y-shared (reanimated/get-shared-value
|
||||||
scroll-y)
|
scroll-y)
|
||||||
content-height-shared (reanimated/get-shared-value
|
content-height-shared (reanimated/get-shared-value
|
||||||
|
@ -360,44 +360,3 @@
|
||||||
[quo/skeleton-list
|
[quo/skeleton-list
|
||||||
{:content :messages
|
{:content :messages
|
||||||
:parent-height content-height}]])))
|
:parent-height content-height}]])))
|
||||||
|
|
||||||
(defn f-messages-list
|
|
||||||
[{:keys [chat cover-bg-color header-comp footer-comp]}]
|
|
||||||
(let [insets (safe-area/get-insets)
|
|
||||||
scroll-y (reanimated/use-shared-value 0)
|
|
||||||
content-height (reanimated/use-shared-value 0)
|
|
||||||
{:keys [keyboard-height keyboard-shown]} (hooks/use-keyboard)]
|
|
||||||
(rn/use-effect
|
|
||||||
(fn []
|
|
||||||
(if keyboard-shown
|
|
||||||
(reanimated/set-shared-value scroll-y
|
|
||||||
(+ (reanimated/get-shared-value scroll-y)
|
|
||||||
keyboard-height))
|
|
||||||
(reanimated/set-shared-value scroll-y
|
|
||||||
(- (reanimated/get-shared-value scroll-y)
|
|
||||||
keyboard-height))))
|
|
||||||
[keyboard-shown keyboard-height])
|
|
||||||
;; Note - Don't pass `behavior :height` to keyboard avoiding view,
|
|
||||||
;; It breaks composer - https://github.com/status-im/status-mobile/issues/16595
|
|
||||||
[rn/keyboard-avoiding-view
|
|
||||||
{:style (style/keyboard-avoiding-container insets)
|
|
||||||
:keyboard-vertical-offset (- (:bottom insets))}
|
|
||||||
|
|
||||||
(when header-comp
|
|
||||||
[header-comp
|
|
||||||
{:scroll-y scroll-y}])
|
|
||||||
|
|
||||||
[message-list-content-view
|
|
||||||
{:chat chat
|
|
||||||
:insets insets
|
|
||||||
:scroll-y scroll-y
|
|
||||||
:content-height content-height
|
|
||||||
:cover-bg-color cover-bg-color
|
|
||||||
:keyboard-shown? keyboard-shown}]
|
|
||||||
|
|
||||||
(when footer-comp
|
|
||||||
[footer-comp {:insets insets}])]))
|
|
||||||
|
|
||||||
(defn messages-list
|
|
||||||
[props]
|
|
||||||
[:f> f-messages-list props])
|
|
||||||
|
|
|
@ -52,8 +52,14 @@
|
||||||
{:opacity animation})
|
{:opacity animation})
|
||||||
blur-view))
|
blur-view))
|
||||||
|
|
||||||
(def navigation-view
|
(defn navigation-view
|
||||||
{:z-index 1})
|
[loaded?]
|
||||||
|
{:z-index 1
|
||||||
|
:top 0
|
||||||
|
:right 0
|
||||||
|
:left 0
|
||||||
|
:position :absolute
|
||||||
|
:opacity (if loaded? 1 0)})
|
||||||
|
|
||||||
(def header-container
|
(def header-container
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
|
|
|
@ -9,52 +9,38 @@
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
[status-im2.common.home.actions.view :as actions]
|
[status-im2.common.home.actions.view :as actions]
|
||||||
[status-im2.config :as config]
|
[status-im2.config :as config]
|
||||||
[status-im2.constants :as constants]
|
|
||||||
[status-im2.contexts.chat.messages.navigation.style :as style]
|
[status-im2.contexts.chat.messages.navigation.style :as style]
|
||||||
[status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
|
[status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
(defn f-view
|
(defn f-view
|
||||||
[{:keys [scroll-y]}]
|
[{:keys [scroll-y chat chat-screen-loaded? all-loaded? display-name online? photo-path]}]
|
||||||
(let [{:keys [group-chat chat-id chat-name emoji
|
(let [{:keys [group-chat chat-id]} chat
|
||||||
chat-type]
|
opacity-animation (reanimated/interpolate scroll-y
|
||||||
:as chat} (rf/sub [:chats/current-chat-chat-view])
|
[style/navigation-bar-height
|
||||||
chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?])
|
(+ style/navigation-bar-height 30)]
|
||||||
all-loaded? (when chat-screen-loaded?
|
[0 1]
|
||||||
(rf/sub [:chats/all-loaded? (:chat-id chat)]))
|
{:extrapolateLeft "clamp"
|
||||||
display-name (cond
|
:extrapolateRight "extend"})
|
||||||
(= chat-type constants/one-to-one-chat-type)
|
banner-opacity-animation (reanimated/interpolate scroll-y
|
||||||
(first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
|
[(+ style/navigation-bar-height 150)
|
||||||
(= chat-type constants/community-chat-type)
|
(+ style/navigation-bar-height 200)]
|
||||||
(str (when emoji (str emoji " ")) "# " chat-name)
|
[0 1]
|
||||||
:else (str emoji chat-name))
|
{:extrapolateLeft "clamp"
|
||||||
online? (rf/sub [:visibility-status-updates/online? chat-id])
|
:extrapolateRight "extend"})
|
||||||
photo-path (rf/sub [:chats/photo-path chat-id])
|
translate-animation (reanimated/interpolate scroll-y
|
||||||
opacity-animation (reanimated/interpolate scroll-y
|
[(+ style/navigation-bar-height 25)
|
||||||
[style/navigation-bar-height
|
(+ style/navigation-bar-height 100)]
|
||||||
(+ style/navigation-bar-height 30)]
|
[50 0]
|
||||||
[0 1]
|
{:extrapolateLeft "clamp"
|
||||||
{:extrapolateLeft "clamp"
|
:extrapolateRight "clamp"})
|
||||||
:extrapolateRight "extend"})
|
title-opacity-animation (reanimated/interpolate scroll-y
|
||||||
banner-opacity-animation (reanimated/interpolate scroll-y
|
[0 50]
|
||||||
[(+ style/navigation-bar-height 150)
|
[0 1]
|
||||||
(+ style/navigation-bar-height 200)]
|
{:extrapolateLeft "clamp"
|
||||||
[0 1]
|
:extrapolateRight "clamp"})]
|
||||||
{:extrapolateLeft "clamp"
|
[rn/view {:style (style/navigation-view chat-screen-loaded?)}
|
||||||
:extrapolateRight "extend"})
|
|
||||||
translate-animation (reanimated/interpolate scroll-y
|
|
||||||
[(+ style/navigation-bar-height 25)
|
|
||||||
(+ style/navigation-bar-height 100)]
|
|
||||||
[50 0]
|
|
||||||
{:extrapolateLeft "clamp"
|
|
||||||
:extrapolateRight "clamp"})
|
|
||||||
title-opacity-animation (reanimated/interpolate scroll-y
|
|
||||||
[0 50]
|
|
||||||
[0 1]
|
|
||||||
{:extrapolateLeft "clamp"
|
|
||||||
:extrapolateRight "clamp"})]
|
|
||||||
[rn/view {:style style/navigation-view}
|
|
||||||
[reanimated/view
|
[reanimated/view
|
||||||
{:style (style/animated-background-view all-loaded? opacity-animation nil)}]
|
{:style (style/animated-background-view all-loaded? opacity-animation nil)}]
|
||||||
|
|
||||||
|
@ -64,6 +50,7 @@
|
||||||
:blur-type (colors/theme-colors :light :dark)
|
:blur-type (colors/theme-colors :light :dark)
|
||||||
:blur-radius (if platform/ios? 20 10)
|
:blur-radius (if platform/ios? 20 10)
|
||||||
:style {:flex 1}}]]
|
:style {:flex 1}}]]
|
||||||
|
|
||||||
[rn/view {:style style/header-container}
|
[rn/view {:style style/header-container}
|
||||||
[rn/touchable-opacity
|
[rn/touchable-opacity
|
||||||
{:active-opacity 1
|
{:active-opacity 1
|
||||||
|
|
|
@ -1,26 +1,91 @@
|
||||||
(ns status-im2.contexts.chat.messages.view
|
(ns status-im2.contexts.chat.messages.view
|
||||||
(:require [status-im2.contexts.chat.composer.view :as composer]
|
(:require
|
||||||
[status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as
|
[react-native.core :as rn]
|
||||||
contact-requests.bottom-drawer]
|
[react-native.hooks :as hooks]
|
||||||
[status-im2.contexts.chat.messages.list.view :as messages.list]
|
[react-native.reanimated :as reanimated]
|
||||||
[status-im2.contexts.chat.messages.navigation.view :as messages.navigation]
|
[react-native.safe-area :as safe-area]
|
||||||
[utils.re-frame :as rf]))
|
[reagent.core :as reagent]
|
||||||
|
[status-im2.constants :as constants]
|
||||||
|
[status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as contact-requests.bottom-drawer]
|
||||||
|
[status-im2.contexts.chat.messages.list.view :as list.view]
|
||||||
|
[status-im2.contexts.chat.messages.list.style :as style]
|
||||||
|
[status-im2.contexts.chat.composer.view :as composer.view]
|
||||||
|
[status-im2.contexts.chat.messages.navigation.view :as messages.navigation]
|
||||||
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
|
(defonce extra-keyboard-height (reagent/atom 0))
|
||||||
|
|
||||||
|
(defn f-chat
|
||||||
|
[]
|
||||||
|
(let [insets (safe-area/get-insets)
|
||||||
|
scroll-y (reanimated/use-shared-value 0)
|
||||||
|
content-height (reanimated/use-shared-value 0)
|
||||||
|
{:keys [keyboard-height keyboard-shown]} (hooks/use-keyboard)
|
||||||
|
{:keys [chat-id
|
||||||
|
contact-request-state
|
||||||
|
group-chat
|
||||||
|
able-to-send-message?
|
||||||
|
chat-type
|
||||||
|
chat-name
|
||||||
|
emoji]
|
||||||
|
:as chat} (rf/sub [:chats/current-chat-chat-view])
|
||||||
|
chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?])
|
||||||
|
all-loaded? (when chat-screen-loaded?
|
||||||
|
(rf/sub [:chats/all-loaded? (:chat-id chat)]))
|
||||||
|
display-name (cond
|
||||||
|
(= chat-type constants/one-to-one-chat-type)
|
||||||
|
(first (rf/sub
|
||||||
|
[:contacts/contact-two-names-by-identity
|
||||||
|
chat-id]))
|
||||||
|
(= chat-type constants/community-chat-type)
|
||||||
|
(str (when emoji (str emoji " ")) "# " chat-name)
|
||||||
|
:else (str emoji chat-name))
|
||||||
|
online? (rf/sub [:visibility-status-updates/online? chat-id])
|
||||||
|
photo-path (rf/sub [:chats/photo-path chat-id])]
|
||||||
|
(rn/use-effect
|
||||||
|
(fn []
|
||||||
|
;; If keyboard is shown then adjust `scroll-y`
|
||||||
|
(when (and keyboard-shown (> keyboard-height 0))
|
||||||
|
(reanimated/set-shared-value scroll-y
|
||||||
|
(+ (reanimated/get-shared-value scroll-y)
|
||||||
|
keyboard-height))
|
||||||
|
(reset! extra-keyboard-height keyboard-height))
|
||||||
|
;; If keyboard is not shown then subtract the keyboard height from `scroll-y` value
|
||||||
|
(when-not keyboard-shown
|
||||||
|
(reanimated/set-shared-value scroll-y
|
||||||
|
(- (reanimated/get-shared-value scroll-y)
|
||||||
|
@extra-keyboard-height))))
|
||||||
|
[keyboard-shown keyboard-height])
|
||||||
|
;; Note - Don't pass `behavior :height` to keyboard avoiding view,
|
||||||
|
;; It breaks composer - https://github.com/status-im/status-mobile/issues/16595
|
||||||
|
[rn/keyboard-avoiding-view
|
||||||
|
{:style (style/keyboard-avoiding-container insets)
|
||||||
|
:keyboard-vertical-offset (- (:bottom insets))}
|
||||||
|
|
||||||
|
[list.view/message-list-content-view
|
||||||
|
{:chat chat
|
||||||
|
:insets insets
|
||||||
|
:scroll-y scroll-y
|
||||||
|
:content-height content-height
|
||||||
|
:cover-bg-color :turquoise
|
||||||
|
:keyboard-shown? keyboard-shown}]
|
||||||
|
|
||||||
|
[messages.navigation/navigation-view
|
||||||
|
{:scroll-y scroll-y
|
||||||
|
:chat chat
|
||||||
|
:chat-screen-loaded? chat-screen-loaded?
|
||||||
|
:all-loaded? all-loaded?
|
||||||
|
:display-name display-name
|
||||||
|
:online? online?
|
||||||
|
:photo-path photo-path}]
|
||||||
|
|
||||||
|
(if able-to-send-message?
|
||||||
|
[:f> composer.view/composer
|
||||||
|
{:insets insets
|
||||||
|
:scroll-to-bottom-fn list.view/scroll-to-bottom
|
||||||
|
:show-floating-scroll-down-button? list.view/show-floating-scroll-down-button?}]
|
||||||
|
[contact-requests.bottom-drawer/view chat-id contact-request-state group-chat])]))
|
||||||
|
|
||||||
(defn chat
|
(defn chat
|
||||||
[]
|
[]
|
||||||
(let [{:keys [chat-id
|
[:f> f-chat])
|
||||||
contact-request-state
|
|
||||||
group-chat
|
|
||||||
able-to-send-message?]
|
|
||||||
:as current-chat} (rf/sub [:chats/current-chat-chat-view])]
|
|
||||||
[messages.list/messages-list
|
|
||||||
{:cover-bg-color :turquoise
|
|
||||||
:chat current-chat
|
|
||||||
:header-comp (fn [{:keys [scroll-y]}]
|
|
||||||
[messages.navigation/navigation-view {:scroll-y scroll-y}])
|
|
||||||
:footer-comp (when (some? able-to-send-message?)
|
|
||||||
(fn [{:keys [insets]}]
|
|
||||||
(if-not able-to-send-message?
|
|
||||||
[contact-requests.bottom-drawer/view chat-id contact-request-state
|
|
||||||
group-chat]
|
|
||||||
[:f> composer/composer insets])))}]))
|
|
||||||
|
|
Loading…
Reference in New Issue