2aae37d67b
* Refactor `useOnMainScroll` function to use responsive device detection - Replace static `isDesktopWeb` with `useWebMediaQueries` hook to enable dynamic device type detection. - Create `useDeviceLimits` hook to dynamically determine `DY_LIMIT_UP` and `DY_LIMIT_DOWN` based on device type. - Update dependency arrays for the `useCallback` hooks to include new dynamic variables. * Refactor styles to be responsive to device type - Create `useStyles` hook that generates styles object based on device type detected from `useWebMediaQueries`. - Replace static styles object with dynamic styles object generated from `useStyles` hook in components. - This allows `paddingLeft` values for 'ul' and 'ol' styles to adapt to device type dynamically. - This allows `maxWidth` values for 'metaItem'' styles to adapt to device type dynamically. * Remove `isDesktopWeb` in favor of `useWebMediaQueries().isDesktop` * Refactor `SplashScreen` component for responsive design * Revision based on review results * Fix isNative check --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import {useState, useCallback, useRef} from 'react'
|
|
import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
|
|
import {RootStoreModel} from 'state/index'
|
|
import {s} from 'lib/styles'
|
|
import {useWebMediaQueries} from './useWebMediaQueries'
|
|
|
|
const Y_LIMIT = 10
|
|
|
|
const useDeviceLimits = () => {
|
|
const {isDesktop} = useWebMediaQueries()
|
|
return {
|
|
dyLimitUp: isDesktop ? 30 : 10,
|
|
dyLimitDown: isDesktop ? 150 : 10,
|
|
}
|
|
}
|
|
|
|
export type OnScrollCb = (
|
|
event: NativeSyntheticEvent<NativeScrollEvent>,
|
|
) => void
|
|
export type ResetCb = () => void
|
|
|
|
export function useOnMainScroll(
|
|
store: RootStoreModel,
|
|
): [OnScrollCb, boolean, ResetCb] {
|
|
let lastY = useRef(0)
|
|
let [isScrolledDown, setIsScrolledDown] = useState(false)
|
|
const {dyLimitUp, dyLimitDown} = useDeviceLimits()
|
|
|
|
return [
|
|
useCallback(
|
|
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
|
const y = event.nativeEvent.contentOffset.y
|
|
const dy = y - (lastY.current || 0)
|
|
lastY.current = y
|
|
|
|
if (!store.shell.minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
|
|
store.shell.setMinimalShellMode(true)
|
|
} else if (
|
|
store.shell.minimalShellMode &&
|
|
(dy < dyLimitUp * -1 || y <= Y_LIMIT)
|
|
) {
|
|
store.shell.setMinimalShellMode(false)
|
|
}
|
|
|
|
if (
|
|
!isScrolledDown &&
|
|
event.nativeEvent.contentOffset.y > s.window.height
|
|
) {
|
|
setIsScrolledDown(true)
|
|
} else if (
|
|
isScrolledDown &&
|
|
event.nativeEvent.contentOffset.y < s.window.height
|
|
) {
|
|
setIsScrolledDown(false)
|
|
}
|
|
},
|
|
[store.shell, dyLimitDown, dyLimitUp, isScrolledDown],
|
|
),
|
|
isScrolledDown,
|
|
useCallback(() => {
|
|
setIsScrolledDown(false)
|
|
store.shell.setMinimalShellMode(false)
|
|
lastY.current = 1e8 // NOTE we set this very high so that the onScroll logic works right -prf
|
|
}, [store, setIsScrolledDown]),
|
|
]
|
|
}
|