mirror of
https://github.com/status-im/status-mobile.git
synced 2025-02-12 08:37:05 +00:00
83 lines
3.3 KiB
Plaintext
83 lines
3.3 KiB
Plaintext
|
(ns quo.components.animated-header
|
||
|
|
(:require [oops.core :refer [oget]]
|
||
|
|
[quo.animated :as animated]
|
||
|
|
[quo.components.header :as header]
|
||
|
|
[quo.components.safe-area :as safe-area]
|
||
|
|
[quo.design-system.colors :as colors]
|
||
|
|
[quo.platform :as platform]
|
||
|
|
[quo.react-native :as rn]
|
||
|
|
[reagent.core :as reagent]))
|
||
|
|
|
||
|
|
(defn header-wrapper-style [{:keys [value offset]}]
|
||
|
|
(merge
|
||
|
|
{:background-color :white}
|
||
|
|
(when (and offset platform/android?)
|
||
|
|
{:elevation (animated/interpolate
|
||
|
|
value
|
||
|
|
{:inputRange [0 offset]
|
||
|
|
:outputRange [0 4]
|
||
|
|
:extrapolate (:clamp animated/extrapolate)})})
|
||
|
|
(when (and offset platform/ios?)
|
||
|
|
{:shadow-opacity (animated/interpolate
|
||
|
|
value
|
||
|
|
{:inputRange [0 offset]
|
||
|
|
:outputRange [0 1]
|
||
|
|
:extrapolate (:clamp animated/extrapolate)})
|
||
|
|
:shadow-radius 16
|
||
|
|
:z-index 2
|
||
|
|
:shadow-color (:shadow-01 @colors/theme)
|
||
|
|
:shadow-offset {:width 0 :height 4}})))
|
||
|
|
|
||
|
|
(defn header-opened-style [{:keys [value offset]}]
|
||
|
|
(merge
|
||
|
|
{:position :absolute
|
||
|
|
:top 0
|
||
|
|
:left 0
|
||
|
|
:right 0}
|
||
|
|
(when offset
|
||
|
|
{:transform [{:translateY
|
||
|
|
(animated/interpolate
|
||
|
|
value
|
||
|
|
{:inputRange [0 offset]
|
||
|
|
:outputRange [0 (- header/header-height)]
|
||
|
|
:extrapolateRight (:clamp animated/extrapolate)})}]})))
|
||
|
|
|
||
|
|
(defn header-container []
|
||
|
|
(let [y (animated/value 0)
|
||
|
|
on-scroll (animated/on-scroll {:y y})
|
||
|
|
layout (reagent/atom {})
|
||
|
|
offset (reagent/atom 0)
|
||
|
|
on-layout (fn [evt]
|
||
|
|
(reset! offset (oget evt "nativeEvent" "layout" "height")))]
|
||
|
|
(fn [{:keys [extended-header] :as props} & children]
|
||
|
|
[animated/view {:flex 1
|
||
|
|
:pointer-events :box-none}
|
||
|
|
[animated/view {:pointer-events :box-none
|
||
|
|
:style (header-wrapper-style {:value y
|
||
|
|
:offset @offset})}
|
||
|
|
[header/header (merge {:get-layout (fn [el l] (swap! layout assoc el l))}
|
||
|
|
(dissoc props :extended-header))]
|
||
|
|
[rn/view {:pointer-events :box-none}
|
||
|
|
[animated/view {:style (header-opened-style {:value y
|
||
|
|
:offset @offset})
|
||
|
|
:pointer-events :box-none
|
||
|
|
:on-layout on-layout}
|
||
|
|
[extended-header {:value y
|
||
|
|
:layout @layout
|
||
|
|
:offset @offset}]]]]
|
||
|
|
(into [animated/scroll-view {:on-scroll on-scroll
|
||
|
|
:scrollEventThrottle 1}
|
||
|
|
[rn/view {:pointer-events :box-none
|
||
|
|
:height @offset}]]
|
||
|
|
children)])))
|
||
|
|
|
||
|
|
(defn header [{:keys [use-insets] :as props} & children]
|
||
|
|
(if use-insets
|
||
|
|
[safe-area/consumer
|
||
|
|
(fn [insets]
|
||
|
|
[header-container (-> props
|
||
|
|
(dissoc :use-insets)
|
||
|
|
(assoc :insets insets))
|
||
|
|
children])]
|
||
|
|
[header-container props children]))
|