Skip to content

Commit

Permalink
WIP: cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@ulisesmac
ulisesmac committed Oct 31, 2023
1 parent 3b21704 commit f3c8413
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 138 deletions.
48 changes: 34 additions & 14 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,38 @@
(ns status-im2.common.floating-button-page.floating-container.style
(:require [react-native.platform :as platform]))
(:require [react-native.platform :as platform]
[react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area]))

(def container
{:width "100%"
:margin-top :auto
:align-self :flex-end})
(defn container
[blur?]
(cond-> {:width "100%"
:margin-top :auto
:align-self :flex-end
:padding-horizontal 20
:padding-vertical 12}
blur? (assoc :overflow :hidden)
(and blur? platform/android?) (assoc :margin-left 20)))

(def view-container
(assoc container
:padding-left 20
:padding-right 20
:padding-top 12
:padding-bottom 12))
(defn blur-inner-container
[theme]
(cond-> {#_#_:background-color
(colors/theme-colors colors/white-70-blur
colors/neutral-80-opa-1-blur
theme)}
platform/ios? (assoc :width "100%"
:padding-horizontal 20
:padding-vertical 12)))

(def blur-container
(merge container
(when platform/android? {:margin-left 20})))
(defn get-margin-bottom
[{:keys [show-background? keyboard-will-show?]}]
(cond
platform/android? 0
keyboard-will-show? (safe-area/get-top)
(and show-background? keyboard-will-show?) (safe-area/get-bottom)
:else (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}))
83 changes: 28 additions & 55 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 @@ -3,71 +3,44 @@
[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)])

"
- 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))))
[{:keys [theme] :as props} children]
[rn/view props
[blur/view
{:blur-amount 12
:blur-radius 25
:blur-type (quo.theme/theme-value :light :dark theme)
:style (style/blur-inner-container theme)
;; TODO: check bg color on iOS
:background-color (colors/theme-colors colors/white-70-blur
colors/neutral-80-opa-1-blur
theme)}
children]])

(defn f-view
[{:keys [on-layout show-background? keyboard-will-show?]}
"- 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-will-show? : keyboard is visible on the current pag 1112e."
[{:keys [on-layout show-background? keyboard-will-show?] :as props}
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})}
(let [theme (quo.theme/use-theme-value)
container-view (if show-background? blur-container rn/view)
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)}
[container-view
{:on-layout on-layout
:theme theme
:style
(merge inline-container-style)}
{:style (style/container show-background?)
:theme theme
:on-layout on-layout}
children]]))

(defn view
Expand Down
132 changes: 63 additions & 69 deletions src/status_im2/common/floating_button_page/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
[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?]
[{: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
Expand All @@ -20,8 +20,8 @@
(and keyboard-did-show? (< available-space content-height))))

(defn- show-background-ios
[{:keys [window-height keyboard-height floating-container-height
content-scroll-y content-container-height header-height]} keyboard-did-show?]
[{: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
Expand All @@ -32,87 +32,81 @@
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?]
(defn- show-background
[props]
(if platform/android?
(show-background-android props keyboard-did-show?)
(show-background-ios props keyboard-did-show?)))
(show-background-android props)
(show-background-ios props)))

(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
:content-container-height @content-container-height
:header-height @header-height}
@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))
set-header-height (set-height-on-layout header-height)
set-content-container-height (set-height-on-layout content-container-height)
set-floating-container-height (set-height-on-layout floating-container-height)
set-content-y-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
:content-container-height @content-container-height
:header-height @header-height
:keyboard-did-show? @keyboard-did-show?})]
[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
:scroll-event-throttle 64
:content-container-style {:flexGrow 1}}
[rn/view
{:on-layout content-container-height-on-layout}
{:on-scroll set-content-y-scroll
:scroll-event-throttle 64
:content-container-style {:flex-grow 1}
:keyboard-should-persist-taps true}
[rn/view {:on-layout set-content-container-height}
page-content]]
[rn/keyboard-avoiding-view
{:style style/keyboard-avoiding-view
: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-floating-container-height}
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")))))

0 comments on commit f3c8413

Please sign in to comment.