Skip to content

Commit ba4d618

Browse files
clauxxclauxx
authored
Merge branch 'develop' into 17433-composer-expanded-on-cancel
2 parents 7d69fa9 + fb8a7d2 commit ba4d618

File tree

24 files changed

+338
-1289
lines changed

24 files changed

+338
-1289
lines changed

‎Makefile

+1-1
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ run-re-frisk: ##@run Start re-frisk server
274274
# TODO: Migrate this to a Nix recipe, much the same way as nix/mobile/android/targets/release-android.nix
275275
run-android: export TARGET := android
276276
# INFO: If it's empty (no devices attached, parsing issues, script error) - for Nix it's the same as not set.
277-
run-android: export ANDROID_ABI_INCLUDE ?= $(shell ./scripts/adb_devices_arch.sh)
277+
run-android: export ANDROID_ABI_INCLUDE ?= $(shell ./scripts/adb_devices_abis.sh)
278278
run-android: ##@run Build Android APK and start it on the device
279279
npx react-native run-android --appIdSuffix debug
280280

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"@react-native-async-storage/async-storage": "^1.17.9",
1313
"@react-native-camera-roll/camera-roll": "git+https://github.com/status-im/react-native-camera-roll.git#refs/tags/v5.1.1.1",
1414
"@react-native-community/audio-toolkit": "git+https://github.com/tbenr/react-native-audio-toolkit.git#refs/tags/v2.0.3-status-v6",
15-
"@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.3-status",
15+
"@react-native-community/blur": "git+https://github.com/status-im/react-native-blur.git#refs/tags/v4.3.3-status",
1616
"@react-native-community/clipboard": "^1.2.2",
1717
"@react-native-community/hooks": "^3.0.0",
1818
"@react-native-community/masked-view": "^0.1.6",
@@ -47,6 +47,7 @@
4747
"react-native-image-crop-picker": "git+https://github.com/status-im/react-native-image-crop-picker.git#refs/tags/v0.36.2-status.0",
4848
"react-native-image-resizer": "^1.2.3",
4949
"react-native-image-viewing": "git+https://github.com/status-im/react-native-image-viewing.git#refs/tags/v0.2.1.status",
50+
"react-native-intersection-observer": "^0.2.0",
5051
"react-native-keychain": "git+https://github.com/status-im/react-native-keychain.git#refs/tags/v.3.0.0-5-status",
5152
"react-native-languages": "^3.0.2",
5253
"react-native-linear-gradient": "^2.8.0",

‎src/mocks/js_dependencies.cljs

+6
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,11 @@
300300
{:clamp nil
301301
:withPause (fn [])})
302302

303+
(def react-native-intersection-observer
304+
#js
305+
{:InView #js {}
306+
:IOFlatList #js {}})
307+
303308
(def react-native-languages
304309
(clj->js {:default {:language "en"
305310
:addEventListener (fn [])
@@ -426,6 +431,7 @@
426431
"react-native-transparent-video" react-native-transparent-video
427432
"react-native-orientation-locker" react-native-orientation-locker
428433
"react-native-gifted-charts" react-native-gifted-charts
434+
"react-native-intersection-observer" react-native-intersection-observer
429435
"../resources/data/emojis/en.json" (js/JSON.parse (slurp
430436
"./resources/data/emojis/en.json"))
431437
"../src/js/worklets/core.js" worklet-factory

‎src/react_native/react_native_intersection_observer.cljs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
(ns react-native.react-native-intersection-observer
2+
(:require
3+
["react-native-intersection-observer" :refer [InView IOFlatList]]
4+
[react-native.flat-list :refer [base-list-props]]
5+
[reagent.core :as reagent]))
6+
7+
(def view (reagent/adapt-react-class InView))
8+
(def flat-list-comp (reagent/adapt-react-class IOFlatList))
9+
10+
(defn flat-list
11+
[props]
12+
[flat-list-comp (base-list-props props)])

‎src/status_im/communities/core.cljs

-26
Original file line numberDiff line numberDiff line change
@@ -220,32 +220,6 @@
220220
(log/error "failed to import community" %)
221221
(re-frame/dispatch [::failed-to-import %]))}]})
222222

223-
(rf/defn request-to-join
224-
{:events [:communities/request-to-join]}
225-
[_ community-id]
226-
{:json-rpc/call [{:method "wakuext_requestToJoinCommunity"
227-
:params [{:communityId community-id}]
228-
:js-response true
229-
:on-success #(re-frame/dispatch [:communities/requested-to-join %])
230-
:on-error #(log/error "failed to request to join community" community-id)}]})
231-
232-
(rf/defn requested-to-join-with-password-error
233-
{:events [:communities/requested-to-join-with-password-error]}
234-
[{:keys [db]} error]
235-
{:db (assoc-in db [:password-authentication :error] error)})
236-
237-
(rf/defn request-to-join-with-password
238-
{:events [:communities/request-to-join-with-password]}
239-
[_ community-id password]
240-
{:json-rpc/call [{:method "wakuext_requestToJoinCommunity"
241-
:params [{:communityId community-id :password password}]
242-
:js-response true
243-
:on-success #(re-frame/dispatch [:communities/requested-to-join %])
244-
:on-error (fn [error]
245-
(log/error "failed to request to join community" community-id error)
246-
(re-frame/dispatch [:communities/requested-to-join-with-password-error
247-
error]))}]})
248-
249223
(rf/defn get-user-requests-to-join
250224
{:events [:communities/get-user-requests-to-join]}
251225
[_]

‎src/status_im/ui/screens/ens/views.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@
147147
:owned
148148
[help-message-text-element
149149
:t/ens-username-owned
150-
:t/ens-username-continue]
150+
:t/ens-username-owned-continue]
151151
:connected
152152
[help-message-text-element
153153
:t/ens-username-connected

‎src/status_im2/contexts/chat/composer/actions/view.cljs

+12-3
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,10 @@
8080
[opacity]
8181
[reanimated/view {:style (reanimated/apply-animations-to-style {:opacity opacity} {})}
8282
[quo/composer-button
83-
{:on-press #(js/alert "to be implemented")
83+
{:on-press (fn []
84+
(rf/dispatch [:chat.ui/set-input-focused false])
85+
(rn/dismiss-keyboard!)
86+
(js/alert "to be implemented"))
8487
:icon :i/audio}]])
8588

8689
(defn audio-button
@@ -213,13 +216,19 @@
213216
[]
214217
[quo/composer-button
215218
{:icon :i/reaction
216-
:on-press #(js/alert "to be implemented")
219+
:on-press (fn []
220+
(rf/dispatch [:chat.ui/set-input-focused false])
221+
(rn/dismiss-keyboard!)
222+
(js/alert "to be implemented"))
217223
:container-style {:margin-right 12}}])
218224

219225
(defn format-button
220226
[]
221227
[quo/composer-button
222-
{:on-press #(js/alert "to be implemented")
228+
{:on-press (fn []
229+
(rf/dispatch [:chat.ui/set-input-focused false])
230+
(rn/dismiss-keyboard!)
231+
(js/alert "to be implemented"))
223232
:icon :i/format}])
224233

225234
(defn view

‎src/status_im2/contexts/chat/events.cljs

+3-1
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,9 @@
172172
(chat.state/reset-visible-item)
173173
(rf/merge cofx
174174
(merge
175-
{:db (dissoc db :current-chat-id)
175+
{:db (-> db
176+
(dissoc :current-chat-id)
177+
(assoc-in [:chat/inputs chat-id :focused?] false))
176178
:async-storage-set {:chat-id nil
177179
:key-uid nil}}
178180
(let [community-id (get-in db [:chats chat-id :community-id])]

‎src/status_im2/contexts/chat/messages/content/view.cljs

+3-1
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,9 @@
152152
:outgoing-status outgoing-status})
153153
:on-press (fn []
154154
(if (and platform/ios? keyboard-shown?)
155-
(rn/dismiss-keyboard!)
155+
(do
156+
(rf/dispatch [:chat.ui/set-input-focused false])
157+
(rn/dismiss-keyboard!))
156158
(when (and outgoing
157159
(not= outgoing-status :sending)
158160
(not @show-delivery-state?))

‎src/status_im2/contexts/chat/messages/list/view.cljs

+68-24
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
[react-native.core :as rn]
99
[react-native.hooks :as hooks]
1010
[react-native.platform :as platform]
11+
[react-native.react-native-intersection-observer :as rnio]
1112
[react-native.reanimated :as reanimated]
1213
[status-im.ui.screens.chat.group :as chat.group]
1314
[status-im.ui.screens.chat.message.gap :as message.gap]
@@ -24,9 +25,12 @@
2425
(defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
2526
(defonce ^:const loading-indicator-extra-spacing 250)
2627
(defonce ^:const loading-indicator-page-loading-height 100)
27-
(defonce ^:const scroll-animation-input-range [50 125])
28+
(defonce ^:const scroll-animation-input-range [0 50])
2829
(defonce ^:const min-message-height 32)
29-
30+
(defonce ^:const topbar-visible-scroll-y-value 85)
31+
(defonce ^:const topbar-invisible-scroll-y-value 135)
32+
(defonce ^:const minimum-scroll-y-topbar-overlaying-avatar 400)
33+
(def root-margin-for-big-name-visibility-detector {:bottom -35})
3034
(defonce messages-list-ref (atom nil))
3135

3236
(defn list-key-fn [{:keys [message-id value]}] (or message-id value))
@@ -64,15 +68,15 @@
6468
(= :message (:type first-not-visible)))
6569
first-not-visible))))))
6670

67-
6871
(defn list-on-end-reached
69-
[scroll-y]
72+
[scroll-y on-end-reached?]
7073
;; FIXME: that's a bit of a hack but we need to update `scroll-y` once the new messages
7174
;; are fetched in order for the header to work properly
7275
(let [on-loaded (fn [n]
7376
(reanimated/set-shared-value scroll-y
7477
(+ (reanimated/get-shared-value scroll-y)
7578
(* n 200))))]
79+
(reset! on-end-reached? true)
7680
(if @state/scrolling
7781
(rf/dispatch [:chat.ui/load-more-messages-for-current-chat on-loaded])
7882
(background-timer/set-timeout #(rf/dispatch [:chat.ui/load-more-messages-for-current-chat
@@ -194,7 +198,7 @@
194198

195199
(defn f-list-footer
196200
[{:keys [chat scroll-y cover-bg-color on-layout theme messages-view-height
197-
messages-view-header-height]}]
201+
messages-view-header-height big-name-visible?]}]
198202
(let [{:keys [chat-id chat-name emoji chat-type
199203
group-chat]} chat
200204
all-loaded? (rf/sub [:chats/all-loaded? chat-id])
@@ -227,9 +231,11 @@
227231
:display-name display-name
228232
:online? online?
229233
:profile-picture photo-path}])]
230-
[rn/view
231-
{:style {:flex-direction :row
232-
:margin-top (if group-chat 54 12)}}
234+
[rnio/view
235+
{:on-change (fn [view-visible?]
236+
(reset! big-name-visible? view-visible?))
237+
:style {:flex-direction :row
238+
:margin-top (if group-chat 54 12)}}
233239
[quo/text
234240
{:weight :semi-bold
235241
:size :heading-1
@@ -275,14 +281,31 @@
275281
[message/message message-data context keyboard-shown?])]))
276282

277283
(defn scroll-handler
278-
[event scroll-y]
279-
(let [content-size-y (- (oops/oget event "nativeEvent.contentSize.height")
280-
(oops/oget event "nativeEvent.layoutMeasurement.height"))
281-
current-y (oops/oget event "nativeEvent.contentOffset.y")]
282-
(reanimated/set-shared-value scroll-y (- content-size-y current-y))))
284+
[event scroll-y animate-topbar-opacity? on-end-reached? animate-topbar-name?]
285+
(let [content-size-y (- (oops/oget event "nativeEvent.contentSize.height")
286+
(oops/oget event "nativeEvent.layoutMeasurement.height"))
287+
current-y (oops/oget event "nativeEvent.contentOffset.y")
288+
scroll-distance (- content-size-y current-y)]
289+
(when (and @on-end-reached? (pos? scroll-distance))
290+
(reset! on-end-reached? false))
291+
(if (< topbar-visible-scroll-y-value scroll-distance)
292+
(reset! animate-topbar-opacity? true)
293+
(reset! animate-topbar-opacity? false))
294+
(if (< topbar-invisible-scroll-y-value scroll-distance)
295+
(reset! animate-topbar-name? true)
296+
(reset! animate-topbar-name? false))
297+
(reanimated/set-shared-value scroll-y scroll-distance)))
283298

284299
(defn f-messages-list-content
285-
[{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown? inner-state-atoms]}]
300+
[{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown? inner-state-atoms
301+
big-name-visible? animate-topbar-opacity? composer-active?
302+
on-end-reached? animate-topbar-name?]}]
303+
(rn/use-effect (fn []
304+
(if (and (not @on-end-reached?)
305+
(< topbar-visible-scroll-y-value (reanimated/get-shared-value scroll-y)))
306+
(reset! animate-topbar-opacity? true)
307+
(reset! animate-topbar-opacity? false)))
308+
[composer-active? @on-end-reached? @animate-topbar-opacity?])
286309
(let [theme (quo.theme/use-theme-value)
287310
{window-height :height} (rn/get-window)
288311
{:keys [keyboard-height]} (hooks/use-keyboard)
@@ -294,8 +317,9 @@
294317
messages-view-height
295318
messages-view-header-height]} inner-state-atoms]
296319
[rn/view {:style {:flex 1}}
297-
[rn/flat-list
298-
{:key-fn list-key-fn
320+
[rnio/flat-list
321+
{:root-margin root-margin-for-big-name-visibility-detector
322+
:key-fn list-key-fn
299323
:ref list-ref
300324
:bounces false
301325
:header [:<>
@@ -311,7 +335,8 @@
311335
%
312336
messages-view-header-height)
313337
:messages-view-header-height messages-view-header-height
314-
:messages-view-height messages-view-height}]
338+
:messages-view-height messages-view-height
339+
:big-name-visible? big-name-visible?}]
315340
:data messages
316341
:render-data {:theme theme
317342
:context context
@@ -320,10 +345,23 @@
320345
:render-fn render-fn
321346
:on-viewable-items-changed on-viewable-items-changed
322347
:on-content-size-change (fn [_ y]
323-
;; NOTE(alwx): here we set the initial value of `scroll-y`
324-
;; which is needed because by default the chat is
325-
;; scrolled to the bottom and no initial `on-scroll`
326-
;; event is getting triggered
348+
(if (or
349+
(< minimum-scroll-y-topbar-overlaying-avatar
350+
(reanimated/get-shared-value scroll-y))
351+
(< topbar-visible-scroll-y-value
352+
(reanimated/get-shared-value scroll-y)))
353+
(reset! animate-topbar-opacity? true)
354+
(reset! animate-topbar-opacity? false))
355+
(when-not (or
356+
(not @big-name-visible?)
357+
(= :initial-render @big-name-visible?)
358+
(pos? (reanimated/get-shared-value
359+
scroll-y)))
360+
(reset! on-end-reached? false))
361+
;; NOTE(alwx): here we set the initial value of
362+
;; `scroll-y` which is needed because by default the
363+
;; chat is scrolled to the bottom and no initial
364+
;; `on-scroll` event is getting triggered
327365
(let [scroll-y-shared (reanimated/get-shared-value
328366
scroll-y)
329367
content-height-shared (reanimated/get-shared-value
@@ -337,19 +375,25 @@
337375
(- (when keyboard-shown?
338376
keyboard-height))))
339377
(reanimated/set-shared-value content-height y))))
340-
:on-end-reached #(list-on-end-reached scroll-y)
378+
:on-end-reached #(list-on-end-reached scroll-y on-end-reached?)
341379
:on-scroll-to-index-failed identity
342380
:scroll-indicator-insets {:top (if (:able-to-send-message? context)
343381
(- composer.constants/composer-default-height 16)
344382
0)}
345383
:keyboard-dismiss-mode :interactive
346384
:keyboard-should-persist-taps :always
347-
:on-scroll-begin-drag rn/dismiss-keyboard!
385+
:on-scroll-begin-drag #(do
386+
(rf/dispatch [:chat.ui/set-input-focused false])
387+
(rn/dismiss-keyboard!))
348388
:on-momentum-scroll-begin state/start-scrolling
349389
:on-momentum-scroll-end state/stop-scrolling
350390
:scroll-event-throttle 16
351391
:on-scroll (fn [event]
352-
(scroll-handler event scroll-y)
392+
(scroll-handler event
393+
scroll-y
394+
animate-topbar-opacity?
395+
on-end-reached?
396+
animate-topbar-name?)
353397
(on-scroll event show-floating-scroll-down-button?))
354398
:style (add-inverted-y-android
355399
{:background-color (if all-loaded?

0 commit comments

Comments
 (0)