Fix some bugs in tablet mode

This commit is contained in:
Paul Frazee
2023-09-28 13:42:38 -07:00
committed by Samuel Newman
parent f2249f5f78
commit 4a3450655d
2 changed files with 9 additions and 8 deletions
@@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {isNative} from '#/platform/detection'
export const withBreakpoints = <P extends object>( export const withBreakpoints = <P extends object>(
Mobile: React.ComponentType<P>, Mobile: React.ComponentType<P>,
@@ -9,12 +8,12 @@ export const withBreakpoints = <P extends object>(
Desktop: React.ComponentType<P>, Desktop: React.ComponentType<P>,
): React.FC<P> => ): React.FC<P> =>
function WithBreakpoints(props: P) { function WithBreakpoints(props: P) {
const {isMobile, isTabletOrMobile} = useWebMediaQueries() const {isMobile, isTablet} = useWebMediaQueries()
if (isMobile || isNative) { if (isMobile) {
return <Mobile {...props} /> return <Mobile {...props} />
} }
if (isTabletOrMobile) { if (isTablet) {
return <Tablet {...props} /> return <Tablet {...props} />
} }
return <Desktop {...props} /> return <Desktop {...props} />
@@ -81,10 +81,12 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
loadLatestInline: { // @ts-ignore web only
// @ts-ignore web only loadLatestInline: isWeb
left: 'calc(50vw - 282px)', ? {
}, left: 'calc(50vw - 282px)',
}
: {},
loadLatestOutOfLine: { loadLatestOutOfLine: {
// @ts-ignore web only // @ts-ignore web only
left: 'calc(50vw - 382px)', left: 'calc(50vw - 382px)',