Skip to content

Commit

Permalink
bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@Parveshdhull
Parveshdhull committed Feb 23, 2024
1 parent 08f8a2a commit 0a27ae0
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 114 deletions.
2 changes: 1 addition & 1 deletion src/js/worklets/chat/messenger/composer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function blurContainerElevation(isComposerFocused) {
});
}

export function sheetElevation(isComposerFocused) {
export function composerElevation(isComposerFocused) {
return useDerivedValue(function () {
'worklet';
return isComposerFocused.value ? 10 : 0;
Expand Down
20 changes: 10 additions & 10 deletions src/status_im/contexts/chat/messenger/composer/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
:shadow-offset {:width 0 :height (colors/theme-colors -4 -8 theme)}}))

(defn sheet-container
[insets {:keys [container-opacity height]} theme elevation]
[insets {:keys [container-opacity composer-elevation height]} theme]
(reanimated/apply-animations-to-style
{:opacity container-opacity
:height height
:elevation elevation}
{:height height
:opacity container-opacity
:elevation composer-elevation}
(merge
{:border-top-left-radius border-top-radius
:border-top-right-radius border-top-radius
Expand Down Expand Up @@ -84,9 +84,9 @@
:padding-bottom (when @maximized? 0)))

(defn background-overlay
[opacity]
[{:keys [background-overlay-opacity]}]
(reanimated/apply-animations-to-style
{:opacity opacity}
{:opacity background-overlay-opacity}
{:position :absolute
:pointer-events :none
:top 0
Expand All @@ -97,13 +97,13 @@
:background-color colors/neutral-95-opa-70}))

(defn blur-container
[composer-height elevation]
[{:elevation elevation}
[composer-default-height {:keys [blur-container-elevation]}]
[{:elevation blur-container-elevation}
{:position :absolute
:height composer-height
:left 0
:right 0
:bottom 0
:left 0
:height composer-default-height
:border-top-right-radius border-top-radius
:border-top-left-radius border-top-radius
:overflow :hidden}])
Expand Down
69 changes: 38 additions & 31 deletions src/status_im/contexts/chat/messenger/composer/utils.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
[status-im.contexts.chat.messenger.composer.constants :as constants]
[status-im.contexts.chat.messenger.composer.selection :as selection]
[utils.number]
[utils.re-frame :as rf]))
[utils.re-frame :as rf]
[utils.worklets.chat.messenger.composer :as worklets]))

(defn bounded-val
[v min-v max-v]
Expand Down Expand Up @@ -170,6 +171,17 @@
:selection-event (atom nil)
:selection-manager (rn/selectable-text-input-manager)})

(defn shared-values
[composer-default-height]
(let [composer-focused? (reanimated/use-shared-value false)
composer-height (reanimated/use-shared-value composer-default-height)]
{:composer-height composer-height
:composer-focused? composer-focused?
:empty-input? (reanimated/use-shared-value false)
:blur-container-elevation (worklets/blur-container-elevation composer-focused?)
:composer-elevation (worklets/composer-elevation composer-focused?)
:background-overlay-opacity (worklets/background-overlay-opacity composer-height)}))

(defn init-reactive-state
[]
{:text-value (reagent/atom "")
Expand All @@ -186,9 +198,7 @@
:record-permission? (reagent/atom true)
:recording? (reagent/atom false)
:first-level? (reagent/atom true)
:menu-items (reagent/atom selection/first-level-menu-items)
:empty-input? (reanimated/use-shared-value false)
:composer-focused? (reanimated/use-shared-value false)})
:menu-items (reagent/atom selection/first-level-menu-items)})

(defn init-subs
[]
Expand All @@ -204,30 +214,27 @@

(defn init-animations
[{:keys [input-text images link-previews? reply audio]}
lines content-height max-height opacity background-y input-container-height]
(let [initial-height (if (> lines 1)
constants/multiline-minimized-height
constants/input-height)
bottom-content-height 0]
(when (= (reanimated/get-shared-value input-container-height) 0)
(reanimated/set-shared-value input-container-height 100))
{:gradient-opacity (reanimated/use-shared-value 0)
:container-opacity (reanimated/use-shared-value
(if (empty-input?
input-text
images
link-previews?
reply
audio)
0.7
1))
:height input-container-height
:saved-height (reanimated/use-shared-value
initial-height)
:last-height (reanimated/use-shared-value
(utils.number/value-in-range
(+ @content-height bottom-content-height)
constants/input-height
max-height))
:opacity opacity
:background-y background-y}))
lines content-height max-height shared-values]
(let [initial-height (if (> lines 1)
constants/multiline-minimized-height
constants/input-height)]
;; (when (= (reanimated/get-shared-value input-container-height) 0)
;; (reanimated/set-shared-value input-container-height 100))
(assoc shared-values
:gradient-opacity (reanimated/use-shared-value 0)
:container-opacity (reanimated/use-shared-value
(if (empty-input?
input-text
images
link-previews?
reply
audio)
0.7
1))
:saved-height (reanimated/use-shared-value
initial-height)
:last-height (reanimated/use-shared-value
(utils.number/value-in-range
@content-height
constants/input-height
max-height)))))
116 changes: 46 additions & 70 deletions src/status_im/contexts/chat/messenger/composer/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,18 @@
[status-im.contexts.chat.messenger.messages.contact-requests.bottom-drawer.view :as
contact-requests.bottom-drawer]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.worklets.chat.messenger.composer :as worklets]))
[utils.re-frame :as rf]))

(defn sheet-component
[{:keys [insets
chat-list-scroll-y
chat-screen-layout-calculations-complete?
window-height
opacity
background-y
input-container-height
theme]} props state]
theme]}
shared-values]
(let [subscriptions (utils/init-subs)
props (utils/init-non-reactive-state)
state (utils/init-reactive-state)
window-height (:height (rn/get-window))
content-height (reagent/atom (or (:input-content-height ; Actual text height
subscriptions)
constants/input-height))
Expand All @@ -58,9 +57,7 @@
lines
content-height
max-height
opacity
background-y
input-container-height)
shared-values)
dimensions {:content-height content-height
:max-height max-height
:window-height window-height
Expand All @@ -70,8 +67,7 @@
;; Cursor position, needed to determine where to display the mentions view
cursor-pos (utils/cursor-y-position-relative-to-container
props
state)
sheet-elevation (worklets/sheet-elevation (:composer-focused? state))]
state)]
(effects/did-mount props)
(effects/initialize props
state
Expand All @@ -96,79 +92,59 @@
{:gesture
(drag-gesture/drag-gesture props state animations dimensions keyboard-shown)}
[reanimated/view
{:style (style/sheet-container insets animations theme sheet-elevation)}
{:style (style/sheet-container insets animations theme)}
[sub-view/bar]
[:<>
[reply/view state (:input-ref props)]
[edit/view
{:text-value (:text-value state)
:input-ref (:input-ref props)}]]
[rn/selectable-text-input
{:ref #(reset! (:selectable-input-ref props) %)
:menu-items @(:menu-items state)
:style (style/input-view state)}
[rn/text-input
{: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 subscriptions)
:on-content-size-change #(handler/content-size-change %
state
animations
dimensions
(or keyboard-shown
(:edit subscriptions)))
:on-scroll #(handler/scroll % props state animations dimensions)
:on-change-text #(handler/change-text % props state)
:on-selection-change #(handler/selection-change % props state)
:on-selection #(selection/on-selection % props state)
:keyboard-appearance (quo.theme/theme-value :light :dark)
:max-font-size-multiplier 1
:multiline true
:placeholder (i18n/label :t/type-something)
:placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
:style (style/input-text props
state
{:max-height max-height
:theme theme})
:max-length constants/max-text-size
:accessibility-label :chat-message-input}]]
[rn/selectable-text-input
{:ref #(reset! (:selectable-input-ref props) %)
:menu-items @(:menu-items state)
:style (style/input-view state)}
[rn/text-input
{: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 subscriptions)
:on-content-size-change #(handler/content-size-change %
state
animations
dimensions
(or keyboard-shown
(:edit subscriptions)))
:on-scroll #(handler/scroll % props state animations dimensions)
:on-change-text #(handler/change-text % props state)
:on-selection-change #(handler/selection-change % props state)
:on-selection #(selection/on-selection % props state)
:keyboard-appearance (quo.theme/theme-value :light :dark)
:max-font-size-multiplier 1
:multiline true
:placeholder (i18n/label :t/type-something)
:placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
:style (style/input-text props
state
{:max-height max-height
:theme theme})
:max-length constants/max-text-size
:accessibility-label :chat-message-input}]]
[:<>
[gradients/view props state animations show-bottom-gradient?]
[link-preview/view]
[images/images-list]]
[:f> actions/view props state animations window-height subscriptions]]]]]))

(defn blur-view
[theme composer-height composer-focused?]
(let [blur-container-elevation (worklets/blur-container-elevation composer-focused?)]
[reanimated/view {:style (style/blur-container composer-height blur-container-elevation)}
[blur/view (style/blur-view theme)]]))

(defn f-composer
[props]
(let [window-height (:height (rn/get-window))
theme (quo.theme/use-theme-value)
opacity (reanimated/use-shared-value 0)
background-y (reanimated/use-shared-value (- window-height)) ; Y position of background
; overlay
composer-height (+ constants/composer-default-height
(:bottom (:insets props)))
input-container-height (reanimated/use-shared-value 0)
background-overlay-opacity (worklets/background-overlay-opacity input-container-height)
extra-params (assoc props
:window-height window-height
:opacity opacity
:background-y background-y
:input-container-height input-container-height
:theme theme)
props (utils/init-non-reactive-state)
state (utils/init-reactive-state)]
(let [theme (quo.theme/use-theme-value)
composer-default-height (+ constants/composer-default-height (:bottom (:insets props)))
shared-values (utils/shared-values composer-default-height)]
[:<>
[reanimated/view {:style (style/background-overlay background-overlay-opacity)}]
[:f> sheet-component extra-params props state]
[:f> blur-view theme composer-height (:composer-focused? state)]
]))
[reanimated/view {:style (style/background-overlay shared-values)}]
[:f> sheet-component props shared-values theme]
[reanimated/view {:style (style/blur-container composer-default-height shared-values)}
[blur/view (style/blur-view theme)]]]))

(defn composer
[props]
Expand Down
4 changes: 2 additions & 2 deletions src/utils/worklets/chat/messenger/composer.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
[composer-focused?]
(.blurContainerElevation ^js worklets composer-focused?))

(defn sheet-elevation
(defn composer-elevation
[composer-focused?]
(.sheetElevation ^js worklets composer-focused?))
(.composerElevation ^js worklets composer-focused?))

(defn background-overlay-opacity
[input-container-height]
Expand Down

0 comments on commit 0a27ae0

Please sign in to comment.