Fix composer max height on some Android devices (#15871)
* fix: android keyboard height
This commit is contained in:
Omar Basem
GitHub
parent
c1f24fb1bb
commit
13a1ee7479
|
|
@ -37,10 +37,12 @@
|
|||
(js/setTimeout #(reset! lock-layout? true) 500)))
|
||||
|
||||
(defn kb-default-height-effect
|
||||
[{:keys [kb-default-height]}]
|
||||
(when-not @kb-default-height
|
||||
[{:keys [kb-default-height kb-height]}]
|
||||
(when (zero? @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
|
||||
[{:keys [maximized?]}
|
||||
|
|
@ -89,7 +91,7 @@
|
|||
(.remove ^js @keyboard-frame-listener))
|
||||
|
||||
(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]
|
||||
(rn/use-effect
|
||||
(fn []
|
||||
|
|
@ -101,7 +103,7 @@
|
|||
(images-effect props animations images?)
|
||||
(audio-effect state animations 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))
|
||||
[max-height]))
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
(when (= new-height max-height)
|
||||
(reset! 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
|
||||
(reanimated/set-shared-value background-y 0)
|
||||
(reanimated/animate opacity 1))
|
||||
|
|
|
|||
|
|
@ -12,9 +12,11 @@
|
|||
curr-height))
|
||||
|
||||
(defn store-kb-height
|
||||
[{:keys [kb-default-height]} keyboard-height]
|
||||
(when (and (not @kb-default-height) (pos? keyboard-height))
|
||||
(async-storage/set-item! :kb-default-height (str keyboard-height))))
|
||||
[event {:keys [kb-default-height kb-height]} {:keys [window-height]}]
|
||||
(let [height (- window-height (oops/oget event "endCoordinates.screenY"))]
|
||||
(reset! kb-height height)
|
||||
(when (zero? @kb-default-height)
|
||||
(async-storage/set-item! :kb-default-height (str height)))))
|
||||
|
||||
(defn handle-emoji-kb-ios
|
||||
[event
|
||||
|
|
@ -44,10 +46,10 @@
|
|||
|
||||
(defn add-kb-listeners
|
||||
[{: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
|
||||
"keyboardDidShow"
|
||||
#(store-kb-height state keyboard-height)))
|
||||
#(store-kb-height % state dimensions)))
|
||||
(reset! keyboard-frame-listener (.addListener
|
||||
rn/keyboard
|
||||
"keyboardWillChangeFrame"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
(ns status-im2.contexts.chat.composer.mentions.view
|
||||
(:require
|
||||
[react-native.hooks :as hooks]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
|
|
@ -32,16 +31,15 @@
|
|||
|
||||
(defn- f-view
|
||||
[suggestions-atom props state animations max-height cursor-pos]
|
||||
(let [{:keys [keyboard-height]} (hooks/use-keyboard)
|
||||
suggestions (rf/sub [:chat/mention-suggestions])
|
||||
opacity (reanimated/use-shared-value (if (seq suggestions) 1 0))
|
||||
size (count suggestions)
|
||||
data {:keyboard-height keyboard-height
|
||||
:insets (safe-area/get-insets)
|
||||
:curr-height (reanimated/get-shared-value (:height animations))
|
||||
:window-height (rf/sub [:dimensions/window-height])
|
||||
:reply (rf/sub [:chats/reply-message])
|
||||
:edit (rf/sub [:chats/edit-message])}
|
||||
(let [suggestions (rf/sub [:chat/mention-suggestions])
|
||||
opacity (reanimated/use-shared-value (if (seq suggestions) 1 0))
|
||||
size (count suggestions)
|
||||
data {:keyboard-height @(:kb-height state)
|
||||
:insets (safe-area/get-insets)
|
||||
:curr-height (reanimated/get-shared-value (:height animations))
|
||||
:window-height (rf/sub [:dimensions/window-height])
|
||||
:reply (rf/sub [:chats/reply-message])
|
||||
:edit (rf/sub [:chats/edit-message])}
|
||||
mentions-pos (utils/calc-suggestions-position cursor-pos max-height size state data)]
|
||||
(rn/use-effect
|
||||
(fn []
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@
|
|||
(and (not-empty @text-value) (not @focused?) (> lines 2)))
|
||||
|
||||
(defn show-background?
|
||||
[saved-height max-height new-height]
|
||||
(or (= (reanimated/get-shared-value saved-height) max-height)
|
||||
[max-height new-height maximized?]
|
||||
(or @maximized?
|
||||
(> new-height (* constants/background-threshold max-height))))
|
||||
|
||||
(defn update-blur-height?
|
||||
|
|
@ -159,7 +159,8 @@
|
|||
:cursor-position (reagent/atom 0)
|
||||
:saved-cursor-position (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)
|
||||
:lock-selection? (reagent/atom true)
|
||||
:focused? (reagent/atom false)
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
[status-im2.contexts.chat.composer.utils :as utils]
|
||||
[status-im2.contexts.chat.composer.constants :as constants]
|
||||
[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.effects :as effects]
|
||||
[status-im2.contexts.chat.composer.gesture :as drag-gesture]
|
||||
|
|
@ -26,52 +25,49 @@
|
|||
|
||||
(defn sheet-component
|
||||
[{:keys [insets window-height blur-height opacity background-y]} props state]
|
||||
(let [images (rf/sub [:chats/sending-image])
|
||||
audio (rf/sub [:chats/sending-audio])
|
||||
reply (rf/sub [:chats/reply-message])
|
||||
edit (rf/sub [:chats/edit-message])
|
||||
input-with-mentions (rf/sub [:chat/input-with-mentions])
|
||||
(let [images (rf/sub [:chats/sending-image])
|
||||
audio (rf/sub [:chats/sending-audio])
|
||||
reply (rf/sub [:chats/reply-message])
|
||||
edit (rf/sub [:chats/edit-message])
|
||||
input-with-mentions (rf/sub [:chat/input-with-mentions])
|
||||
{:keys [input-text input-content-height]
|
||||
:as chat-input} (rf/sub [:chats/current-chat-input])
|
||||
content-height (reagent/atom (or input-content-height
|
||||
constants/input-height))
|
||||
{:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard)
|
||||
kb-height (kb/get-kb-height keyboard-height
|
||||
@(:kb-default-height state))
|
||||
max-height (utils/calc-max-height window-height
|
||||
kb-height
|
||||
insets
|
||||
(boolean (seq images))
|
||||
reply
|
||||
edit)
|
||||
lines (utils/calc-lines (- @content-height
|
||||
constants/extra-content-offset))
|
||||
max-lines (utils/calc-lines max-height)
|
||||
animations (utils/init-animations
|
||||
lines
|
||||
input-text
|
||||
images
|
||||
reply
|
||||
audio
|
||||
content-height
|
||||
max-height
|
||||
opacity
|
||||
background-y)
|
||||
dimensions {:content-height content-height
|
||||
:max-height max-height
|
||||
:window-height window-height
|
||||
:lines lines
|
||||
:max-lines max-lines}
|
||||
show-bottom-gradient? (utils/show-bottom-gradient? state dimensions)
|
||||
cursor-pos (utils/cursor-y-position-relative-to-container props
|
||||
state)]
|
||||
:as chat-input} (rf/sub [:chats/current-chat-input])
|
||||
content-height (reagent/atom (or input-content-height
|
||||
constants/input-height))
|
||||
{:keys [keyboard-shown]} (hooks/use-keyboard)
|
||||
max-height (utils/calc-max-height window-height
|
||||
@(:kb-height state)
|
||||
insets
|
||||
(boolean (seq images))
|
||||
reply
|
||||
edit)
|
||||
lines (utils/calc-lines (- @content-height
|
||||
constants/extra-content-offset))
|
||||
max-lines (utils/calc-lines max-height)
|
||||
animations (utils/init-animations
|
||||
lines
|
||||
input-text
|
||||
images
|
||||
reply
|
||||
audio
|
||||
content-height
|
||||
max-height
|
||||
opacity
|
||||
background-y)
|
||||
dimensions {:content-height content-height
|
||||
:max-height max-height
|
||||
:window-height window-height
|
||||
:lines lines
|
||||
:max-lines max-lines}
|
||||
show-bottom-gradient? (utils/show-bottom-gradient? state dimensions)
|
||||
cursor-pos (utils/cursor-y-position-relative-to-container props
|
||||
state)]
|
||||
(effects/did-mount props)
|
||||
(effects/initialize props
|
||||
state
|
||||
animations
|
||||
dimensions
|
||||
chat-input
|
||||
keyboard-height
|
||||
(boolean (seq images))
|
||||
reply
|
||||
audio)
|
||||
|
|
@ -128,7 +124,7 @@
|
|||
|
||||
(defn composer
|
||||
[insets]
|
||||
(let [window-height (rf/sub [:dimensions/window-height])
|
||||
(let [window-height (:height (rn/get-window))
|
||||
opacity (reanimated/use-shared-value 0)
|
||||
background-y (reanimated/use-shared-value (- window-height))
|
||||
blur-height (reanimated/use-shared-value (+ constants/composer-default-height
|
||||
|
|
|
|||
Loading…
Reference in New Issue