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

Update community home scrolling to support sticky header and tabs (#14929) 

* communities home sticky tabs

* Communities home screen scroll behaviours

* refactored scroll-page component
This commit is contained in:
John Ngei 2023-02-07 12:58:38 +03:00 committed by GitHub
parent 7315dc8914
commit f8b5b35063
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 126 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/quo2/components/navigation/page_nav.cljs
View File

@ -224,7 +224,8 @@
{:style {:flex 1
:flex-direction :row
:align-items :center}}
[left-section-view left-section put-middle-section-on-left?]
(when left-section
[left-section-view left-section put-middle-section-on-left?])
(when put-middle-section-on-left?
[mid-section-view
(assoc mid-section-props

4
src/status_im2/common/home/style.cljs
View File

@ -5,8 +5,8 @@
:align-items :center
:height 56
:padding-vertical 12
:margin-bottom 8
:padding-horizontal 20})
:padding-horizontal 20
:background-color :transparent})
(def title-column-text
{:accessibility-label :communities-screen-title

7
src/status_im2/common/scroll_page/view.cljs
View File

@ -36,7 +36,7 @@
top-nav
title-colum
navigate-back?]
(let [input-range (if platform/ios? [-47 10] [0 150])
(let [input-range (if platform/ios? [-47 10] [0 92])
output-range (if platform/ios? [-208 0] [-208 -45])
y (reanimated/use-shared-value scroll-height)
translate-animation (reanimated/interpolate y
@ -128,9 +128,8 @@
sticky-header
children]
[:<>
[:f> scroll-page-header @scroll-height height name
page-nav-right-section-buttons cover-image sticky-header top-nav title-colum
navigate-back?]
[:f> scroll-page-header @scroll-height height name page-nav-right-section-buttons
cover-image sticky-header top-nav title-colum navigate-back?]
[rn/scroll-view
{:content-container-style (style/scroll-view-container
(diff-with-max-min @scroll-height 16 0))

29
src/status_im2/contexts/communities/home/style.cljs Normal file
View File

@ -0,0 +1,29 @@
(ns status-im2.contexts.communities.home.style
(:require [react-native.platform :as platform]))
(defn community-segments
[padding-top]
{:padding-bottom 12
:padding-top padding-top
:padding-horizontal 20
:background-color :transparent})
(defn home-communities-container
[background-color]
{:flex 1
:background-color background-color
:position :absolute
:top (if platform/ios? -44 0)
:bottom 0
:left 0
:right 0})
(def blur-tabs-header
{:flex 1
:position :absolute
:top 112
:height 52
:left 0
:right 0
:justify-content :center
:background-color :transparent})

140
src/status_im2/contexts/communities/home/view.cljs
View File

@ -1,37 +1,19 @@
(ns status-im2.contexts.communities.home.view
(:require [utils.i18n :as i18n]
[quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[react-native.core :as rn]
[status-im2.common.home.view :as common.home]
[status-im2.common.scroll-page.view :as scroll-page]
[status-im2.contexts.communities.menus.community-options.view :as options]
[status-im2.contexts.communities.home.style :as style]
[utils.re-frame :as rf]))
(defn render-fn
[id]
(let [community-item (rf/sub [:communities/home-item id])]
[quo/communities-membership-list-item
{:on-press #(rf/dispatch [:navigate-to :community-overview id])
:on-long-press #(rf/dispatch
[:bottom-sheet/show-sheet
{:content (fn []
[options/community-options-bottom-sheet id])
:selected-item (fn []
[quo/communities-membership-list-item {} community-item])}])}
community-item]))
(defn get-item-layout-js
[_ index]
#js {:length 64 :offset (* 64 index) :index index})
(defn home-community-segments
[selected-tab]
(defn community-segments
[selected-tab padding-top]
[rn/view
{:style {:padding-bottom 12
:padding-top 16
:margin-top 8
:height 60
:padding-horizontal 20}}
{:style (style/community-segments padding-top)}
[quo/tabs
{:size 32
:on-change #(reset! selected-tab %)
@ -41,17 +23,25 @@
{:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}]}]])
(defn communities-list
[community-ids]
[rn/flat-list
{:key-fn identity
:get-item-layout get-item-layout-js
:keyboard-should-persist-taps :always
:shows-horizontal-scroll-indicator false
:data community-ids
:render-fn render-fn
:content-container-style {:padding-bottom 30}}])
[communities-ids]
[rn/view
(map-indexed
(fn [index id]
(let [community (rf/sub [:communities/home-item id])]
^{:key index}
[quo/communities-membership-list-item
{:on-press #(rf/dispatch [:navigate-to :community-overview id])
:on-long-press #(rf/dispatch
[:bottom-sheet/show-sheet
{:content (fn []
[options/community-options-bottom-sheet id])
:selected-item (fn []
[quo/communities-membership-list-item {} community])}])}
community]))
communities-ids)])
(defn segments-community-lists
(defn render-communities-segments
[selected-tab]
(let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement])
tab @selected-tab]
@ -74,20 +64,70 @@
:icon :i/info}
(i18n/label :t/error)])]))
(defn communities-header
[selected-tab padding-top]
[:<>
[rn/view {:style {:padding-vertical 8}}
[quo/discover-card
{:on-press #(rf/dispatch [:navigate-to :discover-communities])
:title (i18n/label :t/discover)
:description (i18n/label :t/whats-trending)
:accessibility-label :communities-home-discover-card}]]
[community-segments selected-tab padding-top]])
(defn home-page-comunity-lists
[{:keys [selected-tab padding-top]}]
(fn []
[rn/view {:style {:flex 1}}
[communities-header selected-tab padding-top]
[render-communities-segments selected-tab]]))
(defn home-sticky-header
[{:keys [selected-tab scroll-height padding-top]}]
(fn []
(when (> @scroll-height 80)
[rn/view
{:style style/blur-tabs-header}
[community-segments selected-tab padding-top]])))
(defn communities-screen-content
[]
(let [scroll-height (reagent/atom 0)
selected-tab (reagent/atom :joined)]
(fn []
[scroll-page/scroll-page
{:name (i18n/label :t/communities)
:on-scroll #(reset! scroll-height %)
:top-nav (fn []
[common.home/top-nav
{:type :default
:hide-search true
:style {:background-color :transparent}}])
:title-colum (fn []
[common.home/title-column
{:label (i18n/label :t/communities)
:handler #(rf/dispatch [:bottom-sheet/show-sheet :add-new {}])
:accessibility-label :new-chat-button}])
:background-color (colors/theme-colors
colors/white
colors/neutral-95)
:navigate-back? :false
:height (if (> @scroll-height 80)
208
156)}
[home-sticky-header
{:selected-tab selected-tab
:scroll-height scroll-height
:padding-top 8}]
[home-page-comunity-lists
{:selected-tab selected-tab
:padding-top 16
:height 60}]])))
(defn home
[]
(let [selected-tab (reagent/atom :joined)]
(fn []
[:<>
[common.home/top-nav {:type :default :hide-search true}]
[common.home/title-column
{:label (i18n/label :t/communities)
:handler #(rf/dispatch [:bottom-sheet/show-sheet :add-new {}])
:accessibility-label :new-chat-button}]
[quo/discover-card
{:on-press #(rf/dispatch [:navigate-to :discover-communities])
:title (i18n/label :t/discover)
:description (i18n/label :t/whats-trending)
:accessibility-label :communities-home-discover-card}]
[home-community-segments selected-tab]
[segments-community-lists selected-tab]])))
[rn/view
{:style (style/home-communities-container (colors/theme-colors
colors/white
colors/neutral-95))}
[communities-screen-content]])