diff options
Diffstat (limited to 'src/view/com')
30 files changed, 245 insertions, 90 deletions
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index a414a7562..64e75328a 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -16,7 +16,10 @@ import PasteInput, { PasteInputRef, } from '@mattermost/react-native-paste-input' import LinearGradient from 'react-native-linear-gradient' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {useAnalytics} from '@segment/analytics-react-native' import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view' import {Autocomplete} from './Autocomplete' @@ -438,7 +441,11 @@ export const ComposePost = observer(function ComposePost({ hitSlop={HITSLOP}> <FontAwesomeIcon icon={['far', 'image']} - style={selectedPhotos.length < 4 ? pal.link : pal.textLight} + style={ + (selectedPhotos.length < 4 + ? pal.link + : pal.textLight) as FontAwesomeIconStyle + } size={24} /> </TouchableOpacity> diff --git a/src/view/com/composer/PhotoCarouselPicker.tsx b/src/view/com/composer/PhotoCarouselPicker.tsx index 5a5b1cc3b..383027de3 100644 --- a/src/view/com/composer/PhotoCarouselPicker.tsx +++ b/src/view/com/composer/PhotoCarouselPicker.tsx @@ -1,6 +1,9 @@ import React, {useCallback} from 'react' import {Image, StyleSheet, TouchableOpacity, ScrollView} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import { openPicker, openCamera, @@ -131,13 +134,21 @@ export const PhotoCarouselPicker = ({ testID="openCameraButton" style={[styles.galleryButton, pal.border, styles.photo]} onPress={handleOpenCamera}> - <FontAwesomeIcon icon="camera" size={24} style={pal.link} /> + <FontAwesomeIcon + icon="camera" + size={24} + style={pal.link as FontAwesomeIconStyle} + /> </TouchableOpacity> <TouchableOpacity testID="openGalleryButton" style={[styles.galleryButton, pal.border, styles.photo]} onPress={handleOpenGallery}> - <FontAwesomeIcon icon="image" style={pal.link} size={24} /> + <FontAwesomeIcon + icon="image" + style={pal.link as FontAwesomeIconStyle} + size={24} + /> </TouchableOpacity> {localPhotos.photos.map((item: PhotoIdentifier, index: number) => ( <TouchableOpacity diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx index bfc82b369..f2dc0ce48 100644 --- a/src/view/com/discover/SuggestedFollows.tsx +++ b/src/view/com/discover/SuggestedFollows.tsx @@ -7,7 +7,10 @@ import { View, } from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {observer} from 'mobx-react-lite' import _omit from 'lodash.omit' import {ErrorScreen} from '../util/error/ErrorScreen' @@ -199,7 +202,7 @@ const User = ({ style={[styles.btn, styles.gradientBtn]}> <FontAwesomeIcon icon="plus" - style={[s.white, s.mr5]} + style={[s.white as FontAwesomeIconStyle, s.mr5]} size={15} /> <Text style={[s.white, s.fw600, s.f15]}>Follow</Text> diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx new file mode 100644 index 000000000..fd377dde2 --- /dev/null +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx @@ -0,0 +1,21 @@ +// default implementation fallback for web + +import React from 'react' +import {View} from 'react-native' +import {ImageSource} from '../../@types' + +type Props = { + imageSrc: ImageSource + onRequestClose: () => void + onZoom: (scaled: boolean) => void + onLongPress: (image: ImageSource) => void + delayLongPress: number + swipeToCloseEnabled?: boolean + doubleTapToZoomEnabled?: boolean +} + +const ImageItem = (_props: Props) => { + return <View /> +} + +export default React.memo(ImageItem) diff --git a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts index bab136c50..a5b0b6bd4 100644 --- a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts +++ b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts @@ -47,8 +47,8 @@ const useImageDimensions = (image: ImageSource): Dimensions | null => { if (imageDimensions) { resolve(imageDimensions) } else { - // @ts-ignore Image.getSizeWithHeaders( + // @ts-ignore source.uri, source.headers, (width: number, height: number) => { diff --git a/src/view/com/lightbox/ImageViewing/hooks/usePanResponder.ts b/src/view/com/lightbox/ImageViewing/hooks/usePanResponder.ts index 4600cf1a8..036e7246f 100644 --- a/src/view/com/lightbox/ImageViewing/hooks/usePanResponder.ts +++ b/src/view/com/lightbox/ImageViewing/hooks/usePanResponder.ts @@ -61,7 +61,7 @@ const usePanResponder = ({ let tmpTranslate: Position | null = null let isDoubleTapPerformed = false let lastTapTS: number | null = null - let longPressHandlerRef: number | null = null + let longPressHandlerRef: NodeJS.Timeout | null = null const meaningfulShift = MIN_DIMENSION * 0.01 const scaleValue = new Animated.Value(initialScale) diff --git a/src/view/com/lightbox/ImageViewing/utils.ts b/src/view/com/lightbox/ImageViewing/utils.ts index 7fcdc84cf..8c9c1b34c 100644 --- a/src/view/com/lightbox/ImageViewing/utils.ts +++ b/src/view/com/lightbox/ImageViewing/utils.ts @@ -77,6 +77,7 @@ export const getImageStyles = ( const transform = translate.getTranslateTransform() if (scale) { + // @ts-ignore TODO - is scale incorrect? might need to remove -prf transform.push({scale}, {perspective: new Animated.Value(1000)}) } diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index c777a5528..df5839783 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -5,6 +5,7 @@ import ImageView from './ImageViewing' import {useStores} from '../../../state' import * as models from '../../../state/models/shell-ui' import {saveImageModal} from '../../../lib/images' +import {ImageSource} from './ImageViewing/@types' export const Lightbox = observer(function Lightbox() { const store = useStores() @@ -15,8 +16,14 @@ export const Lightbox = observer(function Lightbox() { const onClose = () => { store.shell.closeLightbox() } - const onLongPress = ({uri}: {uri: string}) => { - saveImageModal({uri}) + const onLongPress = (image: ImageSource) => { + if ( + typeof image === 'object' && + 'uri' in image && + typeof image.uri === 'string' + ) { + saveImageModal({uri: image.uri}) + } } if (store.shell.activeLightbox?.name === 'profile-image') { diff --git a/src/view/com/login/CreateAccount.tsx b/src/view/com/login/CreateAccount.tsx index c5507b760..be5074eee 100644 --- a/src/view/com/login/CreateAccount.tsx +++ b/src/view/com/login/CreateAccount.tsx @@ -9,7 +9,10 @@ import { TouchableOpacity, View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {ComAtprotoAccountCreate} from '@atproto/api' import * as EmailValidator from 'email-validator' import {useAnalytics} from '@segment/analytics-react-native' @@ -264,7 +267,7 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => { <Picker style={[pal.text, styles.picker]} labelStyle={styles.pickerLabel} - iconStyle={pal.textLight} + iconStyle={pal.textLight as FontAwesomeIconStyle} value={userDomain} items={serviceDescription.availableUserDomains.map(d => ({ label: `.${d}`, @@ -371,7 +374,11 @@ const Policies = ({ return ( <View style={styles.policies}> <View style={[styles.errorIcon, {borderColor: pal.colors.text}, s.mt2]}> - <FontAwesomeIcon icon="exclamation" style={pal.textLight} size={10} /> + <FontAwesomeIcon + icon="exclamation" + style={pal.textLight as FontAwesomeIconStyle} + size={10} + /> </View> <Text style={[pal.textLight, s.pl5, s.flex1]}> This service has not provided terms of service or a privacy policy. diff --git a/src/view/com/login/Signin.tsx b/src/view/com/login/Signin.tsx index 2dfb012e8..1c8a54ad8 100644 --- a/src/view/com/login/Signin.tsx +++ b/src/view/com/login/Signin.tsx @@ -8,7 +8,10 @@ import { TouchableOpacity, View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import * as EmailValidator from 'email-validator' import {sessionClient as AtpApi, SessionServiceClient} from '@atproto/api' import {useAnalytics} from '@segment/analytics-react-native' @@ -337,7 +340,11 @@ const LoginForm = ({ {toNiceDomain(serviceUrl)} </Text> <View style={[pal.btn, styles.textBtnFakeInnerBtn]}> - <FontAwesomeIcon icon="pen" size={12} style={pal.textLight} /> + <FontAwesomeIcon + icon="pen" + size={12} + style={pal.textLight as FontAwesomeIconStyle} + /> </View> </TouchableOpacity> </View> @@ -514,7 +521,11 @@ const ForgotPasswordForm = ({ {toNiceDomain(serviceUrl)} </Text> <View style={[pal.btn, styles.textBtnFakeInnerBtn]}> - <FontAwesomeIcon icon="pen" size={12} style={pal.text} /> + <FontAwesomeIcon + icon="pen" + size={12} + style={pal.text as FontAwesomeIconStyle} + /> </View> </TouchableOpacity> <View style={[pal.borderDark, styles.groupContent]}> diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index ba99feb32..8449fda68 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -108,7 +108,6 @@ export function Component({ <UserBanner banner={userBanner} onSelectNewBanner={onSelectNewBanner} - handle={profileView.handle} /> <View style={styles.avi}> <UserAvatar diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index e0e18d54a..d0b40d56d 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -62,18 +62,10 @@ export const Modal = observer(function Modal() { ) } else if (store.shell.activeModal?.name === 'report-post') { snapPoints = ReportPostModal.snapPoints - element = ( - <ReportPostModal.Component - {...(store.shell.activeModal as models.ReportPostModal)} - /> - ) + element = <ReportPostModal.Component /> } else if (store.shell.activeModal?.name === 'report-account') { snapPoints = ReportAccountModal.snapPoints - element = ( - <ReportAccountModal.Component - {...(store.shell.activeModal as models.ReportAccountModal)} - /> - ) + element = <ReportAccountModal.Component /> } else { element = <View /> } diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx index 31ef4b12d..85c0d70b7 100644 --- a/src/view/com/modals/ServerInput.tsx +++ b/src/view/com/modals/ServerInput.tsx @@ -1,6 +1,9 @@ import React, {useState} from 'react' import {Platform, StyleSheet, TouchableOpacity, View} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet' import {Text} from '../util/text/Text' import {useStores} from '../../../state' @@ -37,13 +40,19 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) { style={styles.btn} onPress={() => doSelect(LOCAL_DEV_SERVICE)}> <Text style={styles.btnText}>Local dev server</Text> - <FontAwesomeIcon icon="arrow-right" style={s.white} /> + <FontAwesomeIcon + icon="arrow-right" + style={s.white as FontAwesomeIconStyle} + /> </TouchableOpacity> <TouchableOpacity style={styles.btn} onPress={() => doSelect(STAGING_SERVICE)}> <Text style={styles.btnText}>Staging</Text> - <FontAwesomeIcon icon="arrow-right" style={s.white} /> + <FontAwesomeIcon + icon="arrow-right" + style={s.white as FontAwesomeIconStyle} + /> </TouchableOpacity> </> ) : undefined} @@ -51,7 +60,10 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) { style={styles.btn} onPress={() => doSelect(PROD_SERVICE)}> <Text style={styles.btnText}>Bluesky.Social</Text> - <FontAwesomeIcon icon="arrow-right" style={s.white} /> + <FontAwesomeIcon + icon="arrow-right" + style={s.white as FontAwesomeIconStyle} + /> </TouchableOpacity> </View> <View style={styles.group}> @@ -74,7 +86,7 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) { onPress={() => doSelect(customUrl)}> <FontAwesomeIcon icon="check" - style={[s.black, styles.checkIcon]} + style={[s.black as FontAwesomeIconStyle, styles.checkIcon]} size={18} /> </TouchableOpacity> diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index 48c8b9a1f..da6fc7d35 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -9,7 +9,11 @@ import { } from 'react-native' import {AppBskyEmbedImages} from '@atproto/api' import {AtUri} from '../../../third-party/uri' -import {FontAwesomeIcon, Props} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, + Props, +} from '@fortawesome/react-native-fontawesome' import {NotificationsViewItemModel} from '../../../state/models/notifications-view' import {PostThreadViewModel} from '../../../state/models/post-thread-view' import {s, colors} from '../../lib/styles' @@ -98,18 +102,21 @@ export const FeedItem = observer(function FeedItem({ if (item.isUpvote) { action = 'liked your post' icon = 'HeartIconSolid' - iconStyle = [s.red3, {position: 'relative', top: -4}] + iconStyle = [ + s.red3 as FontAwesomeIconStyle, + {position: 'relative', top: -4}, + ] } else if (item.isRepost) { action = 'reposted your post' icon = 'retweet' - iconStyle = [s.green3] + iconStyle = [s.green3 as FontAwesomeIconStyle] } else if (item.isReply) { action = 'replied to your post' icon = ['far', 'comment'] } else if (item.isFollow) { action = 'followed you' icon = 'user-plus' - iconStyle = [s.blue3] + iconStyle = [s.blue3 as FontAwesomeIconStyle] } else { return <></> } @@ -292,7 +299,6 @@ function ExpandedAuthorsList({ authors.length * (EXPANDED_AUTHOR_EL_HEIGHT + 10) /*10=margin*/ const heightStyle = { height: Animated.multiply(heightInterp, targetHeight), - overflow: 'hidden', } React.useEffect(() => { Animated.timing(heightInterp, { @@ -302,7 +308,12 @@ function ExpandedAuthorsList({ }).start() }, [heightInterp, visible]) return ( - <Animated.View style={[heightStyle, visible ? s.mb10 : undefined]}> + <Animated.View + style={[ + heightStyle, + styles.overflowHidden, + visible ? s.mb10 : undefined, + ]}> {authors.map(author => ( <Link key={author.href} @@ -360,6 +371,10 @@ function AdditionalPostText({ } const styles = StyleSheet.create({ + overflowHidden: { + overflow: 'hidden', + }, + outer: { padding: 10, paddingRight: 15, diff --git a/src/view/com/onboard/FeatureExplainer.tsx b/src/view/com/onboard/FeatureExplainer.tsx index 03e050883..d8d502cfb 100644 --- a/src/view/com/onboard/FeatureExplainer.tsx +++ b/src/view/com/onboard/FeatureExplainer.tsx @@ -9,13 +9,23 @@ import { View, } from 'react-native' import {TabView, SceneMap, Route, TabBarProps} from 'react-native-tab-view' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {Text} from '../util/text/Text' import {useStores} from '../../../state' import {s} from '../../lib/styles' import {TABS_EXPLAINER} from '../../lib/assets' import {TABS_ENABLED} from '../../../build-flags' +const ROUTES = TABS_ENABLED + ? [ + {key: 'intro', title: 'Intro'}, + {key: 'tabs', title: 'Tabs'}, + ] + : [{key: 'intro', title: 'Intro'}] + const Intro = () => ( <View style={styles.explainer}> <Text @@ -37,7 +47,7 @@ const Tabs = () => ( <View style={s.flex1} /> <FontAwesomeIcon icon={['far', 'clone']} - style={[s.black, s.mb5]} + style={[s.black as FontAwesomeIconStyle, s.mb5]} size={36} /> <View style={s.flex1} /> @@ -62,14 +72,10 @@ export const FeatureExplainer = () => { const layout = useWindowDimensions() const store = useStores() const [index, setIndex] = useState(0) - const routes = [ - {key: 'intro', title: 'Intro'}, - TABS_ENABLED ? {key: 'tabs', title: 'Tabs'} : undefined, - ].filter(Boolean) const onPressSkip = () => store.onboard.next() const onPressNext = () => { - if (index >= routes.length - 1) { + if (index >= ROUTES.length - 1) { store.onboard.next() } else { setIndex(index + 1) @@ -103,12 +109,12 @@ export const FeatureExplainer = () => { ) } - const FirstExplainer = SCENE_MAP[routes[0]?.key as keyof typeof SCENE_MAP] + const FirstExplainer = SCENE_MAP[ROUTES[0]?.key as keyof typeof SCENE_MAP] return ( <SafeAreaView style={styles.container}> - {routes.length > 1 ? ( + {ROUTES.length > 1 ? ( <TabView - navigationState={{index, routes}} + navigationState={{index, routes: ROUTES}} renderScene={renderScene} renderTabBar={renderTabBar} onIndexChange={setIndex} diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 92f7acc03..d39296285 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -3,7 +3,10 @@ import {observer} from 'mobx-react-lite' import {StyleSheet, View} from 'react-native' import Clipboard from '@react-native-clipboard/clipboard' import {AtUri} from '../../../third-party/uri' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {PostThreadViewPostModel} from '../../../state/models/post-thread-view' import {Link} from '../util/Link' import {RichText} from '../util/text/RichText' @@ -59,7 +62,7 @@ export const PostThreadItem = observer(function PostThreadItem({ replyTo: { uri: item.post.uri, cid: item.post.cid, - text: record.text as string, + text: record?.text as string, author: { handle: item.post.author.handle, displayName: item.post.author.displayName, @@ -103,7 +106,10 @@ export const PostThreadItem = observer(function PostThreadItem({ if (deleted) { return ( <View style={[styles.outer, pal.border, pal.view, s.p20, s.flexRow]}> - <FontAwesomeIcon icon={['far', 'trash-can']} style={pal.icon} /> + <FontAwesomeIcon + icon={['far', 'trash-can']} + style={pal.icon as FontAwesomeIconStyle} + /> <Text style={[pal.textLight, s.ml10]}>This post has been deleted.</Text> </View> ) diff --git a/src/view/com/post-thread/PostVotedBy.tsx b/src/view/com/post-thread/PostVotedBy.tsx index f167a3ab7..9fd53da5e 100644 --- a/src/view/com/post-thread/PostVotedBy.tsx +++ b/src/view/com/post-thread/PostVotedBy.tsx @@ -1,7 +1,7 @@ import React, {useEffect} from 'react' import {observer} from 'mobx-react-lite' import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native' -import {VotesViewModel, VotesItem} from '../../../state/models/votes-view' +import {VotesViewModel, VoteItem} from '../../../state/models/votes-view' import {Link} from '../util/Link' import {Text} from '../util/text/Text' import {ErrorMessage} from '../util/error/ErrorMessage' @@ -56,7 +56,7 @@ export const PostVotedBy = observer(function PostVotedBy({ // loaded // = - const renderItem = ({item}: {item: VotesItem}) => <LikedByItem item={item} /> + const renderItem = ({item}: {item: VoteItem}) => <LikedByItem item={item} /> return ( <FlatList data={view.votes} @@ -76,7 +76,7 @@ export const PostVotedBy = observer(function PostVotedBy({ ) }) -const LikedByItem = ({item}: {item: VotesItem}) => { +const LikedByItem = ({item}: {item: VoteItem}) => { const pal = usePalette('default') return ( diff --git a/src/view/com/post/PostText.tsx b/src/view/com/post/PostText.tsx index 0cdc875a9..a3bcfed68 100644 --- a/src/view/com/post/PostText.tsx +++ b/src/view/com/post/PostText.tsx @@ -1,6 +1,6 @@ import React, {useState, useEffect} from 'react' import {observer} from 'mobx-react-lite' -import {StyleSheet, View} from 'react-native' +import {StyleProp, StyleSheet, TextStyle, View} from 'react-native' import {LoadingPlaceholder} from '../util/LoadingPlaceholder' import {ErrorMessage} from '../util/error/ErrorMessage' import {Text} from '../util/text/Text' @@ -12,7 +12,7 @@ export const PostText = observer(function PostText({ style, }: { uri: string - style?: StyleProp + style?: StyleProp<TextStyle> }) { const store = useStores() const [model, setModel] = useState<PostModel | undefined>() diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 584fa0973..cda2ac0b0 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -4,7 +4,10 @@ import {StyleSheet, View} from 'react-native' import Clipboard from '@react-native-clipboard/clipboard' import Svg, {Circle, Line} from 'react-native-svg' import {AtUri} from '../../../third-party/uri' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {FeedItemModel} from '../../../state/models/feed-view' import {Link} from '../util/Link' import {Text} from '../util/text/Text' @@ -137,7 +140,10 @@ export const FeedItem = observer(function ({ }> <FontAwesomeIcon icon="retweet" - style={[styles.includeReasonIcon, {color: pal.colors.textLight}]} + style={[ + styles.includeReasonIcon, + {color: pal.colors.textLight} as FontAwesomeIconStyle, + ]} /> <Text type="sm-bold" style={pal.textLight}> Reposted by{' '} @@ -167,7 +173,10 @@ export const FeedItem = observer(function ({ <FontAwesomeIcon icon="reply" size={9} - style={[{color: pal.colors.textLight}, s.mr5]} + style={[ + {color: pal.colors.textLight} as FontAwesomeIconStyle, + s.mr5, + ]} /> <Text type="md" style={[pal.textLight, s.mr2]}> Reply to diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index 2e67873c8..bd7e7a3ce 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -97,7 +97,11 @@ const User = ({item}: {item: FollowItem}) => { size={40} displayName={item.displayName} handle={item.handle} - avatar={item.avatar} + avatar={ + item.avatar as + | string + | undefined /* HACK: type signature is wrong in the api */ + } /> </View> <View style={styles.layoutContent}> diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 2f98fce2d..d0cf49769 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -8,7 +8,10 @@ import { View, } from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {BlurView} from '@react-native-community/blur' import {ProfileViewModel} from '../../../state/models/profile-view' import {useStores} from '../../../state' @@ -142,7 +145,7 @@ export const ProfileHeader = observer(function ProfileHeader({ } return ( <View style={pal.view}> - <UserBanner handle={view.handle} banner={view.banner} /> + <UserBanner banner={view.banner} /> <View style={styles.content}> <View style={[styles.buttonsLine]}> {isMe ? ( @@ -181,7 +184,10 @@ export const ProfileHeader = observer(function ProfileHeader({ start={{x: 0, y: 0}} end={{x: 1, y: 1}} style={[styles.btn, styles.gradientBtn]}> - <FontAwesomeIcon icon="plus" style={[s.white, s.mr5]} /> + <FontAwesomeIcon + icon="plus" + style={[s.white as FontAwesomeIconStyle, s.mr5]} + /> <Text type="button" style={[s.white, s.bold]}> Follow </Text> diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx index 6218027d2..6c5c3f342 100644 --- a/src/view/com/util/EmptyState.tsx +++ b/src/view/com/util/EmptyState.tsx @@ -1,7 +1,10 @@ import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {Text} from './text/Text' import {UserGroupIcon} from '../../lib/icons' import {usePalette} from '../../lib/hooks/usePalette' @@ -25,7 +28,10 @@ export function EmptyState({ <FontAwesomeIcon icon={icon} size={64} - style={[styles.icon, {color: pal.colors.emptyStateIcon}]} + style={[ + styles.icon, + {color: pal.colors.emptyStateIcon} as FontAwesomeIconStyle, + ]} /> )} </View> diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index 9828058e8..9bb200d50 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -63,7 +63,7 @@ export function PostLoadingPlaceholder({ </View> <View style={s.flex1}> <HeartIcon - style={{color: theme.palette.default.icon}} + style={{color: theme.palette.default.icon} as ViewStyle} size={17} strokeWidth={1.7} /> diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index bde44abab..fca70b687 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -7,7 +7,10 @@ import { View, ViewStyle, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import ReactNativeHapticFeedback from 'react-native-haptic-feedback' import {Text} from './text/Text' import {PostDropdownBtn} from './forms/DropdownButton' @@ -147,7 +150,9 @@ export function PostCtrls(opts: PostCtrlsOpts) { <Animated.View style={anim1Style}> <RepostIcon style={ - opts.isReposted ? styles.ctrlIconReposted : defaultCtrlColor + (opts.isReposted + ? styles.ctrlIconReposted + : defaultCtrlColor) as ViewStyle } strokeWidth={2.4} size={opts.big ? 24 : 20} @@ -173,12 +178,15 @@ export function PostCtrls(opts: PostCtrlsOpts) { <Animated.View style={anim2Style}> {opts.isUpvoted ? ( <HeartIconSolid - style={[styles.ctrlIconUpvoted]} + style={styles.ctrlIconUpvoted as ViewStyle} size={opts.big ? 22 : 16} /> ) : ( <HeartIcon - style={[defaultCtrlColor, opts.big ? styles.mt1 : undefined]} + style={[ + defaultCtrlColor as ViewStyle, + opts.big ? styles.mt1 : undefined, + ]} strokeWidth={3} size={opts.big ? 20 : 16} /> @@ -214,7 +222,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { { color: theme.colorScheme === 'light' ? colors.gray4 : colors.gray5, - }, + } as FontAwesomeIconStyle, ]} /> </PostDropdownBtn> diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index c8b1b2d97..472db7ee0 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -6,7 +6,10 @@ import { TouchableOpacity, View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {UserAvatar} from './UserAvatar' import {Text} from './text/Text' import {MagnifyingGlassIcon} from '../../lib/icons' @@ -92,7 +95,11 @@ export const ViewHeader = observer(function ViewHeader({ <ActivityIndicator /> ) : ( <> - <FontAwesomeIcon icon="signal" style={pal.text} size={16} /> + <FontAwesomeIcon + icon="signal" + style={pal.text as FontAwesomeIconStyle} + size={16} + /> <FontAwesomeIcon icon="x" style={[ diff --git a/src/view/com/util/error/ErrorMessage.tsx b/src/view/com/util/error/ErrorMessage.tsx index 684e93fca..a6d77326e 100644 --- a/src/view/com/util/error/ErrorMessage.tsx +++ b/src/view/com/util/error/ErrorMessage.tsx @@ -6,7 +6,10 @@ import { View, ViewStyle, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {Text} from '../text/Text' import {useTheme} from '../../../lib/ThemeContext' import {usePalette} from '../../../lib/hooks/usePalette' @@ -28,7 +31,11 @@ export function ErrorMessage({ <View testID="errorMessageView" style={[styles.outer, pal.view, style]}> <View style={[styles.errorIcon, {backgroundColor: theme.palette.error.icon}]}> - <FontAwesomeIcon icon="exclamation" style={pal.text} size={16} /> + <FontAwesomeIcon + icon="exclamation" + style={pal.text as FontAwesomeIconStyle} + size={16} + /> </View> <Text type="sm" diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx index 0500b206d..f316dbcc6 100644 --- a/src/view/com/util/error/ErrorScreen.tsx +++ b/src/view/com/util/error/ErrorScreen.tsx @@ -1,6 +1,9 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {Text} from '../text/Text' import {colors} from '../../../lib/styles' import {useTheme} from '../../../lib/ThemeContext' @@ -58,7 +61,11 @@ export function ErrorScreen({ testID="errorScreenTryAgainButton" style={[styles.btn, {backgroundColor: theme.palette.error.icon}]} onPress={onPressTryAgain}> - <FontAwesomeIcon icon="arrows-rotate" style={pal.text} size={16} /> + <FontAwesomeIcon + icon="arrows-rotate" + style={pal.text as FontAwesomeIconStyle} + size={16} + /> <Text type="button" style={[styles.btnText, pal.text]}> Try again </Text> diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx index 33387f894..1fa03f4c7 100644 --- a/src/view/com/util/forms/DropdownButton.tsx +++ b/src/view/com/util/forms/DropdownButton.tsx @@ -37,7 +37,7 @@ export function DropdownButton({ menuWidth, children, }: { - type: DropdownButtonType + type?: DropdownButtonType style?: StyleProp<ViewStyle> items: DropdownItem[] label?: string diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index cedd3bc90..cdefc7123 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -30,6 +30,7 @@ export function AutoSizedImage({ }: { uri: string onPress?: () => void + onLongPress?: () => void style?: StyleProp<ImageStyle> containerStyle?: StyleProp<ViewStyle> }) { @@ -68,7 +69,7 @@ export function AutoSizedImage({ }) } - let calculatedStyle: StyleProp<ViewStyle> | undefined + let calculatedStyle: StyleProp<ImageStyle> | undefined if (imgInfo && containerInfo) { // imgInfo.height / imgInfo.width = x / containerInfo.width // x = imgInfo.height / imgInfo.width * containerInfo.width diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index dd0ea3775..97ad9d700 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -13,7 +13,7 @@ import {DELAY_PRESS_IN} from './constants' interface Dim { width: number - height: numberPressIn + height: number } export type ImageLayoutGridType = 'two' | 'three' | 'four' @@ -28,6 +28,7 @@ export function ImageLayoutGrid({ type: ImageLayoutGridType uris: string[] onPress?: (index: number) => void + onLongPress?: (index: number) => void style?: StyleProp<ViewStyle> }) { const [containerInfo, setContainerInfo] = React.useState<Dim | undefined>() @@ -64,6 +65,7 @@ function ImageLayoutGridInner({ type: ImageLayoutGridType uris: string[] onPress?: (index: number) => void + onLongPress?: (index: number) => void containerInfo: Dim }) { const size1 = React.useMemo<ImageStyle>(() => { @@ -91,14 +93,14 @@ function ImageLayoutGridInner({ <TouchableOpacity delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(0)} - onLongPress={() => onLongPress(0)}> + onLongPress={() => onLongPress?.(0)}> <Image source={{uri: uris[0]}} style={size1} /> </TouchableOpacity> <View style={styles.wSpace} /> <TouchableOpacity delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(1)} - onLongPress={() => onLongPress(1)}> + onLongPress={() => onLongPress?.(1)}> <Image source={{uri: uris[1]}} style={size1} /> </TouchableOpacity> </View> @@ -110,7 +112,7 @@ function ImageLayoutGridInner({ <TouchableOpacity delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(0)} - onLongPress={() => onLongPress(0)}> + onLongPress={() => onLongPress?.(0)}> <Image source={{uri: uris[0]}} style={size2} /> </TouchableOpacity> <View style={styles.wSpace} /> @@ -118,14 +120,14 @@ function ImageLayoutGridInner({ <TouchableOpacity delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(1)} - onLongPress={() => onLongPress(1)}> + onLongPress={() => onLongPress?.(1)}> <Image source={{uri: uris[1]}} style={size1} /> </TouchableOpacity> <View style={styles.hSpace} /> <TouchableOpacity delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(2)} - onLongPress={() => onLongPress(2)}> + onLongPress={() => onLongPress?.(2)}> <Image source={{uri: uris[2]}} style={size1} /> </TouchableOpacity> </View> @@ -139,14 +141,14 @@ function ImageLayoutGridInner({ <TouchableOpacity delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(0)} - onLongPress={() => onLongPress(0)}> + onLongPress={() => onLongPress?.(0)}> <Image source={{uri: uris[0]}} style={size1} /> </TouchableOpacity> <View style={styles.hSpace} /> <TouchableOpacity delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(1)} - onLongPress={() => onLongPress(1)}> + onLongPress={() => onLongPress?.(1)}> <Image source={{uri: uris[1]}} style={size1} /> </TouchableOpacity> </View> @@ -155,14 +157,14 @@ function ImageLayoutGridInner({ <TouchableOpacity delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(2)} - onLongPress={() => onLongPress(2)}> + onLongPress={() => onLongPress?.(2)}> <Image source={{uri: uris[2]}} style={size1} /> </TouchableOpacity> <View style={styles.hSpace} /> <TouchableOpacity delayPressIn={DELAY_PRESS_IN} onPress={() => onPress?.(3)} - onLongPress={() => onLongPress(3)}> + onLongPress={() => onLongPress?.(3)}> <Image source={{uri: uris[3]}} style={size1} /> </TouchableOpacity> </View> |