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

Fix all type errors

Browse source
This commit is contained in:
Paul Frazee 2023-01-26 11:25:52 -06:00
parent c4ba5e7fd5
commit 7e3f6f0306
45 changed files with 377 additions and 294 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/view/com/composer/ComposePost.tsx
View file

@ -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>

17
src/view/com/composer/PhotoCarouselPicker.tsx
View file

@ -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

7
src/view/com/discover/SuggestedFollows.tsx
View file

@ -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>

21
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx Normal file
View file

@ -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)

2
src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts
View file

@ -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) => {

2
src/view/com/lightbox/ImageViewing/hooks/usePanResponder.ts
View file

@ -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)

1
src/view/com/lightbox/ImageViewing/utils.ts
View file

@ -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)})
}

11
src/view/com/lightbox/Lightbox.tsx
View file

@ -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') {

13
src/view/com/login/CreateAccount.tsx
View file

@ -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.

17
src/view/com/login/Signin.tsx
View file

@ -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]}>

1
src/view/com/modals/EditProfile.tsx
View file

@ -108,7 +108,6 @@ export function Component({
<UserBanner
banner={userBanner}
onSelectNewBanner={onSelectNewBanner}
handle={profileView.handle}
/>
<View style={styles.avi}>
<UserAvatar

12
src/view/com/modals/Modal.tsx
View file

@ -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 />
}

22
src/view/com/modals/ServerInput.tsx
View file

@ -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>

27
src/view/com/notifications/FeedItem.tsx
View file

@ -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,

26
src/view/com/onboard/FeatureExplainer.tsx
View file

@ -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}

12
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -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>
)

6
src/view/com/post-thread/PostVotedBy.tsx
View file

@ -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 (

4
src/view/com/post/PostText.tsx
View file

@ -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>()

15
src/view/com/posts/FeedItem.tsx
View file

@ -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

6
src/view/com/profile/ProfileFollows.tsx
View file

@ -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}>

12
src/view/com/profile/ProfileHeader.tsx
View file

@ -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>

10
src/view/com/util/EmptyState.tsx
View file

@ -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>

2
src/view/com/util/LoadingPlaceholder.tsx
View file

@ -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}
/>

18
src/view/com/util/PostCtrls.tsx
View file

@ -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>

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

@ -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={[

11
src/view/com/util/error/ErrorMessage.tsx
View file

@ -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"

11
src/view/com/util/error/ErrorScreen.tsx
View file

@ -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>

2
src/view/com/util/forms/DropdownButton.tsx
View file

@ -37,7 +37,7 @@ export function DropdownButton({
menuWidth,
children,
}: {
type: DropdownButtonType
type?: DropdownButtonType
style?: StyleProp<ViewStyle>
items: DropdownItem[]
label?: string

3
src/view/com/util/images/AutoSizedImage.tsx
View file

@ -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

22
src/view/com/util/images/ImageLayoutGrid.tsx
View file

@ -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>