status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Handle hardware back on popover and bottom sheet 

Closes all popovers. Fixes #9992

Add hardware back button on bottom sheet

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-03-17 10:50:16 +03:00
parent ebf2600fdc
commit ed8b5b265b
No known key found for this signature in database
GPG Key ID: C9A094959935A952
3 changed files with 61 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/status_im/hardwallet/common.cljs
View File

@ -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)

35
src/status_im/ui/components/bottom_sheet/view.cljs
View File

@ -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)))

42
src/status_im/ui/screens/popover/views.cljs
View File

@ -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