WIP: content behind the keyboard
This commit is contained in:
Ulises M
@@ -5,13 +5,12 @@
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0
|
||||
:z-index 100})
|
||||
:right 0})
|
||||
|
||||
(defn keyboard-view-style
|
||||
[keyboard-shown?]
|
||||
{:border-width 1
|
||||
:border-color :blue
|
||||
:border-color :yellow
|
||||
;:padding-bottom (if-not keyboard-shown? 12 0)
|
||||
})
|
||||
|
||||
|
||||
@@ -10,12 +10,8 @@
|
||||
[status-im2.common.floating-button-page.floating-container.view :as floating-container]
|
||||
[status-im2.common.floating-button-page.style :as style]))
|
||||
|
||||
(defn show-background
|
||||
(defn show-button-background?
|
||||
[{:keys [keyboard-shown? available-space content-height] :as props}]
|
||||
(prn "show-background? "
|
||||
(< available-space content-height)
|
||||
props)
|
||||
|
||||
(when keyboard-shown?
|
||||
(< available-space content-height)))
|
||||
|
||||
@@ -30,43 +26,46 @@
|
||||
:else
|
||||
false))
|
||||
|
||||
(defonce scroll-view-ref (atom nil))
|
||||
|
||||
(defn f-view
|
||||
[{:keys [header footer blur?]}
|
||||
page-content]
|
||||
[{:keys [blur?]} header page-content footer]
|
||||
(reagent/with-let [theme (quo.theme/use-theme-value)
|
||||
window-height (:height (rn/get-window))
|
||||
|
||||
floating-container-height (reagent/atom 0)
|
||||
header-height (reagent/atom 0)
|
||||
footer-height (reagent/atom 0)
|
||||
floating-container-height (reagent/atom 0)
|
||||
content-container-height (reagent/atom 0)
|
||||
show-keyboard? (reagent/atom false)
|
||||
content-scroll-y (reagent/atom 0)
|
||||
;;
|
||||
|
||||
show-listener (oops/ocall rn/keyboard
|
||||
"addListener"
|
||||
(if platform/android?
|
||||
"keyboardDidShow"
|
||||
"keyboardWillShow")
|
||||
#(reset! show-keyboard? true))
|
||||
hide-listener (oops/ocall rn/keyboard
|
||||
"addListener"
|
||||
(if platform/android?
|
||||
"keyboardDidHide"
|
||||
"keyboardWillHide")
|
||||
#(reset! show-keyboard? false))]
|
||||
"keyboardDidShow"
|
||||
(fn [e]
|
||||
(prn e)
|
||||
(js/setTimeout
|
||||
(fn []
|
||||
(println "LAST SCROLL POSITION: " @content-scroll-y)
|
||||
(println "FINAL SHOULD BE:" (+ @content-scroll-y @footer-height))
|
||||
|
||||
(some-> @scroll-view-ref
|
||||
(.scrollTo #js {:x 0
|
||||
:y (+ @content-scroll-y @footer-height)
|
||||
:animated true})))
|
||||
(+ (oops/oget e "duration") 300))))]
|
||||
(let [{:keys [keyboard-shown
|
||||
keyboard-height]} (hooks/use-keyboard)
|
||||
show-background? (show-background
|
||||
{:keyboard-shown? keyboard-shown
|
||||
:available-space (- window-height
|
||||
keyboard-height
|
||||
@floating-container-height
|
||||
(safe-area/get-top)
|
||||
50)
|
||||
:content-height (+ @content-scroll-y
|
||||
@content-container-height
|
||||
@header-height)})]
|
||||
|
||||
show-background? (show-button-background?
|
||||
{:keyboard-shown? keyboard-shown
|
||||
:available-space (- window-height
|
||||
keyboard-height
|
||||
@floating-container-height
|
||||
(safe-area/get-top)
|
||||
50)
|
||||
:content-height (+ @content-scroll-y
|
||||
@content-container-height
|
||||
@header-height)})]
|
||||
[rn/view {:style style/page-container}
|
||||
|
||||
[rn/view
|
||||
@@ -74,38 +73,59 @@
|
||||
(let [height (oops/oget event "nativeEvent.layout.height")]
|
||||
(reset! header-height height)))}
|
||||
header]
|
||||
[rn/scroll-view
|
||||
{:on-scroll (fn [event]
|
||||
(let [y (oops/oget event "nativeEvent.contentOffset.y")]
|
||||
(reset! content-scroll-y y)))
|
||||
:scroll-event-throttle 64
|
||||
:content-container-style {:flexGrow 1}}
|
||||
[rn/view
|
||||
{:style {:border-width 1
|
||||
:border-color :red}
|
||||
:on-layout (fn [event]
|
||||
(let [height (oops/oget event "nativeEvent.layout.height")]
|
||||
(reset! content-container-height height)))}
|
||||
[rn/scroll-view {:ref #(reset! scroll-view-ref %)
|
||||
:on-scroll (fn [event]
|
||||
(let [y (oops/oget event "nativeEvent.contentOffset.y")]
|
||||
(prn y)
|
||||
(reset! content-scroll-y y)))
|
||||
:scroll-event-throttle 64
|
||||
:content-container-style {:flex-grow 1
|
||||
:padding-bottom @footer-height
|
||||
}}
|
||||
[rn/view {:style {:border-width 1
|
||||
:border-color :red}
|
||||
:on-layout (fn [event]
|
||||
(let [height (oops/oget event "nativeEvent.layout.height")]
|
||||
(reset! content-container-height height)))}
|
||||
page-content]]
|
||||
|
||||
[rn/keyboard-avoiding-view
|
||||
{:style (style/keyboard-view-style keyboard-shown)
|
||||
:pointer-events :box-none}
|
||||
[floating-container/view
|
||||
{:theme theme
|
||||
:blur? blur?
|
||||
:floating? keyboard-shown
|
||||
:show-background? show-background?
|
||||
:on-layout (fn [event]
|
||||
|
||||
[rn/view {:style (cond-> {:position :absolute
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0
|
||||
:padding-vertical 16
|
||||
:padding-horizontal 20
|
||||
:background-color (if show-background?
|
||||
;"rgba(67, 90, 183, 1)"
|
||||
"rgba(67, 90, 183, 0.4352)"
|
||||
"rgba(67, 90, 183, 0.4352)")}
|
||||
#_#_(not keyboard-shown) (assoc :position :absolute
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0))
|
||||
:on-layout (fn [event]
|
||||
(let [height (oops/oget event "nativeEvent.layout.height")]
|
||||
(prn height "height height height")
|
||||
(reset! floating-container-height height)))}
|
||||
footer
|
||||
;[ button-props button-label]
|
||||
]]])
|
||||
(reset! footer-height height)))}
|
||||
footer]
|
||||
|
||||
|
||||
#_[floating-container/view
|
||||
{:theme theme
|
||||
:blur? blur?
|
||||
:floating? keyboard-shown
|
||||
:show-background? show-background?
|
||||
:on-layout (fn [event]
|
||||
(let [height (oops/oget event "nativeEvent.layout.height")]
|
||||
(prn height "height height height")
|
||||
(reset! floating-container-height height)))}
|
||||
footer
|
||||
;[ button-props button-label]
|
||||
]
|
||||
|
||||
])
|
||||
(finally
|
||||
(oops/ocall show-listener "remove")
|
||||
(oops/ocall hide-listener "remove"))))
|
||||
(oops/ocall show-listener "remove"))))
|
||||
|
||||
(defn view
|
||||
[props header page-content button-component]
|
||||
|
||||
@@ -37,28 +37,21 @@
|
||||
:z-index 10}}]
|
||||
|
||||
[floating-button-page/view
|
||||
{:blur? false
|
||||
:header [quo/page-nav
|
||||
{:type :no-title
|
||||
:text-align :left
|
||||
:right-side []
|
||||
:background :blur
|
||||
:icon-name :i/close
|
||||
:on-press #(rf/dispatch [:navigate-back])}]
|
||||
:footer [quo/button
|
||||
{:container-style {:z-index 2}
|
||||
:customization-color (if @button-pressed? :army :blue)
|
||||
:on-press (fn []
|
||||
(prn @acc-height)
|
||||
(swap! acc-height + 20)
|
||||
(swap! button-pressed? not))} ;#(js/alert "to be implemented")
|
||||
"Save address"]
|
||||
#_#_:button-props
|
||||
{:container-style {:z-index 2}
|
||||
:customization-color :army
|
||||
:on-press #(js/alert "to be implemented")}
|
||||
;:button-label "Save address"
|
||||
}
|
||||
{:blur? false}
|
||||
#_#_:button-props
|
||||
{:container-style {:z-index 2}
|
||||
:customization-color :army
|
||||
:on-press #(js/alert "to be implemented")}
|
||||
;:button-label "Save address"
|
||||
|
||||
[quo/page-nav
|
||||
{:type :no-title
|
||||
:text-align :left
|
||||
:right-side []
|
||||
:background :blur
|
||||
:icon-name :i/close
|
||||
:on-press #(rf/dispatch [:navigate-back])}]
|
||||
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
;:height @acc-height
|
||||
@@ -99,6 +92,14 @@
|
||||
[quo/input
|
||||
{:label "label"
|
||||
:value "value"}]]
|
||||
[quo/button
|
||||
{:container-style {:z-index 2}
|
||||
:customization-color (if @button-pressed? :army :blue)
|
||||
:on-press (fn []
|
||||
(prn @acc-height)
|
||||
(swap! acc-height + 20)
|
||||
(swap! button-pressed? not))} ;#(js/alert "to be implemented")
|
||||
"Save address"]
|
||||
|
||||
]
|
||||
#_[rn/view
|
||||
|
||||
@@ -58,6 +58,7 @@
|
||||
:type :text}
|
||||
(preview/customization-color-option)])
|
||||
|
||||
|
||||
(defn view
|
||||
[]
|
||||
(let [media-server-port (rf/sub [:mediaserver/port])
|
||||
|
||||
@@ -17,18 +17,14 @@
|
||||
address (reagent/atom "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd2")]
|
||||
(fn [{:keys [theme]}]
|
||||
[floating-button-page/view
|
||||
{:header [quo/page-nav
|
||||
{:type :no-title
|
||||
:text-align :left
|
||||
:right-side []
|
||||
:background :blur
|
||||
:icon-name :i/close
|
||||
:on-press #(rf/dispatch [:dismiss-modal :wallet-save-address])}]
|
||||
:footer [quo/button
|
||||
{:container-style {:z-index 2}
|
||||
:customization-color @account-color
|
||||
:on-press #(js/alert "to be implemented")}
|
||||
"Save address"]}
|
||||
[quo/page-nav
|
||||
{:type :no-title
|
||||
:text-align :left
|
||||
:right-side []
|
||||
:background :blur
|
||||
:icon-name :i/close
|
||||
:on-press #(rf/dispatch [:dismiss-modal :wallet-save-address])}]
|
||||
|
||||
[rn/view {:style {:flex 1}}
|
||||
[quo/wallet-user-avatar
|
||||
{:container-style {:margin-bottom 12
|
||||
@@ -79,7 +75,12 @@
|
||||
{:short-name "opt"
|
||||
:network-name :optimism}]
|
||||
:address @address}])}]]
|
||||
])))
|
||||
|
||||
[quo/button
|
||||
{:container-style {:z-index 2}
|
||||
:customization-color @account-color
|
||||
:on-press #(js/alert "to be implemented")}
|
||||
"Save address"]])))
|
||||
|
||||
(defn view-internal [props] [:f> f-view props])
|
||||
|
||||
|
||||
Reference in New Issue
Block a user