Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
@Parveshdhull
Parveshdhull committed Feb 21, 2024
1 parent 2ff7eef commit b78426b
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 77 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
12 changes: 6 additions & 6 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 @@ -86,7 +86,7 @@
(defn background-overlay
[{:keys [background-overlay-opacity]}]
(reanimated/apply-animations-to-style
{:opacity opacity}
{:opacity background-overlay-opacity}
{:position :absolute
:pointer-events :none
:top 0
Expand All @@ -98,7 +98,7 @@

(defn blur-container
[composer-default-height {:keys [blur-container-elevation]}]
[{:elevation elevation}
[{:elevation blur-container-elevation}
{:position :absolute
:right 0
:bottom 0
Expand Down
55 changes: 29 additions & 26 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 @@ -172,12 +173,14 @@

(defn shared-values
[composer-default-height]
(let [composer-height (reanimated/use-shared-value 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)
:composer-focused? (reanimated/use-shared-value false)
:blur-container-elevation (worklets/blur-container-elevation composer-focused?)
:background-overlay-opacity (worklets/background-overlay-opacity sheet-container-height)}))
:composer-elevation (worklets/composer-elevation composer-focused?)
:background-overlay-opacity (worklets/background-overlay-opacity composer-height)}))

(defn init-reactive-state
[]
Expand Down Expand Up @@ -212,26 +215,26 @@
(defn init-animations
[{:keys [input-text images link-previews? reply audio]}
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))
(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))})))
: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)))))
82 changes: 40 additions & 42 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,8 +26,7 @@
[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
Expand Down Expand Up @@ -68,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 @@ -94,43 +92,43 @@
{: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]
Expand All @@ -139,13 +137,13 @@

(defn f-composer
[props]
(let [window-height (:height (rn/get-window))
theme (quo.theme/use-theme-value)
composer-default-height (+ constants/composer-default-height (:bottom (:insets props)))
shared-values (utils/shared-values composer-default-height)
extra-params (assoc props
:window-height window-height
:theme theme)]
(let [window-height (:height (rn/get-window))
theme (quo.theme/use-theme-value)
composer-default-height (+ constants/composer-default-height (:bottom (:insets props)))
shared-values (utils/shared-values composer-default-height)
extra-params (assoc props
:window-height window-height
:theme theme)]
[:<>
[reanimated/view {:style (style/background-overlay shared-values)}]
[:f> sheet-component extra-params shared-values]
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 b78426b

Please sign in to comment.