mirror of
https://github.com/tooot-app/app
synced 2025-03-03 19:20:11 +01:00
Use svg icons instead of expo ones
Possibility to control `strokeWidth`
This commit is contained in:
Zhiyuan Zheng
parent
5a80359739
commit
dceaf8d25c
12
App.tsx
12
App.tsx
@ -57,7 +57,7 @@ enableScreens()
|
||||
const App: React.FC = () => {
|
||||
startingLog('log', 'rendering App')
|
||||
const [appLoaded, setAppLoaded] = useState(false)
|
||||
const [localCorrupt, setLocalCorrupt] = useState(false)
|
||||
const [localCorrupt, setLocalCorrupt] = useState<string>()
|
||||
|
||||
useEffect(() => {
|
||||
const onlineState = onlineManager.setEventListener(setOnline => {
|
||||
@ -118,16 +118,20 @@ const App: React.FC = () => {
|
||||
startingLog('log', 'local credential check passed')
|
||||
if (res.body.id !== store.getState().instances.local.account.id) {
|
||||
store.dispatch(resetLocal())
|
||||
setLocalCorrupt(true)
|
||||
setLocalCorrupt('')
|
||||
}
|
||||
setAppLoaded(true)
|
||||
})
|
||||
.catch(error => {
|
||||
startingLog('error', 'local credential check failed')
|
||||
if (error.status && typeof error.status === 'number') {
|
||||
if (
|
||||
error.status &&
|
||||
typeof error.status === 'number' &&
|
||||
error.status === 401
|
||||
) {
|
||||
store.dispatch(resetLocal())
|
||||
setLocalCorrupt(true)
|
||||
}
|
||||
setLocalCorrupt(error.data.error)
|
||||
setAppLoaded(true)
|
||||
})
|
||||
} else {
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^12.0.0",
|
||||
"@react-native-community/masked-view": "0.1.10",
|
||||
"@react-native-community/netinfo": "^5.9.9",
|
||||
"@react-native-community/segmented-control": "2.2.1",
|
||||
@ -50,6 +49,7 @@
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
|
||||
"react-native-animated-spinkit": "^1.4.2",
|
||||
"react-native-expo-image-cache": "^4.1.0",
|
||||
"react-native-feather": "^1.0.2",
|
||||
"react-native-gesture-handler": "~1.8.0",
|
||||
"react-native-htmlview": "^0.16.0",
|
||||
"react-native-image-zoom-viewer": "^3.0.1",
|
||||
|
||||
2
src/@types/app.d.ts
vendored
2
src/@types/app.d.ts
vendored
@ -66,7 +66,7 @@ declare namespace QueryKey {
|
||||
{
|
||||
hashtag?: Mastodon.Tag['name']
|
||||
list?: Mastodon.List['id']
|
||||
toot?: Mastodon.Status
|
||||
toot?: Mastodon.Status['id']
|
||||
account?: Mastodon.Account['id']
|
||||
}
|
||||
]
|
||||
|
||||
3
src/@types/untyped.d.ts
vendored
3
src/@types/untyped.d.ts
vendored
@ -1,3 +1,4 @@
|
||||
declare module 'gl-react-blurhash'
|
||||
declare module 'react-native-toast-message'
|
||||
declare module 'react-native-feather'
|
||||
declare module 'react-native-htmlview'
|
||||
declare module 'react-native-toast-message'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import client from '@api/client'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Icon from '@components/Icon'
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
|
||||
import {
|
||||
NavigationContainer,
|
||||
@ -37,7 +37,7 @@ export type RootStackParamList = {
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
localCorrupt: boolean
|
||||
localCorrupt?: string
|
||||
}
|
||||
|
||||
const Index: React.FC<Props> = ({ localCorrupt }) => {
|
||||
@ -71,7 +71,7 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
|
||||
? toast({
|
||||
type: 'error',
|
||||
message: '登录已过期',
|
||||
description: '请重新登录',
|
||||
description: localCorrupt.length ? localCorrupt : undefined,
|
||||
autoHide: false
|
||||
})
|
||||
: undefined
|
||||
@ -171,27 +171,27 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
|
||||
let updateColor: string = color
|
||||
switch (route.name) {
|
||||
case 'Screen-Local':
|
||||
name = 'home'
|
||||
name = 'Home'
|
||||
break
|
||||
case 'Screen-Public':
|
||||
name = 'globe'
|
||||
name = 'Globe'
|
||||
!focused && (updateColor = theme.secondary)
|
||||
break
|
||||
case 'Screen-Post':
|
||||
name = 'plus'
|
||||
name = 'Plus'
|
||||
break
|
||||
case 'Screen-Notifications':
|
||||
name = 'bell'
|
||||
name = 'Bell'
|
||||
break
|
||||
case 'Screen-Me':
|
||||
name = focused ? 'meh' : 'smile'
|
||||
name = focused ? 'Meh' : 'Smile'
|
||||
!focused && (updateColor = theme.secondary)
|
||||
break
|
||||
default:
|
||||
name = 'alert-octagon'
|
||||
name = 'AlertOctagon'
|
||||
break
|
||||
}
|
||||
return <Feather name={name} size={size} color={updateColor} />
|
||||
return <Icon name={name} size={size} color={updateColor} />
|
||||
}
|
||||
}),
|
||||
[]
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import layoutAnimation from '@utils/styles/layoutAnimation'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useEffect, useMemo } from 'react'
|
||||
import {
|
||||
Pressable,
|
||||
@ -9,9 +12,6 @@ import {
|
||||
ViewStyle
|
||||
} from 'react-native'
|
||||
import { Chase } from 'react-native-animated-spinkit'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import layoutAnimation from '@root/utils/styles/layoutAnimation'
|
||||
|
||||
export interface Props {
|
||||
style?: StyleProp<ViewStyle>
|
||||
@ -23,6 +23,7 @@ export interface Props {
|
||||
destructive?: boolean
|
||||
disabled?: boolean
|
||||
|
||||
strokeWidth?: number
|
||||
size?: 'S' | 'M' | 'L'
|
||||
spacing?: 'XS' | 'S' | 'M' | 'L'
|
||||
round?: boolean
|
||||
@ -38,6 +39,7 @@ const Button: React.FC<Props> = ({
|
||||
loading = false,
|
||||
destructive = false,
|
||||
disabled = false,
|
||||
strokeWidth,
|
||||
size = 'M',
|
||||
spacing = 'S',
|
||||
round = false,
|
||||
@ -78,12 +80,12 @@ const Button: React.FC<Props> = ({
|
||||
case 'icon':
|
||||
return (
|
||||
<>
|
||||
<Feather
|
||||
name={content as any}
|
||||
size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
|
||||
<Icon
|
||||
name={content}
|
||||
color={colorContent}
|
||||
strokeWidth={strokeWidth}
|
||||
style={{ opacity: loading ? 0 : 1 }}
|
||||
testID='icon'
|
||||
size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
|
||||
/>
|
||||
{loading && loadingSpinkit}
|
||||
</>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import { Pressable, StyleSheet, Text } from 'react-native'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useMemo } from 'react'
|
||||
import { Pressable, StyleSheet, Text } from 'react-native'
|
||||
|
||||
export interface Props {
|
||||
type?: 'icon' | 'text'
|
||||
@ -18,9 +18,9 @@ const HeaderLeft: React.FC<Props> = ({ type = 'icon', content, onPress }) => {
|
||||
switch (type) {
|
||||
case 'icon':
|
||||
return (
|
||||
<Feather
|
||||
name={content || ('chevron-left' as any)}
|
||||
<Icon
|
||||
color={theme.primary}
|
||||
name={content || 'ChevronLeft'}
|
||||
size={StyleConstants.Spacing.M * 1.25}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useMemo } from 'react'
|
||||
import { Pressable, StyleSheet, Text, View } from 'react-native'
|
||||
import { Chase } from 'react-native-animated-spinkit'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
|
||||
export interface Props {
|
||||
type?: 'icon' | 'text'
|
||||
content?: string
|
||||
content: string
|
||||
|
||||
loading?: boolean
|
||||
disabled?: boolean
|
||||
@ -41,11 +41,11 @@ const HeaderRight: React.FC<Props> = ({
|
||||
case 'icon':
|
||||
return (
|
||||
<>
|
||||
<Feather
|
||||
name={content as any}
|
||||
color={disabled ? theme.secondary : theme.primary}
|
||||
size={StyleConstants.Spacing.M * 1.25}
|
||||
<Icon
|
||||
name={content}
|
||||
style={{ opacity: loading ? 0 : 1 }}
|
||||
size={StyleConstants.Spacing.M * 1.25}
|
||||
color={disabled ? theme.secondary : theme.primary}
|
||||
/>
|
||||
{loading && loadingSpinkit}
|
||||
</>
|
||||
|
||||
45
src/components/Icon.tsx
Normal file
45
src/components/Icon.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import React, { createElement } from 'react'
|
||||
import { StyleProp, View, ViewStyle } from 'react-native'
|
||||
import * as FeatherIcon from 'react-native-feather'
|
||||
|
||||
export interface Props {
|
||||
name: string
|
||||
size: number
|
||||
color: string
|
||||
strokeWidth?: number
|
||||
inline?: boolean // When used in line of text, need to drag it down
|
||||
style?: StyleProp<ViewStyle>
|
||||
}
|
||||
|
||||
const Icon: React.FC<Props> = ({
|
||||
name,
|
||||
size,
|
||||
color,
|
||||
strokeWidth = 2,
|
||||
inline = false,
|
||||
style
|
||||
}) => {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
style,
|
||||
{
|
||||
width: size,
|
||||
height: size,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: inline ? -size * 0.125 : undefined
|
||||
}
|
||||
]}
|
||||
>
|
||||
{createElement(FeatherIcon[name], {
|
||||
width: size,
|
||||
height: size,
|
||||
color,
|
||||
strokeWidth
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default Icon
|
||||
@ -1,4 +1,4 @@
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { ColorDefinitions } from '@utils/styles/themes'
|
||||
@ -18,7 +18,7 @@ export interface Props {
|
||||
switchDisabled?: boolean
|
||||
switchOnValueChange?: () => void
|
||||
|
||||
iconBack?: 'chevron-right' | 'check'
|
||||
iconBack?: 'ChevronRight' | 'Check'
|
||||
iconBackColor?: ColorDefinitions
|
||||
|
||||
loading?: boolean
|
||||
@ -63,7 +63,7 @@ const MenuRow: React.FC<Props> = ({
|
||||
<View style={styles.core}>
|
||||
<View style={styles.front}>
|
||||
{iconFront && (
|
||||
<Feather
|
||||
<Icon
|
||||
name={iconFront}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
color={theme[iconFrontColor]}
|
||||
@ -116,7 +116,7 @@ const MenuRow: React.FC<Props> = ({
|
||||
) : null}
|
||||
{iconBack ? (
|
||||
<>
|
||||
<Feather
|
||||
<Icon
|
||||
name={iconBack}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
color={theme[iconBackColor]}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import Icon from '@components/Icon'
|
||||
import openLink from '@components/openLink'
|
||||
import ParseEmojis from '@components/Parse/Emojis'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import layoutAnimation from '@utils/styles/layoutAnimation'
|
||||
@ -96,10 +96,11 @@ const renderNode = ({
|
||||
}
|
||||
>
|
||||
{!shouldBeTag ? (
|
||||
<Feather
|
||||
name='external-link'
|
||||
size={StyleConstants.Font.Size[size]}
|
||||
<Icon
|
||||
inline
|
||||
color={theme.blue}
|
||||
name='ExternalLink'
|
||||
size={StyleConstants.Font.Size[size]}
|
||||
/>
|
||||
) : null}
|
||||
{content || (showFullLink ? href : domain[1])}
|
||||
@ -166,12 +167,14 @@ const ParseHTML: React.FC<Props> = ({
|
||||
|
||||
const [heightOriginal, setHeightOriginal] = useState<number>()
|
||||
const [heightTruncated, setHeightTruncated] = useState<number>()
|
||||
const [allowExpand, setAllowExpand] = useState(
|
||||
numberOfLines === 0 ? true : undefined
|
||||
)
|
||||
const [allowExpand, setAllowExpand] = useState(false)
|
||||
const [showAllText, setShowAllText] = useState(false)
|
||||
|
||||
const calNumberOfLines = useMemo(() => {
|
||||
if (numberOfLines === 0) {
|
||||
// For spoilers without calculation
|
||||
return showAllText ? undefined : 1
|
||||
} else {
|
||||
if (heightOriginal) {
|
||||
if (!heightTruncated) {
|
||||
return numberOfLines
|
||||
@ -185,10 +188,15 @@ const ParseHTML: React.FC<Props> = ({
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}, [heightOriginal, heightTruncated, allowExpand, showAllText])
|
||||
|
||||
const onLayout = useCallback(
|
||||
({ nativeEvent }) => {
|
||||
if (numberOfLines === 0) {
|
||||
// For spoilers without calculation
|
||||
setAllowExpand(true)
|
||||
} else {
|
||||
if (!heightOriginal) {
|
||||
setHeightOriginal(nativeEvent.layout.height)
|
||||
} else {
|
||||
@ -200,6 +208,7 @@ const ParseHTML: React.FC<Props> = ({
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[heightOriginal, heightTruncated]
|
||||
)
|
||||
@ -214,7 +223,7 @@ const ParseHTML: React.FC<Props> = ({
|
||||
}}
|
||||
children={children}
|
||||
numberOfLines={calNumberOfLines}
|
||||
onLayout={allowExpand === undefined ? onLayout : undefined}
|
||||
onLayout={onLayout}
|
||||
/>
|
||||
{allowExpand ? (
|
||||
<Pressable
|
||||
|
||||
@ -86,7 +86,7 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
|
||||
</View>
|
||||
),
|
||||
headerRight: () => (
|
||||
<HeaderRight content='search' onPress={onPressSearch} />
|
||||
<HeaderRight content='Search' onPress={onPressSearch} />
|
||||
)
|
||||
})
|
||||
}}
|
||||
|
||||
@ -24,10 +24,10 @@ export type TimelineData =
|
||||
|
||||
export interface Props {
|
||||
page: App.Pages
|
||||
hashtag?: string
|
||||
list?: string
|
||||
toot?: Mastodon.Status
|
||||
account?: string
|
||||
hashtag?: Mastodon.Tag['name']
|
||||
list?: Mastodon.List['id']
|
||||
toot?: Mastodon.Status['id']
|
||||
account?: Mastodon.Account['id']
|
||||
disableRefresh?: boolean
|
||||
disableInfinity?: boolean
|
||||
}
|
||||
@ -134,7 +134,7 @@ const Timeline: React.FC<Props> = ({
|
||||
flattenPinnedLength[0] && {
|
||||
pinnedLength: flattenPinnedLength[0]
|
||||
})}
|
||||
{...(toot && toot.id === item.id && { highlighted: true })}
|
||||
{...(toot === item.id && { highlighted: true })}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -144,7 +144,7 @@ const Timeline: React.FC<Props> = ({
|
||||
const ItemSeparatorComponent = useCallback(
|
||||
({ leadingItem }) => (
|
||||
<TimelineSeparator
|
||||
{...(toot && toot.id === leadingItem.id && { highlighted: true })}
|
||||
{...(toot === leadingItem.id && { highlighted: true })}
|
||||
/>
|
||||
),
|
||||
[]
|
||||
|
||||
@ -44,6 +44,7 @@ const TimelineDefault: React.FC<Props> = ({
|
||||
}),
|
||||
[]
|
||||
)
|
||||
|
||||
return (
|
||||
<Pressable style={styles.statusView} onPress={onPress}>
|
||||
{item.reblog ? (
|
||||
@ -57,11 +58,11 @@ const TimelineDefault: React.FC<Props> = ({
|
||||
{...(!isRemotePublic && { queryKey })}
|
||||
account={actualStatus.account}
|
||||
/>
|
||||
<TimelineHeaderDefault
|
||||
{/* <TimelineHeaderDefault
|
||||
{...(!isRemotePublic && { queryKey })}
|
||||
status={actualStatus}
|
||||
sameAccount={actualStatus.account.id === localAccountId}
|
||||
/>
|
||||
/> */}
|
||||
</View>
|
||||
|
||||
<View
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import Button from '@components/Button'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useMemo } from 'react'
|
||||
@ -26,8 +26,8 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
|
||||
case 'error':
|
||||
return (
|
||||
<>
|
||||
<Feather
|
||||
name='frown'
|
||||
<Icon
|
||||
name='Frown'
|
||||
size={StyleConstants.Font.Size.L}
|
||||
color={theme.primary}
|
||||
/>
|
||||
@ -44,8 +44,8 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
|
||||
case 'success':
|
||||
return (
|
||||
<>
|
||||
<Feather
|
||||
name='smartphone'
|
||||
<Icon
|
||||
name='Smartphone'
|
||||
size={StyleConstants.Font.Size.L}
|
||||
color={theme.primary}
|
||||
/>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import Icon from '@components/Icon'
|
||||
import { ParseEmojis } from '@components/Parse'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
@ -37,8 +37,8 @@ const TimelineActioned: React.FC<Props> = ({
|
||||
case 'pinned':
|
||||
return (
|
||||
<>
|
||||
<Feather
|
||||
name='anchor'
|
||||
<Icon
|
||||
name='Anchor'
|
||||
size={StyleConstants.Font.Size.S}
|
||||
color={iconColor}
|
||||
style={styles.icon}
|
||||
@ -50,8 +50,8 @@ const TimelineActioned: React.FC<Props> = ({
|
||||
case 'favourite':
|
||||
return (
|
||||
<>
|
||||
<Feather
|
||||
name='heart'
|
||||
<Icon
|
||||
name='Heart'
|
||||
size={StyleConstants.Font.Size.S}
|
||||
color={iconColor}
|
||||
style={styles.icon}
|
||||
@ -65,8 +65,8 @@ const TimelineActioned: React.FC<Props> = ({
|
||||
case 'follow':
|
||||
return (
|
||||
<>
|
||||
<Feather
|
||||
name='user-plus'
|
||||
<Icon
|
||||
name='UserPlus'
|
||||
size={StyleConstants.Font.Size.S}
|
||||
color={iconColor}
|
||||
style={styles.icon}
|
||||
@ -80,8 +80,8 @@ const TimelineActioned: React.FC<Props> = ({
|
||||
case 'poll':
|
||||
return (
|
||||
<>
|
||||
<Feather
|
||||
name='bar-chart-2'
|
||||
<Icon
|
||||
name='BarChart2'
|
||||
size={StyleConstants.Font.Size.S}
|
||||
color={iconColor}
|
||||
style={styles.icon}
|
||||
@ -93,8 +93,8 @@ const TimelineActioned: React.FC<Props> = ({
|
||||
case 'reblog':
|
||||
return (
|
||||
<>
|
||||
<Feather
|
||||
name='repeat'
|
||||
<Icon
|
||||
name='Repeat'
|
||||
size={StyleConstants.Font.Size.S}
|
||||
color={iconColor}
|
||||
style={styles.icon}
|
||||
@ -118,12 +118,13 @@ const TimelineActioned: React.FC<Props> = ({
|
||||
const styles = StyleSheet.create({
|
||||
actioned: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: StyleConstants.Spacing.S,
|
||||
paddingLeft: StyleConstants.Avatar.M - StyleConstants.Font.Size.S,
|
||||
paddingRight: StyleConstants.Spacing.Global.PagePadding
|
||||
},
|
||||
icon: {
|
||||
paddingRight: StyleConstants.Spacing.S
|
||||
marginRight: StyleConstants.Spacing.S
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import client from '@api/client'
|
||||
import haptics from '@components/haptics'
|
||||
import Icon from '@components/Icon'
|
||||
import { TimelineData } from '@components/Timelines/Timeline'
|
||||
import { toast } from '@components/toast'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
@ -171,8 +171,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
|
||||
const childrenReply = useMemo(
|
||||
() => (
|
||||
<>
|
||||
<Feather
|
||||
name='message-circle'
|
||||
<Icon
|
||||
name='MessageCircle'
|
||||
color={iconColor}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
/>
|
||||
@ -193,8 +193,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
|
||||
)
|
||||
const childrenReblog = useMemo(
|
||||
() => (
|
||||
<Feather
|
||||
name='repeat'
|
||||
<Icon
|
||||
name='Repeat'
|
||||
color={
|
||||
status.visibility === 'private' || status.visibility === 'direct'
|
||||
? theme.disabled
|
||||
@ -207,8 +207,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
|
||||
)
|
||||
const childrenFavourite = useMemo(
|
||||
() => (
|
||||
<Feather
|
||||
name='heart'
|
||||
<Icon
|
||||
name='Heart'
|
||||
color={iconColorAction(status.favourited)}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
/>
|
||||
@ -217,8 +217,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
|
||||
)
|
||||
const childrenBookmark = useMemo(
|
||||
() => (
|
||||
<Feather
|
||||
name='bookmark'
|
||||
<Icon
|
||||
name='Bookmark'
|
||||
color={iconColorAction(status.bookmarked)}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
/>
|
||||
@ -227,8 +227,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
|
||||
)
|
||||
const childrenShare = useMemo(
|
||||
() => (
|
||||
<Feather
|
||||
name='share-2'
|
||||
<Icon
|
||||
name='Share2'
|
||||
color={iconColor}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
/>
|
||||
|
||||
@ -117,7 +117,7 @@ const TimelineAttachment: React.FC<Props> = ({ status }) => {
|
||||
) : (
|
||||
<Button
|
||||
type='icon'
|
||||
content='eye-off'
|
||||
content='EyeOff'
|
||||
round
|
||||
overlay
|
||||
onPress={onPressShow}
|
||||
|
||||
@ -67,7 +67,7 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
|
||||
)}
|
||||
<Button
|
||||
type='icon'
|
||||
content={audioPlaying ? 'pause-circle' : 'play-circle'}
|
||||
content={audioPlaying ? 'PauseCircle' : 'PlayCircle'}
|
||||
size='L'
|
||||
round
|
||||
overlay
|
||||
|
||||
@ -64,7 +64,7 @@ const AttachmentVideo: React.FC<Props> = ({ sensitiveShown, video }) => {
|
||||
) : (
|
||||
<Button
|
||||
type='icon'
|
||||
content='play-circle'
|
||||
content='PlayCircle'
|
||||
size='L'
|
||||
round
|
||||
overlay
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
@ -22,8 +22,9 @@ const TimelineEnd: React.FC<Props> = ({ hasNextPage }) => {
|
||||
<Trans
|
||||
i18nKey='timeline:shared.end.message' // optional -> fallbacks to defaults if not provided
|
||||
components={[
|
||||
<Feather
|
||||
name='coffee'
|
||||
<Icon
|
||||
inline
|
||||
name='Coffee'
|
||||
size={StyleConstants.Font.Size.S}
|
||||
color={theme.secondary}
|
||||
/>
|
||||
@ -43,8 +44,7 @@ const styles = StyleSheet.create({
|
||||
padding: StyleConstants.Spacing.M
|
||||
},
|
||||
text: {
|
||||
...StyleConstants.FontStyle.S,
|
||||
marginLeft: StyleConstants.Spacing.S
|
||||
...StyleConstants.FontStyle.S
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import client from '@api/client'
|
||||
import haptics from '@components/haptics'
|
||||
import Icon from '@components/Icon'
|
||||
import { toast } from '@components/toast'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useCallback, useMemo } from 'react'
|
||||
@ -66,8 +66,8 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
|
||||
|
||||
const actionChildren = useMemo(
|
||||
() => (
|
||||
<Feather
|
||||
name='trash'
|
||||
<Icon
|
||||
name='Trash'
|
||||
color={theme.secondary}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
/>
|
||||
@ -86,7 +86,7 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
|
||||
/>
|
||||
) : null}
|
||||
{conversation.unread && (
|
||||
<Feather name='circle' color={theme.blue} style={styles.unread} />
|
||||
<Icon name='Circle' color={theme.blue} style={styles.unread} />
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import BottomSheet from '@components/BottomSheet'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Icon from '@components/Icon'
|
||||
import { getLocalUrl } from '@utils/slices/instancesSlice'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
@ -9,10 +9,10 @@ import HeaderDefaultActionsStatus from '@components/Timelines/Timeline/Shared/He
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
import { Pressable, StyleSheet, View } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
import HeaderSharedApplication from './HeaderShared/Application'
|
||||
import HeaderSharedVisibility from './HeaderShared/Visibility'
|
||||
import HeaderSharedCreated from './HeaderShared/Created'
|
||||
import HeaderSharedAccount from './HeaderShared/Account'
|
||||
import HeaderSharedApplication from './HeaderShared/Application'
|
||||
import HeaderSharedCreated from './HeaderShared/Created'
|
||||
import HeaderSharedVisibility from './HeaderShared/Visibility'
|
||||
|
||||
export interface Props {
|
||||
queryKey?: QueryKey.Timeline
|
||||
@ -37,8 +37,8 @@ const TimelineHeaderDefault: React.FC<Props> = ({
|
||||
|
||||
const pressableAction = useMemo(
|
||||
() => (
|
||||
<Feather
|
||||
name='more-horizontal'
|
||||
<Icon
|
||||
name='MoreHorizontal'
|
||||
color={theme.secondary}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
/>
|
||||
@ -102,8 +102,7 @@ const TimelineHeaderDefault: React.FC<Props> = ({
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline'
|
||||
flexDirection: 'row'
|
||||
},
|
||||
accountAndMeta: {
|
||||
flex: 4
|
||||
|
||||
@ -84,7 +84,7 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
|
||||
setBottomSheetVisible(false)
|
||||
mutate({ type: 'mute' })
|
||||
}}
|
||||
iconFront='eye-off'
|
||||
iconFront='EyeOff'
|
||||
title={t('timeline:shared.header.default.actions.account.mute.button', {
|
||||
acct: account.acct
|
||||
})}
|
||||
@ -94,7 +94,7 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
|
||||
setBottomSheetVisible(false)
|
||||
mutate({ type: 'block' })
|
||||
}}
|
||||
iconFront='x-circle'
|
||||
iconFront='XCircle'
|
||||
title={t(
|
||||
'timeline:shared.header.default.actions.account.block.button',
|
||||
{
|
||||
@ -107,7 +107,7 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
|
||||
setBottomSheetVisible(false)
|
||||
mutate({ type: 'reports' })
|
||||
}}
|
||||
iconFront='flag'
|
||||
iconFront='Flag'
|
||||
title={t(
|
||||
'timeline:shared.header.default.actions.account.report.button',
|
||||
{
|
||||
|
||||
@ -54,7 +54,7 @@ const HeaderDefaultActionsDomain: React.FC<Props> = ({
|
||||
setBottomSheetVisible(false)
|
||||
mutate()
|
||||
}}
|
||||
iconFront='cloud-off'
|
||||
iconFront='CloudOff'
|
||||
title={t(`timeline:shared.header.default.actions.domain.block.button`, {
|
||||
domain
|
||||
})}
|
||||
|
||||
@ -128,7 +128,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
|
||||
setBottomSheetVisible(false)
|
||||
mutate({ type: 'delete' })
|
||||
}}
|
||||
iconFront='trash'
|
||||
iconFront='Trash'
|
||||
title={t('timeline:shared.header.default.actions.status.delete.button')}
|
||||
/>
|
||||
<MenuRow
|
||||
@ -174,7 +174,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
|
||||
]
|
||||
)
|
||||
}}
|
||||
iconFront='trash'
|
||||
iconFront='Trash'
|
||||
title={t('timeline:shared.header.default.actions.status.edit.button')}
|
||||
/>
|
||||
<MenuRow
|
||||
@ -182,7 +182,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
|
||||
setBottomSheetVisible(false)
|
||||
mutate({ type: 'mute', state: status.muted })
|
||||
}}
|
||||
iconFront='volume-x'
|
||||
iconFront='VolumeX'
|
||||
title={
|
||||
status.muted
|
||||
? t(
|
||||
@ -200,7 +200,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
|
||||
setBottomSheetVisible(false)
|
||||
mutate({ type: 'pin', state: status.pinned })
|
||||
}}
|
||||
iconFront='anchor'
|
||||
iconFront='Anchor'
|
||||
title={
|
||||
status.pinned
|
||||
? t(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import client from '@api/client'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import haptics from '@components/haptics'
|
||||
import Icon from '@components/Icon'
|
||||
import { toast } from '@components/toast'
|
||||
import { relationshipFetch } from '@utils/fetches/relationshipFetch'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
@ -9,10 +9,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Pressable, StyleSheet, View } from 'react-native'
|
||||
import { Chase } from 'react-native-animated-spinkit'
|
||||
import { useQuery } from 'react-query'
|
||||
import HeaderSharedApplication from './HeaderShared/Application'
|
||||
import HeaderSharedVisibility from './HeaderShared/Visibility'
|
||||
import HeaderSharedCreated from './HeaderShared/Created'
|
||||
import HeaderSharedAccount from './HeaderShared/Account'
|
||||
import HeaderSharedApplication from './HeaderShared/Application'
|
||||
import HeaderSharedCreated from './HeaderShared/Created'
|
||||
import HeaderSharedVisibility from './HeaderShared/Visibility'
|
||||
|
||||
export interface Props {
|
||||
notification: Mastodon.Notification
|
||||
@ -73,19 +73,19 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
|
||||
case 'success':
|
||||
return (
|
||||
<Pressable onPress={relationshipOnPress}>
|
||||
<Feather
|
||||
<Icon
|
||||
name={
|
||||
updateData
|
||||
? updateData.following
|
||||
? 'user-check'
|
||||
? 'UserCheck'
|
||||
: updateData.requested
|
||||
? 'loader'
|
||||
: 'user-plus'
|
||||
? 'Loader'
|
||||
: 'UserPlus'
|
||||
: data!.following
|
||||
? 'user-check'
|
||||
? 'UserCheck'
|
||||
: data!.requested
|
||||
? 'loader'
|
||||
: 'user-plus'
|
||||
? 'Loader'
|
||||
: 'UserPlus'
|
||||
}
|
||||
color={
|
||||
updateData
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
@ -12,8 +12,8 @@ const HeaderSharedVisibility: React.FC<Props> = ({ visibility }) => {
|
||||
const { theme } = useTheme()
|
||||
|
||||
return visibility && visibility === 'private' ? (
|
||||
<Feather
|
||||
name='lock'
|
||||
<Icon
|
||||
name='Lock'
|
||||
size={StyleConstants.Font.Size.S}
|
||||
color={theme.secondary}
|
||||
style={styles.visibility}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import client from '@api/client'
|
||||
import Button from '@components/Button'
|
||||
import haptics from '@components/haptics'
|
||||
import Icon from '@components/Icon'
|
||||
import relativeTime from '@components/relativeTime'
|
||||
import { TimelineData } from '@components/Timelines/Timeline'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { ParseEmojis } from '@root/components/Parse'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
@ -151,8 +151,8 @@ const TimelinePoll: React.FC<Props> = ({
|
||||
const isSelected = useCallback(
|
||||
(index: number): any =>
|
||||
allOptions[index]
|
||||
? `check-${poll.multiple ? 'square' : 'circle'}`
|
||||
: `${poll.multiple ? 'square' : 'circle'}`,
|
||||
? `Check${poll.multiple ? 'Square' : 'Circle'}`
|
||||
: `${poll.multiple ? 'Square' : 'Circle'}`,
|
||||
[allOptions]
|
||||
)
|
||||
|
||||
@ -160,11 +160,11 @@ const TimelinePoll: React.FC<Props> = ({
|
||||
return poll.options.map((option, index) => (
|
||||
<View key={index} style={styles.optionContainer}>
|
||||
<View style={styles.optionContent}>
|
||||
<Feather
|
||||
<Icon
|
||||
style={styles.optionSelection}
|
||||
name={
|
||||
`${poll.own_votes?.includes(index) ? 'check-' : ''}${
|
||||
poll.multiple ? 'square' : 'circle'
|
||||
`${poll.own_votes?.includes(index) ? 'Check' : ''}${
|
||||
poll.multiple ? 'Square' : 'Circle'
|
||||
}` as any
|
||||
}
|
||||
size={StyleConstants.Font.Size.M}
|
||||
@ -224,7 +224,7 @@ const TimelinePoll: React.FC<Props> = ({
|
||||
}}
|
||||
>
|
||||
<View style={[styles.optionContent]}>
|
||||
<Feather
|
||||
<Icon
|
||||
style={styles.optionSelection}
|
||||
name={isSelected(index)}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import Toast from 'react-native-toast-message'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
|
||||
export interface Params {
|
||||
type: 'success' | 'error' | 'warning'
|
||||
@ -49,9 +49,9 @@ const toast = ({
|
||||
const ToastBase = ({ config }: { config: Config }) => {
|
||||
const { theme } = useTheme()
|
||||
const iconSet = {
|
||||
success: 'check-circle',
|
||||
error: 'x-circle',
|
||||
warning: 'alert-circle'
|
||||
success: 'CheckCircle',
|
||||
error: 'XCircle',
|
||||
warning: 'AlertCircle'
|
||||
}
|
||||
enum colorMapping {
|
||||
success = 'blue',
|
||||
@ -67,11 +67,10 @@ const ToastBase = ({ config }: { config: Config }) => {
|
||||
]}
|
||||
>
|
||||
<View style={styles.container}>
|
||||
<Feather
|
||||
// @ts-ignore
|
||||
<Icon
|
||||
name={iconSet[config.type]}
|
||||
size={StyleConstants.Font.Size.M}
|
||||
color={theme[colorMapping[config.type]]}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
/>
|
||||
<View style={styles.texts}>
|
||||
<Text style={[styles.text1, { color: theme.primary }]}>
|
||||
@ -104,7 +103,7 @@ const styles = StyleSheet.create({
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: StyleConstants.Spacing.L
|
||||
padding: StyleConstants.Spacing.M
|
||||
},
|
||||
texts: {
|
||||
marginLeft: StyleConstants.Spacing.S
|
||||
@ -114,7 +113,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
text2: {
|
||||
...StyleConstants.FontStyle.S,
|
||||
marginTop: StyleConstants.Spacing.S
|
||||
marginTop: StyleConstants.Spacing.XS
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -57,16 +57,16 @@ export default {
|
||||
account: {
|
||||
heading: '关于用户',
|
||||
mute: {
|
||||
function: '隐藏 {{acct}} 的嘟文',
|
||||
button: '隐藏 {{acct}} 的嘟文'
|
||||
function: '隐藏 @{{acct}} 的嘟文',
|
||||
button: '隐藏 @{{acct}} 的嘟文'
|
||||
},
|
||||
block: {
|
||||
function: '屏蔽 {{acct}}',
|
||||
button: '屏蔽 {{acct}}'
|
||||
function: '屏蔽 @{{acct}}',
|
||||
button: '屏蔽 @{{acct}}'
|
||||
},
|
||||
report: {
|
||||
function: '举报 {{acct}}',
|
||||
button: '举报 {{acct}}'
|
||||
function: '举报 @{{acct}}',
|
||||
button: '举报 @{{acct}}'
|
||||
}
|
||||
},
|
||||
domain: {
|
||||
|
||||
@ -15,7 +15,7 @@ const ScreenMeLists: React.FC = () => {
|
||||
return data?.map((d: Mastodon.List, i: number) => (
|
||||
<MenuRow
|
||||
key={i}
|
||||
iconFront='list'
|
||||
iconFront='List'
|
||||
title={d.title}
|
||||
onPress={() =>
|
||||
navigation.navigate('Screen-Me-Lists-List', {
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { Animated, ScrollView } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
import { getLocalUrl } from '@utils/slices/instancesSlice'
|
||||
|
||||
import { useScrollToTop } from '@react-navigation/native'
|
||||
import Collections from '@screens/Me/Root/Collections'
|
||||
import Login from '@screens/Me/Root/Login'
|
||||
import MyInfo from '@screens/Me/Root/MyInfo'
|
||||
import Collections from '@screens/Me/Root/Collections'
|
||||
import Settings from '@screens/Me/Root/Settings'
|
||||
import Logout from '@screens/Me/Root/Logout'
|
||||
import { useScrollToTop } from '@react-navigation/native'
|
||||
import { AccountState } from '../Shared/Account'
|
||||
import AccountNav from '../Shared/Account/Nav'
|
||||
import AccountNav from '@screens/Shared/Account/Nav'
|
||||
import accountReducer from '@screens/Shared/Account/utils/reducer'
|
||||
import accountInitialState from '@screens/Shared/Account/utils/initialState'
|
||||
import AccountContext from '@screens/Shared/Account/utils/createContext'
|
||||
import { getLocalUrl } from '@utils/slices/instancesSlice'
|
||||
import React, { useReducer, useRef, useState } from 'react'
|
||||
import { Animated, ScrollView } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
const ScreenMeRoot: React.FC = () => {
|
||||
const localRegistered = useSelector(getLocalUrl)
|
||||
@ -19,24 +19,25 @@ const ScreenMeRoot: React.FC = () => {
|
||||
const scrollRef = useRef<ScrollView>(null)
|
||||
useScrollToTop(scrollRef)
|
||||
|
||||
const scrollY = useRef(new Animated.Value(0)).current
|
||||
const scrollY = useRef(new Animated.Value(0))
|
||||
const [data, setData] = useState<Mastodon.Account>()
|
||||
|
||||
const [accountState, accountDispatch] = useReducer(
|
||||
accountReducer,
|
||||
accountInitialState
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<AccountContext.Provider value={{ accountState, accountDispatch }}>
|
||||
{localRegistered && data ? (
|
||||
<AccountNav
|
||||
accountState={{ headerRatio: 0.4 } as AccountState}
|
||||
scrollY={scrollY}
|
||||
account={data}
|
||||
/>
|
||||
<AccountNav scrollY={scrollY} account={data} />
|
||||
) : null}
|
||||
<ScrollView
|
||||
ref={scrollRef}
|
||||
keyboardShouldPersistTaps='handled'
|
||||
bounces={false}
|
||||
onScroll={Animated.event(
|
||||
[{ nativeEvent: { contentOffset: { y: scrollY } } }],
|
||||
[{ nativeEvent: { contentOffset: { y: scrollY.current } } }],
|
||||
{ useNativeDriver: false }
|
||||
)}
|
||||
scrollEventThrottle={8}
|
||||
@ -46,7 +47,7 @@ const ScreenMeRoot: React.FC = () => {
|
||||
<Settings />
|
||||
{localRegistered && <Logout />}
|
||||
</ScrollView>
|
||||
</>
|
||||
</AccountContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -27,32 +27,32 @@ const Collections: React.FC = () => {
|
||||
return (
|
||||
<MenuContainer>
|
||||
<MenuRow
|
||||
iconFront='mail'
|
||||
iconBack='chevron-right'
|
||||
iconFront='Mail'
|
||||
iconBack='ChevronRight'
|
||||
title={t('content.collections.conversations')}
|
||||
onPress={() => navigation.navigate('Screen-Me-Conversations')}
|
||||
/>
|
||||
<MenuRow
|
||||
iconFront='bookmark'
|
||||
iconBack='chevron-right'
|
||||
iconFront='Bookmark'
|
||||
iconBack='ChevronRight'
|
||||
title={t('content.collections.bookmarks')}
|
||||
onPress={() => navigation.navigate('Screen-Me-Bookmarks')}
|
||||
/>
|
||||
<MenuRow
|
||||
iconFront='star'
|
||||
iconBack='chevron-right'
|
||||
iconFront='Star'
|
||||
iconBack='ChevronRight'
|
||||
title={t('content.collections.favourites')}
|
||||
onPress={() => navigation.navigate('Screen-Me-Favourites')}
|
||||
/>
|
||||
<MenuRow
|
||||
iconFront='list'
|
||||
iconBack='chevron-right'
|
||||
iconFront='List'
|
||||
iconBack='ChevronRight'
|
||||
title={t('content.collections.lists')}
|
||||
onPress={() => navigation.navigate('Screen-Me-Lists')}
|
||||
/>
|
||||
<MenuRow
|
||||
iconFront='clipboard'
|
||||
iconBack='chevron-right'
|
||||
iconFront='Clipboard'
|
||||
iconBack='ChevronRight'
|
||||
title={t('content.collections.announcements')}
|
||||
content={announcementContent}
|
||||
loading={isFetching}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import analytics from '@components/analytics'
|
||||
import Button from '@components/Button'
|
||||
import haptics from '@components/haptics'
|
||||
import Icon from '@components/Icon'
|
||||
import { ParseHTML } from '@components/Parse'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { applicationFetch } from '@utils/fetches/applicationFetch'
|
||||
import { instanceFetch } from '@utils/fetches/instanceFetch'
|
||||
@ -282,8 +282,8 @@ const Login: React.FC = () => {
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.disclaimer, { color: theme.secondary }]}>
|
||||
<Feather
|
||||
name='lock'
|
||||
<Icon
|
||||
name='Lock'
|
||||
size={StyleConstants.Font.Size.M}
|
||||
color={theme.secondary}
|
||||
/>{' '}
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { useQuery } from 'react-query'
|
||||
|
||||
import { accountFetch } from '@utils/fetches/accountFetch'
|
||||
import AccountHeader from '@screens/Shared/Account/Header'
|
||||
import AccountInformation from '@screens/Shared/Account/Information'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { accountFetch } from '@utils/fetches/accountFetch'
|
||||
import { getLocalAccountId } from '@utils/slices/instancesSlice'
|
||||
import { AccountState } from '@root/screens/Shared/Account'
|
||||
import React, { useEffect } from 'react'
|
||||
import { useQuery } from 'react-query'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
export interface Props {
|
||||
setData: React.Dispatch<React.SetStateAction<Mastodon.Account | undefined>>
|
||||
@ -23,11 +21,7 @@ const MyInfo: React.FC<Props> = ({ setData }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<AccountHeader
|
||||
accountState={{ headerRatio: 0.4 } as AccountState}
|
||||
account={data}
|
||||
limitHeight
|
||||
/>
|
||||
<AccountHeader account={data} limitHeight />
|
||||
<AccountInformation account={data} disableActions />
|
||||
</>
|
||||
)
|
||||
|
||||
@ -11,8 +11,8 @@ const Settings: React.FC = () => {
|
||||
return (
|
||||
<MenuContainer>
|
||||
<MenuRow
|
||||
iconFront='settings'
|
||||
iconBack='chevron-right'
|
||||
iconFront='Settings'
|
||||
iconBack='ChevronRight'
|
||||
title={t('content.settings')}
|
||||
onPress={() => navigation.navigate('Screen-Me-Settings')}
|
||||
/>
|
||||
|
||||
@ -39,7 +39,7 @@ const ScreenMeSettings: React.FC = () => {
|
||||
<MenuRow
|
||||
title={t('content.language.heading')}
|
||||
content={t(`content.language.options.${settingsLanguage}`)}
|
||||
iconBack='chevron-right'
|
||||
iconBack='ChevronRight'
|
||||
onPress={() =>
|
||||
ActionSheetIOS.showActionSheetWithOptions(
|
||||
{
|
||||
@ -70,7 +70,7 @@ const ScreenMeSettings: React.FC = () => {
|
||||
<MenuRow
|
||||
title={t('content.theme.heading')}
|
||||
content={t(`content.theme.options.${settingsTheme}`)}
|
||||
iconBack='chevron-right'
|
||||
iconBack='ChevronRight'
|
||||
onPress={() =>
|
||||
ActionSheetIOS.showActionSheetWithOptions(
|
||||
{
|
||||
@ -106,7 +106,7 @@ const ScreenMeSettings: React.FC = () => {
|
||||
<MenuRow
|
||||
title={t('content.browser.heading')}
|
||||
content={t(`content.browser.options.${settingsBrowser}`)}
|
||||
iconBack='chevron-right'
|
||||
iconBack='ChevronRight'
|
||||
onPress={() =>
|
||||
ActionSheetIOS.showActionSheetWithOptions(
|
||||
{
|
||||
@ -137,7 +137,7 @@ const ScreenMeSettings: React.FC = () => {
|
||||
<MenuRow
|
||||
title={t('content.cache.heading')}
|
||||
content={cacheSize ? prettyBytes(cacheSize) : '暂无缓存'}
|
||||
iconBack='chevron-right'
|
||||
iconBack='ChevronRight'
|
||||
onPress={async () => {
|
||||
await CacheManager.clearCache()
|
||||
haptics('Success')
|
||||
@ -154,7 +154,7 @@ const ScreenMeSettings: React.FC = () => {
|
||||
/>
|
||||
<MenuRow
|
||||
title={t('content.copyrights.heading')}
|
||||
iconBack='chevron-right'
|
||||
iconBack='ChevronRight'
|
||||
/>
|
||||
<Text style={[styles.version, { color: theme.secondary }]}>
|
||||
{t('content.version', { version: '1.0.0' })}
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
import BottomSheet from '@components/BottomSheet'
|
||||
import { HeaderRight } from '@components/Header'
|
||||
import HeaderDefaultActionsAccount from '@components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount'
|
||||
import { accountFetch } from '@utils/fetches/accountFetch'
|
||||
import { getLocalAccountId } from '@utils/slices/instancesSlice'
|
||||
import React, { useEffect, useReducer, useRef, useState } from 'react'
|
||||
import { Animated, ScrollView } from 'react-native'
|
||||
|
||||
import { useQuery } from 'react-query'
|
||||
import { accountFetch } from '@utils/fetches/accountFetch'
|
||||
import AccountToots from '@screens/Shared/Account/Toots'
|
||||
import AccountHeader from '@screens/Shared/Account/Header'
|
||||
import AccountInformation from '@screens/Shared/Account/Information'
|
||||
import { useSelector } from 'react-redux'
|
||||
import AccountHeader from './Account/Header'
|
||||
import AccountInformation from './Account/Information'
|
||||
import AccountNav from './Account/Nav'
|
||||
import AccountSegmentedControl from './Account/SegmentedControl'
|
||||
import { HeaderRight } from '@root/components/Header'
|
||||
import BottomSheet from '@root/components/BottomSheet'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { getLocalAccountId } from '@root/utils/slices/instancesSlice'
|
||||
import HeaderDefaultActionsAccount from '@root/components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount'
|
||||
import AccountToots from './Account/Toots'
|
||||
import AccountContext from './Account/utils/createContext'
|
||||
import accountInitialState from './Account/utils/initialState'
|
||||
import accountReducer from './Account/utils/reducer'
|
||||
|
||||
// Moved account example: https://m.cmx.im/web/accounts/27812
|
||||
|
||||
@ -25,48 +27,6 @@ export interface Props {
|
||||
navigation: any
|
||||
}
|
||||
|
||||
export type AccountState = {
|
||||
headerRatio: number
|
||||
informationLayout?: {
|
||||
y: number
|
||||
height: number
|
||||
}
|
||||
segmentedIndex: number
|
||||
}
|
||||
export type AccountAction =
|
||||
| {
|
||||
type: 'headerRatio'
|
||||
payload: AccountState['headerRatio']
|
||||
}
|
||||
| {
|
||||
type: 'informationLayout'
|
||||
payload: AccountState['informationLayout']
|
||||
}
|
||||
| {
|
||||
type: 'segmentedIndex'
|
||||
payload: AccountState['segmentedIndex']
|
||||
}
|
||||
const AccountInitialState: AccountState = {
|
||||
headerRatio: 0.4,
|
||||
informationLayout: { height: 0, y: 100 },
|
||||
segmentedIndex: 0
|
||||
}
|
||||
const accountReducer = (
|
||||
state: AccountState,
|
||||
action: AccountAction
|
||||
): AccountState => {
|
||||
switch (action.type) {
|
||||
case 'headerRatio':
|
||||
return { ...state, headerRatio: action.payload }
|
||||
case 'informationLayout':
|
||||
return { ...state, informationLayout: action.payload }
|
||||
case 'segmentedIndex':
|
||||
return { ...state, segmentedIndex: action.payload }
|
||||
default:
|
||||
throw new Error('Unexpected action')
|
||||
}
|
||||
}
|
||||
|
||||
const ScreenSharedAccount: React.FC<Props> = ({
|
||||
route: {
|
||||
params: { account }
|
||||
@ -76,10 +36,10 @@ const ScreenSharedAccount: React.FC<Props> = ({
|
||||
const localAccountId = useSelector(getLocalAccountId)
|
||||
const { data } = useQuery(['Account', { id: account.id }], accountFetch)
|
||||
|
||||
const scrollY = useRef(new Animated.Value(0)).current
|
||||
const scrollY = useRef(new Animated.Value(0))
|
||||
const [accountState, accountDispatch] = useReducer(
|
||||
accountReducer,
|
||||
AccountInitialState
|
||||
accountInitialState
|
||||
)
|
||||
|
||||
const [modalVisible, setBottomSheetVisible] = useState(false)
|
||||
@ -88,7 +48,7 @@ const ScreenSharedAccount: React.FC<Props> = ({
|
||||
navigation.setOptions({
|
||||
headerRight: () => (
|
||||
<HeaderRight
|
||||
content='more-horizontal'
|
||||
content='MoreHorizontal'
|
||||
onPress={() => setBottomSheetVisible(true)}
|
||||
/>
|
||||
)
|
||||
@ -97,39 +57,23 @@ const ScreenSharedAccount: React.FC<Props> = ({
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<AccountNav
|
||||
accountState={accountState}
|
||||
scrollY={scrollY}
|
||||
account={data}
|
||||
/>
|
||||
<AccountContext.Provider value={{ accountState, accountDispatch }}>
|
||||
<AccountNav scrollY={scrollY} account={data} />
|
||||
{accountState.informationLayout?.height &&
|
||||
accountState.informationLayout.y ? (
|
||||
<AccountSegmentedControl
|
||||
accountState={accountState}
|
||||
accountDispatch={accountDispatch}
|
||||
scrollY={scrollY}
|
||||
/>
|
||||
<AccountSegmentedControl scrollY={scrollY} />
|
||||
) : null}
|
||||
<ScrollView
|
||||
scrollEventThrottle={16}
|
||||
showsVerticalScrollIndicator={false}
|
||||
onScroll={Animated.event(
|
||||
[{ nativeEvent: { contentOffset: { y: scrollY } } }],
|
||||
[{ nativeEvent: { contentOffset: { y: scrollY.current } } }],
|
||||
{ useNativeDriver: false }
|
||||
)}
|
||||
>
|
||||
<AccountHeader
|
||||
accountState={accountState}
|
||||
accountDispatch={accountDispatch}
|
||||
account={data}
|
||||
/>
|
||||
<AccountInformation accountDispatch={accountDispatch} account={data} />
|
||||
<AccountToots
|
||||
accountState={accountState}
|
||||
accountDispatch={accountDispatch}
|
||||
id={account.id}
|
||||
/>
|
||||
<AccountHeader account={data} />
|
||||
<AccountInformation account={data} />
|
||||
<AccountToots id={account.id} />
|
||||
</ScrollView>
|
||||
|
||||
<BottomSheet
|
||||
@ -144,7 +88,7 @@ const ScreenSharedAccount: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
</BottomSheet>
|
||||
</>
|
||||
</AccountContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,21 +1,15 @@
|
||||
import { useTheme } from '@root/utils/styles/ThemeManager'
|
||||
import React, { Dispatch, useEffect, useState } from 'react'
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
import { Dimensions, Image, StyleSheet, View } from 'react-native'
|
||||
import { AccountAction, AccountState } from '../Account'
|
||||
import AccountContext from './utils/createContext'
|
||||
|
||||
export interface Props {
|
||||
accountState: AccountState
|
||||
accountDispatch?: Dispatch<AccountAction>
|
||||
account?: Mastodon.Account
|
||||
limitHeight?: boolean
|
||||
}
|
||||
|
||||
const AccountHeader: React.FC<Props> = ({
|
||||
accountState,
|
||||
accountDispatch,
|
||||
account,
|
||||
limitHeight = false
|
||||
}) => {
|
||||
const AccountHeader: React.FC<Props> = ({ account, limitHeight = false }) => {
|
||||
const { accountState, accountDispatch } = useContext(AccountContext)
|
||||
const { theme } = useTheme()
|
||||
const [ratio, setRatio] = useState(accountState.headerRatio)
|
||||
|
||||
@ -70,4 +64,7 @@ const styles = StyleSheet.create({
|
||||
}
|
||||
})
|
||||
|
||||
export default AccountHeader
|
||||
export default React.memo(
|
||||
AccountHeader,
|
||||
(_, next) => next.account === undefined
|
||||
)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import React, { createRef, Dispatch, useCallback, useEffect } from 'react'
|
||||
import React, { createRef, useCallback, useContext, useEffect } from 'react'
|
||||
import { Animated, StyleSheet, View } from 'react-native'
|
||||
import AccountInformationAvatar from './Information/Avatar'
|
||||
import AccountInformationName from './Information/Name'
|
||||
@ -9,19 +9,18 @@ import AccountInformationStats from './Information/Stats'
|
||||
import AccountInformationActions from './Information/Actions'
|
||||
import AccountInformationFields from './Information/Fields'
|
||||
import AccountInformationNotes from './Information/Notes'
|
||||
import { AccountAction } from '../Account'
|
||||
import AccountContext from './utils/createContext'
|
||||
|
||||
export interface Props {
|
||||
accountDispatch?: Dispatch<AccountAction>
|
||||
account: Mastodon.Account | undefined
|
||||
disableActions?: boolean
|
||||
}
|
||||
|
||||
const AccountInformation: React.FC<Props> = ({
|
||||
accountDispatch,
|
||||
account,
|
||||
disableActions = false
|
||||
}) => {
|
||||
const { accountDispatch } = useContext(AccountContext)
|
||||
const shimmerAvatarRef = createRef<any>()
|
||||
const shimmerNameRef = createRef<any>()
|
||||
const shimmerAccountRef = createRef<any>()
|
||||
@ -98,4 +97,7 @@ const styles = StyleSheet.create({
|
||||
}
|
||||
})
|
||||
|
||||
export default AccountInformation
|
||||
export default React.memo(
|
||||
AccountInformation,
|
||||
(_, next) => next.account === undefined
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { StyleConstants } from '@root/utils/styles/constants'
|
||||
import { useTheme } from '@root/utils/styles/ThemeManager'
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import React, { forwardRef } from 'react'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
@ -38,13 +38,19 @@ const AccountInformationAccount = forwardRef<ShimmerPlaceholder, Props>(
|
||||
@{account?.acct}
|
||||
</Text>
|
||||
{account?.locked ? (
|
||||
<Feather name='lock' style={styles.type} color={theme.secondary} />
|
||||
) : null}
|
||||
{account?.bot ? (
|
||||
<Feather
|
||||
name='hard-drive'
|
||||
<Icon
|
||||
name='Lock'
|
||||
style={styles.type}
|
||||
color={theme.secondary}
|
||||
size={StyleConstants.Font.Size.M}
|
||||
/>
|
||||
) : null}
|
||||
{account?.bot ? (
|
||||
<Icon
|
||||
name='HardDrive'
|
||||
style={styles.type}
|
||||
color={theme.secondary}
|
||||
size={StyleConstants.Font.Size.M}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
@ -131,7 +131,7 @@ const AccountInformationActions: React.FC<Props> = ({ account }) => {
|
||||
{query.data && !query.data.blocked_by ? (
|
||||
<Button
|
||||
type='icon'
|
||||
content='mail'
|
||||
content='Mail'
|
||||
round
|
||||
onPress={() =>
|
||||
navigation.navigate('Screen-Shared-Compose', {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { StyleConstants } from '@root/utils/styles/constants'
|
||||
import { useTheme } from '@root/utils/styles/ThemeManager'
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import React, { forwardRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
@ -29,8 +29,8 @@ const AccountInformationCreated = forwardRef<ShimmerPlaceholder, Props>(
|
||||
shimmerColors={theme.shimmer}
|
||||
>
|
||||
<View style={styles.created}>
|
||||
<Feather
|
||||
name='calendar'
|
||||
<Icon
|
||||
name='Calendar'
|
||||
size={StyleConstants.Font.Size.S}
|
||||
color={theme.secondary}
|
||||
style={styles.icon}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import Icon from '@components/Icon'
|
||||
import { ParseHTML } from '@components/Parse'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
@ -27,8 +27,8 @@ const AccountInformationFields: React.FC<Props> = ({ account }) => {
|
||||
showFullLink
|
||||
/>
|
||||
{field.verified_at ? (
|
||||
<Feather
|
||||
name='check-circle'
|
||||
<Icon
|
||||
name='CheckCircle'
|
||||
size={StyleConstants.Font.Size.M}
|
||||
color={theme.primary}
|
||||
style={styles.fieldCheck}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import { ParseEmojis } from '@components/Parse'
|
||||
import { AccountState } from '@screens/Shared/Account'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import React, { MutableRefObject, useContext } from 'react'
|
||||
import { Animated, Dimensions, StyleSheet, Text, View } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import AccountContext from './utils/createContext'
|
||||
|
||||
export interface Props {
|
||||
accountState: AccountState
|
||||
scrollY: Animated.Value
|
||||
scrollY: MutableRefObject<Animated.Value>
|
||||
account: Mastodon.Account | undefined
|
||||
}
|
||||
|
||||
const AccountNav: React.FC<Props> = ({ accountState, scrollY, account }) => {
|
||||
const AccountNav: React.FC<Props> = ({ scrollY, account }) => {
|
||||
const { accountState } = useContext(AccountContext)
|
||||
const { theme } = useTheme()
|
||||
const headerHeight = useSafeAreaInsets().top + 44
|
||||
|
||||
@ -29,7 +29,7 @@ const AccountNav: React.FC<Props> = ({ accountState, scrollY, account }) => {
|
||||
styles.base,
|
||||
{
|
||||
backgroundColor: theme.background,
|
||||
opacity: scrollY.interpolate({
|
||||
opacity: scrollY.current.interpolate({
|
||||
inputRange: [0, 200],
|
||||
outputRange: [0, 1],
|
||||
extrapolate: 'clamp'
|
||||
@ -51,7 +51,7 @@ const AccountNav: React.FC<Props> = ({ accountState, scrollY, account }) => {
|
||||
style={[
|
||||
styles.display_name,
|
||||
{
|
||||
marginTop: scrollY.interpolate({
|
||||
marginTop: scrollY.current.interpolate({
|
||||
inputRange: [nameY, nameY + 20],
|
||||
outputRange: [50, 0],
|
||||
extrapolate: 'clamp'
|
||||
@ -89,4 +89,4 @@ const styles = StyleSheet.create({
|
||||
}
|
||||
})
|
||||
|
||||
export default AccountNav
|
||||
export default React.memo(AccountNav, (_, next) => next.account === undefined)
|
||||
|
||||
@ -1,28 +1,23 @@
|
||||
import SegmentedControl from '@react-native-community/segmented-control'
|
||||
import { StyleConstants } from '@root/utils/styles/constants'
|
||||
import { useTheme } from '@root/utils/styles/ThemeManager'
|
||||
import React, { Dispatch } from 'react'
|
||||
import React, { MutableRefObject, useContext } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Animated, StyleSheet } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { AccountAction, AccountState } from '../Account'
|
||||
import AccountContext from './utils/createContext'
|
||||
|
||||
export interface Props {
|
||||
accountState: AccountState
|
||||
accountDispatch: Dispatch<AccountAction>
|
||||
scrollY: Animated.Value
|
||||
scrollY: MutableRefObject<Animated.Value>
|
||||
}
|
||||
|
||||
const AccountSegmentedControl: React.FC<Props> = ({
|
||||
accountState,
|
||||
accountDispatch,
|
||||
scrollY
|
||||
}) => {
|
||||
const AccountSegmentedControl: React.FC<Props> = ({ scrollY }) => {
|
||||
const { accountState, accountDispatch } = useContext(AccountContext)
|
||||
const { t } = useTranslation('sharedAccount')
|
||||
const { mode, theme } = useTheme()
|
||||
|
||||
const headerHeight = useSafeAreaInsets().top + 44
|
||||
const translateY = scrollY.interpolate({
|
||||
const translateY = scrollY.current.interpolate({
|
||||
inputRange: [
|
||||
0,
|
||||
(accountState.informationLayout?.y || 0) +
|
||||
@ -82,4 +77,4 @@ const styles = StyleSheet.create({
|
||||
}
|
||||
})
|
||||
|
||||
export default AccountSegmentedControl
|
||||
export default React.memo(AccountSegmentedControl, () => true)
|
||||
|
||||
@ -1,24 +1,18 @@
|
||||
import React, { Dispatch, useCallback } from 'react'
|
||||
import { Dimensions, StyleSheet } from 'react-native'
|
||||
import { TabView } from 'react-native-tab-view'
|
||||
|
||||
import Timeline from '@components/Timelines/Timeline'
|
||||
import { AccountAction, AccountState } from '../Account'
|
||||
import { StyleConstants } from '@root/utils/styles/constants'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import React, { useContext } from 'react'
|
||||
import { Dimensions, StyleSheet } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { TabView } from 'react-native-tab-view'
|
||||
import AccountContext from './utils/createContext'
|
||||
|
||||
export interface Props {
|
||||
accountState: AccountState
|
||||
accountDispatch: Dispatch<AccountAction>
|
||||
id: Mastodon.Account['id']
|
||||
}
|
||||
|
||||
const AccountToots: React.FC<Props> = ({
|
||||
accountState,
|
||||
accountDispatch,
|
||||
id
|
||||
}) => {
|
||||
const AccountToots: React.FC<Props> = ({ id }) => {
|
||||
const { accountState, accountDispatch } = useContext(AccountContext)
|
||||
const headerHeight = useSafeAreaInsets().top + 44
|
||||
const footerHeight = useSafeAreaInsets().bottom + useBottomTabBarHeight()
|
||||
|
||||
@ -28,8 +22,7 @@ const AccountToots: React.FC<Props> = ({
|
||||
{ key: 'Account_Media' }
|
||||
]
|
||||
|
||||
const renderScene = useCallback(
|
||||
({
|
||||
const renderScene = ({
|
||||
route
|
||||
}: {
|
||||
route: {
|
||||
@ -37,9 +30,7 @@ const AccountToots: React.FC<Props> = ({
|
||||
}
|
||||
}) => {
|
||||
return <Timeline page={route.key} account={id} disableRefresh />
|
||||
},
|
||||
[]
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<TabView
|
||||
|
||||
10
src/screens/Shared/Account/utils/createContext.ts
Normal file
10
src/screens/Shared/Account/utils/createContext.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { createContext, Dispatch } from 'react'
|
||||
import { AccountAction, AccountState } from './types'
|
||||
|
||||
type ContextType = {
|
||||
accountState: AccountState
|
||||
accountDispatch: Dispatch<AccountAction>
|
||||
}
|
||||
const AccountContext = createContext<ContextType>({} as ContextType)
|
||||
|
||||
export default AccountContext
|
||||
9
src/screens/Shared/Account/utils/initialState.ts
Normal file
9
src/screens/Shared/Account/utils/initialState.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { AccountState } from "./types"
|
||||
|
||||
const accountInitialState: AccountState = {
|
||||
headerRatio: 0.4,
|
||||
informationLayout: { height: 0, y: 100 },
|
||||
segmentedIndex: 0
|
||||
}
|
||||
|
||||
export default accountInitialState
|
||||
19
src/screens/Shared/Account/utils/reducer.ts
Normal file
19
src/screens/Shared/Account/utils/reducer.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { AccountAction, AccountState } from "./types"
|
||||
|
||||
const accountReducer = (
|
||||
state: AccountState,
|
||||
action: AccountAction
|
||||
): AccountState => {
|
||||
switch (action.type) {
|
||||
case 'headerRatio':
|
||||
return { ...state, headerRatio: action.payload }
|
||||
case 'informationLayout':
|
||||
return { ...state, informationLayout: action.payload }
|
||||
case 'segmentedIndex':
|
||||
return { ...state, segmentedIndex: action.payload }
|
||||
default:
|
||||
throw new Error('Unexpected action')
|
||||
}
|
||||
}
|
||||
|
||||
export default accountReducer
|
||||
22
src/screens/Shared/Account/utils/types.d.ts
vendored
Normal file
22
src/screens/Shared/Account/utils/types.d.ts
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
export type AccountState = {
|
||||
headerRatio: number
|
||||
informationLayout?: {
|
||||
y: number
|
||||
height: number
|
||||
}
|
||||
segmentedIndex: number
|
||||
}
|
||||
|
||||
export type AccountAction =
|
||||
| {
|
||||
type: 'headerRatio'
|
||||
payload: AccountState['headerRatio']
|
||||
}
|
||||
| {
|
||||
type: 'informationLayout'
|
||||
payload: AccountState['informationLayout']
|
||||
}
|
||||
| {
|
||||
type: 'segmentedIndex'
|
||||
payload: AccountState['segmentedIndex']
|
||||
}
|
||||
@ -157,8 +157,8 @@ const ScreenSharedAnnouncements: React.FC = ({
|
||||
style={[styles.reaction, { borderColor: theme.primary }]}
|
||||
onPress={() => invisibleTextInputRef.current?.focus()}
|
||||
>
|
||||
<Feather
|
||||
name='plus'
|
||||
<Icon
|
||||
name='Plus'
|
||||
size={StyleConstants.Font.Size.M}
|
||||
color={theme.primary}
|
||||
/>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Icon from '@components/Icon'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import layoutAnimation from '@utils/styles/layoutAnimation'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useCallback, useContext, useMemo } from 'react'
|
||||
import { ActionSheetIOS, StyleSheet, View } from 'react-native'
|
||||
import { ActionSheetIOS, Pressable, StyleSheet, View } from 'react-native'
|
||||
import addAttachment from './/addAttachment'
|
||||
import ComposeContext from './utils/createContext'
|
||||
|
||||
@ -53,13 +53,13 @@ const ComposeActions: React.FC = () => {
|
||||
const visibilityIcon = useMemo(() => {
|
||||
switch (composeState.visibility) {
|
||||
case 'public':
|
||||
return 'globe'
|
||||
return 'Globe'
|
||||
case 'unlisted':
|
||||
return 'unlock'
|
||||
return 'Unlock'
|
||||
case 'private':
|
||||
return 'lock'
|
||||
return 'Lock'
|
||||
case 'direct':
|
||||
return 'mail'
|
||||
return 'Mail'
|
||||
}
|
||||
}, [composeState.visibility])
|
||||
const visibilityOnPress = useCallback(() => {
|
||||
@ -134,35 +134,41 @@ const ComposeActions: React.FC = () => {
|
||||
{ backgroundColor: theme.background, borderTopColor: theme.border }
|
||||
]}
|
||||
>
|
||||
<Feather
|
||||
name='aperture'
|
||||
size={24}
|
||||
color={attachmentColor}
|
||||
<Pressable
|
||||
onPress={attachmentOnPress}
|
||||
children={<Icon name='Aperture' size={24} color={attachmentColor} />}
|
||||
/>
|
||||
<Feather
|
||||
name='bar-chart-2'
|
||||
size={24}
|
||||
color={pollColor}
|
||||
<Pressable
|
||||
onPress={pollOnPress}
|
||||
children={<Icon name='BarChart2' size={24} color={pollColor} />}
|
||||
/>
|
||||
<Feather
|
||||
<Pressable
|
||||
onPress={visibilityOnPress}
|
||||
children={
|
||||
<Icon
|
||||
name={visibilityIcon}
|
||||
size={24}
|
||||
color={composeState.visibilityLock ? theme.disabled : theme.secondary}
|
||||
onPress={visibilityOnPress}
|
||||
color={
|
||||
composeState.visibilityLock ? theme.disabled : theme.secondary
|
||||
}
|
||||
/>
|
||||
<Feather
|
||||
name='alert-triangle'
|
||||
size={24}
|
||||
color={composeState.spoiler.active ? theme.primary : theme.secondary}
|
||||
}
|
||||
/>
|
||||
<Pressable
|
||||
onPress={spoilerOnPress}
|
||||
/>
|
||||
<Feather
|
||||
name='smile'
|
||||
children={
|
||||
<Icon
|
||||
name='AlertTriangle'
|
||||
size={24}
|
||||
color={emojiColor}
|
||||
color={
|
||||
composeState.spoiler.active ? theme.primary : theme.secondary
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Pressable
|
||||
onPress={emojiOnPress}
|
||||
children={<Icon name='Smile' size={24} color={emojiColor} />}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import Button from '@components/Button'
|
||||
import haptics from '@components/haptics'
|
||||
import Icon from '@components/Icon'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import layoutAnimation from '@utils/styles/layoutAnimation'
|
||||
@ -149,7 +149,7 @@ const ComposeAttachments: React.FC = () => {
|
||||
<>
|
||||
<Button
|
||||
type='icon'
|
||||
content='x'
|
||||
content='X'
|
||||
spacing='M'
|
||||
round
|
||||
overlay
|
||||
@ -165,7 +165,7 @@ const ComposeAttachments: React.FC = () => {
|
||||
/>
|
||||
<Button
|
||||
type='icon'
|
||||
content='edit'
|
||||
content='Edit'
|
||||
spacing='M'
|
||||
round
|
||||
overlay
|
||||
@ -198,7 +198,7 @@ const ComposeAttachments: React.FC = () => {
|
||||
>
|
||||
<Button
|
||||
type='icon'
|
||||
content='upload-cloud'
|
||||
content='UploadCloud'
|
||||
spacing='M'
|
||||
round
|
||||
overlay
|
||||
@ -224,8 +224,8 @@ const ComposeAttachments: React.FC = () => {
|
||||
return (
|
||||
<View style={styles.base}>
|
||||
<Pressable style={styles.sensitive} onPress={sensitiveOnPress}>
|
||||
<Feather
|
||||
name={composeState.attachments.sensitive ? 'check-circle' : 'circle'}
|
||||
<Icon
|
||||
name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
color={theme.primary}
|
||||
/>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import Button from '@components/Button'
|
||||
import Icon from '@components/Icon'
|
||||
import { MenuRow } from '@components/Menu'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
@ -47,8 +47,8 @@ const ComposePoll: React.FC = () => {
|
||||
})
|
||||
return (
|
||||
<View key={i} style={styles.option}>
|
||||
<Feather
|
||||
name={multiple ? 'square' : 'circle'}
|
||||
<Icon
|
||||
name={multiple ? 'Square' : 'Circle'}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
color={theme.secondary}
|
||||
/>
|
||||
@ -88,7 +88,7 @@ const ComposePoll: React.FC = () => {
|
||||
})
|
||||
}}
|
||||
type='icon'
|
||||
content='minus'
|
||||
content='Minus'
|
||||
round
|
||||
disabled={!(total > 2)}
|
||||
/>
|
||||
@ -102,7 +102,7 @@ const ComposePoll: React.FC = () => {
|
||||
})
|
||||
}}
|
||||
type='icon'
|
||||
content='plus'
|
||||
content='Plus'
|
||||
round
|
||||
disabled={!(total < 4)}
|
||||
/>
|
||||
@ -124,7 +124,7 @@ const ComposePoll: React.FC = () => {
|
||||
})
|
||||
)
|
||||
}
|
||||
iconBack='chevron-right'
|
||||
iconBack='ChevronRight'
|
||||
/>
|
||||
<MenuRow
|
||||
title='有效期'
|
||||
@ -143,7 +143,7 @@ const ComposePoll: React.FC = () => {
|
||||
})
|
||||
)
|
||||
}
|
||||
iconBack='chevron-right'
|
||||
iconBack='ChevronRight'
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
|
||||
@ -94,7 +94,7 @@ const ScreenSharedImagesViewer: React.FC<Props> = ({
|
||||
contentStyle: { backgroundColor: 'black' },
|
||||
headerStyle: { backgroundColor: 'black' },
|
||||
headerLeft: () => (
|
||||
<HeaderLeft content='x' onPress={() => navigation.goBack()} />
|
||||
<HeaderLeft content='X' onPress={() => navigation.goBack()} />
|
||||
),
|
||||
headerCenter: () => (
|
||||
<Text style={styles.headerCenter}>
|
||||
@ -103,7 +103,7 @@ const ScreenSharedImagesViewer: React.FC<Props> = ({
|
||||
),
|
||||
headerRight: () => (
|
||||
<HeaderRight
|
||||
content='share'
|
||||
content='Share'
|
||||
onPress={() =>
|
||||
ActionSheetIOS.showShareActionSheetWithOptions(
|
||||
{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { HeaderRight } from '@components/Header'
|
||||
import Icon from '@components/Icon'
|
||||
import { ParseEmojis, ParseHTML } from '@components/Parse'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { searchFetch } from '@utils/fetches/searchFetch'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
@ -262,8 +262,8 @@ const ScreenSharedSearch: React.FC = () => {
|
||||
<View
|
||||
style={[styles.searchField, { borderBottomColor: theme.secondary }]}
|
||||
>
|
||||
<Feather
|
||||
name='search'
|
||||
<Icon
|
||||
name='Search'
|
||||
color={theme.primary}
|
||||
size={StyleConstants.Font.Size.M}
|
||||
style={styles.searchIcon}
|
||||
|
||||
@ -15,7 +15,7 @@ const ScreenSharedToot: React.FC<Props> = ({
|
||||
params: { toot }
|
||||
}
|
||||
}) => {
|
||||
return <Timeline page='Toot' toot={toot} disableRefresh disableInfinity />
|
||||
return <Timeline page='Toot' toot={toot.id} disableRefresh disableInfinity />
|
||||
}
|
||||
|
||||
export default ScreenSharedToot
|
||||
|
||||
@ -194,10 +194,16 @@ export const timelineFetch = async ({
|
||||
res = await client({
|
||||
method: 'get',
|
||||
instance: 'local',
|
||||
url: `statuses/${toot!.id}/context`
|
||||
url: `statuses/${toot}`
|
||||
})
|
||||
const theToot = res.body
|
||||
res = await client({
|
||||
method: 'get',
|
||||
instance: 'local',
|
||||
url: `statuses/${toot}/context`
|
||||
})
|
||||
return Promise.resolve({
|
||||
toots: [...res.body.ancestors, toot, ...res.body.descendants],
|
||||
toots: [...res.body.ancestors, theToot, ...res.body.descendants],
|
||||
pointer: res.body.ancestors.length
|
||||
})
|
||||
default:
|
||||
|
||||
@ -12,11 +12,11 @@
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
// "@assets/*": ["./assets/*"],
|
||||
"@root/*": ["./src/*"],
|
||||
"@api/*": ["./src/api/*"],
|
||||
"@components/*": ["./src/components/*"],
|
||||
"@screens/*": ["./src/screens/*"],
|
||||
"@utils/*": ["./src/utils/*"]
|
||||
"@utils/*": ["./src/utils/*"],
|
||||
"@root/*": ["./src/*"],
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules"]
|
||||
|
||||
@ -8119,6 +8119,11 @@ react-native-expo-image-cache@^4.1.0:
|
||||
crypto-js "^3.1.9-1"
|
||||
lodash "^4.17.4"
|
||||
|
||||
react-native-feather@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-native-feather/-/react-native-feather-1.0.2.tgz#9b02a32f313088084da5ebb0130659fa582edf43"
|
||||
integrity sha512-SxMCMyGQeDtZtl2mhssoFTsfFKh/eH6S11+720BPGYYXz1iaYwQ4G/xqFxWOvQOQK2qtOTvkFOBlabbKwBMuhQ==
|
||||
|
||||
react-native-gesture-handler@~1.8.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.8.0.tgz#18f61f51da50320f938957b0ee79bc58f47449dc"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user