From ed35efa75464ced3db2ef00ff144e1ed803ae347 Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Fri, 23 Feb 2024 16:10:42 +0530 Subject: [PATCH] test --- src/js/worklets/chat/messenger/composer.js | 2 +- .../chat/messenger/composer/actions/view.cljs | 18 +----- .../chat/messenger/composer/effects.cljs | 23 +------ .../chat/messenger/composer/gesture.cljs | 56 ++++------------- .../chat/messenger/composer/handlers.cljs | 22 ++----- .../chat/messenger/composer/style.cljs | 4 +- .../chat/messenger/composer/utils.cljs | 29 ++++----- .../chat/messenger/composer/view.cljs | 62 +++++++++---------- 8 files changed, 70 insertions(+), 146 deletions(-) diff --git a/src/js/worklets/chat/messenger/composer.js b/src/js/worklets/chat/messenger/composer.js index c5f859cb8091..25af319b362a 100644 --- a/src/js/worklets/chat/messenger/composer.js +++ b/src/js/worklets/chat/messenger/composer.js @@ -28,7 +28,7 @@ export function jumpToButtonPosition(scrollDownButtonOpacity, isComposerFocused) export function containerOpacity(isComposerFocused, isEmptyInput, emptyOpacity) { return useDerivedValue(function () { 'worklet'; - console.log("-----------", isEmptyInput.value, isComposerFocused.value, emptyOpacity); + console.log('-----------', isEmptyInput.value, isComposerFocused.value, emptyOpacity); return isEmptyInput.value && !isComposerFocused.value ? emptyOpacity : 1; }); } diff --git a/src/status_im/contexts/chat/messenger/composer/actions/view.cljs b/src/status_im/contexts/chat/messenger/composer/actions/view.cljs index 5a3e97cecf5a..c8cd3a5506c1 100644 --- a/src/status_im/contexts/chat/messenger/composer/actions/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/actions/view.cljs @@ -18,18 +18,12 @@ "Minimize composer, animate-out background overlay, clear input and flush state" [{:keys [sending-images? sending-links?]} {:keys [text-value focused? maximized?]} - {:keys [height saved-height last-height opacity background-y container-opacity]} + {:keys [height saved-height last-height]} window-height edit] (reanimated/animate height comp-constants/input-height) (reanimated/set-shared-value saved-height comp-constants/input-height) (reanimated/set-shared-value last-height comp-constants/input-height) - (reanimated/animate opacity 0) - (when-not @focused? - (js/setTimeout #(reanimated/animate container-opacity comp-constants/empty-opacity) 300)) - (js/setTimeout #(reanimated/set-shared-value background-y - (- window-height)) - 300) (rf/dispatch [:chat.ui/send-current-message]) (rf/dispatch [:chat.ui/set-input-maximized false]) (rf/dispatch [:chat.ui/set-input-content-height comp-constants/input-height]) @@ -84,8 +78,7 @@ (defn audio-button [{:keys [record-reset-fn input-ref]} - {:keys [record-permission? recording? gesture-enabled? focused?]} - {:keys [container-opacity]}] + {:keys [record-permission? recording? gesture-enabled? focused?]}] (let [audio (rf/sub [:chats/sending-audio])] [rn/view {:style (style/record-audio-container) @@ -97,8 +90,7 @@ :on-start-recording (fn [] (rf/dispatch [:chat.ui/set-recording true]) (reset! recording? true) - (reset! gesture-enabled? false) - (reanimated/animate container-opacity 1)) + (reset! gesture-enabled? false)) :audio-file audio :on-lock (fn [] (rf/dispatch [:chat.ui/set-recording false])) @@ -111,8 +103,6 @@ (reset! gesture-enabled? true) (rf/dispatch [:chat/send-audio file-path duration]) (if-not @focused? - (reanimated/animate container-opacity - comp-constants/empty-opacity) (js/setTimeout #(when @input-ref (.focus ^js @input-ref)) 300)) (rf/dispatch [:chat.ui/set-input-audio nil])) @@ -122,8 +112,6 @@ (reset! recording? false) (reset! gesture-enabled? true) (if-not @focused? - (reanimated/animate container-opacity - comp-constants/empty-opacity) (js/setTimeout #(when @input-ref (.focus ^js @input-ref)) 300)) diff --git a/src/status_im/contexts/chat/messenger/composer/effects.cljs b/src/status_im/contexts/chat/messenger/composer/effects.cljs index b749b464badc..db32ce8bd898 100644 --- a/src/status_im/contexts/chat/messenger/composer/effects.cljs +++ b/src/status_im/contexts/chat/messenger/composer/effects.cljs @@ -53,15 +53,6 @@ (reset! kb-default-height (utils.number/parse-int height 0)) (reset! kb-height (utils.number/parse-int height 0)))))) -(defn background-effect - [{:keys [maximized?]} - {:keys [opacity background-y]} - {:keys [max-height]} - {:keys [input-content-height]}] - (when (or @maximized? (>= input-content-height (* max-height constants/background-threshold))) - (reanimated/set-shared-value background-y 0) - (reanimated/animate opacity 1))) - (defn link-preview-effect [{:keys [text-value]}] (let [text @text-value] @@ -70,12 +61,10 @@ (defn audio-effect [{:keys [recording? gesture-enabled?]} - {:keys [container-opacity]} audio] (when (and audio (not @recording?)) (reset! recording? true) - (reset! gesture-enabled? false) - (reanimated/animate container-opacity 1))) + (reset! gesture-enabled? false))) (defn empty-effect [{:keys [empty-input?]} @@ -98,9 +87,8 @@ (maximized-effect state animations dimensions chat-input) (layout-effect state) (kb-default-height-effect state) - (background-effect state animations dimensions chat-input) (link-preview-effect state) - (audio-effect state animations audio) + (audio-effect state audio) (empty-effect state subscriptions) (kb/add-kb-listeners props state animations dimensions) #(component-will-unmount props)) @@ -160,13 +148,10 @@ (defn use-reply [{:keys [input-ref]} - {:keys [container-opacity]} {:keys [reply]} chat-screen-layout-calculations-complete?] (rn/use-effect (fn [] - (when reply - (reanimated/animate container-opacity 1)) (when (and reply @input-ref (reanimated/get-shared-value chat-screen-layout-calculations-complete?)) (js/setTimeout #(.focus ^js @input-ref) 600))) [(:message-id reply)])) @@ -203,12 +188,10 @@ (defn use-images [{:keys [sending-images? input-ref]} {:keys [text-value maximized?]} - {:keys [container-opacity height saved-height]} + {:keys [height saved-height]} {:keys [images]}] (rn/use-effect (fn [] - (when images - (reanimated/animate container-opacity 1)) (when (and (not @sending-images?) (seq images) @input-ref) (.focus ^js @input-ref)) (if-not @maximized? diff --git a/src/status_im/contexts/chat/messenger/composer/gesture.cljs b/src/status_im/contexts/chat/messenger/composer/gesture.cljs index ea8f93cae2e9..9c71f6fcee9e 100644 --- a/src/status_im/contexts/chat/messenger/composer/gesture.cljs +++ b/src/status_im/contexts/chat/messenger/composer/gesture.cljs @@ -8,30 +8,12 @@ [utils.number] [utils.re-frame :as rf])) -(defn set-opacity - [velocity opacity translation expanding? min-height max-height new-height saved-height] - (let [remaining-height (if expanding? - (- max-height (reanimated/get-shared-value saved-height)) - (- (reanimated/get-shared-value saved-height) min-height)) - progress (if (= new-height min-height) 1 (/ translation remaining-height)) - currently-expanding? (neg? velocity) - max-opacity? (and currently-expanding? (= (reanimated/get-shared-value opacity) 1)) - min-opacity? (and (not currently-expanding?) - (= (reanimated/get-shared-value opacity) 0))] - (if (>= translation 0) - (when (and (not expanding?) (not min-opacity?)) - (reanimated/set-shared-value opacity (- 1 progress))) - (when (and expanding? (not max-opacity?)) - (reanimated/set-shared-value opacity (Math/abs progress)))))) - (defn maximize [{:keys [maximized?]} - {:keys [height saved-height background-y opacity]} + {:keys [height saved-height]} {:keys [max-height]}] (reanimated/animate height max-height) (reanimated/set-shared-value saved-height max-height) - (reanimated/set-shared-value background-y 0) - (reanimated/animate opacity 1) (reset! maximized? true) (rf/dispatch [:chat.ui/set-input-maximized true])) @@ -46,37 +28,30 @@ (utils/blur-input input-ref)) (defn bounce-back - [{:keys [height saved-height opacity background-y]} - {:keys [window-height]} - starting-opacity] - (reanimated/animate height (reanimated/get-shared-value saved-height)) - (when (zero? starting-opacity) - (reanimated/animate opacity 0) - (reanimated/animate-delay background-y (- window-height) 300))) + [{:keys [height saved-height]} + {:keys [window-height]}] + (reanimated/animate height (reanimated/get-shared-value saved-height))) (defn drag-gesture [{:keys [input-ref] :as props} {:keys [gesture-enabled?] :as state} - {:keys [height saved-height last-height opacity background-y container-opacity] :as animations} + {:keys [height saved-height last-height] :as animations} {:keys [max-height lines] :as dimensions} keyboard-shown] - (let [expanding? (atom true) - starting-opacity (reanimated/get-shared-value opacity)] + (let [expanding? (atom true)] (-> (gesture/gesture-pan) (gesture/enabled @gesture-enabled?) (gesture/on-start (fn [event] (if-not keyboard-shown (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) (maximize state animations dimensions)) (when @input-ref (.focus ^js @input-ref)) (reset! gesture-enabled? false)) - (do ; else, will start gesture - (reanimated/set-shared-value background-y 0) - (reset! expanding? (neg? (oops/oget event "velocityY"))))))) + ; else, will start gesture + (reset! expanding? (neg? (oops/oget event "velocityY")))))) (gesture/on-update (fn [event] (let [translation (oops/oget event "translationY") @@ -85,16 +60,7 @@ bounded-height (utils.number/value-in-range new-height min-height max-height)] (when keyboard-shown (if (>= new-height min-height) - (do ; expand sheet - (reanimated/set-shared-value height bounded-height) - (set-opacity (oops/oget event "velocityY") - opacity - translation - @expanding? - min-height - max-height - bounded-height - saved-height)) + (reanimated/set-shared-value height bounded-height) ; sheet at min-height, collapse keyboard (utils/blur-input input-ref)))))) (gesture/on-end (fn [] @@ -104,8 +70,8 @@ (if (and @expanding? (>= diff 0)) (if (> diff constants/drag-threshold) (maximize state animations dimensions) - (bounce-back animations dimensions starting-opacity)) + (bounce-back animations dimensions)) (if (> (Math/abs diff) constants/drag-threshold) (minimize props state) - (bounce-back animations dimensions starting-opacity))) + (bounce-back animations dimensions))) (reset! gesture-enabled? true)))))))) diff --git a/src/status_im/contexts/chat/messenger/composer/handlers.cljs b/src/status_im/contexts/chat/messenger/composer/handlers.cljs index ea6a98606d5e..26b9edec78e7 100644 --- a/src/status_im/contexts/chat/messenger/composer/handlers.cljs +++ b/src/status_im/contexts/chat/messenger/composer/handlers.cljs @@ -17,7 +17,7 @@ "Animate to the `saved-height`, display background-overlay if needed, and set cursor position" [{:keys [input-ref] :as props} {:keys [text-value focused? lock-selection? saved-cursor-position composer-focused? maximized?]} - {:keys [height saved-height last-height opacity background-y container-opacity] + {:keys [height saved-height last-height] :as animations} {:keys [max-height] :as dimensions}] (reanimated/set-shared-value composer-focused? true) @@ -27,11 +27,8 @@ new-height (min max-height last-height-value)] (reanimated/animate height new-height) (reanimated/set-shared-value saved-height new-height) - (reanimated/animate container-opacity 1) (when (> last-height-value (* constants/background-threshold max-height)) - (reset! maximized? true) - (reanimated/animate opacity 1) - (reanimated/set-shared-value background-y 0))) + (reset! maximized? true))) (js/setTimeout #(reset! lock-selection? false) 300) (when (and (not-empty @text-value) @input-ref) @@ -43,7 +40,7 @@ "Save the current height, minimize the composer, animate-out the background, and save cursor position" [{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index maximized? recording? composer-focused?]} - {:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]} + {:keys [height saved-height last-height gradient-opacity]} {:keys [content-height max-height window-height]} {:keys [images link-previews? reply]}] (when-not @recording? @@ -60,10 +57,6 @@ (reanimated/set-shared-value last-height reopen-height) (reanimated/animate height min-height) (reanimated/set-shared-value saved-height min-height) - (reanimated/animate opacity 0) - (js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300) - (when (utils/empty-input? @text-value images link-previews? reply nil) - (reanimated/animate container-opacity constants/empty-opacity)) (reanimated/animate gradient-opacity 0) (reset! lock-selection? true) (reset! saved-cursor-position @cursor-position) @@ -76,7 +69,7 @@ "Save new text height, expand composer if possible, show background overlay if needed" [event {:keys [maximized? lock-layout? text-value]} - {:keys [height saved-height last-height opacity background-y]} + {:keys [height saved-height last-height]} {:keys [content-height window-height max-height]} keyboard-shown] (when keyboard-shown @@ -98,13 +91,6 @@ (when (= new-height max-height) (reset! maximized? true) (rf/dispatch [:chat.ui/set-input-maximized true])) - (if (utils/show-background? max-height new-height maximized?) - (do - (reanimated/set-shared-value background-y 0) - (reanimated/animate opacity 1)) - (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 content-size]) (reset! lock-layout? (> lines 2))))) diff --git a/src/status_im/contexts/chat/messenger/composer/style.cljs b/src/status_im/contexts/chat/messenger/composer/style.cljs index 20e3adb9b396..ad0cf2fe0fce 100644 --- a/src/status_im/contexts/chat/messenger/composer/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/style.cljs @@ -24,9 +24,9 @@ :shadow-offset {:width 0 :height (colors/theme-colors -4 -8 theme)}})) (defn sheet-container - [insets {:keys [container-opacity2 composer-elevation]} theme] + [insets {:keys [container-opacity composer-elevation]} theme] (reanimated/apply-animations-to-style - {:opacity container-opacity2 + {:opacity container-opacity :elevation composer-elevation} (merge {:border-top-left-radius border-top-radius diff --git a/src/status_im/contexts/chat/messenger/composer/utils.cljs b/src/status_im/contexts/chat/messenger/composer/utils.cljs index ad3bd5e7b56e..82e54574c371 100644 --- a/src/status_im/contexts/chat/messenger/composer/utils.cljs +++ b/src/status_im/contexts/chat/messenger/composer/utils.cljs @@ -203,13 +203,14 @@ (defn shared-values [] - (let [input-container-height (reanimated/use-shared-value 0) - composer-focused? (reanimated/use-shared-value false) - empty-input? (reanimated/use-shared-value true) - container-opacity (worklets/container-opacity composer-focused? empty-input? constants/empty-opacity)] + (let [input-container-height (reanimated/use-shared-value 0) + composer-focused? (reanimated/use-shared-value false) + empty-input? (reanimated/use-shared-value true) + container-opacity (worklets/container-opacity composer-focused? + empty-input? + constants/empty-opacity)] {:composer-focused? composer-focused? - :container-opacity2 container-opacity - :container-opacity (reanimated/use-shared-value 1) ;; TODO - remove this one + :container-opacity container-opacity :height input-container-height :blur-container-elevation (worklets/blur-container-elevation container-opacity) :composer-elevation (worklets/composer-elevation container-opacity) @@ -226,11 +227,11 @@ ;; (when (= (reanimated/get-shared-value input-container-height) 0) ;; (reanimated/set-shared-value input-container-height initial-height)) (assoc shared-values - :gradient-opacity (reanimated/use-shared-value 0) - :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) + :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 db669b01a55e..deac5168af98 100644 --- a/src/status_im/contexts/chat/messenger/composer/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/view.cljs @@ -75,7 +75,7 @@ dimensions subscriptions) (effects/use-edit props state subscriptions chat-screen-layout-calculations-complete?) - (effects/use-reply props animations subscriptions chat-screen-layout-calculations-complete?) + (effects/use-reply props subscriptions chat-screen-layout-calculations-complete?) (effects/update-input-mention props state subscriptions) (effects/link-previews props state animations subscriptions) (effects/use-images props state animations subscriptions) @@ -106,36 +106,36 @@ (.focus ^js ref))) :style (style/input-container (:height animations) max-height) :accessibility-label :message-input-container} - [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]