Skip to content

Commit 27e177f

Browse files
ilmottailmotta
authored
Account selection: Use bottom sheet component (#18919)
Use bottom sheet component as designed in Figma https://www.figma.com/file/h9wo4GipgZURbqqr1vShFN/Communities-for-Mobile?type=design&node-id=16409-98076&mode=design&t=jrVNb3JnWNurJwP8-0 - Fixes no animation when closing Addresses For Permissions modal: #18617 - Fixes drawer is always expanded: #18619 Additionally: - Fixed incorrect code passing a function instance to a style prop, which leads to incorrect appearance for settings.category.reorder.view/view. - Optimized Reagent a little bit by extracting functions that need to close over the community ID to the mount phase. That way, we avoid regenerating function instances on every re-render and Reagent can avoid a bit of re-work. The challenge was to make the scrollable content work inside a bottom sheet, while supporting the designs for a fixed (always visible) header and footer.
1 parent f8cd142 commit 27e177f

File tree

8 files changed

+143
-140
lines changed

8 files changed

+143
-140
lines changed

‎src/quo/components/settings/category/reorder/view.cljs

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
(reagent/flush))
1717

1818
(defn- reorder-category-internal
19-
[{:keys [label data blur? theme]}]
19+
[{:keys [label data blur? theme container-style]}]
2020
(reagent/with-let [atom-data (reagent/atom data)]
21-
[rn/view {:style style/container}
21+
[rn/view {:style (merge (style/container label) container-style)}
2222
[text/text
2323
{:weight :medium
2424
:size :paragraph-2

‎src/status_im/common/bottom_sheet/style.cljs

+12-11
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33
[quo.foundations.colors :as colors]
44
[react-native.platform :as platform]))
55

6+
(def ^:private sheet-border-radius 20)
7+
68
(defn sheet
7-
[{:keys [top]} window-height selected-item]
9+
[{:keys [max-height]}]
810
{:position :absolute
9-
:max-height (- window-height top)
10-
:z-index 1
1111
:bottom 0
1212
:left 0
1313
:right 0
14-
:border-top-left-radius 20
15-
:border-top-right-radius 20
16-
:overflow (when-not selected-item :hidden)
17-
:flex 1})
14+
:z-index 1
15+
:max-height max-height
16+
:border-top-left-radius sheet-border-radius
17+
:border-top-right-radius sheet-border-radius})
1818

1919
(def gradient-bg
2020
{:position :absolute
@@ -31,10 +31,11 @@
3131
:bottom 0})
3232

3333
(defn sheet-content
34-
[theme padding-bottom-override {:keys [bottom]} shell? bottom-margin]
35-
{:border-top-left-radius 20
36-
:border-top-right-radius 20
37-
:padding-bottom (or padding-bottom-override (+ bottom bottom-margin))
34+
[{:keys [theme padding-bottom shell?]}]
35+
{:overflow :scroll
36+
:padding-bottom padding-bottom
37+
:border-top-left-radius sheet-border-radius
38+
:border-top-right-radius sheet-border-radius
3839
:background-color (if shell?
3940
:transparent
4041
(colors/theme-colors colors/white colors/neutral-95 theme))})

‎src/status_im/common/bottom_sheet/view.cljs

+17-8
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@
5656
(show translate-y bg-opacity)
5757
(hide translate-y bg-opacity window-height on-close))))))
5858

59+
(defn- get-layout-height
60+
[event]
61+
(oops/oget event "nativeEvent.layout.height"))
62+
5963
(defn view
6064
[{:keys [hide? insets]}
6165
{:keys [content selected-item padding-bottom-override border-radius on-close shell?
@@ -64,6 +68,8 @@
6468
(let [theme (quo.theme/use-theme-value)
6569
sheet-height (rn/use-ref-atom 0)
6670
item-height (rn/use-ref-atom 0)
71+
set-sheet-height (rn/use-callback #(reset! sheet-height (get-layout-height %)))
72+
set-item-height (rn/use-callback #(reset! item-height (get-layout-height %)))
6773
{window-height :height} (rn/get-window)
6874
bg-opacity (reanimated/use-shared-value 0)
6975
translate-y (reanimated/use-shared-value window-height)
@@ -80,7 +86,10 @@
8086
top (- window-height (:top insets) @sheet-height)
8187
bottom (if selected-item-smaller-than-sheet?
8288
(+ @sheet-height bottom-margin)
83-
(:bottom insets))]
89+
(:bottom insets))
90+
sheet-max-height (- window-height (:top insets))
91+
content-padding-bottom (or padding-bottom-override
92+
(+ (:bottom insets) bottom-margin))]
8493
(rn/use-effect
8594
#(if hide?
8695
(hide translate-y bg-opacity window-height on-close)
@@ -105,7 +114,7 @@
105114
[reanimated/view
106115
{:style (reanimated/apply-animations-to-style
107116
{:transform [{:translateY translate-y}]}
108-
(style/sheet insets window-height selected-item))}
117+
(style/sheet {:max-height sheet-max-height}))}
109118
(when shell?
110119
[blur/ios-view
111120
{:style style/shell-bg
@@ -114,14 +123,14 @@
114123
:overlay-color :transparent}])
115124
(when selected-item
116125
[rn/view
117-
{:on-layout #(reset! item-height (.-nativeEvent.layout.height ^js %))
118-
:style
119-
(style/selected-item theme top bottom selected-item-smaller-than-sheet? border-radius)}
126+
{:on-layout set-item-height
127+
:style (style/selected-item theme top bottom selected-item-smaller-than-sheet? border-radius)}
120128
[selected-item]])
121-
122129
[rn/view
123-
{:style (style/sheet-content theme padding-bottom-override insets shell? bottom-margin)
124-
:on-layout #(reset! sheet-height (.-nativeEvent.layout.height ^js %))}
130+
{:on-layout set-sheet-height
131+
:style (style/sheet-content {:theme theme
132+
:shell? shell?
133+
:padding-bottom content-padding-bottom})}
125134
(when (and gradient-cover? customization-color)
126135
[rn/view {:style style/gradient-bg}
127136
[quo/gradient-cover

‎src/status_im/contexts/communities/actions/accounts_selection/view.cljs

+82-71
Original file line numberDiff line numberDiff line change
@@ -5,81 +5,92 @@
55
[react-native.gesture :as gesture]
66
[status-im.common.password-authentication.view :as password-authentication]
77
[status-im.contexts.communities.actions.accounts-selection.style :as style]
8+
[status-im.contexts.communities.actions.addresses-for-permissions.view :as addresses-for-permissions]
9+
[status-im.contexts.communities.actions.airdrop-addresses.view :as airdrop-addresses]
810
[status-im.contexts.communities.actions.community-rules.view :as community-rules]
911
[status-im.contexts.communities.utils :as communities.utils]
1012
[utils.i18n :as i18n]
1113
[utils.re-frame :as rf]))
1214

13-
(defn- join-community-and-navigate-back
14-
[id]
15-
(rf/dispatch [:password-authentication/show {:content (fn [] [password-authentication/view])}
16-
{:label (i18n/label :t/join-open-community)
17-
:on-press #(rf/dispatch [:communities/request-to-join-with-addresses
18-
{:community-id id :password %}])}])
19-
(rf/dispatch [:navigate-back]))
20-
2115
(defn view
2216
[]
23-
(let [{id :community-id} (rf/sub [:get-screen-params])
24-
{:keys [name color images]} (rf/sub [:communities/community id])
25-
airdrop-account (rf/sub [:communities/airdrop-account id])
26-
selected-accounts (rf/sub [:communities/selected-permission-accounts id])
27-
{:keys [highest-permission-role]} (rf/sub [:community/token-gated-overview id])
28-
highest-role-text (i18n/label (communities.utils/role->translation-key
29-
highest-permission-role
30-
:t/member))]
31-
[rn/safe-area-view {:style style/container}
32-
[quo/page-nav
33-
{:text-align :left
34-
:icon-name :i/close
35-
:on-press #(rf/dispatch [:navigate-back])
36-
:accessibility-label :back-button}]
37-
[quo/page-top
38-
{:title (i18n/label :t/request-to-join)
39-
:description :context-tag
40-
:context-tag {:type :community
41-
:size 24
42-
:community-logo (get-in images [:thumbnail :uri])
43-
:community-name name}}]
44-
[gesture/scroll-view
45-
[:<>
46-
[quo/text
47-
{:style style/section-title
48-
:accessibility-label :community-rules-title
49-
:weight :semi-bold
50-
:size :paragraph-1}
51-
(i18n/label :t/address-to-share)]
52-
[quo/category
53-
{:list-type :settings
54-
:data [{:title (i18n/label :t/join-as-a {:role highest-role-text})
55-
:on-press #(rf/dispatch [:open-modal :addresses-for-permissions
56-
{:community-id id}])
57-
:description :text
58-
:action :arrow
59-
:label :preview
60-
:label-props {:type :accounts
61-
:data selected-accounts}
62-
:description-props {:text (i18n/label :t/all-addresses)}}
63-
{:title (i18n/label :t/for-airdrops)
64-
:on-press #(rf/dispatch [:open-modal :airdrop-addresses
65-
{:community-id id}])
66-
:description :text
67-
:action :arrow
68-
:label :preview
69-
:label-props {:type :accounts
70-
:data [airdrop-account]}
71-
:description-props {:text (:name airdrop-account)}}]}]
72-
[quo/text
73-
{:style style/section-title
74-
:accessibility-label :community-rules-title
75-
:weight :semi-bold
76-
:size :paragraph-1}
77-
(i18n/label :t/community-rules)]
78-
[community-rules/view id]]]
79-
[rn/view {:style (style/bottom-actions)}
80-
[quo/slide-button
81-
{:size :size-48
82-
:track-text (i18n/label :t/slide-to-request-to-join)
83-
:track-icon :i/face-id
84-
:customization-color color
85-
:on-complete #(join-community-and-navigate-back id)}]]]))
17+
(let [{id :community-id} (rf/sub [:get-screen-params])
18+
show-addresses-for-permissions (fn []
19+
(rf/dispatch [:show-bottom-sheet
20+
{:community-id id
21+
:content addresses-for-permissions/view}]))
22+
show-airdrop-addresses (fn []
23+
(rf/dispatch [:show-bottom-sheet
24+
{:community-id id
25+
:content airdrop-addresses/view}]))
26+
navigate-back #(rf/dispatch [:navigate-back])
27+
join-and-go-back (fn []
28+
(rf/dispatch [:password-authentication/show
29+
{:content (fn [] [password-authentication/view])}
30+
{:label (i18n/label :t/join-open-community)
31+
:on-press
32+
#(rf/dispatch
33+
[:communities/request-to-join-with-addresses
34+
{:community-id id :password %}])}])
35+
(navigate-back))]
36+
(fn []
37+
(let [{:keys [name color images]} (rf/sub [:communities/community id])
38+
airdrop-account (rf/sub [:communities/airdrop-account id])
39+
selected-accounts (rf/sub [:communities/selected-permission-accounts id])
40+
{:keys [highest-permission-role]} (rf/sub [:community/token-gated-overview id])
41+
highest-role-text (i18n/label (communities.utils/role->translation-key
42+
highest-permission-role
43+
:t/member))]
44+
[rn/safe-area-view {:style style/container}
45+
[quo/page-nav
46+
{:text-align :left
47+
:icon-name :i/close
48+
:on-press navigate-back
49+
:accessibility-label :back-button}]
50+
[quo/page-top
51+
{:title (i18n/label :t/request-to-join)
52+
:description :context-tag
53+
:context-tag {:type :community
54+
:size 24
55+
:community-logo (get-in images [:thumbnail :uri])
56+
:community-name name}}]
57+
[gesture/scroll-view
58+
[:<>
59+
[quo/text
60+
{:style style/section-title
61+
:accessibility-label :community-rules-title
62+
:weight :semi-bold
63+
:size :paragraph-1}
64+
(i18n/label :t/address-to-share)]
65+
[quo/category
66+
{:list-type :settings
67+
:data [{:title (i18n/label :t/join-as-a {:role highest-role-text})
68+
:on-press show-addresses-for-permissions
69+
:description :text
70+
:action :arrow
71+
:label :preview
72+
:label-props {:type :accounts
73+
:data selected-accounts}
74+
:description-props {:text (i18n/label :t/all-addresses)}}
75+
{:title (i18n/label :t/for-airdrops)
76+
:on-press show-airdrop-addresses
77+
:description :text
78+
:action :arrow
79+
:label :preview
80+
:label-props {:type :accounts
81+
:data [airdrop-account]}
82+
:description-props {:text (:name airdrop-account)}}]}]
83+
[quo/text
84+
{:style style/section-title
85+
:accessibility-label :community-rules-title
86+
:weight :semi-bold
87+
:size :paragraph-1}
88+
(i18n/label :t/community-rules)]
89+
[community-rules/view id]]]
90+
[rn/view {:style (style/bottom-actions)}
91+
[quo/slide-button
92+
{:size :size-48
93+
:track-text (i18n/label :t/slide-to-request-to-join)
94+
:track-icon :i/face-id
95+
:customization-color color
96+
:on-complete join-and-go-back}]]]))))

‎src/status_im/contexts/communities/actions/addresses_for_permissions/style.cljs

-3
This file was deleted.

0 commit comments

Comments
 (0)