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 (#15857) 

* refactor: composer
This commit is contained in:
Omar Basem 2023-05-10 12:17:24 +04:00 committed by GitHub
parent ee4bcf9116
commit 7e1af5b80d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 58 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,7 +69,8 @@
(do ; focus and end
(when (< (oops/oget event "velocityY") constants/velocity-threshold)
(reanimated/set-shared-value container-opacity 1)
(reanimated/set-shared-value last-height max-height))
(reanimated/set-shared-value last-height max-height)
(maximize state animations dimensions))
(when @input-ref
(.focus ^js @input-ref))
(reset! gesture-enabled? false))

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

@ -37,10 +37,11 @@
[{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index
maximized?]}
{:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]}
{:keys [lines content-height max-height window-height]}
{:keys [content-height max-height window-height]}
images
reply]
(let [min-height (utils/get-min-height lines)
(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)]
(reset! focused? false)
(rf/dispatch [:chat.ui/set-input-focused false])
@ -61,13 +62,17 @@
(defn content-size-change
[event
{:keys [maximized?]}
{:keys [maximized? lock-layout?]}
{:keys [height saved-height opacity background-y]}
{:keys [content-height window-height max-height]}
keyboard-shown]
(when keyboard-shown
(let [content-size (+ (oops/oget event "nativeEvent.contentSize.height")
constants/extra-content-offset)
(let [event-size (oops/oget event "nativeEvent.contentSize.height")
content-size (+ event-size constants/extra-content-offset)
lines (utils/calc-lines event-size)
content-size (if (= lines 1)
constants/input-height
(if (= lines 2) constants/multiline-minimized-height content-size))
new-height (utils/bounded-val content-size constants/input-height max-height)]
(reset! content-height content-size)
(when (utils/update-height? content-size height max-height maximized?)
@ -83,7 +88,8 @@
(when (= (reanimated/get-shared-value opacity) 1)
(reanimated/animate opacity 0)
(js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300)))
(rf/dispatch [:chat.ui/set-input-content-height new-height]))))
(rf/dispatch [:chat.ui/set-input-content-height new-height])
(reset! lock-layout? (> lines 2)))))
(defn scroll
[event

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

@ -1,9 +1,14 @@
(ns status-im2.contexts.chat.composer.sub-view
(:require
[quo2.core :as quo]
[react-native.blur :as blur]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[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.messages.list.view :as messages.list]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn bar
[]
@ -14,6 +19,34 @@
[layout-height focused?]
[reanimated/view {:style (style/blur-container layout-height focused?)}
[blur/view (style/blur-view)]])
(defn blur-view
[layout-height focused?]
[: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?])
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:bottom height ; we use height of the input directly as bottom position
:transform [{:translate-y translate-y}]} ; translate down when maximized
{:position :absolute
:left 0
:right 0})}
[quo/floating-shell-button
(merge {:jump-to
{:on-press (fn []
(rf/dispatch [:chat/close true])
(rf/dispatch [:shell/navigate-to-jump-to]))
:label (i18n/label :t/jump-to)
:style {:align-self :center}}}
(when @messages.list/show-floating-scroll-down-button
{:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}}))
{}]]))
(defn shell-button
[insets {:keys [height]} {:keys [maximized?]}]
[:f> f-shell-button insets height maximized?])

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

@ -107,6 +107,11 @@
sub-text-lines-in-view (- sub-text-lines scrolled-lines)]
(* 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))))
(defn calc-suggestions-position
[cursor-pos max-height size
{:keys [maximized?]}

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

@ -44,7 +44,8 @@
(boolean (seq images))
reply
edit)
lines (utils/calc-lines @content-height)
lines (utils/calc-lines (- @content-height
constants/extra-content-offset))
max-lines (utils/calc-lines max-height)
animations (utils/init-animations
lines
@ -79,6 +80,7 @@
(effects/update-input-mention props state input-text)
(effects/edit-mentions props state input-with-mentions)
[:<>
[sub-view/shell-button insets animations state]
[mentions/view props state animations max-height cursor-pos]
[gesture/gesture-detector
{:gesture (drag-gesture/drag-gesture props state animations dimensions keyboard-shown)}

54
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -4,17 +4,14 @@
[react-native.background-timer :as background-timer]
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.reanimated :as reanimated]
[reagent.core :as reagent]
[status-im.ui.screens.chat.group :as chat.group]
[status-im.ui.screens.chat.message.gap :as message.gap]
[status-im2.common.not-implemented :as not-implemented]
[status-im2.constants :as constants]
[status-im2.contexts.chat.composer.utils :as utils]
[status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
[status-im2.contexts.chat.messages.content.view :as message]
[status-im2.contexts.chat.messages.list.state :as state]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[status-im2.contexts.chat.composer.constants :as composer.constants]))
@ -105,51 +102,6 @@
[content.deleted/deleted-message message-data context]
[message/message-with-reactions message-data context keyboard-shown])]))])
(defn calc-shell-position
[curr-pos input-content-height focused? reply edit images]
(let [lines (utils/calc-lines input-content-height)
base (if reply (- composer.constants/reply-container-height) 0)
base (if edit (- composer.constants/edit-container-height) base)
base (if (seq images) (- composer.constants/images-container-height) base)]
(if (not focused?)
(if (> lines 1) (+ (- composer.constants/multiline-minimized-height) base) base)
(if (> lines 12)
curr-pos
(if (> lines 1) (- (- input-content-height composer.constants/input-height base)) base)))))
(def memoized-calc-shell-position (memoize calc-shell-position))
(defn shell-button
[insets]
(let [y (reanimated/use-shared-value 0)
{:keys [input-content-height focused?]} (rf/sub [:chats/current-chat-input])
reply (rf/sub [:chats/reply-message])
edit (rf/sub [:chats/edit-message])
images (rf/sub [:chats/sending-image])
curr-pos (reanimated/get-shared-value y)
shell-position
(memoized-calc-shell-position curr-pos input-content-height focused? reply edit images)]
(rn/use-effect (fn []
(reanimated/animate y shell-position))
[shell-position])
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:transform [{:translate-y y}]}
{:bottom (+ composer.constants/composer-default-height (:bottom insets) 6)
:position :absolute
:left 0
:right 0})}
[quo/floating-shell-button
(merge {:jump-to
{:on-press (fn []
(rf/dispatch [:chat/close true])
(rf/dispatch [:shell/navigate-to-jump-to]))
:label (i18n/label :t/jump-to)
:style {:align-self :center}}}
(when @show-floating-scroll-down-button
{:scroll-to-bottom {:on-press scroll-to-bottom}}))
{}]]))
(defn messages-list-content
[{:keys [chat-id] :as chat} insets keyboard-shown]
(fn []
@ -185,12 +137,10 @@
;; TODO https://github.com/facebook/react-native/issues/30034
:inverted (when platform/ios? true)
:style (when platform/android? {:scaleY -1})
:on-layout on-messages-view-layout}]
[:f> shell-button insets]])))
:on-layout on-messages-view-layout}]])))
;; This should be replaced with keyboard hook. It has to do with flat-list probably. The keyboard-shown
;; value
;; updates in the parent component, but does not get passed to the children.
;; value updates in the parent component, but does not get passed to the children.
;; When using listeners and resetting the value on an atom it works.
(defn use-keyboard-visibility
[]