diff --git a/src/status_im2/contexts/chat/composer/actions/view.cljs b/src/status_im2/contexts/chat/composer/actions/view.cljs index 10614140b2..a196001368 100644 --- a/src/status_im2/contexts/chat/composer/actions/view.cljs +++ b/src/status_im2/contexts/chat/composer/actions/view.cljs @@ -16,6 +16,7 @@ [utils.re-frame :as rf])) (defn send-message + "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]} @@ -47,6 +48,7 @@ (let [{:keys [text-value]} state customization-color (rf/sub [:profile/customization-color])] (rn/use-effect (fn [] + ;; Handle send button opacity animation and z-index when input content changes (if (or (seq @text-value) images?) (when (or (not= @z-index 1) (not= (reanimated/get-shared-value btn-opacity) 1)) (reset! z-index 1) diff --git a/src/status_im2/contexts/chat/composer/handlers.cljs b/src/status_im2/contexts/chat/composer/handlers.cljs index dd58dd4d5f..361897695f 100644 --- a/src/status_im2/contexts/chat/composer/handlers.cljs +++ b/src/status_im2/contexts/chat/composer/handlers.cljs @@ -14,6 +14,7 @@ [utils.re-frame :as rf])) (defn focus + "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]} {:keys [height saved-height last-height opacity background-y container-opacity] @@ -36,6 +37,7 @@ (reset! show-floating-scroll-down-button? false)) (defn blur + "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?]} {:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]} @@ -67,6 +69,7 @@ (rf/dispatch [:chat.ui/set-input-maximized false]))))) (defn content-size-change + "Save new text height, expand composer if possible, show background overlay if needed" [event {:keys [maximized? lock-layout? text-value]} {:keys [height saved-height opacity background-y]} @@ -101,6 +104,7 @@ (reset! lock-layout? (> lines 2))))) (defn scroll + "Hide or show top gradient while scroll" [event {:keys [scroll-y]} {:keys [gradient-z-index focused?]} @@ -116,12 +120,10 @@ (js/setTimeout #(reset! gradient-z-index 0) 300)))) (defn change-text + "Update `text-value`, update cursor selection, find links, find mentions" [text {:keys [input-ref record-reset-fn]} {:keys [text-value cursor-position recording?]}] - (debounce/debounce-and-dispatch [:link-preview/unfurl-urls text] - constants/unfurl-debounce-ms) - (reset! text-value text) (reagent/next-tick #(when @input-ref (.setNativeProps ^js @input-ref @@ -131,11 +133,14 @@ (@record-reset-fn) (reset! recording? false)) (rf/dispatch [:chat.ui/set-chat-input-text text]) + (debounce/debounce-and-dispatch [:link-preview/unfurl-urls text] + constants/unfurl-debounce-ms) (if (string/ends-with? text "@") (rf/dispatch [:mention/on-change-text text]) (debounce/debounce-and-dispatch [:mention/on-change-text text] 300))) (defn selection-change + "A method that handles our custom selector for `B I U`" [event {:keys [input-ref selection-event selection-manager]} {:keys [lock-selection? cursor-position first-level? menu-items]}] diff --git a/src/status_im2/contexts/chat/composer/keyboard.cljs b/src/status_im2/contexts/chat/composer/keyboard.cljs index a7c25086d1..7446bd4c59 100644 --- a/src/status_im2/contexts/chat/composer/keyboard.cljs +++ b/src/status_im2/contexts/chat/composer/keyboard.cljs @@ -20,6 +20,7 @@ (async-storage/set-item! :kb-default-height (str height))))) (defn handle-emoji-kb-ios + "Opening emoji KB on iOS while maximized will cause a flicker up and down. This method handles that." [event {:keys [emoji-kb-extra-height]} {:keys [text-value]} diff --git a/src/status_im2/contexts/chat/composer/utils.cljs b/src/status_im2/contexts/chat/composer/utils.cljs index 5cc2adcf58..6e5090cd79 100644 --- a/src/status_im2/contexts/chat/composer/utils.cljs +++ b/src/status_im2/contexts/chat/composer/utils.cljs @@ -144,7 +144,7 @@ (+ base bottom-content-height)) (+ constants/actions-container-height (:bottom insets) (- curr-height cursor-pos) 18))))) -(defn init-props +(defn init-non-reactive-state [] {:input-ref (atom nil) :selectable-input-ref (atom nil) @@ -160,7 +160,7 @@ :selection-event (atom nil) :selection-manager (rn/selectable-text-input-manager)}) -(defn init-state +(defn init-reactive-state [] {:text-value (reagent/atom "") :cursor-position (reagent/atom 0) diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index d3c6c8bce0..9058053e34 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/src/status_im2/contexts/chat/composer/view.cljs @@ -36,15 +36,19 @@ theme]} props state] (let [{:keys [chat-screen-loaded?] :as subscriptions} (utils/init-subs) - content-height (reagent/atom (or (:input-content-height + content-height (reagent/atom (or (:input-content-height ; Actual text height subscriptions) constants/input-height)) {:keys [keyboard-shown]} (hooks/use-keyboard) - max-height (utils/calc-max-height subscriptions + max-height (utils/calc-max-height subscriptions ; Max allowed height for the + ; composer view window-height @(:kb-height state) insets) - lines (utils/calc-lines (- @content-height constants/extra-content-offset)) + lines (utils/calc-lines (- @content-height constants/extra-content-offset)) ; Current + ; lines + ; count + ;; Maximum number of lines that can be displayed when composer in maximized max-lines (utils/calc-lines max-height) animations (utils/init-animations subscriptions @@ -59,6 +63,7 @@ :lines lines :max-lines max-lines} show-bottom-gradient? (utils/show-bottom-gradient? state dimensions) + ;; Cursor position, needed to determine where to display the mentions view cursor-pos (utils/cursor-y-position-relative-to-container props state)] @@ -146,7 +151,7 @@ (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)) + background-y (reanimated/use-shared-value (- window-height)) ; Y position of background overlay blur-height (reanimated/use-shared-value (+ constants/composer-default-height (:bottom insets))) extra-params {:insets insets @@ -157,10 +162,11 @@ :opacity opacity :background-y background-y :theme theme} - props (utils/init-props) - state (utils/init-state)] + props (utils/init-non-reactive-state) + state (utils/init-reactive-state)] [rn/view (when platform/ios? {:style {:z-index 1}}) - [reanimated/view {:style (style/background opacity background-y window-height)}] + [reanimated/view {:style (style/background opacity background-y window-height)}] ; background + ; overlay [sub-view/blur-view {:layout-height blur-height :focused? (:focused? state) diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index 09d968bc03..c6b4fbae47 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/src/status_im2/contexts/wallet/home/view.cljs @@ -57,43 +57,44 @@ (defn view [] (rf/dispatch [:wallet/get-wallet-token]) - (fn [] - (let [accounts (rf/sub [:profile/wallet-accounts]) - top (safe-area/get-top) - selected-tab (reagent/atom (:id (first tabs-data))) - loading? (rf/sub [:wallet/tokens-loading?]) - balances (rf/sub [:wallet/balances]) - profile (rf/sub [:profile/profile]) - networks (rf/sub [:wallet/network-details])] - [rn/view - {:style {:margin-top top - :flex 1}} - [common.top-nav/view] - [rn/view {:style style/overview-container} - [quo/wallet-overview (temp/wallet-overview-state networks)]] - [rn/pressable - {:on-long-press #(rf/dispatch [:show-bottom-sheet {:content temp/wallet-temporary-navigation}])} - [quo/wallet-graph {:time-frame :empty}]] - [rn/flat-list - {:style style/accounts-list - :data (account-cards {:accounts accounts - :loading? loading? - :balances balances - :profile profile}) - :horizontal true - :separator [rn/view {:style {:width 12}}] - :render-fn quo/account-card}] - [quo/tabs - {:style style/tabs - :size 32 - :default-active @selected-tab - :data tabs-data - :on-change #(reset! selected-tab %)}] - (case @selected-tab - :assets [rn/flat-list - {:render-fn quo/token-value - :data temp/tokens - :key :assets-list - :content-container-style {:padding-horizontal 8}}] - :collectibles [collectibles/view] - [activity/view])]))) + (let [selected-tab (reagent/atom (:id (first tabs-data)))] + (fn [] + (let [accounts (rf/sub [:profile/wallet-accounts]) + top (safe-area/get-top) + loading? (rf/sub [:wallet/tokens-loading?]) + balances (rf/sub [:wallet/balances]) + profile (rf/sub [:profile/profile]) + networks (rf/sub [:wallet/network-details])] + [rn/view + {:style {:margin-top top + :flex 1}} + [common.top-nav/view] + [rn/view {:style style/overview-container} + [quo/wallet-overview (temp/wallet-overview-state networks)]] + [rn/pressable + {:on-long-press #(rf/dispatch [:show-bottom-sheet + {:content temp/wallet-temporary-navigation}])} + [quo/wallet-graph {:time-frame :empty}]] + [rn/flat-list + {:style style/accounts-list + :data (account-cards {:accounts accounts + :loading? loading? + :balances balances + :profile profile}) + :horizontal true + :separator [rn/view {:style {:width 12}}] + :render-fn quo/account-card}] + [quo/tabs + {:style style/tabs + :size 32 + :default-active @selected-tab + :data tabs-data + :on-change #(reset! selected-tab %)}] + (case @selected-tab + :assets [rn/flat-list + {:render-fn quo/token-value + :data temp/tokens + :key :assets-list + :content-container-style {:padding-horizontal 8}}] + :collectibles [collectibles/view] + [activity/view])]))))