Skip to content

Commit

Permalink
Handle hardware back on popover and bottom sheet
Browse files Browse the repository at this point in the history 
Closes all popovers. Fixes #9992

Add hardware back button on bottom sheet

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
  • Loading branch information
@Ferossgp
Ferossgp committed Mar 19, 2020
1 parent ebf2600 commit ed8b5b2
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 25 deletions.
9 changes: 5 additions & 4 deletions src/status_im/hardwallet/common.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
35 changes: 25 additions & 10 deletions src/status_im/ui/components/bottom_sheet/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]))

Expand Down Expand Up @@ -116,32 +118,45 @@
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
(:top safe-area)
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)))
Expand Down
42 changes: 31 additions & 11 deletions src/status_im/ui/screens/popover/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -35,15 +37,37 @@
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 _]]
(when @clear-timeout (js/clearTimeout @clear-timeout))
(cond
@update?
(do (reset! update? false)
(show-panel-anim bottom-anim-value alpha-value))
(on-show))

(and @current-popover popover)
(do (reset! update? true)
Expand All @@ -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
Expand All @@ -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
Expand Down

0 comments on commit ed8b5b2

Please sign in to comment.