Skip to content

Commit c6a7cb5

Browse files
clauxxclauxx
committed
ref: animating composer height in one place only
1 parent 9543731 commit c6a7cb5

File tree

6 files changed

+121
-30
lines changed

6 files changed

+121
-30
lines changed

‎src/status_im2/contexts/chat/composer/effects.cljs

+62-4
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
[status-im2.contexts.chat.composer.utils :as utils]
1212
[utils.number]
1313
[utils.re-frame :as rf]))
14-
1514
(defn reenter-screen-effect
1615
[{:keys [text-value saved-cursor-position maximized?]}
1716
{:keys [content-height]}
@@ -112,9 +111,9 @@
112111
(let [edit-text (get-in edit [:content :text])
113112
text-value-count (count @text-value)]
114113
(when (and edit @input-ref)
115-
;; A small setTimeout is necessary to ensure the statement is enqueued and will get executed
116-
;; ASAP.
117-
;; https://github.com/software-mansion/react-native-screens/issues/472
114+
;; A small setTimeout is necessary to ensure the statement is enqueued and will get
115+
;; executed
116+
;; ASAP. Https://github.com/software-mansion/react-native-screens/issues/472
118117
(js/setTimeout #(.focus ^js @input-ref) 250)
119118
(.setNativeProps ^js @input-ref (clj->js {:text edit-text}))
120119
(reset! text-value edit-text)
@@ -226,3 +225,62 @@
226225
:setupMenuItems
227226
selectable-text-input-handle
228227
text-input-handle))))))
228+
229+
230+
(defn- add-emoji-kb-extra-height
231+
[extra-height height]
232+
(if extra-height (+ extra-height height) height))
233+
234+
(defn use-input-height
235+
[props state animations subscriptions dimensions]
236+
(let [{:keys [maximized?]} state
237+
{:keys [height last-height saved-height
238+
container-opacity opacity background-y]} animations
239+
{:keys [max-height content-height]} dimensions
240+
{:keys [edit input-content-height focused?
241+
images link-previews?]} subscriptions
242+
{:keys [emoji-kb-extra-height
243+
last-input-height-animation]} props]
244+
(println "emoji extra height" @emoji-kb-extra-height)
245+
(rn/use-effect
246+
(fn []
247+
(let [editing? (boolean edit)
248+
bottom-content-height (utils/calc-bottom-content-height
249+
images
250+
link-previews?)
251+
current-height (reanimated/get-shared-value height)
252+
new-height-unbounded (cond
253+
;;editing? input-content-height
254+
;; :else
255+
;; (reanimated/get-shared-value
256+
;; last-height)
257+
(not focused?)
258+
constants/multiline-minimized-height
259+
;;@maximized? max-height
260+
:else input-content-height)
261+
new-height (-> new-height-unbounded
262+
(add-emoji-kb-extra-height @emoji-kb-extra-height)
263+
(utils.number/value-in-range
264+
constants/input-height
265+
max-height)
266+
(+ bottom-content-height)
267+
(min max-height))]
268+
(println {:input-content-height input-content-height
269+
:new-height-unbounded new-height-unbounded
270+
:new-height new-height
271+
:focused? focused?})
272+
(if (= new-height max-height)
273+
(do (reset! maximized? true)
274+
(rf/dispatch [:chat.ui/set-input-maximized true]))
275+
(do (reset! maximized? false)
276+
(rf/dispatch [:chat.ui/set-input-maximized false])))
277+
(when (and (not= @last-input-height-animation new-height) (not= current-height new-height))
278+
(println "ANIMATING: " new-height)
279+
(println {:current current-height :new new-height :prev @last-input-height-animation})
280+
(reset! last-input-height-animation new-height)
281+
(reanimated/animate height new-height)
282+
(reanimated/set-shared-value saved-height
283+
new-height))))
284+
[input-content-height
285+
focused?
286+
edit])))

‎src/status_im2/contexts/chat/composer/gesture.cljs

+6-2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
(when (and expanding? (not max-opacity?))
2525
(reanimated/set-shared-value opacity (Math/abs progress))))))
2626

27+
;;TODO add to effect
2728
(defn maximize
2829
[{:keys [maximized?]}
2930
{:keys [height saved-height background-y opacity]}
@@ -35,6 +36,7 @@
3536
(reset! maximized? true)
3637
(rf/dispatch [:chat.ui/set-input-maximized true]))
3738

39+
;;TODO add to effect
3840
(defn minimize
3941
[{:keys [input-ref emoji-kb-extra-height saved-emoji-kb-extra-height]}
4042
{:keys [maximized?]}]
@@ -79,6 +81,7 @@
7981
(do ; else, will start gesture
8082
(reanimated/set-shared-value background-y 0)
8183
(reset! expanding? (neg? (oops/oget event "velocityY")))))))
84+
8285
(gesture/on-update
8386
(fn [event]
8487
(let [translation (oops/oget event "translationY")
@@ -99,15 +102,16 @@
99102
saved-height))
100103
(when @input-ref ; sheet at min-height, collapse keyboard
101104
(.blur ^js @input-ref)))))))
105+
102106
(gesture/on-end (fn []
103107
(let [diff (- (reanimated/get-shared-value height)
104108
(reanimated/get-shared-value saved-height))]
105109
(if @gesture-enabled?
106110
(if (>= diff 0)
107-
(if (> diff constants/drag-threshold)
111+
(if (and @expanding? (> diff constants/drag-threshold))
108112
(maximize state animations dimensions)
109113
(bounce-back animations dimensions starting-opacity))
110-
(if (> (Math/abs diff) constants/drag-threshold)
114+
(if (and (not @expanding?) (> (Math/abs diff) constants/drag-threshold))
111115
(minimize props state)
112116
(bounce-back animations dimensions starting-opacity)))
113117
(reset! gesture-enabled? true))))))))

‎src/status_im2/contexts/chat/composer/handlers.cljs

+29-14
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,28 @@
2222
show-floating-scroll-down-button?]
2323
(reset! focused? true)
2424
(rf/dispatch [:chat.ui/set-input-focused true])
25-
(reanimated/animate height (reanimated/get-shared-value last-height))
26-
(reanimated/set-shared-value saved-height (reanimated/get-shared-value last-height))
25+
26+
;; removed by @clauxx
27+
;;
28+
;; (reanimated/animate height (reanimated/get-shared-value last-height))
29+
;; (reanimated/set-shared-value saved-height (reanimated/get-shared-value last-height))
30+
;; (reanimated/animate container-opacity 1)
31+
;; (when (> (reanimated/get-shared-value last-height) (* constants/background-threshold
32+
;; max-height))
33+
;; (reanimated/animate opacity 1)
34+
;; (reanimated/set-shared-value background-y 0))
35+
;; ;;
36+
2737
(reanimated/animate container-opacity 1)
28-
(when (> (reanimated/get-shared-value last-height) (* constants/background-threshold max-height))
38+
(when (> (reanimated/get-shared-value last-height)
39+
(* constants/background-threshold max-height))
2940
(reanimated/animate opacity 1)
3041
(reanimated/set-shared-value background-y 0))
3142
(js/setTimeout #(reset! lock-selection? false) 300)
3243
(when (and (not-empty @text-value) @input-ref)
3344
(.setNativeProps ^js @input-ref
3445
(clj->js {:selection {:start @saved-cursor-position :end @saved-cursor-position}})))
35-
(kb/handle-refocus-emoji-kb-ios props animations dimensions)
46+
;;(kb/handle-refocus-emoji-kb-ios props animations dimensions)
3647
(reset! show-floating-scroll-down-button? false))
3748

3849
(defn blur
@@ -53,9 +64,10 @@
5364
link-previews?)]
5465
(reset! focused? false)
5566
(rf/dispatch [:chat.ui/set-input-focused false])
56-
(reanimated/set-shared-value last-height reopen-height)
57-
(reanimated/animate height min-height)
58-
(reanimated/set-shared-value saved-height min-height)
67+
;; removed by @clauxx
68+
;; (reanimated/set-shared-value last-height reopen-height)
69+
;; (reanimated/animate height min-height)
70+
;; (reanimated/set-shared-value saved-height min-height)
5971
(reanimated/animate opacity 0)
6072
(js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300)
6173
(when (utils/empty-input? @text-value images link-previews? reply nil)
@@ -87,20 +99,23 @@
8799
max-height)
88100
bottom-content-height (utils/calc-bottom-content-height images link-previews?)
89101
new-height (min (+ new-height bottom-content-height) max-height)]
90-
(reset! content-height content-size)
91-
(when (utils/update-height? content-size height max-height maximized?)
92-
(reanimated/animate height new-height)
93-
(reanimated/set-shared-value saved-height new-height))
94-
(when (= new-height max-height)
95-
(reset! maximized? true)
96-
(rf/dispatch [:chat.ui/set-input-maximized true]))
102+
;; removed by @clauxx
103+
;; (reset! content-height content-size)
104+
;; (when (utils/update-height? content-size height max-height maximized?)
105+
;; (println "animnating inside content change: " new-height)
106+
;; (reanimated/animate height new-height)
107+
;; (reanimated/set-shared-value saved-height new-height))
108+
;; (when (= new-height max-height)
109+
;; (reset! maximized? true)
110+
;; (rf/dispatch [:chat.ui/set-input-maximized true]))
97111
(if (utils/show-background? max-height new-height maximized?)
98112
(do
99113
(reanimated/set-shared-value background-y 0)
100114
(reanimated/animate opacity 1))
101115
(when (= (reanimated/get-shared-value opacity) 1)
102116
(reanimated/animate opacity 0)
103117
(js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300)))
118+
(println "inside content-size-change: " content-size)
104119
(rf/dispatch [:chat.ui/set-input-content-height content-size])
105120
(reset! lock-layout? (> lines 2)))))
106121

‎src/status_im2/contexts/chat/composer/keyboard.cljs

+21-10
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
[react-native.async-storage :as async-storage]
55
[react-native.core :as rn]
66
[react-native.platform :as platform]
7-
[react-native.reanimated :as reanimated]))
7+
[react-native.reanimated :as reanimated]
8+
[utils.re-frame :as rf]))
89

910
(defn get-kb-height
1011
[curr-height default-height]
@@ -22,27 +23,37 @@
2223
(defn handle-emoji-kb-ios
2324
[event
2425
{:keys [emoji-kb-extra-height]}
25-
{:keys [text-value]}
26+
{:keys [text-value maximized?]}
2627
{:keys [height saved-height]}
2728
{:keys [max-height]}]
2829
(let [start-h (oops/oget event "startCoordinates.height")
2930
end-h (oops/oget event "endCoordinates.height")
3031
diff (- end-h start-h)
3132
max-height-diff (- max-height diff)
3233
curr-text @text-value]
34+
;; TODO @clauxx compare with dispatched value, not animation
3335
(if (> (reanimated/get-shared-value height) max-height-diff)
3436
(do
35-
(reanimated/set-shared-value height (- (reanimated/get-shared-value height) diff))
36-
(reanimated/set-shared-value saved-height (- (reanimated/get-shared-value saved-height) diff))
37+
;; (rf/dispatch [:chat.ui/set-input-content-height (- (reanimated/get-shared-value height)
38+
;; diff)])
39+
;; removed by @clauxx
40+
;; (reanimated/set-shared-value height (- (reanimated/get-shared-value height) diff))
41+
;; (reanimated/set-shared-value saved-height
42+
;; (- (reanimated/get-shared-value saved-height)
43+
;; diff))
3744
(reset! text-value (str @text-value " "))
3845
(js/setTimeout #(reset! text-value curr-text) 0)
39-
(reset! emoji-kb-extra-height diff))
46+
(reset! emoji-kb-extra-height (- diff)))
4047
(when @emoji-kb-extra-height
41-
(reanimated/set-shared-value height
42-
(+ (reanimated/get-shared-value height) @emoji-kb-extra-height))
43-
(reanimated/set-shared-value saved-height
44-
(+ (reanimated/get-shared-value saved-height)
45-
@emoji-kb-extra-height))
48+
;; (rf/dispatch [:chat.ui/set-input-content-height
49+
;; (+ (reanimated/get-shared-value height) @emoji-kb-extra-height)])
50+
;; removed by @clauxx
51+
;; (reanimated/set-shared-value height
52+
;; (+ (reanimated/get-shared-value height)
53+
;; @emoji-kb-extra-height))
54+
;; (reanimated/set-shared-value saved-height
55+
;; (+ (reanimated/get-shared-value saved-height)
56+
;; @emoji-kb-extra-height))
4657
(reset! emoji-kb-extra-height nil)))))
4758

4859
(defn add-kb-listeners

‎src/status_im2/contexts/chat/composer/utils.cljs

+2
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@
159159
[]
160160
{:input-ref (atom nil)
161161
:selectable-input-ref (atom nil)
162+
:last-input-height-animation (atom nil)
162163
:keyboard-show-listener (atom nil)
163164
:keyboard-frame-listener (atom nil)
164165
:keyboard-hide-listener (atom nil)
@@ -205,6 +206,7 @@
205206
:input-with-mentions (rf/sub [:chat/input-with-mentions])
206207
:input-text (:input-text chat-input)
207208
:input-content-height (:input-content-height chat-input)
209+
:focused? (:focused? chat-input)
208210
:chat-screen-loaded? chat-screen-loaded?})))))
209211

210212
(defn init-animations

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

+1
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
(effects/edit-mentions props state subscriptions)
7575
(effects/link-previews props state animations subscriptions)
7676
(effects/use-images props state animations subscriptions)
77+
(effects/use-input-height props state animations subscriptions dimensions)
7778
[:<>
7879
(when chat-screen-loaded?
7980
[mentions/view props state animations max-height cursor-pos

0 commit comments

Comments
 (0)