zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Fix (#4430): Use separate hooks for shell mode animated styles (#4451)

Browse source 
* Fix (#4430): Use separate hooks for shell mode animated styles

* Consolidate in one file

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
This commit is contained in:
Francesco Lodovici 2024-06-10 17:19:28 +02:00 • committed by GitHub
parent fd03ea3fe1
commit b688da8d58
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 51 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/view/com/home/HomeHeaderLayout.web.tsx
View file

@ -11,7 +11,7 @@ import {useLingui} from '@lingui/react'
import {CogIcon} from '#/lib/icons'
import {useSession} from '#/state/session'
import {useShellLayout} from '#/state/shell/shell-layout'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {Logo} from '#/view/icons/Logo'
@ -39,7 +39,7 @@ function HomeHeaderLayoutDesktopAndTablet({
tabBarAnchor: JSX.Element | null | undefined
}) {
const pal = usePalette('default')
const {headerMinimalShellTransform} = useMinimalShellMode()
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
const {headerHeight} = useShellLayout()
const {hasSession} = useSession()
const {_} = useLingui()

4
src/view/com/home/HomeHeaderLayoutMobile.tsx
View file

@ -10,7 +10,7 @@ import {useSession} from '#/state/session'
import {useSetDrawerOpen} from '#/state/shell/drawer-open'
import {useShellLayout} from '#/state/shell/shell-layout'
import {HITSLOP_10} from 'lib/constants'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
import {usePalette} from 'lib/hooks/usePalette'
import {isWeb} from 'platform/detection'
import {Logo} from '#/view/icons/Logo'
@ -30,7 +30,7 @@ export function HomeHeaderLayoutMobile({
const {_} = useLingui()
const setDrawerOpen = useSetDrawerOpen()
const {headerHeight} = useShellLayout()
const {headerMinimalShellTransform} = useMinimalShellMode()
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
const {hasSession} = useSession()
const onPressAvi = React.useCallback(() => {

4
src/view/com/util/ViewHeader.tsx
View file

@ -8,7 +8,7 @@ import {useNavigation} from '@react-navigation/native'
import {useSetDrawerOpen} from '#/state/shell'
import {useAnalytics} from 'lib/analytics/analytics'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {NavigationProp} from 'lib/routes/types'
@ -197,7 +197,7 @@ function Container({
showBorder?: boolean
}) {
const pal = usePalette('default')
const {headerMinimalShellTransform} = useMinimalShellMode()
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
if (!hideOnScroll) {
return (

4
src/view/com/util/fab/FABInner.tsx
View file

@ -4,7 +4,7 @@ import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {LinearGradient} from 'expo-linear-gradient'
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {clamp} from '#/lib/numbers'
import {gradients} from '#/lib/styles'
@ -20,7 +20,7 @@ export interface FABProps
export function FABInner({testID, icon, ...props}: FABProps) {
const insets = useSafeAreaInsets()
const {isMobile, isTablet} = useWebMediaQueries()
const {fabMinimalShellTransform} = useMinimalShellMode()
const fabMinimalShellTransform = useMinimalShellFabTransform()
const {
state: pressed,
onIn: onPressIn,

4
src/view/com/util/load-latest/LoadLatestBtn.tsx
View file

@ -6,7 +6,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useMediaQuery} from 'react-responsive'
import {HITSLOP_20} from '#/lib/constants'
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {clamp} from '#/lib/numbers'
@ -30,7 +30,7 @@ export function LoadLatestBtn({
const pal = usePalette('default')
const {hasSession} = useSession()
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
const {fabMinimalShellTransform} = useMinimalShellMode()
const fabMinimalShellTransform = useMinimalShellFabTransform()
const insets = useSafeAreaInsets()
// move button inline if it starts overlapping the left nav

4
src/view/screens/PostThread.tsx
View file

@ -14,7 +14,7 @@ import {
import {useSession} from '#/state/session'
import {useSetMinimalShellMode} from '#/state/shell'
import {useComposerControls} from '#/state/shell/composer'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useMinimalShellFabTransform} from 'lib/hooks/useMinimalShellTransform'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
import {makeRecordUri} from 'lib/strings/url-helpers'
@ -26,7 +26,7 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
export function PostThreadScreen({route}: Props) {
const queryClient = useQueryClient()
const {hasSession} = useSession()
const {fabMinimalShellTransform} = useMinimalShellMode()
const fabMinimalShellTransform = useMinimalShellFabTransform()
const setMinimalShellMode = useSetMinimalShellMode()
const {openComposer} = useComposerControls()
const safeAreaInsets = useSafeAreaInsets()

4
src/view/shell/bottom-bar/BottomBar.tsx
View file

@ -10,7 +10,7 @@ import {StackActions} from '@react-navigation/native'
import {useAnalytics} from '#/lib/analytics/analytics'
import {useHaptics} from '#/lib/haptics'
import {useDedupe} from '#/lib/hooks/useDedupe'
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
import {usePalette} from '#/lib/hooks/usePalette'
import {clamp} from '#/lib/numbers'
@ -66,7 +66,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
useNavigationTabState()
const numUnreadNotifications = useUnreadNotifications()
const numUnreadMessages = useUnreadMessageCount()
const {footerMinimalShellTransform} = useMinimalShellMode()
const footerMinimalShellTransform = useMinimalShellFooterTransform()
const {data: profile} = useProfileQuery({did: currentAccount?.did})
const {requestSwitchToAccount} = useLoggedOutViewControls()
const closeAllActiveElements = useCloseAllActiveElements()

4
src/view/shell/bottom-bar/BottomBarWeb.tsx
View file

@ -6,7 +6,7 @@ import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigationState} from '@react-navigation/native'
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
import {usePalette} from '#/lib/hooks/usePalette'
import {clamp} from '#/lib/numbers'
import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
@ -50,7 +50,7 @@ export function BottomBarWeb() {
const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets()
const gate = useGate()
const {footerMinimalShellTransform} = useMinimalShellMode()
const footerMinimalShellTransform = useMinimalShellFooterTransform()
const {requestSwitchToAccount} = useLoggedOutViewControls()
const closeAllActiveElements = useCloseAllActiveElements()
const iconWidth = 26