Skip to content

Commit

Permalink
Floating container
Browse files Browse the repository at this point in the history
  • Loading branch information
@ulisesmac
ulisesmac committed Nov 7, 2023
1 parent 3b21704 commit 016f4d1
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 175 deletions.
29 changes: 14 additions & 15 deletions src/status_im2/common/floating_button_page/floating_container/style.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
(ns status-im2.common.floating-button-page.floating-container.style
(:require [react-native.platform :as platform]))
(:require [react-native.safe-area :as safe-area]))

(def container
{:width "100%"
:margin-top :auto
:align-self :flex-end})
(defn content-container
[blur? keyboard-shown?]
(let [margin-bottom (if keyboard-shown? 0 (safe-area/get-bottom))]
(cond-> {:margin-top :auto
:overflow :hidden
:margin-bottom margin-bottom
:padding-vertical 12
:padding-horizontal 20}
blur? (dissoc :padding-vertical :padding-horizontal))))

(def view-container
(assoc container
:padding-left 20
:padding-right 20
:padding-top 12
:padding-bottom 12))

(def blur-container
(merge container
(when platform/android? {:margin-left 20})))
(def blur-inner-container
{:background-color :transparent ; required, otherwise blur-view will shrink
:padding-vertical 12
:padding-horizontal 20})
84 changes: 17 additions & 67 deletions src/status_im2/common/floating_button_page/floating_container/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,25 @@
(ns status-im2.common.floating-button-page.floating-container.view
(:require [quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
(:require [quo.theme :as quo.theme]
[react-native.blur :as blur]
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area]
[status-im2.common.floating-button-page.floating-container.style :as style]))

(def duration 100)

(defn blur-container-props
[theme]
{:blur-amount 12
:blur-radius 25
:blur-type (quo.theme/theme-value :light :dark theme)
:style (when platform/ios?
{:width "100%"
:padding-horizontal 20
:padding-vertical 12})
:background-color (colors/theme-colors colors/white-70-blur colors/neutral-80-opa-1-blur theme)})

(defn- blur-container
[props & children]
[rn/view
(merge props
{:width "100%"
:overflow :hidden}
(when platform/android?
{:padding-horizontal 20
:padding-vertical 12}))
(into [blur/view (blur-container-props (:theme props))] children)])
[child theme]
[blur/view
{:blur-amount 12
:blur-radius 12
:blur-type (quo.theme/theme-value :light :dark theme)}
[rn/view {:style style/blur-inner-container}
child]])

"
- on-layout : will trigger to dynamically get the height of the container to screen using it.
- show-background? : blurred container that is activated when this component is on top of the page content.
- keyboard-shown? : keyboard is visible on the current page.
"
(defn get-margin-bottom
[show-background? keyboard-will-show?]
(if platform/android?
0
(cond keyboard-will-show? (safe-area/get-top)
(and show-background? keyboard-will-show?) (safe-area/get-bottom)
:else (safe-area/get-bottom))))

(defn f-view
[{:keys [on-layout show-background? keyboard-will-show?]}
children]
(let [theme (quo.theme/use-theme-value)
container-view (if show-background? blur-container rn/view)
inline-container-style (if show-background? style/blur-container style/view-container)
margin-bottom (reanimated/use-shared-value (get-margin-bottom show-background?
keyboard-will-show?))]
(rn/use-effect #(reanimated/animate-shared-value-with-timing
margin-bottom
(get-margin-bottom show-background? keyboard-will-show?)
duration
:easing4)
[keyboard-will-show?])
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:margin-bottom margin-bottom}
{:margin-top :auto})}
[container-view
{:on-layout on-layout
:theme theme
:style
(merge inline-container-style)}
children]]))
(defn view-internal
[{:keys [theme on-layout keyboard-shown? blur?]} child]
[rn/view
{:style (style/content-container blur? keyboard-shown?)
:on-layout on-layout}
(if blur?
[blur-container child theme]
child)])

(defn view
[props children]
[:f> f-view props children])
(def view (quo.theme/with-theme view-internal))
159 changes: 67 additions & 92 deletions src/status_im2/common/floating_button_page/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,111 +8,86 @@
[status-im2.common.floating-button-page.floating-container.view :as floating-container]
[status-im2.common.floating-button-page.style :as style]))

(defn- show-background-android
[{:keys [window-height keyboard-height floating-container-height
content-scroll-y content-container-height header-height]} keyboard-did-show?]
(let [available-space (- window-height
keyboard-height
floating-container-height
header-height)
content-height (+ content-container-height
content-scroll-y)]
(and keyboard-did-show? (< available-space content-height))))
(defn- show-background
[{:keys [window-height keyboard-height footer-container-height content-scroll-y
content-container-height header-height keyboard-shown?]}]
(let [available-space (- window-height
(safe-area/get-top)
header-height
keyboard-height ; Already contains the bottom safe area value
footer-container-height)
scroll-view-height (- content-container-height content-scroll-y)
overlap? (< available-space scroll-view-height)]
(and keyboard-shown? overlap?)))

(defn- show-background-ios
[{:keys [window-height keyboard-height floating-container-height
content-scroll-y content-container-height header-height]} keyboard-did-show?]
(let [available-space (- window-height
keyboard-height
floating-container-height
(safe-area/get-top))
content-height (+ (safe-area/get-bottom)
header-height
content-scroll-y
content-container-height)]
(and keyboard-did-show? (< content-height available-space))))

(defn set-height-on-layout
(defn- set-height-on-layout
[ratom]
(fn [event]
(let [height (oops/oget event "nativeEvent.layout.height")]
(reset! ratom height))))

(defn show-background
[props keyboard-did-show?]
(if platform/android?
(show-background-android props keyboard-did-show?)
(show-background-ios props keyboard-did-show?)))

(defn view
[{:keys [header footer]}
page-content]
(reagent/with-let [window-height (:height (rn/get-window))
floating-container-height (reagent/atom 0)
header-height (reagent/atom 0)
content-container-height (reagent/atom 0)
content-scroll-y (reagent/atom 0)
keyboard-height (reagent/atom 0)
keyboard-will-show? (reagent/atom false)
keyboard-did-show? (reagent/atom false)
will-show-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillShow"
#(reset! keyboard-will-show? true))
did-show-listener (oops/ocall
rn/keyboard
"addListener"
"keyboardDidShow"
(fn [value]
(reset! keyboard-height
(oops/oget value "endCoordinates.height"))
(reset! keyboard-did-show? true)))

will-hide-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillHide"
#(reset! keyboard-will-show? false))
did-hide-listener (oops/ocall rn/keyboard
"addListener"
"keyboardDidHide"
#(reset! keyboard-did-show? false))
heider-height-on-layout (set-height-on-layout header-height)
content-container-height-on-layout (set-height-on-layout content-container-height)
floating-container-height-on-layout (set-height-on-layout floating-container-height)
content-y-on-scroll (fn [event]
(let [y (oops/oget
event
"nativeEvent.contentOffset.y")]
(reset! content-scroll-y y)))]
(let [show-background? (show-background {:window-height window-height
:floating-container-height
@floating-container-height
:keyboard-height @keyboard-height
:content-scroll-y @content-scroll-y
[{:keys [header footer]} & children]
(reagent/with-let [window-height (:height (rn/get-window))
footer-container-height (reagent/atom 0)
header-height (reagent/atom 0)
content-container-height (reagent/atom 0)
content-scroll-y (reagent/atom 0)
keyboard-height (reagent/atom 0)
keyboard-will-show? (reagent/atom false)
keyboard-did-show? (reagent/atom false)
will-show-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillShow"
#(reset! keyboard-will-show? true))
did-show-listener (oops/ocall rn/keyboard
"addListener"
"keyboardDidShow"
(fn [e]
(reset! keyboard-height
(oops/oget e "endCoordinates.height"))
(reset! keyboard-did-show? true)))
will-hide-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillHide"
#(reset! keyboard-will-show? false))
did-hide-listener (oops/ocall rn/keyboard
"addListener"
"keyboardDidHide"
#(reset! keyboard-did-show? false))
set-header-height (set-height-on-layout header-height)
set-content-container-height (set-height-on-layout content-container-height)
set-footer-container-height (set-height-on-layout footer-container-height)
set-content-y-scroll (fn [event]
(reset! content-scroll-y
(oops/oget event "nativeEvent.contentOffset.y")))]
(let [keyboard-shown? (if platform/ios? @keyboard-will-show? @keyboard-did-show?)
show-background? (show-background {:window-height window-height
:footer-container-height @footer-container-height
:keyboard-height @keyboard-height
:content-scroll-y @content-scroll-y
:content-container-height @content-container-height
:header-height @header-height}
@keyboard-did-show?)]
:header-height @header-height
:keyboard-shown? keyboard-shown?})]

[rn/view {:style style/page-container}
[rn/view
{:on-layout heider-height-on-layout}
[rn/view {:on-layout set-header-height}
header]
[rn/scroll-view
{:on-scroll content-y-on-scroll
{:on-scroll set-content-y-scroll
:scroll-event-throttle 64
:content-container-style {:flexGrow 1}}
[rn/view
{:on-layout content-container-height-on-layout}
page-content]]
:content-container-style {:flex-grow 1}}
(into [rn/view {:on-layout set-content-container-height}]
children)]
[rn/keyboard-avoiding-view
{:style style/keyboard-avoiding-view
:pointer-events :box-none}
{:style style/keyboard-avoiding-view
:keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0)
:pointer-events :box-none}
[floating-container/view
{:keyboard-will-show? @keyboard-will-show?
:show-background? show-background?
:on-layout floating-container-height-on-layout}
{:on-layout set-footer-container-height
:keyboard-shown? keyboard-shown?
:blur? show-background?}
footer]]])
(finally
(oops/ocall will-show-listener "remove")
(oops/ocall will-hide-listener "remove")
(oops/ocall did-show-listener "remove")
(oops/ocall did-hide-listener "remove"))))
(doseq [listener [will-show-listener will-hide-listener did-show-listener did-hide-listener]]
(oops/ocall listener "remove")))))
2 changes: 1 addition & 1 deletion src/status_im2/contexts/status_im_preview/common/floating_button_page/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

(defn view
[]
(let [content-height (reagent/atom 300)
(let [content-height (reagent/atom 450)
slide? (reagent/atom false)]
(fn []
[rn/view
Expand Down

0 comments on commit 016f4d1

Please sign in to comment.