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

Fix composer max height on some Android devices (#15871) 

* fix: android keyboard height
This commit is contained in:
Omar Basem 2023-05-11 11:41:53 +04:00 committed by GitHub
parent c1f24fb1bb
commit 13a1ee7479
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/status_im2/contexts/chat/composer/effects.cljs
View File

@ -37,10 +37,12 @@
(js/setTimeout #(reset! lock-layout? true) 500))) (js/setTimeout #(reset! lock-layout? true) 500)))
(defn kb-default-height-effect (defn kb-default-height-effect
[{:keys [kb-default-height]}] [{:keys [kb-default-height kb-height]}]
(when-not @kb-default-height (when (zero? @kb-default-height)
(async-storage/get-item :kb-default-height (async-storage/get-item :kb-default-height
#(reset! kb-default-height (utils.number/parse-int % nil))))) (fn [height]
(reset! kb-default-height (utils.number/parse-int height 0))
(reset! kb-height (utils.number/parse-int height 0))))))
(defn background-effect (defn background-effect
[{:keys [maximized?]} [{:keys [maximized?]}
@ -89,7 +91,7 @@
(.remove ^js @keyboard-frame-listener)) (.remove ^js @keyboard-frame-listener))
(defn initialize (defn initialize
[props state animations {:keys [max-height] :as dimensions} chat-input keyboard-height images? reply? [props state animations {:keys [max-height] :as dimensions} chat-input images? reply?
audio] audio]
(rn/use-effect (rn/use-effect
(fn [] (fn []
@ -101,7 +103,7 @@
(images-effect props animations images?) (images-effect props animations images?)
(audio-effect state animations audio) (audio-effect state animations audio)
(empty-effect state animations images? reply? audio) (empty-effect state animations images? reply? audio)
(kb/add-kb-listeners props state animations dimensions keyboard-height) (kb/add-kb-listeners props state animations dimensions)
#(component-will-unmount props)) #(component-will-unmount props))
[max-height])) [max-height]))

2
src/status_im2/contexts/chat/composer/handlers.cljs
View File

@ -81,7 +81,7 @@
(when (= new-height max-height) (when (= new-height max-height)
(reset! maximized? true) (reset! maximized? true)
(rf/dispatch [:chat.ui/set-input-maximized true])) (rf/dispatch [:chat.ui/set-input-maximized true]))
(if (utils/show-background? saved-height max-height new-height) (if (utils/show-background? max-height new-height maximized?)
(do (do
(reanimated/set-shared-value background-y 0) (reanimated/set-shared-value background-y 0)
(reanimated/animate opacity 1)) (reanimated/animate opacity 1))

12
src/status_im2/contexts/chat/composer/keyboard.cljs
View File

@ -12,9 +12,11 @@
curr-height)) curr-height))
(defn store-kb-height (defn store-kb-height
[{:keys [kb-default-height]} keyboard-height] [event {:keys [kb-default-height kb-height]} {:keys [window-height]}]
(when (and (not @kb-default-height) (pos? keyboard-height)) (let [height (- window-height (oops/oget event "endCoordinates.screenY"))]
(async-storage/set-item! :kb-default-height (str keyboard-height)))) (reset! kb-height height)
(when (zero? @kb-default-height)
(async-storage/set-item! :kb-default-height (str height)))))
(defn handle-emoji-kb-ios (defn handle-emoji-kb-ios
[event [event
@ -44,10 +46,10 @@
(defn add-kb-listeners (defn add-kb-listeners
[{:keys [keyboard-show-listener keyboard-frame-listener keyboard-hide-listener input-ref] :as props} [{:keys [keyboard-show-listener keyboard-frame-listener keyboard-hide-listener input-ref] :as props}
state animations dimensions keyboard-height] state animations dimensions]
(reset! keyboard-show-listener (.addListener rn/keyboard (reset! keyboard-show-listener (.addListener rn/keyboard
"keyboardDidShow" "keyboardDidShow"
#(store-kb-height state keyboard-height))) #(store-kb-height % state dimensions)))
(reset! keyboard-frame-listener (.addListener (reset! keyboard-frame-listener (.addListener
rn/keyboard rn/keyboard
"keyboardWillChangeFrame" "keyboardWillChangeFrame"

20
src/status_im2/contexts/chat/composer/mentions/view.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.chat.composer.mentions.view (ns status-im2.contexts.chat.composer.mentions.view
(:require (:require
[react-native.hooks :as hooks]
[react-native.platform :as platform] [react-native.platform :as platform]
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -32,16 +31,15 @@
(defn- f-view (defn- f-view
[suggestions-atom props state animations max-height cursor-pos] [suggestions-atom props state animations max-height cursor-pos]
(let [{:keys [keyboard-height]} (hooks/use-keyboard) (let [suggestions (rf/sub [:chat/mention-suggestions])
suggestions (rf/sub [:chat/mention-suggestions]) opacity (reanimated/use-shared-value (if (seq suggestions) 1 0))
opacity (reanimated/use-shared-value (if (seq suggestions) 1 0)) size (count suggestions)
size (count suggestions) data {:keyboard-height @(:kb-height state)
data {:keyboard-height keyboard-height :insets (safe-area/get-insets)
:insets (safe-area/get-insets) :curr-height (reanimated/get-shared-value (:height animations))
:curr-height (reanimated/get-shared-value (:height animations)) :window-height (rf/sub [:dimensions/window-height])
:window-height (rf/sub [:dimensions/window-height]) :reply (rf/sub [:chats/reply-message])
:reply (rf/sub [:chats/reply-message]) :edit (rf/sub [:chats/edit-message])}
:edit (rf/sub [:chats/edit-message])}
mentions-pos (utils/calc-suggestions-position cursor-pos max-height size state data)] mentions-pos (utils/calc-suggestions-position cursor-pos max-height size state data)]
(rn/use-effect (rn/use-effect
(fn [] (fn []

7
src/status_im2/contexts/chat/composer/utils.cljs
View File

@ -50,8 +50,8 @@
(and (not-empty @text-value) (not @focused?) (> lines 2))) (and (not-empty @text-value) (not @focused?) (> lines 2)))
(defn show-background? (defn show-background?
[saved-height max-height new-height] [max-height new-height maximized?]
(or (= (reanimated/get-shared-value saved-height) max-height) (or @maximized?
(> new-height (* constants/background-threshold max-height)))) (> new-height (* constants/background-threshold max-height))))
(defn update-blur-height? (defn update-blur-height?
@ -159,7 +159,8 @@
:cursor-position (reagent/atom 0) :cursor-position (reagent/atom 0)
:saved-cursor-position (reagent/atom 0) :saved-cursor-position (reagent/atom 0)
:gradient-z-index (reagent/atom 0) :gradient-z-index (reagent/atom 0)
:kb-default-height (reagent/atom nil) :kb-default-height (reagent/atom 0)
:kb-height (reagent/atom 0)
:gesture-enabled? (reagent/atom true) :gesture-enabled? (reagent/atom true)
:lock-selection? (reagent/atom true) :lock-selection? (reagent/atom true)
:focused? (reagent/atom false) :focused? (reagent/atom false)

78
src/status_im2/contexts/chat/composer/view.cljs
View File

@ -16,7 +16,6 @@
[status-im2.contexts.chat.composer.utils :as utils] [status-im2.contexts.chat.composer.utils :as utils]
[status-im2.contexts.chat.composer.constants :as constants] [status-im2.contexts.chat.composer.constants :as constants]
[status-im2.contexts.chat.composer.actions.view :as actions] [status-im2.contexts.chat.composer.actions.view :as actions]
[status-im2.contexts.chat.composer.keyboard :as kb]
[status-im2.contexts.chat.composer.sub-view :as sub-view] [status-im2.contexts.chat.composer.sub-view :as sub-view]
[status-im2.contexts.chat.composer.effects :as effects] [status-im2.contexts.chat.composer.effects :as effects]
[status-im2.contexts.chat.composer.gesture :as drag-gesture] [status-im2.contexts.chat.composer.gesture :as drag-gesture]
@ -26,52 +25,49 @@
(defn sheet-component (defn sheet-component
[{:keys [insets window-height blur-height opacity background-y]} props state] [{:keys [insets window-height blur-height opacity background-y]} props state]
(let [images (rf/sub [:chats/sending-image]) (let [images (rf/sub [:chats/sending-image])
audio (rf/sub [:chats/sending-audio]) audio (rf/sub [:chats/sending-audio])
reply (rf/sub [:chats/reply-message]) reply (rf/sub [:chats/reply-message])
edit (rf/sub [:chats/edit-message]) edit (rf/sub [:chats/edit-message])
input-with-mentions (rf/sub [:chat/input-with-mentions]) input-with-mentions (rf/sub [:chat/input-with-mentions])
{:keys [input-text input-content-height] {:keys [input-text input-content-height]
:as chat-input} (rf/sub [:chats/current-chat-input]) :as chat-input} (rf/sub [:chats/current-chat-input])
content-height (reagent/atom (or input-content-height content-height (reagent/atom (or input-content-height
constants/input-height)) constants/input-height))
{:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard) {:keys [keyboard-shown]} (hooks/use-keyboard)
kb-height (kb/get-kb-height keyboard-height max-height (utils/calc-max-height window-height
@(:kb-default-height state)) @(:kb-height state)
max-height (utils/calc-max-height window-height insets
kb-height (boolean (seq images))
insets reply
(boolean (seq images)) edit)
reply lines (utils/calc-lines (- @content-height
edit) constants/extra-content-offset))
lines (utils/calc-lines (- @content-height max-lines (utils/calc-lines max-height)
constants/extra-content-offset)) animations (utils/init-animations
max-lines (utils/calc-lines max-height) lines
animations (utils/init-animations input-text
lines images
input-text reply
images audio
reply content-height
audio max-height
content-height opacity
max-height background-y)
opacity dimensions {:content-height content-height
background-y) :max-height max-height
dimensions {:content-height content-height :window-height window-height
:max-height max-height :lines lines
:window-height window-height :max-lines max-lines}
:lines lines show-bottom-gradient? (utils/show-bottom-gradient? state dimensions)
:max-lines max-lines} cursor-pos (utils/cursor-y-position-relative-to-container props
show-bottom-gradient? (utils/show-bottom-gradient? state dimensions) state)]
cursor-pos (utils/cursor-y-position-relative-to-container props
state)]
(effects/did-mount props) (effects/did-mount props)
(effects/initialize props (effects/initialize props
state state
animations animations
dimensions dimensions
chat-input chat-input
keyboard-height
(boolean (seq images)) (boolean (seq images))
reply reply
audio) audio)
@ -128,7 +124,7 @@
(defn composer (defn composer
[insets] [insets]
(let [window-height (rf/sub [:dimensions/window-height]) (let [window-height (:height (rn/get-window))
opacity (reanimated/use-shared-value 0) opacity (reanimated/use-shared-value 0)
background-y (reanimated/use-shared-value (- window-height)) background-y (reanimated/use-shared-value (- window-height))
blur-height (reanimated/use-shared-value (+ constants/composer-default-height blur-height (reanimated/use-shared-value (+ constants/composer-default-height