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]]) :i/arrow-up]])
(defn send-button (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) (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])) [:f> f-send-button state animations window-height images? btn-opacity z-index]))
(defn audio-button (defn audio-button
@ -176,7 +176,7 @@
:i/format]) :i/format])
(defn view (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 style/actions-container}
[rn/view [rn/view
{:style {:flex-direction :row {:style {:flex-direction :row
@ -185,6 +185,6 @@
[image-button props animations insets] [image-button props animations insets]
[reaction-button] [reaction-button]
[format-button]] [format-button]]
[:f> send-button state animations window-height images?] [:f> send-button state animations window-height images]
(when (and (not edit?) (not images?)) (when (and (not edit) (not images))
[audio-button props state animations])]) [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)) (.remove ^js @keyboard-frame-listener))
(defn initialize (defn initialize
[props state animations {:keys [max-height] :as dimensions} chat-input images? reply? [props state animations {:keys [max-height] :as dimensions} {:keys [chat-input images reply audio]}]
audio]
(rn/use-effect (rn/use-effect
(fn [] (fn []
(maximized-effect state animations dimensions chat-input) (maximized-effect state animations dimensions chat-input)
@ -100,9 +99,9 @@
(layout-effect state) (layout-effect state)
(kb-default-height-effect state) (kb-default-height-effect state)
(background-effect state animations dimensions chat-input) (background-effect state animations dimensions chat-input)
(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) (kb/add-kb-listeners props state animations dimensions)
#(component-will-unmount props)) #(component-will-unmount props))
[max-height])) [max-height]))
@ -110,7 +109,7 @@
(defn edit (defn edit
[{:keys [input-ref]} [{:keys [input-ref]}
{:keys [text-value saved-cursor-position]} {:keys [text-value saved-cursor-position]}
edit] {:keys [edit]}]
(rn/use-effect (rn/use-effect
(fn [] (fn []
(let [edit-text (get-in edit [:content :text])] (let [edit-text (get-in edit [:content :text])]
@ -124,7 +123,7 @@
(defn reply (defn reply
[{:keys [input-ref]} [{:keys [input-ref]}
{:keys [container-opacity]} {:keys [container-opacity]}
reply] {:keys [reply]}]
(rn/use-effect (rn/use-effect
(fn [] (fn []
(when reply (when reply
@ -134,7 +133,7 @@
[(:message-id reply)])) [(:message-id reply)]))
(defn edit-mentions (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 [] (rn/use-effect (fn []
(let [input-text (reduce (fn [acc item] (let [input-text (reduce (fn [acc item]
(str acc (second item))) (str acc (second item)))
@ -153,7 +152,7 @@
(defn update-input-mention (defn update-input-mention
[{:keys [input-ref]} [{:keys [input-ref]}
{:keys [text-value]} {:keys [text-value]}
input-text] {:keys [input-text]}]
(rn/use-effect (rn/use-effect
(fn [] (fn []
(when (and input-text (not= @text-value input-text)) (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?]} maximized?]}
{:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]} {:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]}
{:keys [content-height max-height window-height]} {:keys [content-height max-height window-height]}
images {:keys [images reply]}]
reply]
(let [lines (utils/calc-lines (- @content-height constants/extra-content-offset)) (let [lines (utils/calc-lines (- @content-height constants/extra-content-offset))
min-height (utils/get-min-height lines) min-height (utils/get-min-height lines)
reopen-height (utils/calc-reopen-height text-value min-height content-height saved-height)] 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]) user])
(defn- f-view (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]) (let [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 @(:kb-height state)
: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 (:height (rn/get-window))
:reply (rf/sub [:chats/reply-message]) :reply reply
:edit (rf/sub [:chats/edit-message])} :edit edit
:images images}
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 []
@ -60,6 +61,6 @@
:accessibility-label :mentions-list}]])) :accessibility-label :mentions-list}]]))
(defn view (defn view
[props state animations max-height cursor-pos] [props state animations subs max-height cursor-pos]
(let [suggestions-atom (reagent/atom {})] (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.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.reanimated :as reanimated] [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.style :as style]
[status-im2.contexts.chat.composer.utils :as utils] [status-im2.contexts.chat.composer.utils :as utils]
[status-im2.contexts.chat.messages.list.view :as messages.list] [status-im2.contexts.chat.messages.list.view :as messages.list]
@ -25,10 +26,16 @@
[:f> f-blur-view layout-height focused?]) [:f> f-blur-view layout-height focused?])
(defn- f-shell-button (defn- f-shell-button
[insets height maximized?] [{:keys [maximized?]} {:keys [height]} {:keys [images reply edit]}]
(let [translate-y (reanimated/use-shared-value (utils/calc-shell-neg-y insets maximized?))] (let [insets (safe-area/get-insets)
(rn/use-effect #(reanimated/animate translate-y (utils/calc-shell-neg-y insets maximized?)) extra-height (utils/calc-extra-content-height images reply edit)
[@maximized?]) 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 [reanimated/view
{:style (reanimated/apply-animations-to-style {:style (reanimated/apply-animations-to-style
{:bottom height ; we use height of the input directly as bottom position {:bottom height ; we use height of the input directly as bottom position
@ -48,5 +55,5 @@
{}]])) {}]]))
(defn shell-button (defn shell-button
[insets {:keys [height]} {:keys [maximized?]}] [state animations subs]
[:f> f-shell-button insets height maximized?]) [: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))] (let [lines (Math/round (/ height constants/line-height))]
(if platform/ios? lines (dec lines)))) (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 (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))) (let [margin-top (if platform/ios? (:top insets) (+ 10 (:top insets)))
max-height (- window-height max-height (- window-height
margin-top margin-top
kb-height kb-height
constants/bar-container-height constants/bar-container-height
constants/actions-container-height) constants/actions-container-height)
max-height (if images? (- max-height constants/images-container-height) max-height) max-height (- max-height (calc-extra-content-height images reply edit))]
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))
(defn empty-input? (defn empty-input?
@ -108,22 +113,23 @@
(* sub-text-lines-in-view constants/line-height))) (* sub-text-lines-in-view constants/line-height)))
(defn calc-shell-neg-y (defn calc-shell-neg-y
[insets maximized?] [insets maximized? extra-height]
(let [neg-y (if @maximized? -50 0)] (let [padding 6
(- (+ constants/bar-container-height constants/actions-container-height (:bottom insets) 6 neg-y)))) 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 (defn calc-suggestions-position
[cursor-pos max-height size [cursor-pos max-height size
{:keys [maximized?]} {: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) (let [base (+ constants/composer-default-height (:bottom insets) 8)
base (+ base (- curr-height constants/input-height)) base (+ base (- curr-height constants/input-height))
base (if edit base (+ base (calc-extra-content-height images reply edit))
(+ base constants/edit-container-height)
base)
base (if reply
(+ base constants/reply-container-height)
base)
view-height (- window-height keyboard-height (:top insets)) view-height (- window-height keyboard-height (:top insets))
container-height (bounded-val container-height (bounded-val
(* (/ constants/mentions-max-height 4) size) (* (/ constants/mentions-max-height 4) size)
@ -170,8 +176,21 @@
:recording? (reagent/atom false) :recording? (reagent/atom false)
:first-level? (reagent/atom true) :first-level? (reagent/atom true)
:menu-items (reagent/atom selection/first-level-menu-items)}) :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 (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) (let [initial-height (if (> lines 1)
constants/multiline-minimized-height constants/multiline-minimized-height
constants/input-height)] constants/input-height)]

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

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

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

@ -72,5 +72,6 @@
[:<> [:<>
(map-indexed (map-indexed
(fn [index item] (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))]))) (:album message))])))

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

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