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

Composer polishing (#15875) 

* composer polishing
This commit is contained in:
Omar Basem 2023-05-11 15:35:42 +04:00 committed by GitHub
parent 159ad02e7a
commit 87247af86b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 103 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/status_im2/contexts/chat/composer/actions/view.cljs
View File

@ -58,9 +58,9 @@
:i/arrow-up]])
(defn send-button
[state animations window-height images?]
[{:keys [text-value] :as state} animations window-height images?]
(let [btn-opacity (reanimated/use-shared-value 0)
z-index (reagent/atom 0)]
z-index (reagent/atom (if (and (empty? @text-value) (not images?)) 0 1))]
[:f> f-send-button state animations window-height images? btn-opacity z-index]))
(defn audio-button
@ -176,7 +176,7 @@
:i/format])
(defn view
[props state animations window-height insets edit? images?]
[props state animations window-height insets {:keys [edit images]}]
[rn/view {:style style/actions-container}
[rn/view
{:style {:flex-direction :row
@ -185,6 +185,6 @@
[image-button props animations insets]
[reaction-button]
[format-button]]
[:f> send-button state animations window-height images?]
(when (and (not edit?) (not images?))
[:f> send-button state animations window-height images]
(when (and (not edit) (not images))
[audio-button props state animations])])

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

@ -91,8 +91,7 @@
(.remove ^js @keyboard-frame-listener))
(defn initialize
[props state animations {:keys [max-height] :as dimensions} chat-input images? reply?
audio]
[props state animations {:keys [max-height] :as dimensions} {:keys [chat-input images reply audio]}]
(rn/use-effect
(fn []
(maximized-effect state animations dimensions chat-input)
@ -100,9 +99,9 @@
(layout-effect state)
(kb-default-height-effect state)
(background-effect state animations dimensions chat-input)
(images-effect props animations images?)
(images-effect props animations images)
(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)
#(component-will-unmount props))
[max-height]))
@ -110,7 +109,7 @@
(defn edit
[{:keys [input-ref]}
{:keys [text-value saved-cursor-position]}
edit]
{:keys [edit]}]
(rn/use-effect
(fn []
(let [edit-text (get-in edit [:content :text])]
@ -124,7 +123,7 @@
(defn reply
[{:keys [input-ref]}
{:keys [container-opacity]}
reply]
{:keys [reply]}]
(rn/use-effect
(fn []
(when reply
@ -134,7 +133,7 @@
[(:message-id reply)]))
(defn edit-mentions
[{:keys [input-ref]} {:keys [text-value cursor-position]} input-with-mentions]
[{:keys [input-ref]} {:keys [text-value cursor-position]} {:keys [input-with-mentions]}]
(rn/use-effect (fn []
(let [input-text (reduce (fn [acc item]
(str acc (second item)))
@ -153,7 +152,7 @@
(defn update-input-mention
[{:keys [input-ref]}
{:keys [text-value]}
input-text]
{:keys [input-text]}]
(rn/use-effect
(fn []
(when (and input-text (not= @text-value input-text))

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

@ -38,8 +38,7 @@
maximized?]}
{:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]}
{:keys [content-height max-height window-height]}
images
reply]
{:keys [images reply]}]
(let [lines (utils/calc-lines (- @content-height constants/extra-content-offset))
min-height (utils/get-min-height lines)
reopen-height (utils/calc-reopen-height text-value min-height content-height saved-height)]

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

@ -30,16 +30,17 @@
user])
(defn- f-view
[suggestions-atom props state animations max-height cursor-pos]
[suggestions-atom props state animations {:keys [reply edit images]} max-height cursor-pos]
(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])}
:window-height (:height (rn/get-window))
:reply reply
:edit edit
:images images}
mentions-pos (utils/calc-suggestions-position cursor-pos max-height size state data)]
(rn/use-effect
(fn []
@ -60,6 +61,6 @@
:accessibility-label :mentions-list}]]))
(defn view
[props state animations max-height cursor-pos]
[props state animations subs max-height cursor-pos]
(let [suggestions-atom (reagent/atom {})]
[:f> f-view suggestions-atom props state animations max-height cursor-pos]))
[:f> f-view suggestions-atom props state animations subs max-height cursor-pos]))

19
src/status_im2/contexts/chat/composer/sub_view.cljs
View File

@ -4,6 +4,7 @@
[react-native.blur :as blur]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area]
[status-im2.contexts.chat.composer.style :as style]
[status-im2.contexts.chat.composer.utils :as utils]
[status-im2.contexts.chat.messages.list.view :as messages.list]
@ -25,10 +26,16 @@
[:f> f-blur-view layout-height focused?])
(defn- f-shell-button
[insets height maximized?]
(let [translate-y (reanimated/use-shared-value (utils/calc-shell-neg-y insets maximized?))]
(rn/use-effect #(reanimated/animate translate-y (utils/calc-shell-neg-y insets maximized?))
[@maximized?])
[{:keys [maximized?]} {:keys [height]} {:keys [images reply edit]}]
(let [insets (safe-area/get-insets)
extra-height (utils/calc-extra-content-height images reply edit)
translate-y (reanimated/use-shared-value
(utils/calc-shell-neg-y insets maximized? extra-height))]
(rn/use-effect (fn []
(let [extra-height (utils/calc-extra-content-height images reply edit)]
(reanimated/animate translate-y
(utils/calc-shell-neg-y insets maximized? extra-height))))
[@maximized? images reply edit])
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:bottom height ; we use height of the input directly as bottom position
@ -48,5 +55,5 @@
{}]]))
(defn shell-button
[insets {:keys [height]} {:keys [maximized?]}]
[:f> f-shell-button insets height maximized?])
[state animations subs]
[:f> f-shell-button state animations subs])

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

@ -65,17 +65,22 @@
(let [lines (Math/round (/ height constants/line-height))]
(if platform/ios? lines (dec lines))))
(defn calc-extra-content-height
[images? reply? edit?]
(let [height (if images? constants/images-container-height 0)
height (if reply? (+ height constants/reply-container-height) height)
height (if edit? (+ height constants/edit-container-height) height)]
height))
(defn calc-max-height
[window-height kb-height insets images? reply? edit?]
[{:keys [images reply edit]} window-height kb-height insets]
(let [margin-top (if platform/ios? (:top insets) (+ 10 (:top insets)))
max-height (- window-height
margin-top
kb-height
constants/bar-container-height
constants/actions-container-height)
max-height (if images? (- max-height constants/images-container-height) max-height)
max-height (if reply? (- max-height constants/reply-container-height) max-height)
max-height (if edit? (- max-height constants/edit-container-height) max-height)]
max-height (- max-height (calc-extra-content-height images reply edit))]
max-height))
(defn empty-input?
@ -108,22 +113,23 @@
(* sub-text-lines-in-view constants/line-height)))
(defn calc-shell-neg-y
[insets maximized?]
(let [neg-y (if @maximized? -50 0)]
(- (+ constants/bar-container-height constants/actions-container-height (:bottom insets) 6 neg-y))))
[insets maximized? extra-height]
(let [padding 6
neg-y (if @maximized? -50 0)]
(- (+ constants/bar-container-height
constants/actions-container-height
(:bottom insets)
padding
extra-height
neg-y))))
(defn calc-suggestions-position
[cursor-pos max-height size
{:keys [maximized?]}
{:keys [insets curr-height window-height keyboard-height edit reply]}]
{:keys [insets curr-height window-height keyboard-height images reply edit]}]
(let [base (+ constants/composer-default-height (:bottom insets) 8)
base (+ base (- curr-height constants/input-height))
base (if edit
(+ base constants/edit-container-height)
base)
base (if reply
(+ base constants/reply-container-height)
base)
base (+ base (calc-extra-content-height images reply edit))
view-height (- window-height keyboard-height (:top insets))
container-height (bounded-val
(* (/ constants/mentions-max-height 4) size)
@ -170,8 +176,21 @@
:recording? (reagent/atom false)
:first-level? (reagent/atom true)
:menu-items (reagent/atom selection/first-level-menu-items)})
(defn init-subs
[]
(let [chat-input (rf/sub [:chats/current-chat-input])]
{:images (seq (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])
:input-text (:input-text chat-input)
:input-content-height (:input-content-height chat-input)}))
(defn init-animations
[lines input-text images reply audio content-height max-height opacity background-y]
[{:keys [input-text images reply audio]}
lines content-height max-height opacity background-y]
(let [initial-height (if (> lines 1)
constants/multiline-minimized-height
constants/input-height)]

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

@ -7,7 +7,6 @@
[react-native.reanimated :as reanimated]
[reagent.core :as reagent]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[status-im2.contexts.chat.composer.style :as style]
[status-im2.contexts.chat.composer.images.view :as images]
[status-im2.contexts.chat.composer.reply.view :as reply]
@ -25,31 +24,20 @@
(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])
{:keys [input-text input-content-height]
:as chat-input} (rf/sub [:chats/current-chat-input])
content-height (reagent/atom (or input-content-height
(let [subs (utils/init-subs)
content-height (reagent/atom (or (:input-content-height subs)
constants/input-height))
{:keys [keyboard-shown]} (hooks/use-keyboard)
max-height (utils/calc-max-height window-height
max-height (utils/calc-max-height subs
window-height
@(:kb-height state)
insets
(boolean (seq images))
reply
edit)
insets)
lines (utils/calc-lines (- @content-height
constants/extra-content-offset))
max-lines (utils/calc-lines max-height)
animations (utils/init-animations
subs
lines
input-text
images
reply
audio
content-height
max-height
opacity
@ -67,17 +55,14 @@
state
animations
dimensions
chat-input
(boolean (seq images))
reply
audio)
(effects/edit props state edit)
(effects/reply props animations reply)
(effects/update-input-mention props state input-text)
(effects/edit-mentions props state input-with-mentions)
subs)
(effects/edit props state subs)
(effects/reply props animations subs)
(effects/update-input-mention props state subs)
(effects/edit-mentions props state subs)
[:<>
[sub-view/shell-button insets animations state]
[mentions/view props state animations max-height cursor-pos]
[sub-view/shell-button state animations subs]
[mentions/view props state animations subs max-height cursor-pos]
[gesture/gesture-detector
{:gesture (drag-gesture/drag-gesture props state animations dimensions keyboard-shown)}
[reanimated/view
@ -99,12 +84,12 @@
{:ref #(reset! (:input-ref props) %)
:default-value @(:text-value state)
:on-focus #(handler/focus props state animations dimensions)
:on-blur #(handler/blur state animations dimensions images reply)
:on-blur #(handler/blur state animations dimensions subs)
:on-content-size-change #(handler/content-size-change %
state
animations
dimensions
(or keyboard-shown edit))
(or keyboard-shown (:edit subs)))
:on-scroll #(handler/scroll % props state animations dimensions)
:on-change-text #(handler/change-text % props state)
:on-selection-change #(handler/selection-change % props state)
@ -119,8 +104,7 @@
:accessibility-label :chat-message-input}]]
[gradients/view props state animations show-bottom-gradient?]]
[images/images-list]
[actions/view props state animations window-height insets edit
(boolean (seq images))]]]]))
[actions/view props state animations window-height insets subs]]]]))
(defn composer
[insets]

3
src/status_im2/contexts/chat/messages/content/album/view.cljs
View File

@ -72,5 +72,6 @@
[:<>
(map-indexed
(fn [index item]
[image/image-message index item context #(on-long-press message context)])
[:<> {:key (:message-id item)}
[image/image-message index item context #(on-long-press message context)]])
(:album message))])))

8
src/status_im2/contexts/chat/messages/content/image/view.cljs
View File

@ -16,12 +16,10 @@
(defn image-message
[index {:keys [content image-width image-height message-id] :as message} context on-long-press]
(let [insets (safe-area/get-insets)
dimensions (calculate-dimensions (or image-width 1000) (or image-height 1000))]
(fn []
(let [shared-element-id (rf/sub [:shared-element-id])]
dimensions (calculate-dimensions (or image-width 1000) (or image-height 1000))
shared-element-id (rf/sub [:shared-element-id])]
[rn/touchable-opacity
{:active-opacity 1
:key message-id
:style {:margin-top (when (pos? index) 10)}
:on-long-press on-long-press
:on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox
@ -34,4 +32,4 @@
[fast-image/fast-image
{:source {:uri (:image content)}
:style (merge dimensions {:border-radius 12})
:native-ID (when (= shared-element-id message-id) :shared-element)}]]))))
:native-ID (when (= shared-element-id message-id) :shared-element)}]]))