fix: Page Nav title animation (#19651)

This commit is contained in:
Ajay Sivan 2024-05-16 18:38:32 +05:30 committed by GitHub
parent 22d63002b2
commit bd5fb0d407
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 91 additions and 83 deletions

View File

@ -13,13 +13,12 @@
:align-items :center})
(defn center-content-container
[centered? center-opacity]
[centered?]
{:flex 1
:margin-horizontal 12
:flex-direction :row
:align-items :center
:justify-content (if centered? :center :flex-start)
:opacity center-opacity})
:justify-content (if centered? :center :flex-start)})
(def right-actions-container
{:flex-direction :row})

View File

@ -99,14 +99,13 @@
(def threshold (- header-height page-nav-height))
(defn- title-center
[{:keys [centered? title center-opacity scroll-y]}]
[{:keys [title scroll-y center-content-container-style]}]
(let [animated-style (when scroll-y
(header-worklet/profile-header-animation scroll-y
threshold
page-nav-height))]
[reanimated/view
{:style [(style/center-content-container centered? center-opacity)
animated-style]}
{:style [center-content-container-style animated-style]}
[text/text
{:weight :medium
:size :paragraph-1
@ -114,14 +113,15 @@
title]]))
(defn- dropdown-center
[{:keys [background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}]
[{:keys [background dropdown-on-press dropdown-selected? dropdown-text
center-content-container-style]}]
(let [theme (quo.theme/use-theme)
dropdown-type (cond
(= background :photo) :grey
(and (= theme :dark) (= background :blur)) :grey
:else :ghost)
dropdown-state (if dropdown-selected? :active :default)]
[reanimated/view {:style (style/center-content-container true center-opacity)}
[reanimated/view {:style center-content-container-style}
[dropdown/view
{:type dropdown-type
:state dropdown-state
@ -131,9 +131,9 @@
dropdown-text]]))
(defn- token-center
[{:keys [background token-logo token-name token-abbreviation center-opacity]}]
[{:keys [background token-logo token-name token-abbreviation center-content-container-style]}]
(let [theme (quo.theme/use-theme)]
[reanimated/view {:style (style/center-content-container false center-opacity)}
[reanimated/view {:style center-content-container-style}
[rn/image {:style style/token-logo :source token-logo}]
[text/text
{:style style/token-name
@ -149,9 +149,9 @@
token-abbreviation]]))
(defn- channel-center
[{:keys [background channel-emoji channel-name channel-icon center-opacity]}]
[{:keys [background channel-emoji channel-name channel-icon center-content-container-style]}]
(let [theme (quo.theme/use-theme)]
[reanimated/view {:style (style/center-content-container false center-opacity)}
[reanimated/view {:style center-content-container-style}
[rn/text {:style style/channel-emoji}
channel-emoji]
[text/text
@ -163,9 +163,9 @@
[icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]]))
(defn- title-description-center
[{:keys [background picture title description center-opacity]}]
[{:keys [background picture title description center-content-container-style]}]
(let [theme (quo.theme/use-theme)]
[reanimated/view {:style (style/center-content-container false center-opacity)}
[reanimated/view {:style center-content-container-style}
(when picture
[rn/view {:style style/group-avatar-picture}
[group-avatar/view {:picture picture :size :size-28}]])
@ -184,11 +184,11 @@
description]]]))
(defn- community-network-center
[{:keys [type community-logo network-logo community-name network-name center-opacity]}]
[{:keys [type community-logo network-logo community-name network-name center-content-container-style]}]
(let [community? (= type :community)
shown-logo (if community? community-logo network-logo)
shown-name (if community? community-name network-name)]
[reanimated/view {:style (style/center-content-container false center-opacity)}
[reanimated/view {:style center-content-container-style}
[rn/image
{:style style/community-network-logo
:source shown-logo}]
@ -199,8 +199,8 @@
shown-name]]))
(defn- wallet-networks-center
[{:keys [networks networks-on-press background center-opacity]}]
[reanimated/view {:style (style/center-content-container true center-opacity)}
[{:keys [networks networks-on-press background center-content-container-style]}]
[reanimated/view {:style center-content-container-style}
[network-dropdown/view
{:state :default
:on-press networks-on-press
@ -250,12 +250,21 @@
`:network`
- network-name
- network-logo a valid rn/image `:source` value"
[{:keys [type right-side background text-align behind-overlay?]
[{:keys [type right-side background text-align behind-overlay? center-opacity]
:or {type :no-title
text-align :center
right-side :none
background :white}
:as props}]
(let [center-content-container-style (reanimated/apply-animations-to-style
(if center-opacity
{:opacity center-opacity}
nil)
(style/center-content-container
(and (= type :title) (= text-align :center))))
props-with-style (assoc props
:center-content-container-style
center-content-container-style)]
(case type
:no-title
[page-nav-base props
@ -268,7 +277,7 @@
:title
(let [centered? (= text-align :center)]
[page-nav-base props
[title-center (assoc props :centered? centered?)]
[title-center props-with-style]
[right-content
{:background background
:content right-side
@ -277,7 +286,7 @@
:dropdown
[page-nav-base props
[dropdown-center props]
[dropdown-center props-with-style]
[right-content
{:background background
:content right-side
@ -286,7 +295,7 @@
:token
[page-nav-base props
[token-center props]
[token-center props-with-style]
[right-content
{:background background
:content right-side
@ -294,7 +303,7 @@
:channel
[page-nav-base props
[channel-center props]
[channel-center props-with-style]
[right-content
{:background background
:content right-side
@ -303,7 +312,7 @@
:title-description
[page-nav-base props
[title-description-center props]
[title-description-center props-with-style]
[right-content
{:background background
:content right-side
@ -312,7 +321,7 @@
:wallet-networks
[page-nav-base props
[wallet-networks-center props]
[wallet-networks-center props-with-style]
[right-content
{:background background
:content right-side
@ -321,11 +330,11 @@
(:community :network)
[page-nav-base props
[community-network-center props]
[community-network-center props-with-style]
[right-content
{:background background
:content right-side
:max-actions 3
:support-account-switcher? false}]]
nil))
nil)))