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: Chat scroll to bottom (#14570)

This commit is contained in:
Ajay Sivan 2022-12-21 14:44:38 +05:30 committed by GitHub
parent 69c90c25ab
commit 9f1af8a9c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -1,8 +1,8 @@
(ns status-im2.contexts.chat.messages.list.view (ns status-im2.contexts.chat.messages.list.view
(:require [oops.core :as oops] (:require [i18n.i18n :as i18n]
[oops.core :as oops]
[quo.react-native :as quo.react] [quo.react-native :as quo.react]
[quo2.core :as quo] [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.background-timer :as background-timer] [react-native.background-timer :as background-timer]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.platform :as platform] [react-native.platform :as platform]
@ -24,24 +24,6 @@
(some-> ^js @messages-list-ref (some-> ^js @messages-list-ref
(.scrollToOffset #js {:y 0 :animated true}))) (.scrollToOffset #js {:y 0 :animated true})))
(defn floating-scroll-down-button
[show-input?]
[rn/touchable-without-feedback
{:on-press scroll-to-bottom}
[rn/view
{:style {:position :absolute
:bottom (if show-input? 126 12)
:right 12
:height 24
:width 24
:align-items :center
:justify-content :center
:border-radius (/ 24 2)
:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70)}}
[quo/icon :i/arrow-down
{:color (colors/theme-colors colors/white colors/neutral-100)
:size 12}]]])
(defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75) (defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
(defonce show-floating-scroll-down-button (reagent/atom false)) (defonce show-floating-scroll-down-button (reagent/atom false))
@ -171,7 +153,7 @@
mutual-contact-requests-enabled? mutual-contact-requests-enabled?
one-to-one? one-to-one?
(not contact-added?))] (not contact-added?))]
[:<> [rn/view {:style {:flex 1}}
;;DO NOT use anonymous functions for handlers ;;DO NOT use anonymous functions for handlers
[rn/flat-list [rn/flat-list
(merge (merge
@ -206,5 +188,11 @@
:inverted (when platform/ios? true) :inverted (when platform/ios? true)
:style (when platform/android? {:scaleY -1}) :style (when platform/android? {:scaleY -1})
:on-layout on-messages-view-layout})] :on-layout on-messages-view-layout})]
[quo/floating-shell-button
(merge {:jump-to
{:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
:label (i18n/label :t/jump-to)}}
(when @show-floating-scroll-down-button (when @show-floating-scroll-down-button
[floating-scroll-down-button show-input?])])) {:bottom {:on-press scroll-to-bottom}}))
{:position :absolute
:bottom 12}]]))

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

@ -1,6 +1,5 @@
(ns status-im2.contexts.chat.messages.view (ns status-im2.contexts.chat.messages.view
(:require [i18n.i18n :as i18n] (:require [quo2.core :as quo]
[quo2.core :as quo]
[re-frame.db] [re-frame.db]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -75,12 +74,7 @@
:bottom-space 15}] :bottom-space 15}]
;;INPUT COMPOSER ;;INPUT COMPOSER
(when show-input? (when show-input?
[composer/composer chat-id]) [composer/composer chat-id])]))
[quo/floating-shell-button
{:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
:label (i18n/label :t/jump-to)}}
{:position :absolute
:bottom 117}]]))
(defn chat (defn chat
[] []