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

fix(communities)_: Buggy scroll behavior in community channel member list (#20517) 

Fixes the scroll behavior in a community channel member list. The problem was
that the code wasn't enforcing the correct height.

Partially solves https://github.com/status-im/status-mobile/issues/20514

Steps to test: Long press on any community channel and press View channel
members and details. The user should be able to correctly scroll throughout the
entire list of members.
This commit is contained in:
Icaro Motta 2024-07-01 18:55:24 -03:00 committed by GitHub
parent 1c83916fc3
commit b255874e95
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 104 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo/components/list_items/user.cljs
View File

@ -8,7 +8,7 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[react-native.core :as rn])) [react-native.core :as rn]))
(def container-style (def container
{:margin-horizontal 8 {:margin-horizontal 8
:padding-vertical 8 :padding-vertical 8
:padding-horizontal 12 :padding-horizontal 12
@ -43,9 +43,9 @@
(defn user (defn user
[{:keys [short-chat-key primary-name secondary-name photo-path online? contact? verified? [{:keys [short-chat-key primary-name secondary-name photo-path online? contact? verified?
untrustworthy? on-press on-long-press accessory customization-color theme untrustworthy? on-press on-long-press accessory customization-color theme
allow-multiple-presses? disabled?]}] allow-multiple-presses? disabled? container-style]}]
[rn/touchable-highlight [rn/touchable-highlight
{:style container-style {:style (merge container container-style)
:underlay-color (colors/resolve-color customization-color theme 5) :underlay-color (colors/resolve-color customization-color theme 5)
:allow-multiple-presses? allow-multiple-presses? :allow-multiple-presses? allow-multiple-presses?
:accessibility-label :user-list :accessibility-label :user-list

4
src/status_im/common/contact_list_item/view.cljs
View File

@ -6,7 +6,8 @@
(defn contact-list-item (defn contact-list-item
[{:keys [on-press on-long-press accessory allow-multiple-presses? disabled?]} [{:keys [on-press on-long-press accessory allow-multiple-presses? disabled?]}
{:keys [primary-name secondary-name public-key compressed-key ens-verified added?]} {:keys [primary-name secondary-name public-key compressed-key ens-verified added?
container-style]}
theme] theme]
(let [photo-path (rf/sub [:chats/photo-path public-key]) (let [photo-path (rf/sub [:chats/photo-path public-key])
online? (rf/sub [:visibility-status-updates/online? public-key]) online? (rf/sub [:visibility-status-updates/online? public-key])
@ -25,4 +26,5 @@
:on-press on-press :on-press on-press
:on-long-press on-long-press :on-long-press on-long-press
:accessory accessory :accessory accessory
:container-style container-style
:disabled? disabled?}])) :disabled? disabled?}]))

2
src/status_im/constants.cljs
View File

@ -548,3 +548,5 @@
(def ^:const community-joined-notification-type "communityJoined") (def ^:const community-joined-notification-type "communityJoined")
(def ^:const default-telemetry-server-url "https://telemetry.status.im") (def ^:const default-telemetry-server-url "https://telemetry.status.im")
(def ^:const contact-item-height 56)

178
src/status_im/contexts/communities/actions/channel_view_details/view.cljs
View File

@ -6,32 +6,44 @@
[status-im.common.contact-list-item.view :as contact-list-item] [status-im.common.contact-list-item.view :as contact-list-item]
[status-im.common.contact-list.view :as contact-list] [status-im.common.contact-list.view :as contact-list]
[status-im.common.home.actions.view :as home.actions] [status-im.common.home.actions.view :as home.actions]
[status-im.constants :as constants]
[status-im.contexts.communities.actions.channel-view-details.style :as style] [status-im.contexts.communities.actions.channel-view-details.style :as style]
[status-im.feature-flags :as ff] [status-im.feature-flags :as ff]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn- contact-item (defn- contact-item
[public-key] [public-key _ _ {:keys [theme]}]
(let [show-profile-actions #(rf/dispatch (let [show-profile-actions (rn/use-callback
[:show-bottom-sheet (fn []
{:content (fn [] [home.actions/contact-actions (rf/dispatch
{:public-key public-key}])}]) [:show-bottom-sheet
[primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity {:content (fn [] [home.actions/contact-actions
public-key]) {:public-key public-key}])}]))
{:keys [ens-verified added? compressed-key]} (rf/sub [:contacts/contact-by-address public-key]) [public-key])
theme (quo.theme/use-theme)] on-press (rn/use-callback
(fn []
(rf/dispatch [:chat.ui/show-profile public-key]))
[public-key])
[primary-name
secondary-name] (rf/sub [:contacts/contact-two-names-by-identity public-key])
{:keys [ens-verified
added?
compressed-key]} (rf/sub [:contacts/contact-by-address public-key])]
[contact-list-item/contact-list-item [contact-list-item/contact-list-item
{:on-press #(rf/dispatch [:chat.ui/show-profile public-key]) {:on-press on-press
:on-long-press show-profile-actions :on-long-press show-profile-actions
:accessory {:type :options :accessory {:type :options
:on-press show-profile-actions}} :on-press show-profile-actions}}
{:primary-name primary-name {:primary-name primary-name
:secondary-name secondary-name :secondary-name secondary-name
:compressed-key compressed-key :compressed-key compressed-key
:public-key public-key :public-key public-key
:ens-verified ens-verified :ens-verified ens-verified
:added? added?} :added? added?
;; We hardcode the height of the container to match exactly the height
;; used in the `get-item-layout` function.
:container-style {:height constants/contact-item-height}}
theme])) theme]))
(defn- footer (defn- footer
@ -40,10 +52,12 @@
(defn- get-item-layout (defn- get-item-layout
[_ index] [_ index]
#js {:length 200 :offset (* 200 index) :index index}) #js {:length constants/contact-item-height
:offset (* constants/contact-item-height index)
:index index})
(defn- members (defn- members
[items] [items theme]
[rn/section-list [rn/section-list
{:key-fn :public-key {:key-fn :public-key
:content-container-style {:padding-bottom 20} :content-container-style {:padding-bottom 20}
@ -53,70 +67,70 @@
:sticky-section-headers-enabled false :sticky-section-headers-enabled false
:render-section-header-fn contact-list/contacts-section-header :render-section-header-fn contact-list/contacts-section-header
:render-section-footer-fn footer :render-section-footer-fn footer
:render-data {:theme theme}
:render-fn contact-item :render-fn contact-item
:scroll-event-throttle 8}]) :scroll-event-throttle 32}])
(defn view (defn view
[_args] []
(fn [] (let [{:keys [chat-id community-id]} (rf/sub [:get-screen-params
(let [{:keys [chat-id community-id]} (rf/sub [:get-screen-params :screen/chat.view-channel-members-and-details])
:screen/chat.view-channel-members-and-details]) {:keys [description chat-name emoji muted chat-type color]
{:keys [description chat-name emoji muted chat-type color] :as chat} (rf/sub [:chats/chat-by-id chat-id])
:as chat} (rf/sub [:chats/chat-by-id chat-id]) pins-count (rf/sub [:chats/pin-messages-count chat-id])
pins-count (rf/sub [:chats/pin-messages-count chat-id]) items (rf/sub [:communities/sorted-community-members-section-list
items (rf/sub [:communities/sorted-community-members-section-list community-id chat-id])
community-id chat-id]) theme (quo.theme/use-theme)]
theme (quo.theme/use-theme)] (rn/use-mount (fn []
(rn/use-mount (fn [] (rf/dispatch [:pin-message/load-pin-messages chat-id])))
(rf/dispatch [:pin-message/load-pin-messages chat-id]))) [:<>
[:<> (when (ff/enabled? ::ff/shell.jump-to)
(when (ff/enabled? ::ff/shell.jump-to) [quo/floating-shell-button
[quo/floating-shell-button {:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
{:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to]) :customization-color color
:customization-color color :label (i18n/label :t/jump-to)}}
:label (i18n/label :t/jump-to)}} style/floating-shell-button])
style/floating-shell-button]) [quo/gradient-cover {:customization-color color :opacity 0.4}]
[quo/gradient-cover {:customization-color color :opacity 0.4}] [quo/page-nav
[quo/page-nav {:background :blur
{:background :blur :icon-name :i/arrow-left
:icon-name :i/arrow-left :on-press #(rf/dispatch [:navigate-back])
:on-press #(rf/dispatch [:navigate-back]) :right-side [{:icon-name :i/options
:right-side [{:icon-name :i/options :on-press #(rf/dispatch [:show-bottom-sheet
:on-press #(rf/dispatch [:show-bottom-sheet {:content (fn [] [home.actions/chat-actions
{:content (fn [] [home.actions/chat-actions chat
chat false
false true])}])}]}]
true])}])}]}] [quo/text-combinations
[quo/text-combinations {:container-style style/text-combinations
{:container-style style/text-combinations :title [quo/channel-name
:title [quo/channel-name {:channel-name chat-name
{:channel-name chat-name :unlocked? true}]
:unlocked? true}] :theme theme
:theme theme :emoji (when (not (string/blank? emoji)) (string/trim emoji))
:emoji (when (not (string/blank? emoji)) (string/trim emoji)) :customization-color color
:customization-color color :title-accessibility-label :welcome-title
:title-accessibility-label :welcome-title :description description
:description description :description-accessibility-label :welcome-sub-title}]
:description-accessibility-label :welcome-sub-title}] [rn/view {:style style/wrapper}
[rn/view {:style style/wrapper} [rn/view
[rn/view {:style style/channel-actions-wrapper}
{:style style/channel-actions-wrapper} [quo/channel-actions
[quo/channel-actions {:actions
{:actions [{:big? true
[{:big? true :label (i18n/label :t/pinned-messages-2)
:label (i18n/label :t/pinned-messages-2) :customization-color color
:customization-color color :icon :i/pin
:icon :i/pin :counter-value pins-count
:counter-value pins-count :on-press (fn []
:on-press (fn [] (rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:pin-message/show-pins-bottom-sheet
(rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}
chat-id]))} {:label (if muted (i18n/label :t/unmute-channel) (i18n/label :t/mute-channel))
{:label (if muted (i18n/label :t/unmute-channel) (i18n/label :t/mute-channel)) :customization-color color
:customization-color color :icon (if muted :i/muted :i/activity-center)
:icon (if muted :i/muted :i/activity-center) :on-press (fn []
:on-press (fn [] (if muted
(if muted (home.actions/unmute-chat-action chat-id)
(home.actions/unmute-chat-action chat-id) (home.actions/mute-chat-action chat-id chat-type muted)))}]}]]]
(home.actions/mute-chat-action chat-id chat-type muted)))}]}]]] [members items theme]]))
[members items color]])))