diff options
Diffstat (limited to 'src/view')
-rw-r--r-- | src/view/com/composer/useExternalLinkFetch.ts | 5 | ||||
-rw-r--r-- | src/view/com/lightbox/Lightbox.tsx | 12 | ||||
-rw-r--r-- | src/view/com/modals/CreateOrEditMuteList.tsx | 8 | ||||
-rw-r--r-- | src/view/com/modals/ListAddRemoveUser.tsx | 2 | ||||
-rw-r--r-- | src/view/com/profile/ProfileCard.tsx | 6 | ||||
-rw-r--r-- | src/view/com/profile/ProfileHeader.tsx | 4 | ||||
-rw-r--r-- | src/view/com/util/BlurView.web.tsx | 1 | ||||
-rw-r--r-- | src/view/com/util/Html.tsx | 28 | ||||
-rw-r--r-- | src/view/com/util/UserInfoText.tsx | 4 | ||||
-rw-r--r-- | src/view/screens/Settings.tsx | 13 | ||||
-rw-r--r-- | src/view/shell/desktop/LeftNav.tsx | 6 |
11 files changed, 56 insertions, 33 deletions
diff --git a/src/view/com/composer/useExternalLinkFetch.ts b/src/view/com/composer/useExternalLinkFetch.ts index 8d3b8cac2..91f4da059 100644 --- a/src/view/com/composer/useExternalLinkFetch.ts +++ b/src/view/com/composer/useExternalLinkFetch.ts @@ -1,5 +1,6 @@ import {useState, useEffect} from 'react' import {useStores} from 'state/index' +import {ImageModel} from 'state/models/media/image' import * as apilib from 'lib/api/index' import {getLinkMeta} from 'lib/link-meta/link-meta' import {getPostAsQuote, getFeedAsEmbed} from 'lib/link-meta/bsky' @@ -90,7 +91,9 @@ export function useExternalLinkFetch({ setExtLink({ ...extLink, isLoading: false, // done - localThumb, + localThumb: localThumb + ? new ImageModel(store, localThumb) + : undefined, }) }) return cleanup diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index c4bc88cf1..18440c55d 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -27,14 +27,14 @@ export const Lightbox = observer(function Lightbox() { } let altText = '' - let uri + let uri = '' if (lightbox.name === 'images') { - const opts = store.shell.activeLightbox as models.ImagesLightbox + const opts = lightbox as models.ImagesLightbox uri = opts.images[imageIndex].uri - altText = opts.images[imageIndex].alt - } else if (store.shell.activeLightbox.name === 'profile-image') { - const opts = store.shell.activeLightbox as models.ProfileImageLightbox - uri = opts.profileView.avatar + altText = opts.images[imageIndex].alt || '' + } else if (lightbox.name === 'profile-image') { + const opts = lightbox as models.ProfileImageLightbox + uri = opts.profileView.avatar || '' } return ( diff --git a/src/view/com/modals/CreateOrEditMuteList.tsx b/src/view/com/modals/CreateOrEditMuteList.tsx index 736deae74..5e5130b3c 100644 --- a/src/view/com/modals/CreateOrEditMuteList.tsx +++ b/src/view/com/modals/CreateOrEditMuteList.tsx @@ -44,11 +44,11 @@ export function Component({ const {track} = useAnalytics() const [isProcessing, setProcessing] = useState<boolean>(false) - const [name, setName] = useState<string>(list?.list.name || '') + const [name, setName] = useState<string>(list?.list?.name || '') const [description, setDescription] = useState<string>( - list?.list.description || '', + list?.list?.description || '', ) - const [avatar, setAvatar] = useState<string | undefined>(list?.list.avatar) + const [avatar, setAvatar] = useState<string | undefined>(list?.list?.avatar) const [newAvatar, setNewAvatar] = useState<RNImage | undefined | null>() const onPressCancel = useCallback(() => { @@ -59,7 +59,7 @@ export function Component({ async (img: RNImage | null) => { if (!img) { setNewAvatar(null) - setAvatar(null) + setAvatar(undefined) return } track('CreateMuteList:AvatarSelected') diff --git a/src/view/com/modals/ListAddRemoveUser.tsx b/src/view/com/modals/ListAddRemoveUser.tsx index 91fe67c17..e1677d25c 100644 --- a/src/view/com/modals/ListAddRemoveUser.tsx +++ b/src/view/com/modals/ListAddRemoveUser.tsx @@ -36,7 +36,7 @@ export const Component = observer( const pal = usePalette('default') const palPrimary = usePalette('primary') const palInverted = usePalette('inverted') - const [selected, setSelected] = React.useState([]) + const [selected, setSelected] = React.useState<string[]>([]) const listsList: ListsListModel = React.useMemo( () => new ListsListModel(store, store.me.did), diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index 42c4edef5..50b9f199c 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {StyleSheet, View} from 'react-native' import {observer} from 'mobx-react-lite' import {AppBskyActorDefs} from '@atproto/api' @@ -32,7 +32,9 @@ export const ProfileCard = observer( noBorder?: boolean followers?: AppBskyActorDefs.ProfileView[] | undefined overrideModeration?: boolean - renderButton?: (profile: AppBskyActorDefs.ProfileViewBasic) => JSX.Element + renderButton?: ( + profile: AppBskyActorDefs.ProfileViewBasic, + ) => React.ReactNode }) => { const store = useStores() const pal = usePalette('default') diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 9b4df0989..46a6bb235 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -587,9 +587,9 @@ const styles = StyleSheet.create({ // Word wrapping appears fine on // mobile but overflows on desktop handle: isNative - ? undefined + ? {} : { - // eslint-disable-next-line + // @ts-ignore web only -prf wordBreak: 'break-all', }, diff --git a/src/view/com/util/BlurView.web.tsx b/src/view/com/util/BlurView.web.tsx index 5267e6ade..d1fb4665f 100644 --- a/src/view/com/util/BlurView.web.tsx +++ b/src/view/com/util/BlurView.web.tsx @@ -15,6 +15,7 @@ export const BlurView = ({ }: React.PropsWithChildren<BlurViewProps>) => { // @ts-ignore using an RNW-specific attribute here -prf let blur = `blur(${blurAmount || 10}px` + // @ts-ignore using an RNW-specific attribute here -prf style = addStyle(style, {backdropFilter: blur, WebkitBackdropFilter: blur}) if (blurType === 'dark') { style = addStyle(style, styles.dark) diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx index dbf24a83a..8d3f29fb0 100644 --- a/src/view/com/util/Html.tsx +++ b/src/view/com/util/Html.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {StyleSheet, View} from 'react-native' import {usePalette} from 'lib/hooks/usePalette' import {Text} from './text/Text' @@ -10,6 +10,15 @@ import {isDesktopWeb} from 'platform/detection' * DSL. See for instance /locale/en/privacy-policy.tsx */ +interface IsChildProps { + isChild?: boolean +} + +// type ReactNodeWithIsChildProp = +// | React.ReactElement<IsChildProps> +// | React.ReactElement<IsChildProps>[] +// | React.ReactNode + export function H1({children}: React.PropsWithChildren<{}>) { const pal = usePalette('default') return ( @@ -55,10 +64,7 @@ export function P({children}: React.PropsWithChildren<{}>) { ) } -export function UL({ - children, - isChild, -}: React.PropsWithChildren<{isChild: boolean}>) { +export function UL({children, isChild}: React.PropsWithChildren<IsChildProps>) { return ( <View style={[styles.ul, isChild && styles.ulChild]}> {markChildProps(children)} @@ -66,10 +72,7 @@ export function UL({ ) } -export function OL({ - children, - isChild, -}: React.PropsWithChildren<{isChild: boolean}>) { +export function OL({children, isChild}: React.PropsWithChildren<IsChildProps>) { return ( <View style={[styles.ol, isChild && styles.olChild]}> {markChildProps(children)} @@ -122,10 +125,13 @@ export function EM({children}: React.PropsWithChildren<{}>) { ) } -function markChildProps(children) { +function markChildProps(children: React.ReactNode) { return React.Children.map(children, child => { if (React.isValidElement(child)) { - return React.cloneElement(child, {isChild: true}) + return React.cloneElement<IsChildProps>( + child as React.ReactElement<IsChildProps>, + {isChild: true}, + ) } return child }) diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx index b8f6e082e..b737b2b1e 100644 --- a/src/view/com/util/UserInfoText.tsx +++ b/src/view/com/util/UserInfoText.tsx @@ -70,7 +70,9 @@ export function UserInfoText({ numberOfLines={1} href={`/profile/${profile.handle}`} text={`${prefix || ''}${sanitizeDisplayName( - profile[attr] || profile.handle, + typeof profile[attr] === 'string' && profile[attr] + ? (profile[attr] as string) + : profile.handle, )}`} /> ) diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 428822339..798893855 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -38,6 +38,7 @@ import {NavigationProp} from 'lib/routes/types' import {isDesktopWeb} from 'platform/detection' import {pluralize} from 'lib/strings/helpers' import {formatCount} from 'view/com/util/numeric/format' +import {isColorMode} from 'state/models/ui/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'> export const SettingsScreen = withAuthRequired( @@ -299,20 +300,26 @@ export const SettingsScreen = withAuthRequired( value="system" label="System" left - onChange={(v: string) => store.shell.setColorMode(v)} + onChange={(v: string) => + store.shell.setColorMode(isColorMode(v) ? v : 'system') + } /> <SelectableBtn current={store.shell.colorMode} value="light" label="Light" - onChange={(v: string) => store.shell.setColorMode(v)} + onChange={(v: string) => + store.shell.setColorMode(isColorMode(v) ? v : 'system') + } /> <SelectableBtn current={store.shell.colorMode} value="dark" label="Dark" right - onChange={(v: string) => store.shell.setColorMode(v)} + onChange={(v: string) => + store.shell.setColorMode(isColorMode(v) ? v : 'system') + } /> </View> </View> diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 8c701ea4e..9f047418b 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -34,7 +34,7 @@ import { SatelliteDishIconSolid, } from 'lib/icons' import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers' -import {NavigationProp} from 'lib/routes/types' +import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types' import {router} from '../../../routes' const ProfileCard = observer(() => { @@ -100,7 +100,8 @@ const NavItem = observer( let isCurrent = currentRouteInfo.name === 'Profile' ? isTab(currentRouteInfo.name, pathName) && - currentRouteInfo.params.name === store.me.handle + (currentRouteInfo.params as CommonNavigatorParams['Profile']).name === + store.me.handle : isTab(currentRouteInfo.name, pathName) const {onPress} = useLinkProps({to: href}) const onPressWrapped = React.useCallback( @@ -122,6 +123,7 @@ const NavItem = observer( <PressableWithHover style={styles.navItemWrapper} hoverStyle={pal.viewLight} + // @ts-ignore the function signature differs on web -prf onPress={onPressWrapped} // @ts-ignore web only -prf href={href} |