diff options
Diffstat (limited to 'src/view/com/util')
-rw-r--r-- | src/view/com/util/PostMeta.tsx | 2 | ||||
-rw-r--r-- | src/view/com/util/TimeElapsed.tsx | 3 | ||||
-rw-r--r-- | src/view/com/util/ViewHeader.tsx | 104 | ||||
-rw-r--r-- | src/view/com/util/fab/FABInner.tsx | 6 | ||||
-rw-r--r-- | src/view/com/util/load-latest/LoadLatestBtnMobile.tsx | 68 | ||||
-rw-r--r-- | src/view/com/util/post-embeds/ListEmbed.tsx | 30 |
6 files changed, 107 insertions, 106 deletions
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index b0ad01754..21cbbc547 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -25,7 +25,7 @@ interface PostMetaOpts { timestamp: string } -export const PostMeta = observer(function (opts: PostMetaOpts) { +export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) { const pal = usePalette('default') const displayName = opts.author.displayName || opts.author.handle const handle = opts.author.handle diff --git a/src/view/com/util/TimeElapsed.tsx b/src/view/com/util/TimeElapsed.tsx index 7b2dd61f3..0765f65b2 100644 --- a/src/view/com/util/TimeElapsed.tsx +++ b/src/view/com/util/TimeElapsed.tsx @@ -3,6 +3,9 @@ import {observer} from 'mobx-react-lite' import {ago} from 'lib/strings/time' import {useStores} from 'state/index' +// FIXME(dan): Figure out why the false positives +/* eslint-disable react/prop-types */ + export const TimeElapsed = observer(function TimeElapsed({ timestamp, children, diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 91cdb08c7..164028708 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -14,7 +14,7 @@ import {NavigationProp} from 'lib/routes/types' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} -export const ViewHeader = observer(function ({ +export const ViewHeader = observer(function ViewHeaderImpl({ title, canGoBack, showBackButton = true, @@ -140,70 +140,68 @@ function DesktopWebHeader({ ) } -const Container = observer( - ({ - children, - hideOnScroll, - showBorder, - }: { - children: React.ReactNode - hideOnScroll: boolean - showBorder?: boolean - }) => { - const store = useStores() - const pal = usePalette('default') - const interp = useAnimatedValue(0) +const Container = observer(function ContainerImpl({ + children, + hideOnScroll, + showBorder, +}: { + children: React.ReactNode + hideOnScroll: boolean + showBorder?: boolean +}) { + const store = useStores() + const pal = usePalette('default') + const interp = useAnimatedValue(0) - React.useEffect(() => { - if (store.shell.minimalShellMode) { - Animated.timing(interp, { - toValue: 1, - duration: 100, - useNativeDriver: true, - isInteraction: false, - }).start() - } else { - Animated.timing(interp, { - toValue: 0, - duration: 100, - useNativeDriver: true, - isInteraction: false, - }).start() - } - }, [interp, store.shell.minimalShellMode]) - const transform = { - transform: [{translateY: Animated.multiply(interp, -100)}], + React.useEffect(() => { + if (store.shell.minimalShellMode) { + Animated.timing(interp, { + toValue: 1, + duration: 100, + useNativeDriver: true, + isInteraction: false, + }).start() + } else { + Animated.timing(interp, { + toValue: 0, + duration: 100, + useNativeDriver: true, + isInteraction: false, + }).start() } + }, [interp, store.shell.minimalShellMode]) + const transform = { + transform: [{translateY: Animated.multiply(interp, -100)}], + } - if (!hideOnScroll) { - return ( - <View - style={[ - styles.header, - styles.headerFixed, - pal.view, - pal.border, - showBorder && styles.border, - ]}> - {children} - </View> - ) - } + if (!hideOnScroll) { return ( - <Animated.View + <View style={[ styles.header, - styles.headerFloating, + styles.headerFixed, pal.view, pal.border, - transform, showBorder && styles.border, ]}> {children} - </Animated.View> + </View> ) - }, -) + } + return ( + <Animated.View + style={[ + styles.header, + styles.headerFloating, + pal.view, + pal.border, + transform, + showBorder && styles.border, + ]}> + {children} + </Animated.View> + ) +}) const styles = StyleSheet.create({ header: { diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index afd172c82..f5a3e6b50 100644 --- a/src/view/com/util/fab/FABInner.tsx +++ b/src/view/com/util/fab/FABInner.tsx @@ -14,7 +14,11 @@ export interface FABProps icon: JSX.Element } -export const FABInner = observer(({testID, icon, ...props}: FABProps) => { +export const FABInner = observer(function FABInnerImpl({ + testID, + icon, + ...props +}: FABProps) { const {isTablet} = useWebMediaQueries() const store = useStores() const interp = useAnimatedValue(0) diff --git a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx index eb7eaaa49..3e8add5e9 100644 --- a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx @@ -9,41 +9,39 @@ import {usePalette} from 'lib/hooks/usePalette' import {colors} from 'lib/styles' import {HITSLOP_20} from 'lib/constants' -export const LoadLatestBtn = observer( - ({ - onPress, - label, - showIndicator, - }: { - onPress: () => void - label: string - showIndicator: boolean - minimalShellMode?: boolean // NOTE not used on mobile -prf - }) => { - const store = useStores() - const pal = usePalette('default') - const safeAreaInsets = useSafeAreaInsets() - return ( - <TouchableOpacity - style={[ - styles.loadLatest, - pal.borderDark, - pal.view, - !store.shell.minimalShellMode && { - bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30), - }, - ]} - onPress={onPress} - hitSlop={HITSLOP_20} - accessibilityRole="button" - accessibilityLabel={label} - accessibilityHint=""> - <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} /> - {showIndicator && <View style={[styles.indicator, pal.borderDark]} />} - </TouchableOpacity> - ) - }, -) +export const LoadLatestBtn = observer(function LoadLatestBtnImpl({ + onPress, + label, + showIndicator, +}: { + onPress: () => void + label: string + showIndicator: boolean + minimalShellMode?: boolean // NOTE not used on mobile -prf +}) { + const store = useStores() + const pal = usePalette('default') + const safeAreaInsets = useSafeAreaInsets() + return ( + <TouchableOpacity + style={[ + styles.loadLatest, + pal.borderDark, + pal.view, + !store.shell.minimalShellMode && { + bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30), + }, + ]} + onPress={onPress} + hitSlop={HITSLOP_20} + accessibilityRole="button" + accessibilityLabel={label} + accessibilityHint=""> + <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} /> + {showIndicator && <View style={[styles.indicator, pal.borderDark]} />} + </TouchableOpacity> + ) +}) const styles = StyleSheet.create({ loadLatest: { diff --git a/src/view/com/util/post-embeds/ListEmbed.tsx b/src/view/com/util/post-embeds/ListEmbed.tsx index 6f40b3e1a..dbf350039 100644 --- a/src/view/com/util/post-embeds/ListEmbed.tsx +++ b/src/view/com/util/post-embeds/ListEmbed.tsx @@ -6,23 +6,21 @@ import {ListCard} from 'view/com/lists/ListCard' import {AppBskyGraphDefs} from '@atproto/api' import {s} from 'lib/styles' -export const ListEmbed = observer( - ({ - item, - style, - }: { - item: AppBskyGraphDefs.ListView - style?: StyleProp<ViewStyle> - }) => { - const pal = usePalette('default') +export const ListEmbed = observer(function ListEmbedImpl({ + item, + style, +}: { + item: AppBskyGraphDefs.ListView + style?: StyleProp<ViewStyle> +}) { + const pal = usePalette('default') - return ( - <View style={[pal.view, pal.border, s.border1, styles.container]}> - <ListCard list={item} style={[style, styles.card]} /> - </View> - ) - }, -) + return ( + <View style={[pal.view, pal.border, s.border1, styles.container]}> + <ListCard list={item} style={[style, styles.card]} /> + </View> + ) +}) const styles = StyleSheet.create({ container: { |