Skip to content

Commit

Permalink
WIP: cleaning
Browse files Browse the repository at this point in the history
  • Loading branch information
@ulisesmac
ulisesmac committed Nov 7, 2023
1 parent ea15365 commit 8ae7846
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 62 deletions.
31 changes: 10 additions & 21 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,27 +1,16 @@
(ns status-im2.common.floating-button-page.floating-container.style
(:require [react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area]))
(:require [react-native.safe-area :as safe-area]))

(defn get-margin-bottom
[{:keys [blur? keyboard-will-show?]}]
(if (or blur? keyboard-will-show?)
0
(safe-area/get-bottom)))

(defn animate-margin-bottom
[margin-bottom-shared-value]
(reanimated/apply-animations-to-style
{:margin-bottom margin-bottom-shared-value}
{:margin-top :auto}))

(defn content-container [blur?]
(if blur?
{:overflow :hidden}
{:overflow :hidden
:padding-vertical 12
:padding-horizontal 20}))
(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 blur-inner-container
{:background-color :transparent
{:background-color :transparent ; required, otherwise blur-view will shrink
:padding-vertical 12
:padding-horizontal 20})
32 changes: 5 additions & 27 deletions src/status_im2/common/floating_button_page/floating_container/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,21 @@
(:require [quo.theme :as quo.theme]
[react-native.blur :as blur]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[status-im2.common.floating-button-page.floating-container.style :as style]))

(def ^:private duration 10)

(defn- blur-container [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]])

(defn- content-container
[{:keys [blur? theme]} child]
[rn/view {:style (style/content-container blur?)}
(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 f-view
" - blur? : blurred container that is activated when this component is on top of the page content.
- on-layout : will trigger to dynamically get the height of the container to screen using it.
- keyboard-will-show? : keyboard is visible on the current page."
[{:keys [on-layout keyboard-will-show? blur?]
:as props}
child]
(let [theme (quo.theme/use-theme-value)
margin-bottom (reanimated/use-shared-value (style/get-margin-bottom props))]
(rn/use-effect
#(reanimated/animate margin-bottom (style/get-margin-bottom props) duration)
[keyboard-will-show?])

[reanimated/view {:style (style/animate-margin-bottom margin-bottom)
:on-layout on-layout}
[content-container {:theme theme :blur? blur?}
child]]))

(defn view
[props children]
[:f> f-view props children])
(def view (quo.theme/with-theme view-internal))
24 changes: 10 additions & 14 deletions src/status_im2/common/floating_button_page/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,15 @@

(defn- show-background
[{:keys [window-height keyboard-height footer-container-height content-scroll-y
content-container-height header-height keyboard-did-show? keyboard-will-show?]}]
(let [keyboard-open? (if platform/ios? keyboard-will-show? keyboard-did-show?)
available-space (- window-height
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-open? overlap?)))
(and keyboard-shown? overlap?)))

(defn- set-height-on-layout
[ratom]
Expand Down Expand Up @@ -62,14 +61,14 @@
set-content-y-scroll (fn [event]
(reset! content-scroll-y
(oops/oget event "nativeEvent.contentOffset.y")))]
(let [show-background? (show-background {:window-height window-height
(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? @keyboard-did-show?
:keyboard-will-show? @keyboard-will-show?})]
:keyboard-shown? keyboard-shown?})]
[rn/view {:style style/page-container}
[rn/view {:on-layout set-header-height}
header]
Expand All @@ -79,17 +78,14 @@
: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
:keyboard-vertical-offset (if platform/ios?
(safe-area/get-top)
0)
:keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0)
:pointer-events :box-none}
[floating-container/view
{:on-layout set-footer-container-height
:keyboard-will-show? @keyboard-will-show?
:blur? show-background?}
{:on-layout set-footer-container-height
:keyboard-shown? keyboard-shown?
:blur? show-background?}
footer]]])
(finally
(doseq [listener [will-show-listener will-hide-listener did-show-listener did-hide-listener]]
Expand Down

0 comments on commit 8ae7846

Please sign in to comment.