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 b314146a85ba..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 @@ -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 @@ -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}]) diff --git a/src/status_im/contexts/chat/messenger/composer/utils.cljs b/src/status_im/contexts/chat/messenger/composer/utils.cljs index 8dfb388de3a2..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] @@ -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 "") @@ -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 [] @@ -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))))) diff --git a/src/status_im/contexts/chat/messenger/composer/view.cljs b/src/status_im/contexts/chat/messenger/composer/view.cljs index bc418cda0cbe..9b2c70740db7 100644 --- a/src/status_im/contexts/chat/messenger/composer/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/view.cljs @@ -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)) @@ -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 @@ -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 @@ -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] 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]