status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-25 14:57:05 +00:00
Code Issues Projects Releases Wiki Activity

Bug/composer background fix (#14502)

Browse Source 
* [#14385] Chat view freezes if open/close chat multiple times (iOS)
This commit is contained in:
flexsurfer 2022-12-07 17:36:26 +01:00 committed by GitHub
parent 2f1c236333
commit 5ca46fe805
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/status_im/ui2/screens/chat/composer/style.cljs
View File

@ -59,8 +59,7 @@
:bottom (- 2 (:bottom insets))}) :bottom (- 2 (:bottom insets))})
(defn bottom-sheet-background [window-height] (defn bottom-sheet-background [window-height]
{:pointer-events :none {:position :absolute
:position :absolute
:left 0 :left 0
:right 0 :right 0
:bottom 0 :bottom 0

33
src/status_im/ui2/screens/chat/composer/view.cljs
View File

@ -47,7 +47,7 @@
(let [y (calculate-y context keyboard-shown min-y max-y added-value)] (let [y (calculate-y context keyboard-shown min-y max-y added-value)]
y (+ y (when (seq suggestions) (calculate-y-with-mentions y max-y max-height chat-id suggestions reply))))) y (+ y (when (seq suggestions) (calculate-y-with-mentions y max-y max-height chat-id suggestions reply)))))
(defn get-bottom-sheet-gesture [context translate-y text-input-ref keyboard-shown min-y max-y shared-height max-height bg-opacity] (defn get-bottom-sheet-gesture [context translate-y text-input-ref keyboard-shown min-y max-y shared-height max-height set-bg-opacity]
(-> (gesture/gesture-pan) (-> (gesture/gesture-pan)
(gesture/on-start (gesture/on-start
(fn [_] (fn [_]
@ -71,15 +71,15 @@
(input/input-focus text-input-ref) (input/input-focus text-input-ref)
(reanimated/set-shared-value translate-y (reanimated/with-timing (- max-y))) (reanimated/set-shared-value translate-y (reanimated/with-timing (- max-y)))
(reanimated/set-shared-value shared-height (reanimated/with-timing max-height)) (reanimated/set-shared-value shared-height (reanimated/with-timing max-height))
(reanimated/set-shared-value bg-opacity (reanimated/with-timing 1))) (set-bg-opacity 1))
(do (do
(swap! context assoc :state :min) (swap! context assoc :state :min)
(reanimated/set-shared-value translate-y (reanimated/with-timing (- min-y))) (reanimated/set-shared-value translate-y (reanimated/with-timing (- min-y)))
(reanimated/set-shared-value shared-height (reanimated/with-timing min-y)) (reanimated/set-shared-value shared-height (reanimated/with-timing min-y))
(reanimated/set-shared-value bg-opacity (reanimated/with-timing 0)) (set-bg-opacity 0)
(re-frame/dispatch [:dismiss-keyboard])))))))) (re-frame/dispatch [:dismiss-keyboard]))))))))
(defn get-input-content-change [context translate-y shared-height max-height bg-opacity keyboard-shown min-y max-y] (defn get-input-content-change [context translate-y shared-height max-height set-bg-opacity keyboard-shown min-y max-y]
(fn [evt] (fn [evt]
(if (:clear @context) (if (:clear @context)
(do (do
@ -88,7 +88,7 @@
(swap! context assoc :y min-y) (swap! context assoc :y min-y)
(reanimated/set-shared-value translate-y (reanimated/with-timing (- min-y))) (reanimated/set-shared-value translate-y (reanimated/with-timing (- min-y)))
(reanimated/set-shared-value shared-height (reanimated/with-timing min-y)) (reanimated/set-shared-value shared-height (reanimated/with-timing min-y))
(reanimated/set-shared-value bg-opacity (reanimated/with-timing 0))) (set-bg-opacity 0))
(when (not= (:state @context) :max) (when (not= (:state @context) :max)
(let [new-y (+ min-y (- (max (oget evt "nativeEvent" "contentSize" "height") 22) 22))] (let [new-y (+ min-y (- (max (oget evt "nativeEvent" "contentSize" "height") 22) 22))]
(if (< new-y max-y) (if (< new-y max-y)
@ -96,9 +96,9 @@
(if (> (- max-y new-y) 120) (if (> (- max-y new-y) 120)
(do (do
(swap! context assoc :state :custom-chat-available) (swap! context assoc :state :custom-chat-available)
(reanimated/set-shared-value bg-opacity (reanimated/with-timing 0))) (set-bg-opacity 0))
(do (do
(reanimated/set-shared-value bg-opacity (reanimated/with-timing 1)) (set-bg-opacity 1)
(swap! context assoc :state :custom-chat-unavailable))) (swap! context assoc :state :custom-chat-unavailable)))
(swap! context assoc :y new-y) (swap! context assoc :y new-y)
(when keyboard-shown (when keyboard-shown
@ -112,7 +112,7 @@
(swap! context assoc :state :max) (swap! context assoc :state :max)
(swap! context assoc :y max-y) (swap! context assoc :y max-y)
(when keyboard-shown (when keyboard-shown
(reanimated/set-shared-value bg-opacity (reanimated/with-timing 1)) (set-bg-opacity 1)
(reanimated/set-shared-value (reanimated/set-shared-value
translate-y translate-y
(reanimated/with-timing (- max-y))))))))))) (reanimated/with-timing (- max-y)))))))))))
@ -148,25 +148,29 @@
translate-y (reanimated/use-shared-value 0) translate-y (reanimated/use-shared-value 0)
shared-height (reanimated/use-shared-value min-y) shared-height (reanimated/use-shared-value min-y)
bg-opacity (reanimated/use-shared-value 0) bg-opacity (reanimated/use-shared-value 0)
bg-bottom (reanimated/use-shared-value (- window-height))
set-bg-opacity (fn [value]
(reanimated/set-shared-value bg-bottom (if (= value 1) 0 (- window-height)))
(reanimated/set-shared-value bg-opacity (reanimated/with-timing value)))
input-content-change (get-input-content-change context translate-y shared-height max-height input-content-change (get-input-content-change context translate-y shared-height max-height
bg-opacity keyboard-shown min-y max-y) set-bg-opacity keyboard-shown min-y max-y)
bottom-sheet-gesture (get-bottom-sheet-gesture context translate-y (:text-input-ref refs) keyboard-shown bottom-sheet-gesture (get-bottom-sheet-gesture context translate-y (:text-input-ref refs) keyboard-shown
min-y max-y shared-height max-height bg-opacity)] min-y max-y shared-height max-height set-bg-opacity)]
(quo.react/effect! #(do (quo.react/effect! #(do
(when (and @keyboard-was-shown (not keyboard-shown)) (when (and @keyboard-was-shown (not keyboard-shown))
(swap! context assoc :state :min)) (swap! context assoc :state :min))
(reset! keyboard-was-shown keyboard-shown) (reset! keyboard-was-shown keyboard-shown)
(if (#{:max :custom-chat-unavailable} (:state @context)) (if (#{:max :custom-chat-unavailable} (:state @context))
(reanimated/set-shared-value bg-opacity (reanimated/with-timing 1)) (set-bg-opacity 1)
(reanimated/set-shared-value bg-opacity (reanimated/with-timing 0))) (set-bg-opacity 0))
(reanimated/set-shared-value translate-y (reanimated/with-timing (- y))) (reanimated/set-shared-value translate-y (reanimated/with-timing (- y)))
(reanimated/set-shared-value shared-height (reanimated/with-timing (min y max-height))))) (reanimated/set-shared-value shared-height (reanimated/with-timing (min y max-height)))))
(quo.react/effect! #(when (and (not edit) (= (:state @context) :max)) (quo.react/effect! #(when (and (not edit) (= (:state @context) :max))
(swap! context assoc :state :min) (swap! context assoc :state :min)
(reanimated/set-shared-value translate-y (reanimated/with-timing (- min-y))) (reanimated/set-shared-value translate-y (reanimated/with-timing (- min-y)))
(reanimated/set-shared-value shared-height (reanimated/with-timing min-y)) (reanimated/set-shared-value shared-height (reanimated/with-timing min-y))
(reanimated/set-shared-value bg-opacity (reanimated/with-timing 0)) (set-bg-opacity 0)
(re-frame/dispatch [:dismiss-keyboard])) edit) (re-frame/dispatch [:dismiss-keyboard])) edit)
[reanimated/view {:style (reanimated/apply-animations-to-style [reanimated/view {:style (reanimated/apply-animations-to-style
{:height shared-height} {:height shared-height}
@ -211,6 +215,7 @@
:i/arrow-up]]]) :i/arrow-up]]])
;black background ;black background
[reanimated/view {:style (reanimated/apply-animations-to-style [reanimated/view {:style (reanimated/apply-animations-to-style
{:opacity bg-opacity} {:opacity bg-opacity
:transform [{:translateY bg-bottom}]}
(styles/bottom-sheet-background window-height))}] (styles/bottom-sheet-background window-height))}]
[mentions/autocomplete-mentions suggestions]]))])))]) [mentions/autocomplete-mentions suggestions]]))])))])