diff --git a/src/status_im/hardwallet/common.cljs b/src/status_im/hardwallet/common.cljs index 7946bf89d53..b2aefcdf1af 100644 --- a/src/status_im/hardwallet/common.cljs +++ b/src/status_im/hardwallet/common.cljs @@ -188,10 +188,11 @@ cofx {:dismiss-keyboard true} (bottom-sheet/show-bottom-sheet - {:view {:show-handle? false - :backdrop-dismiss? false - :disable-drag? true - :content (keycard-sheet-content on-cancel connected?)}}) + {:view {:show-handle? false + :backdrop-dismiss? false + :disable-drag? true + :back-button-cancel false + :content (keycard-sheet-content on-cancel connected?)}}) (when on-card-read (set-on-card-read on-card-read)) (set-on-card-connected on-card-connected) diff --git a/src/status_im/ui/components/bottom_sheet/view.cljs b/src/status_im/ui/components/bottom_sheet/view.cljs index f997edbe278..32a3baacf8f 100644 --- a/src/status_im/ui/components/bottom_sheet/view.cljs +++ b/src/status_im/ui/components/bottom_sheet/view.cljs @@ -2,6 +2,8 @@ (:require [status-im.ui.components.react :as react] [status-im.ui.components.animation :as animation] [status-im.ui.components.bottom-sheet.styles :as styles] + [status-im.react-native.js-dependencies :as js-dependencies] + [status-im.utils.platform :as platform] [reagent.core :as reagent] [re-frame.core :as re-frame])) @@ -116,12 +118,14 @@ bottom-value (animation/create-value window-height) content-height (reagent/atom (* 0.4 window-height)) internal-visible (reagent/atom false) - external-visible (reagent/atom false)] + external-visible (reagent/atom false) + back-listener (reagent/atom nil)] (fn [{:keys [content on-cancel disable-drag? show-handle? show? - backdrop-dismiss? safe-area window-height] - :or {show-handle? true - backdrop-dismiss? true - on-cancel #(re-frame/dispatch [:bottom-sheet/hide])}}] + backdrop-dismiss? safe-area window-height back-button-cancel] + :or {show-handle? true + backdrop-dismiss? true + back-button-cancel true + on-cancel #(re-frame/dispatch [:bottom-sheet/hide])}}] (let [height (+ @content-height styles/border-radius) max-height (- window-height @@ -129,19 +133,30 @@ styles/margin-top) sheet-height (min max-height height) close-sheet (fn [] + (when (and platform/android? @back-listener) + (.remove @back-listener) + (reset! back-listener nil)) (on-close {:opacity-value opacity-value :bottom-value bottom-value :height height :internal-atom internal-visible - :on-cancel on-cancel}))] + :on-cancel on-cancel})) + handle-back (fn [] + (when back-button-cancel + (close-sheet)) + true)] (when-not (= @external-visible show?) (reset! external-visible show?) (cond (true? show?) - (on-open {:bottom-value bottom-value - :opacity-value opacity-value - :internal-atom internal-visible - :height height}) + (do (on-open {:bottom-value bottom-value + :opacity-value opacity-value + :internal-atom internal-visible + :height height}) + (when platform/android? + (reset! back-listener (.addEventListener js-dependencies/back-handler + "hardwareBackPress" + handle-back)))) (false? show?) (close-sheet))) diff --git a/src/status_im/ui/screens/popover/views.cljs b/src/status_im/ui/screens/popover/views.cljs index 5cb9a32c8c8..8a9e2806c1c 100644 --- a/src/status_im/ui/screens/popover/views.cljs +++ b/src/status_im/ui/screens/popover/views.cljs @@ -4,10 +4,12 @@ [reagent.core :as reagent] [status-im.ui.components.react :as react] [re-frame.core :as re-frame] + [status-im.utils.platform :as platform] [status-im.ui.screens.wallet.signing-phrase.views :as signing-phrase] [status-im.ui.screens.wallet.request.views :as request] [status-im.ui.screens.profile.user.views :as profile.user] [status-im.ui.screens.multiaccounts.recover.views :as multiaccounts.recover] + [status-im.react-native.js-dependencies :as js-dependencies] [status-im.ui.screens.biometric.views :as biometric])) (defn hide-panel-anim @@ -35,7 +37,29 @@ alpha-value (anim/create-value 0) clear-timeout (atom nil) current-popover (reagent/atom nil) - update? (reagent/atom nil)] + update? (reagent/atom nil) + request-close (fn [] + (reset! clear-timeout + (js/setTimeout + #(do (reset! current-popover nil) + (re-frame/dispatch [:hide-popover])) 200)) + (hide-panel-anim + bottom-anim-value alpha-value (- window-height)) + true) + on-show (fn [] + (show-panel-anim bottom-anim-value alpha-value) + (when platform/android? + (.removeEventListener js-dependencies/back-handler + "hardwareBackPress" + request-close) + (.addEventListener js-dependencies/back-handler + "hardwareBackPress" + request-close))) + on-hide (fn [] + (when platform/android? + (.removeEventListener js-dependencies/back-handler + "hardwareBackPress" + request-close)))] (reagent/create-class {:component-will-update (fn [_ [_ popover _]] @@ -43,7 +67,7 @@ (cond @update? (do (reset! update? false) - (show-panel-anim bottom-anim-value alpha-value)) + (on-show)) (and @current-popover popover) (do (reset! update? true) @@ -52,10 +76,12 @@ popover (do (reset! current-popover popover) - (show-panel-anim bottom-anim-value alpha-value)) + (on-show)) :else - (reset! current-popover nil))) + (do (reset! current-popover nil) + (on-hide)))) + :component-will-unmount on-hide :reagent-render (fn [] (when @current-popover @@ -71,13 +97,7 @@ :transform [{:translateY bottom-anim-value}]}} [react/touchable-highlight {:style {:flex 1 :align-items :center :justify-content :center} - :on-press (fn [] - (reset! clear-timeout - (js/setTimeout - #(do (reset! current-popover nil) - (re-frame/dispatch [:hide-popover])) 200)) - (hide-panel-anim - bottom-anim-value alpha-value (- window-height)))} + :on-press request-close} [react/view (merge {:background-color :white :border-radius 16 :margin 32