From b78426b1d378867b435ab841fa462c2d522779be Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Sun, 11 Feb 2024 17:50:57 +0530 Subject: [PATCH] test --- src/js/worklets/chat/messenger/composer.js | 2 +- .../chat/messenger/composer/style.cljs | 12 +-- .../chat/messenger/composer/utils.cljs | 55 +++++++------ .../chat/messenger/composer/view.cljs | 82 +++++++++---------- .../worklets/chat/messenger/composer.cljs | 4 +- 5 files changed, 78 insertions(+), 77 deletions(-) diff --git a/src/js/worklets/chat/messenger/composer.js b/src/js/worklets/chat/messenger/composer.js index ff857ce1a87e..3893103bb43a 100644 --- a/src/js/worklets/chat/messenger/composer.js +++ b/src/js/worklets/chat/messenger/composer.js @@ -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; diff --git a/src/status_im/contexts/chat/messenger/composer/style.cljs b/src/status_im/contexts/chat/messenger/composer/style.cljs index 67e2f2d25235..b593b08dc511 100644 --- a/src/status_im/contexts/chat/messenger/composer/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/style.cljs @@ -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 @@ -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 @@ -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 diff --git a/src/status_im/contexts/chat/messenger/composer/utils.cljs b/src/status_im/contexts/chat/messenger/composer/utils.cljs index 97413b2997a9..c4f665b14a59 100644 --- a/src/status_im/contexts/chat/messenger/composer/utils.cljs +++ b/src/status_im/contexts/chat/messenger/composer/utils.cljs @@ -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] @@ -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 [] @@ -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))))) diff --git a/src/status_im/contexts/chat/messenger/composer/view.cljs b/src/status_im/contexts/chat/messenger/composer/view.cljs index 3a02dd7a6c70..b97660c54b65 100644 --- a/src/status_im/contexts/chat/messenger/composer/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/view.cljs @@ -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 @@ -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 @@ -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] @@ -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] diff --git a/src/utils/worklets/chat/messenger/composer.cljs b/src/utils/worklets/chat/messenger/composer.cljs index 3b0eb04eb223..65157098e4e8 100644 --- a/src/utils/worklets/chat/messenger/composer.cljs +++ b/src/utils/worklets/chat/messenger/composer.cljs @@ -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]