status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-13 04:24:40 +00:00
Code Issues Projects Releases Wiki Activity

Message input issues (#14571)

Browse Source
This commit is contained in:
Ibrahem Khalil 2022-12-22 22:38:55 +02:00 committed by GitHub
parent 9937914594
commit 1af6d925d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 78 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -198,8 +198,7 @@
children (fn [] children (fn []
(if mentions-enabled? (if mentions-enabled?
(map-indexed (map-indexed
(fn [index [item text]] (fn [index [_ text]]
[index [item]]
^{:key (str index "_" type "_" text)} ^{:key (str index "_" type "_" text)}
[rn/text (when (= type :mention) {:style {:color colors/primary-50}}) [rn/text (when (= type :mention) {:style {:color colors/primary-50}})
text]) text])

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

@ -6,7 +6,6 @@
[quo.react] [quo.react]
[quo.react-native :as rn :refer [navigation-const]] [quo.react-native :as rn :refer [navigation-const]]
[quo2.components.buttons.button :as quo2.button] [quo2.components.buttons.button :as quo2.button]
[re-frame.core :as re-frame]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[status-im.ui.components.permissions :as permissions] [status-im.ui.components.permissions :as permissions]
@ -19,19 +18,29 @@
[status-im.ui2.screens.chat.photo-selector.view :as photo-selector] [status-im.ui2.screens.chat.photo-selector.view :as photo-selector]
[status-im.utils.handlers :refer [<sub]] [status-im.utils.handlers :refer [<sub]]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[utils.re-frame :as rf])) [utils.re-frame :as rf]
[status-im2.contexts.chat.messages.list.view :refer [scroll-to-bottom]]
[status-im.utils.platform :as platform]))
(defn calculate-y (defn calculate-y
[context min-y max-y added-value chat-id] [context min-y max-y added-value chat-id set-bg-opacity]
(let [input-text (:input-text (get (<sub [:chat/inputs]) chat-id)) (let [input-text (:input-text (get (<sub [:chat/inputs]) chat-id))
num-lines (count (string/split input-text "\n"))] num-lines (count (string/split input-text "\n"))]
(if (<= 5 num-lines)
(do (when-not (:minimized-from-handlebar? @context)
(swap! context assoc :state :max)
(set-bg-opacity 1))
max-y)
(when (:minimized-from-handlebar? @context)
(swap! context assoc :state :min :minimized-from-handlebar? false)
(set-bg-opacity 0)
min-y))
(if (= (:state @context) :max) (if (= (:state @context) :max)
(do (swap! context assoc :state :max) max-y) (do
(if (< (:y @context) max-y) (set-bg-opacity 1)
(+ (:y @context) added-value) max-y)
(if (<= 5 num-lines) (when (< (:y @context) max-y)
(do (swap! context assoc :state :max) max-y) (+ (:y @context) added-value)))))
(do (swap! context assoc :state :min) min-y))))))
(defn calculate-y-with-mentions (defn calculate-y-with-mentions
[y max-y max-height chat-id suggestions reply] [y max-y max-height chat-id suggestions reply]
@ -47,24 +56,20 @@
mentions-height)] mentions-height)]
(when (or (< y max-y) should-translate?) mentions-translate-value))) (when (or (< y max-y) should-translate?) mentions-translate-value)))
(defn get-y-value (defn get-y-value [context min-y max-y added-value max-height chat-id suggestions reply edit images set-bg-opacity]
[context min-y max-y added-value max-height chat-id suggestions reply images] (let [y (calculate-y context min-y max-y added-value chat-id set-bg-opacity)
(let [y (calculate-y context min-y max-y added-value chat-id)
y (+ y (when (seq images) 80))
y-with-mentions (calculate-y-with-mentions y max-y max-height chat-id suggestions reply)] y-with-mentions (calculate-y-with-mentions y max-y max-height chat-id suggestions reply)]
(+ y (when (seq suggestions) y-with-mentions)))) (+ y (when (seq suggestions) y-with-mentions) (when (seq images) 80) (when edit 38))))
(defn- clean-and-minimize-composer (defn- clean-and-minimize-composer
([context chat-id refs min-y] ([context chat-id refs min-y]
(clean-and-minimize-composer context chat-id refs min-y false)) (clean-and-minimize-composer context chat-id refs min-y false))
([context chat-id refs min-y edit?] ([context chat-id refs min-y edit?]
(input/clear-input chat-id refs) (input/clear-input chat-id refs)
(swap! context assoc (swap! context assoc :y (if edit?
:y (- min-y 38)
(if edit? min-y))
(- min-y 38) (swap! context assoc :clear true :state :min)))
min-y))
(swap! context assoc :clear true)))
(defn get-bottom-sheet-gesture (defn get-bottom-sheet-gesture
[context translate-y text-input-ref keyboard-shown min-y max-y shared-height max-height set-bg-opacity] [context translate-y text-input-ref keyboard-shown min-y max-y shared-height max-height set-bg-opacity]
@ -87,20 +92,23 @@
(when keyboard-shown (when keyboard-shown
(if (< (:dy @context) 0) (if (< (:dy @context) 0)
(do (do
(swap! context assoc :minimized-from-handlebar? false)
(swap! context assoc :state :max) (swap! context assoc :state :max)
(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))
(set-bg-opacity 1)) (set-bg-opacity 1))
(do (do
(swap! context assoc :minimized-from-handlebar? true)
(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))
(set-bg-opacity 0) (set-bg-opacity 0)
(re-frame/dispatch [:dismiss-keyboard])))))))) (rf/dispatch [:dismiss-keyboard]))))))))
(defn get-input-content-change (defn get-input-content-change [context translate-y shared-height max-height set-bg-opacity keyboard-shown min-y max-y blank-composer? initial-value]
[context translate-y shared-height max-height set-bg-opacity keyboard-shown min-y max-y]
(fn [evt] (fn [evt]
(when-not (or blank-composer? (some? initial-value))
(swap! context assoc :clear false))
(if (:clear @context) (if (:clear @context)
(do (do
(swap! context dissoc :clear) (swap! context dissoc :clear)
@ -110,7 +118,8 @@
(reanimated/set-shared-value shared-height (reanimated/with-timing min-y)) (reanimated/set-shared-value shared-height (reanimated/with-timing min-y))
(set-bg-opacity 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") 40) 40))] (let [offset-value (if platform/ios? 22 40)
new-y (+ min-y (- (max (oget evt "nativeEvent" "contentSize" "height") offset-value) offset-value))]
(if (< new-y max-y) (if (< new-y max-y)
(do (do
(if (> (- max-y new-y) 120) (if (> (- max-y new-y) 120)
@ -131,24 +140,25 @@
(do (do
(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 (if keyboard-shown
(set-bg-opacity 1) (do (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))))
(set-bg-opacity 0)))))))))
(defn composer (defn composer
[chat-id] [chat-id]
[safe-area/consumer [safe-area/consumer
(fn [insets] (fn [insets]
(let [min-y 112 (let [min-y 112
context (atom {:y min-y ;current y value context (atom {:y min-y ;current y value
:min-y min-y ;minimum y value :min-y min-y ;minimum y value
:dy 0 ;used for gesture :dy 0 ;used for gesture
:pdy 0 ;used for gesture :pdy 0 ;used for gesture
:state :min ;:min, :custom-chat-available, :state :min ;:min, :custom-chat-available, :custom-chat-unavailable, :max
;:custom-chat-unavailable, :max :clear false
:clear false}) :minimized-from-handlebar? false})
keyboard-was-shown? (atom false) keyboard-was-shown? (atom false)
text-input-ref (quo.react/create-ref) text-input-ref (quo.react/create-ref)
send-ref (quo.react/create-ref) send-ref (quo.react/create-ref)
@ -184,6 +194,13 @@
; of input box ; of input box
; needed when reply ; needed when reply
min-y (+ min-y (when (or edit reply) 38)) min-y (+ min-y (when (or edit reply) 38))
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)))
y (get-y-value y (get-y-value
context context
min-y min-y
@ -193,18 +210,16 @@
chat-id chat-id
suggestions suggestions
reply reply
images) edit
images
set-bg-opacity)
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)
clean-and-minimize-composer-fn clean-and-minimize-composer-fn
#(clean-and-minimize-composer context chat-id refs min-y %) #(clean-and-minimize-composer context chat-id refs min-y %)
bg-bottom (reanimated/use-shared-value (- blank-composer? (string/blank? (get @input/input-texts
window-height)) chat-id))
set-bg-opacity initial-value (or (get @input/input-texts chat-id) nil)
(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 input-content-change (get-input-content-change
context context
translate-y translate-y
@ -213,9 +228,9 @@
set-bg-opacity set-bg-opacity
keyboard-shown keyboard-shown
min-y min-y
max-y) max-y
blank-composer? (string/blank? (get @input/input-texts blank-composer?
chat-id)) initial-value)
bottom-sheet-gesture (get-bottom-sheet-gesture bottom-sheet-gesture (get-bottom-sheet-gesture
context context
translate-y translate-y
@ -225,13 +240,13 @@
max-y max-y
shared-height shared-height
max-height max-height
set-bg-opacity) set-bg-opacity)]
initial-value (or (get @input/input-texts chat-id) nil)]
(quo.react/effect! (quo.react/effect!
#(do #(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)
(when (and blank-composer? (not (seq images))) (set-bg-opacity 0))
(when (and blank-composer? (not (seq images)) (not edit))
(clean-and-minimize-composer-fn false)) (clean-and-minimize-composer-fn false))
(when (seq images) (when (seq images)
(input/show-send refs)) (input/show-send refs))
@ -272,7 +287,7 @@
{:on-press (fn [] {:on-press (fn []
(permissions/request-permissions (permissions/request-permissions
{:permissions [:read-external-storage :write-external-storage] {:permissions [:read-external-storage :write-external-storage]
:on-allowed #(re-frame/dispatch :on-allowed #(rf/dispatch
[:bottom-sheet/show-sheet [:bottom-sheet/show-sheet
{:content (fn [] {:content (fn []
(photo-selector/photo-selector chat-id))}]) (photo-selector/photo-selector chat-id))}])
@ -292,17 +307,16 @@
:size 32} :i/reaction] :size 32} :i/reaction]
[rn/view {:flex 1}] [rn/view {:flex 1}]
;;SEND button ;;SEND button
[rn/view [rn/view {:ref send-ref
{:ref send-ref :style (when (seq images)
:style (when (seq images) {:width 0
{:width 0 :right -100})}
:right -100})} [quo2.button/button {:icon true
[quo2.button/button :size 32
{:icon true :accessibility-label :send-message-button
:size 32 :on-press #(do (clean-and-minimize-composer-fn false)
:accessibility-label :send-message-button (scroll-to-bottom)
:on-press #(do (clean-and-minimize-composer-fn false) (rf/dispatch [:chat.ui/send-current-message]))}
(re-frame/dispatch [:chat.ui/send-current-message]))}
:i/arrow-up]]]) :i/arrow-up]]])
;black background ;black background
[reanimated/view [reanimated/view