mirror of
https://github.com/tooot-app/app
synced 2025-06-05 22:19:13 +02:00
Using new text component
Need to use global accessibility checks rather than per text component which is not efficient
This commit is contained in:
Zhiyuan Zheng
@ -3,6 +3,7 @@ import Button from '@components/Button'
|
||||
import haptics from '@components/haptics'
|
||||
import { ParseHTML } from '@components/Parse'
|
||||
import RelativeTime from '@components/RelativeTime'
|
||||
import CustomText from '@components/Text'
|
||||
import { BlurView } from '@react-native-community/blur'
|
||||
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
||||
import { RootStackScreenProps } from '@utils/navigation/navigators'
|
||||
@ -14,14 +15,7 @@ import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import {
|
||||
Dimensions,
|
||||
Platform,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View
|
||||
} from 'react-native'
|
||||
import { Dimensions, Platform, Pressable, StyleSheet, View } from 'react-native'
|
||||
import { Circle } from 'react-native-animated-spinkit'
|
||||
import FastImage from 'react-native-fast-image'
|
||||
import { FlatList, ScrollView } from 'react-native-gesture-handler'
|
||||
@ -64,27 +58,48 @@ const ScreenAnnouncements: React.FC<
|
||||
|
||||
const renderItem = useCallback(
|
||||
({ item, index }: { item: Mastodon.Announcement; index: number }) => (
|
||||
<View key={index} style={styles.announcementContainer}>
|
||||
<View
|
||||
key={index}
|
||||
style={{
|
||||
width: Dimensions.get('screen').width,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginVertical: StyleConstants.Spacing.Global.PagePadding,
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Pressable
|
||||
style={styles.pressable}
|
||||
style={StyleSheet.absoluteFillObject}
|
||||
onPress={() => navigation.goBack()}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
styles.announcement,
|
||||
{
|
||||
borderColor: colors.primaryDefault,
|
||||
backgroundColor: colors.backgroundDefault
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
flexShrink: 1,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginTop: StyleConstants.Spacing.Global.PagePadding,
|
||||
borderWidth: 1,
|
||||
borderRadius: 6,
|
||||
borderColor: colors.primaryDefault,
|
||||
backgroundColor: colors.backgroundDefault
|
||||
}}
|
||||
>
|
||||
<Text style={[styles.published, { color: colors.secondary }]}>
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{
|
||||
marginBottom: StyleConstants.Spacing.S,
|
||||
color: colors.secondary
|
||||
}}
|
||||
>
|
||||
<Trans
|
||||
i18nKey='screenAnnouncements:content.published'
|
||||
components={[<RelativeTime date={item.published_at} />]}
|
||||
/>
|
||||
</Text>
|
||||
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator>
|
||||
</CustomText>
|
||||
<ScrollView
|
||||
style={{
|
||||
marginBottom: StyleConstants.Spacing.Global.PagePadding / 2
|
||||
}}
|
||||
showsVerticalScrollIndicator
|
||||
>
|
||||
<ParseHTML
|
||||
content={item.content}
|
||||
size='M'
|
||||
@ -95,21 +110,31 @@ const ScreenAnnouncements: React.FC<
|
||||
/>
|
||||
</ScrollView>
|
||||
{item.reactions?.length ? (
|
||||
<View style={styles.reactions}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom: StyleConstants.Spacing.Global.PagePadding / 2
|
||||
}}
|
||||
>
|
||||
{item.reactions?.map(reaction => (
|
||||
<Pressable
|
||||
key={reaction.name}
|
||||
style={[
|
||||
styles.reaction,
|
||||
{
|
||||
borderColor: reaction.me
|
||||
? colors.disabled
|
||||
: colors.primaryDefault,
|
||||
backgroundColor: reaction.me
|
||||
? colors.disabled
|
||||
: colors.backgroundDefault
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding / 2,
|
||||
marginTop: StyleConstants.Spacing.Global.PagePadding / 2,
|
||||
marginBottom: StyleConstants.Spacing.Global.PagePadding / 2,
|
||||
marginRight: StyleConstants.Spacing.M,
|
||||
borderRadius: 6,
|
||||
flexDirection: 'row',
|
||||
borderColor: reaction.me
|
||||
? colors.disabled
|
||||
: colors.primaryDefault,
|
||||
backgroundColor: reaction.me
|
||||
? colors.disabled
|
||||
: colors.backgroundDefault
|
||||
}}
|
||||
onPress={() => {
|
||||
analytics('accnouncement_reaction_press', {
|
||||
current: reaction.me
|
||||
@ -129,20 +154,24 @@ const ScreenAnnouncements: React.FC<
|
||||
? reaction.static_url
|
||||
: reaction.url
|
||||
}}
|
||||
style={[styles.reactionImage]}
|
||||
style={{
|
||||
width: StyleConstants.Font.LineHeight.M + 3,
|
||||
height: StyleConstants.Font.LineHeight.M
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text style={[styles.reactionText]}>{reaction.name}</Text>
|
||||
<CustomText fontStyle='M'>{reaction.name}</CustomText>
|
||||
)}
|
||||
{reaction.count ? (
|
||||
<Text
|
||||
style={[
|
||||
styles.reactionCount,
|
||||
{ color: colors.primaryDefault }
|
||||
]}
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{
|
||||
marginLeft: StyleConstants.Spacing.S,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{reaction.count}
|
||||
</Text>
|
||||
</CustomText>
|
||||
) : null}
|
||||
</Pressable>
|
||||
))}
|
||||
@ -210,10 +239,10 @@ const ScreenAnnouncements: React.FC<
|
||||
<BlurView
|
||||
blurType={mode}
|
||||
blurAmount={20}
|
||||
style={styles.base}
|
||||
style={{ flex: 1 }}
|
||||
reducedTransparencyFallbackColor={colors.backgroundDefault}
|
||||
>
|
||||
<SafeAreaView style={styles.base}>
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<FlatList
|
||||
horizontal
|
||||
data={query.data}
|
||||
@ -223,22 +252,30 @@ const ScreenAnnouncements: React.FC<
|
||||
onMomentumScrollEnd={onMomentumScrollEnd}
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
/>
|
||||
<View style={styles.indicators}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: 49
|
||||
}}
|
||||
>
|
||||
{query.data && query.data.length > 1 ? (
|
||||
<>
|
||||
{query.data.map((d, i) => (
|
||||
<View
|
||||
key={i}
|
||||
style={[
|
||||
styles.indicator,
|
||||
{
|
||||
borderColor: colors.primaryDefault,
|
||||
backgroundColor:
|
||||
i === index ? colors.primaryDefault : undefined,
|
||||
marginLeft:
|
||||
i === query.data.length ? 0 : StyleConstants.Spacing.S
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
width: StyleConstants.Spacing.S,
|
||||
height: StyleConstants.Spacing.S,
|
||||
borderRadius: StyleConstants.Spacing.S,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.primaryDefault,
|
||||
backgroundColor:
|
||||
i === index ? colors.primaryDefault : undefined,
|
||||
marginLeft:
|
||||
i === query.data.length ? 0 : StyleConstants.Spacing.S
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
@ -248,7 +285,7 @@ const ScreenAnnouncements: React.FC<
|
||||
</BlurView>
|
||||
) : (
|
||||
<SafeAreaView
|
||||
style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
|
||||
style={{ flex: 1, backgroundColor: colors.backgroundDefault }}
|
||||
>
|
||||
<FlatList
|
||||
horizontal
|
||||
@ -259,22 +296,30 @@ const ScreenAnnouncements: React.FC<
|
||||
onMomentumScrollEnd={onMomentumScrollEnd}
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
/>
|
||||
<View style={styles.indicators}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: 49
|
||||
}}
|
||||
>
|
||||
{query.data && query.data.length > 1 ? (
|
||||
<>
|
||||
{query.data.map((d, i) => (
|
||||
<View
|
||||
key={i}
|
||||
style={[
|
||||
styles.indicator,
|
||||
{
|
||||
borderColor: colors.primaryDefault,
|
||||
backgroundColor:
|
||||
i === index ? colors.primaryDefault : undefined,
|
||||
marginLeft:
|
||||
i === query.data.length ? 0 : StyleConstants.Spacing.S
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
width: StyleConstants.Spacing.S,
|
||||
height: StyleConstants.Spacing.S,
|
||||
borderRadius: StyleConstants.Spacing.S,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.primaryDefault,
|
||||
backgroundColor:
|
||||
i === index ? colors.primaryDefault : undefined,
|
||||
marginLeft:
|
||||
i === query.data.length ? 0 : StyleConstants.Spacing.S
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
@ -284,69 +329,4 @@ const ScreenAnnouncements: React.FC<
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1
|
||||
},
|
||||
invisibleTextInput: { ...StyleSheet.absoluteFillObject },
|
||||
announcementContainer: {
|
||||
width: Dimensions.get('screen').width,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginVertical: StyleConstants.Spacing.Global.PagePadding,
|
||||
justifyContent: 'center'
|
||||
},
|
||||
published: {
|
||||
...StyleConstants.FontStyle.S,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
},
|
||||
pressable: { ...StyleSheet.absoluteFillObject },
|
||||
announcement: {
|
||||
flexShrink: 1,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginTop: StyleConstants.Spacing.Global.PagePadding,
|
||||
borderWidth: 1,
|
||||
borderRadius: 6
|
||||
},
|
||||
scrollView: {
|
||||
marginBottom: StyleConstants.Spacing.Global.PagePadding / 2
|
||||
},
|
||||
reactions: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom: StyleConstants.Spacing.Global.PagePadding / 2
|
||||
},
|
||||
reaction: {
|
||||
borderWidth: 1,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding / 2,
|
||||
marginTop: StyleConstants.Spacing.Global.PagePadding / 2,
|
||||
marginBottom: StyleConstants.Spacing.Global.PagePadding / 2,
|
||||
marginRight: StyleConstants.Spacing.M,
|
||||
borderRadius: 6,
|
||||
flexDirection: 'row'
|
||||
},
|
||||
reactionImage: {
|
||||
width: StyleConstants.Font.LineHeight.M + 3,
|
||||
height: StyleConstants.Font.LineHeight.M
|
||||
},
|
||||
reactionText: {
|
||||
...StyleConstants.FontStyle.M
|
||||
},
|
||||
reactionCount: {
|
||||
...StyleConstants.FontStyle.S,
|
||||
marginLeft: StyleConstants.Spacing.S
|
||||
},
|
||||
indicators: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: 49
|
||||
},
|
||||
indicator: {
|
||||
width: StyleConstants.Spacing.S,
|
||||
height: StyleConstants.Spacing.S,
|
||||
borderRadius: StyleConstants.Spacing.S,
|
||||
borderWidth: 1
|
||||
}
|
||||
})
|
||||
|
||||
export default ScreenAnnouncements
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import apiInstance from '@api/instance'
|
||||
import Icon from '@components/Icon'
|
||||
import ComponentSeparator from '@components/Separator'
|
||||
import CustomText from '@components/Text'
|
||||
import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { useAppDispatch } from '@root/store'
|
||||
@ -18,8 +19,6 @@ import {
|
||||
Modal,
|
||||
Platform,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View
|
||||
} from 'react-native'
|
||||
import { PanGestureHandler } from 'react-native-gesture-handler'
|
||||
@ -54,10 +53,15 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
|
||||
|
||||
const renderItem = useCallback(
|
||||
({ item }: { item: ComposeStateDraft }) => {
|
||||
console.log('timestamp', item.timestamp)
|
||||
return (
|
||||
<Pressable
|
||||
accessibilityHint={t('content.draftsList.content.accessibilityHint')}
|
||||
style={[styles.draft, { backgroundColor: colors.backgroundDefault }]}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
backgroundColor: colors.backgroundDefault
|
||||
}}
|
||||
onPress={async () => {
|
||||
setCheckingAttachments(true)
|
||||
let tempDraft = item
|
||||
@ -103,23 +107,42 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<HeaderSharedCreated created_at={item.timestamp} />
|
||||
<Text
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
numberOfLines={2}
|
||||
style={[styles.text, { color: colors.primaryDefault }]}
|
||||
style={{
|
||||
marginTop: StyleConstants.Spacing.XS,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{item.text ||
|
||||
item.spoiler ||
|
||||
t('content.draftsList.content.textEmpty')}
|
||||
</Text>
|
||||
</CustomText>
|
||||
{item.attachments?.uploads.length ? (
|
||||
<View style={styles.attachments}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
marginTop: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
{item.attachments.uploads.map((attachment, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
style={[
|
||||
styles.attachment,
|
||||
{ marginLeft: index !== 0 ? StyleConstants.Spacing.S : 0 }
|
||||
]}
|
||||
style={{
|
||||
width:
|
||||
(Dimensions.get('screen').width -
|
||||
StyleConstants.Spacing.Global.PagePadding * 2 -
|
||||
StyleConstants.Spacing.S * 3) /
|
||||
4,
|
||||
height:
|
||||
(Dimensions.get('screen').width -
|
||||
StyleConstants.Spacing.Global.PagePadding * 2 -
|
||||
StyleConstants.Spacing.S * 3) /
|
||||
4,
|
||||
marginLeft: index !== 0 ? StyleConstants.Spacing.S : 0
|
||||
}}
|
||||
source={{
|
||||
uri:
|
||||
attachment.local?.local_thumbnail ||
|
||||
@ -138,10 +161,21 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
|
||||
const renderHiddenItem = useCallback(
|
||||
({ item }) => (
|
||||
<View
|
||||
style={[styles.hiddenBase, { backgroundColor: colors.red }]}
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
backgroundColor: colors.red
|
||||
}}
|
||||
children={
|
||||
<Pressable
|
||||
style={styles.action}
|
||||
style={{
|
||||
flexBasis:
|
||||
StyleConstants.Font.Size.L +
|
||||
StyleConstants.Spacing.Global.PagePadding * 4,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
onPress={() => removeDraft(item.timestamp)}
|
||||
children={
|
||||
<Icon
|
||||
@ -183,17 +217,17 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
|
||||
visible={checkingAttachments}
|
||||
children={
|
||||
<View
|
||||
style={[
|
||||
styles.modal,
|
||||
{ backgroundColor: colors.backgroundOverlayInvert }
|
||||
]}
|
||||
style={{
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.backgroundOverlayInvert
|
||||
}}
|
||||
children={
|
||||
<Text
|
||||
children='检查附件在服务器的状态…'
|
||||
style={{
|
||||
...StyleConstants.FontStyle.M,
|
||||
color: colors.primaryOverlay
|
||||
}}
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
children={t('content.draftsList.checkAttachment')}
|
||||
style={{ color: colors.primaryOverlay }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
@ -203,49 +237,4 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
draft: {
|
||||
flex: 1,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding
|
||||
},
|
||||
text: {
|
||||
marginTop: StyleConstants.Spacing.XS,
|
||||
...StyleConstants.FontStyle.M
|
||||
},
|
||||
attachments: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
marginTop: StyleConstants.Spacing.S
|
||||
},
|
||||
attachment: {
|
||||
width:
|
||||
(Dimensions.get('screen').width -
|
||||
StyleConstants.Spacing.Global.PagePadding * 2 -
|
||||
StyleConstants.Spacing.S * 3) /
|
||||
4,
|
||||
height:
|
||||
(Dimensions.get('screen').width -
|
||||
StyleConstants.Spacing.Global.PagePadding * 2 -
|
||||
StyleConstants.Spacing.S * 3) /
|
||||
4
|
||||
},
|
||||
hiddenBase: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end'
|
||||
},
|
||||
action: {
|
||||
flexBasis:
|
||||
StyleConstants.Font.Size.L +
|
||||
StyleConstants.Spacing.Global.PagePadding * 4,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
modal: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}
|
||||
})
|
||||
|
||||
export default ComposeDraftsListRoot
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import CustomText from '@components/Text'
|
||||
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useContext } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Dimensions, Image, StyleSheet, Text, View } from 'react-native'
|
||||
import { Dimensions, Image, View } from 'react-native'
|
||||
import { PanGestureHandler } from 'react-native-gesture-handler'
|
||||
import Animated, {
|
||||
Extrapolate,
|
||||
@ -120,7 +121,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={styles.base}>
|
||||
<View style={{ overflow: 'hidden', flex: 1, alignItems: 'center' }}>
|
||||
<Image
|
||||
style={{
|
||||
width: imageDimensionis.width,
|
||||
@ -168,20 +169,18 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
|
||||
</PanGestureHandler>
|
||||
</View>
|
||||
{screenReaderEnabled ? null : (
|
||||
<Text style={[styles.imageFocusText, { color: colors.primaryDefault }]}>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{t('content.editAttachment.content.imageFocus')}
|
||||
</Text>
|
||||
</CustomText>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: { overflow: 'hidden', flex: 1, alignItems: 'center' },
|
||||
imageFocusText: {
|
||||
...StyleConstants.FontStyle.M,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding
|
||||
}
|
||||
})
|
||||
|
||||
export default ComposeEditAttachmentImage
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import CustomText from '@components/Text'
|
||||
import AttachmentVideo from '@components/Timeline/Shared/Attachment/Video'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useContext, useMemo, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
|
||||
import { ScrollView, StyleSheet, TextInput, View } from 'react-native'
|
||||
import ComposeContext from '../utils/createContext'
|
||||
import ComposeEditAttachmentImage from './Image'
|
||||
|
||||
@ -60,17 +61,28 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
|
||||
return (
|
||||
<ScrollView ref={scrollViewRef}>
|
||||
{mediaDisplay}
|
||||
<View style={styles.altTextContainer}>
|
||||
<Text
|
||||
style={[styles.altTextInputHeading, { color: colors.primaryDefault }]}
|
||||
<View style={{ padding: StyleConstants.Spacing.Global.PagePadding }}>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
fontWeight: StyleConstants.Font.Weight.Bold,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{t('content.editAttachment.content.altText.heading')}
|
||||
</Text>
|
||||
</CustomText>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.altTextInput,
|
||||
{ borderColor: colors.border, color: colors.primaryDefault }
|
||||
]}
|
||||
style={{
|
||||
height: 200,
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.S,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
paddingTop: StyleConstants.Spacing.S * 1.5,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: colors.border,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
onFocus={() => scrollViewRef.current?.scrollToEnd()}
|
||||
autoCapitalize='none'
|
||||
autoCorrect={false}
|
||||
@ -83,35 +95,20 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
|
||||
value={theAttachment.description}
|
||||
keyboardAppearance={mode}
|
||||
/>
|
||||
<Text style={[styles.altTextLength, { color: colors.secondary }]}>
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{
|
||||
textAlign: 'right',
|
||||
marginRight: StyleConstants.Spacing.S,
|
||||
marginBottom: StyleConstants.Spacing.M,
|
||||
color: colors.secondary
|
||||
}}
|
||||
>
|
||||
{theAttachment.description?.length || 0} / 1500
|
||||
</Text>
|
||||
</CustomText>
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
altTextContainer: { padding: StyleConstants.Spacing.Global.PagePadding },
|
||||
altTextInputHeading: {
|
||||
...StyleConstants.FontStyle.M,
|
||||
fontWeight: StyleConstants.Font.Weight.Bold
|
||||
},
|
||||
altTextInput: {
|
||||
height: 200,
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.S,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
paddingTop: StyleConstants.Spacing.S * 1.5,
|
||||
borderWidth: StyleSheet.hairlineWidth
|
||||
},
|
||||
altTextLength: {
|
||||
textAlign: 'right',
|
||||
marginRight: StyleConstants.Spacing.S,
|
||||
...StyleConstants.FontStyle.S,
|
||||
marginBottom: StyleConstants.Spacing.M
|
||||
}
|
||||
})
|
||||
|
||||
export default ComposeEditAttachmentRoot
|
||||
|
||||
@ -2,6 +2,7 @@ import analytics from '@components/analytics'
|
||||
import Button from '@components/Button'
|
||||
import haptics from '@components/haptics'
|
||||
import Icon from '@components/Icon'
|
||||
import CustomText from '@components/Text'
|
||||
import { useActionSheet } from '@expo/react-native-action-sheet'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
@ -16,14 +17,7 @@ import React, {
|
||||
useRef
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
FlatList,
|
||||
Image,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View
|
||||
} from 'react-native'
|
||||
import { FlatList, Image, Pressable, StyleSheet, View } from 'react-native'
|
||||
import { Circle } from 'react-native-animated-spinkit'
|
||||
import ComposeContext from '../../utils/createContext'
|
||||
import { ExtendedAttachment } from '../../utils/types'
|
||||
@ -122,33 +116,46 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
style={[styles.container, { width: calculateWidth(item) }]}
|
||||
style={{
|
||||
height: DEFAULT_HEIGHT,
|
||||
marginLeft: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginTop: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginBottom: StyleConstants.Spacing.Global.PagePadding,
|
||||
width: calculateWidth(item)
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
style={styles.image}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
source={{
|
||||
uri: item.local?.local_thumbnail || item.remote?.preview_url
|
||||
}}
|
||||
/>
|
||||
{item.remote?.meta?.original?.duration ? (
|
||||
<Text
|
||||
style={[
|
||||
styles.duration,
|
||||
{
|
||||
color: colors.backgroundDefault,
|
||||
backgroundColor: colors.backgroundOverlayInvert
|
||||
}
|
||||
]}
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: StyleConstants.Spacing.S,
|
||||
left: StyleConstants.Spacing.S,
|
||||
paddingLeft: StyleConstants.Spacing.S,
|
||||
paddingRight: StyleConstants.Spacing.S,
|
||||
paddingTop: StyleConstants.Spacing.XS,
|
||||
paddingBottom: StyleConstants.Spacing.XS,
|
||||
color: colors.backgroundDefault,
|
||||
backgroundColor: colors.backgroundOverlayInvert
|
||||
}}
|
||||
>
|
||||
{item.remote.meta.original.duration}
|
||||
</Text>
|
||||
</CustomText>
|
||||
) : null}
|
||||
{item.uploading ? (
|
||||
<View
|
||||
style={[
|
||||
styles.uploading,
|
||||
{ backgroundColor: colors.backgroundOverlayInvert }
|
||||
]}
|
||||
style={{
|
||||
...StyleSheet.absoluteFillObject,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.backgroundOverlayInvert
|
||||
}}
|
||||
>
|
||||
<Circle
|
||||
size={StyleConstants.Font.Size.L}
|
||||
@ -156,7 +163,15 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.actions}>
|
||||
<View
|
||||
style={{
|
||||
...StyleSheet.absoluteFillObject,
|
||||
justifyContent: 'space-between',
|
||||
alignContent: 'flex-end',
|
||||
alignItems: 'flex-end',
|
||||
padding: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
accessibilityLabel={t(
|
||||
'content.root.footer.attachments.remove.accessibilityLabel',
|
||||
@ -209,16 +224,20 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
|
||||
accessibilityLabel={t(
|
||||
'content.root.footer.attachments.upload.accessibilityLabel'
|
||||
)}
|
||||
style={[
|
||||
styles.container,
|
||||
{
|
||||
width: DEFAULT_HEIGHT,
|
||||
backgroundColor: colors.backgroundOverlayInvert
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
height: DEFAULT_HEIGHT,
|
||||
marginLeft: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginTop: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginBottom: StyleConstants.Spacing.Global.PagePadding,
|
||||
width: DEFAULT_HEIGHT,
|
||||
backgroundColor: colors.backgroundOverlayInvert
|
||||
}}
|
||||
onPress={async () => {
|
||||
analytics('compose_attachment_add_container_press')
|
||||
await chooseAndUploadAttachment({ composeDispatch, showActionSheetWithOptions })
|
||||
await chooseAndUploadAttachment({
|
||||
composeDispatch,
|
||||
showActionSheetWithOptions
|
||||
})
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
@ -229,7 +248,10 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
|
||||
overlay
|
||||
onPress={async () => {
|
||||
analytics('compose_attachment_add_button_press')
|
||||
await chooseAndUploadAttachment({ composeDispatch, showActionSheetWithOptions })
|
||||
await chooseAndUploadAttachment({
|
||||
composeDispatch,
|
||||
showActionSheetWithOptions
|
||||
})
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@ -250,16 +272,38 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
|
||||
[]
|
||||
)
|
||||
return (
|
||||
<View style={styles.base} ref={accessibleRefAttachments} accessible>
|
||||
<Pressable style={styles.sensitive} onPress={sensitiveOnPress}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
marginRight: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginTop: StyleConstants.Spacing.M
|
||||
}}
|
||||
ref={accessibleRefAttachments}
|
||||
accessible
|
||||
>
|
||||
<Pressable
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginLeft: StyleConstants.Spacing.Global.PagePadding
|
||||
}}
|
||||
onPress={sensitiveOnPress}
|
||||
>
|
||||
<Icon
|
||||
name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
color={colors.primaryDefault}
|
||||
/>
|
||||
<Text style={[styles.sensitiveText, { color: colors.primaryDefault }]}>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
marginLeft: StyleConstants.Spacing.S,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{t('content.root.footer.attachments.sensitive')}
|
||||
</Text>
|
||||
</CustomText>
|
||||
</Pressable>
|
||||
<FlatList
|
||||
horizontal
|
||||
@ -283,54 +327,4 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
marginRight: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginTop: StyleConstants.Spacing.M
|
||||
},
|
||||
sensitive: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginLeft: StyleConstants.Spacing.Global.PagePadding
|
||||
},
|
||||
sensitiveText: {
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginLeft: StyleConstants.Spacing.S
|
||||
},
|
||||
container: {
|
||||
height: DEFAULT_HEIGHT,
|
||||
marginLeft: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginTop: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginBottom: StyleConstants.Spacing.Global.PagePadding
|
||||
},
|
||||
image: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
duration: {
|
||||
position: 'absolute',
|
||||
bottom: StyleConstants.Spacing.S,
|
||||
left: StyleConstants.Spacing.S,
|
||||
...StyleConstants.FontStyle.S,
|
||||
paddingLeft: StyleConstants.Spacing.S,
|
||||
paddingRight: StyleConstants.Spacing.S,
|
||||
paddingTop: StyleConstants.Spacing.XS,
|
||||
paddingBottom: StyleConstants.Spacing.XS
|
||||
},
|
||||
uploading: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
actions: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
justifyContent: 'space-between',
|
||||
alignContent: 'flex-end',
|
||||
alignItems: 'flex-end',
|
||||
padding: StyleConstants.Spacing.S
|
||||
}
|
||||
})
|
||||
|
||||
export default React.memo(ComposeAttachments, () => true)
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import haptics from '@components/haptics'
|
||||
import CustomText from '@components/Text'
|
||||
import { useAppDispatch } from '@root/store'
|
||||
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
||||
import { countInstanceEmoji } from '@utils/slices/instancesSlice'
|
||||
@ -11,8 +12,6 @@ import {
|
||||
findNodeHandle,
|
||||
Pressable,
|
||||
SectionList,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View
|
||||
} from 'react-native'
|
||||
import FastImage from 'react-native-fast-image'
|
||||
@ -40,7 +39,16 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
|
||||
|
||||
const listHeader = useCallback(
|
||||
({ section: { title } }) => (
|
||||
<Text style={[styles.group, { color: colors.secondary }]}>{title}</Text>
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: StyleConstants.Spacing.L,
|
||||
color: colors.secondary
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</CustomText>
|
||||
),
|
||||
[]
|
||||
)
|
||||
@ -48,7 +56,15 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
|
||||
const listItem = useCallback(
|
||||
({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
|
||||
return (
|
||||
<View key={index} style={styles.emojis}>
|
||||
<View
|
||||
key={index}
|
||||
style={{
|
||||
flex: 1,
|
||||
flexWrap: 'wrap',
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginLeft: StyleConstants.Spacing.M
|
||||
}}
|
||||
>
|
||||
{item.map(emoji => {
|
||||
const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
|
||||
if (validUrl.isHttpsUri(uri)) {
|
||||
@ -77,7 +93,12 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
|
||||
'screenCompose:content.root.footer.emojis.accessibilityHint'
|
||||
)}
|
||||
source={{ uri }}
|
||||
style={styles.emoji}
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
padding: StyleConstants.Spacing.S,
|
||||
margin: StyleConstants.Spacing.S
|
||||
}}
|
||||
/>
|
||||
</Pressable>
|
||||
)
|
||||
@ -92,7 +113,15 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
|
||||
)
|
||||
|
||||
return (
|
||||
<View style={styles.base}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-around',
|
||||
height: 260
|
||||
}}
|
||||
>
|
||||
<SectionList
|
||||
accessible
|
||||
ref={accessibleRefEmojis}
|
||||
@ -108,31 +137,4 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-around',
|
||||
height: 260
|
||||
},
|
||||
group: {
|
||||
position: 'absolute',
|
||||
left: StyleConstants.Spacing.L,
|
||||
...StyleConstants.FontStyle.S
|
||||
},
|
||||
emojis: {
|
||||
flex: 1,
|
||||
flexWrap: 'wrap',
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginLeft: StyleConstants.Spacing.M
|
||||
},
|
||||
emoji: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
padding: StyleConstants.Spacing.S,
|
||||
margin: StyleConstants.Spacing.S
|
||||
}
|
||||
})
|
||||
|
||||
export default React.memo(ComposeEmojis, () => true)
|
||||
|
||||
@ -2,13 +2,14 @@ import analytics from '@components/analytics'
|
||||
import Button from '@components/Button'
|
||||
import Icon from '@components/Icon'
|
||||
import { MenuRow } from '@components/Menu'
|
||||
import CustomText from '@components/Text'
|
||||
import { useActionSheet } from '@expo/react-native-action-sheet'
|
||||
import { getInstanceConfigurationPoll } from '@utils/slices/instancesSlice'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { StyleSheet, Text, TextInput, View } from 'react-native'
|
||||
import { StyleSheet, TextInput, View } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
import ComposeContext from '../../utils/createContext'
|
||||
|
||||
@ -39,8 +40,21 @@ const ComposePoll: React.FC = () => {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View style={[styles.base, { borderColor: colors.border }]}>
|
||||
<View style={styles.options}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: 6,
|
||||
margin: StyleConstants.Spacing.Global.PagePadding,
|
||||
borderColor: colors.border
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
{[...Array(total)].map((e, i) => {
|
||||
const restOptions = Object.keys(options).filter(
|
||||
o => parseInt(o) !== i && parseInt(o) < total
|
||||
@ -66,13 +80,16 @@ const ComposePoll: React.FC = () => {
|
||||
)}
|
||||
keyboardAppearance={mode}
|
||||
{...(i === 0 && firstRender && { autoFocus: true })}
|
||||
style={[
|
||||
styles.textInput,
|
||||
{
|
||||
borderColor: colors.border,
|
||||
color: hasConflict ? colors.red : colors.primaryDefault
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: StyleConstants.Spacing.S,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: 6,
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginLeft: StyleConstants.Spacing.S,
|
||||
borderColor: colors.border,
|
||||
color: hasConflict ? colors.red : colors.primaryDefault
|
||||
}}
|
||||
placeholder={
|
||||
multiple
|
||||
? t('content.root.footer.poll.option.placeholder.multiple')
|
||||
@ -93,7 +110,15 @@ const ComposePoll: React.FC = () => {
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<View style={styles.controlAmount}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
marginRight: StyleConstants.Spacing.M
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
{...(total > 2
|
||||
? {
|
||||
@ -121,9 +146,14 @@ const ComposePoll: React.FC = () => {
|
||||
round
|
||||
disabled={!(total > 2)}
|
||||
/>
|
||||
<Text style={[styles.controlCount, { color: colors.secondary }]}>
|
||||
<CustomText
|
||||
style={{
|
||||
marginHorizontal: StyleConstants.Spacing.S,
|
||||
color: colors.secondary
|
||||
}}
|
||||
>
|
||||
{total} / {MAX_OPTIONS}
|
||||
</Text>
|
||||
</CustomText>
|
||||
<Button
|
||||
{...(total < MAX_OPTIONS
|
||||
? {
|
||||
@ -152,7 +182,9 @@ const ComposePoll: React.FC = () => {
|
||||
disabled={!(total < MAX_OPTIONS)}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.controlOptions}>
|
||||
<View
|
||||
style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}
|
||||
>
|
||||
<MenuRow
|
||||
title={t('content.root.footer.poll.multiple.heading')}
|
||||
content={
|
||||
@ -238,43 +270,12 @@ const ComposePoll: React.FC = () => {
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: 6,
|
||||
margin: StyleConstants.Spacing.Global.PagePadding
|
||||
},
|
||||
options: {
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
},
|
||||
option: {
|
||||
marginLeft: StyleConstants.Spacing.M,
|
||||
marginRight: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.S,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center'
|
||||
},
|
||||
textInput: {
|
||||
flex: 1,
|
||||
padding: StyleConstants.Spacing.S,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: 6,
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginLeft: StyleConstants.Spacing.S
|
||||
},
|
||||
controlAmount: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
marginRight: StyleConstants.Spacing.M
|
||||
},
|
||||
controlOptions: {
|
||||
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding
|
||||
},
|
||||
controlCount: {
|
||||
marginHorizontal: StyleConstants.Spacing.S
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import CustomText from '@components/Text'
|
||||
import {
|
||||
getInstanceAccount,
|
||||
getInstanceUri
|
||||
} from '@utils/slices/instancesSlice'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { StyleSheet, Text } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
const ComposePostingAs = React.memo(
|
||||
@ -21,21 +20,15 @@ const ComposePostingAs = React.memo(
|
||||
const instanceUri = useSelector(getInstanceUri)
|
||||
|
||||
return (
|
||||
<Text style={[styles.text, { color: colors.secondary }]}>
|
||||
<CustomText fontStyle='S' style={{ color: colors.secondary }}>
|
||||
{t('content.root.header.postingAs', {
|
||||
acct: instanceAccount?.acct,
|
||||
domain: instanceUri
|
||||
})}
|
||||
</Text>
|
||||
</CustomText>
|
||||
)
|
||||
},
|
||||
() => true
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
text: {
|
||||
...StyleConstants.FontStyle.S
|
||||
}
|
||||
})
|
||||
|
||||
export default ComposePostingAs
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CustomText from '@components/Text'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
import React, { useContext } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { StyleSheet, Text, TextInput } from 'react-native'
|
||||
import { TextInput } from 'react-native'
|
||||
import formatText from '../../formatText'
|
||||
import ComposeContext from '../../utils/createContext'
|
||||
|
||||
@ -14,13 +15,16 @@ const ComposeSpoilerInput: React.FC = () => {
|
||||
return (
|
||||
<TextInput
|
||||
keyboardAppearance={mode}
|
||||
style={[
|
||||
styles.spoilerInput,
|
||||
{
|
||||
color: colors.primaryDefault,
|
||||
borderBottomColor: colors.border
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
paddingBottom: StyleConstants.Spacing.M,
|
||||
marginLeft: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginRight: StyleConstants.Spacing.Global.PagePadding,
|
||||
borderBottomWidth: 0.5,
|
||||
color: colors.primaryDefault,
|
||||
borderBottomColor: colors.border
|
||||
}}
|
||||
autoCapitalize='none'
|
||||
autoCorrect={false}
|
||||
autoFocus
|
||||
@ -53,20 +57,9 @@ const ComposeSpoilerInput: React.FC = () => {
|
||||
})
|
||||
}
|
||||
>
|
||||
<Text>{composeState.spoiler.formatted}</Text>
|
||||
<CustomText>{composeState.spoiler.formatted}</CustomText>
|
||||
</TextInput>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
spoilerInput: {
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
paddingBottom: StyleConstants.Spacing.M,
|
||||
marginLeft: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginRight: StyleConstants.Spacing.Global.PagePadding,
|
||||
borderBottomWidth: 0.5
|
||||
}
|
||||
})
|
||||
|
||||
export default ComposeSpoilerInput
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import CustomText from '@components/Text'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useContext } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { StyleSheet, Text, TextInput } from 'react-native'
|
||||
import { TextInput } from 'react-native'
|
||||
import formatText from '../../formatText'
|
||||
import ComposeContext from '../../utils/createContext'
|
||||
|
||||
@ -14,13 +15,15 @@ const ComposeTextInput: React.FC = () => {
|
||||
return (
|
||||
<TextInput
|
||||
keyboardAppearance={mode}
|
||||
style={[
|
||||
styles.textInput,
|
||||
{
|
||||
color: colors.primaryDefault,
|
||||
borderBottomColor: colors.border
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
paddingBottom: StyleConstants.Spacing.M,
|
||||
marginLeft: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginRight: StyleConstants.Spacing.Global.PagePadding,
|
||||
color: colors.primaryDefault,
|
||||
borderBottomColor: colors.border
|
||||
}}
|
||||
autoFocus
|
||||
enablesReturnKeyAutomatically
|
||||
multiline
|
||||
@ -52,19 +55,9 @@ const ComposeTextInput: React.FC = () => {
|
||||
ref={composeState.textInputFocus.refs.text}
|
||||
scrollEnabled={false}
|
||||
>
|
||||
<Text>{composeState.text.formatted}</Text>
|
||||
<CustomText>{composeState.text.formatted}</CustomText>
|
||||
</TextInput>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
textInput: {
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
paddingBottom: StyleConstants.Spacing.M,
|
||||
marginLeft: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginRight: StyleConstants.Spacing.Global.PagePadding
|
||||
}
|
||||
})
|
||||
|
||||
export default ComposeTextInput
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { debounce, differenceWith, isEqual } from 'lodash'
|
||||
import React, { createElement, Dispatch } from 'react'
|
||||
import { Text } from 'react-native'
|
||||
import { FetchOptions } from 'react-query/types/core/query'
|
||||
import Autolinker from '@root/modules/autolinker'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { ComposeAction, ComposeState } from './utils/types'
|
||||
import { instanceConfigurationStatusCharsURL } from './Root'
|
||||
import CustomText from '@components/Text'
|
||||
|
||||
export interface Params {
|
||||
textInput: ComposeState['textInputFocus']['current']
|
||||
@ -18,7 +18,7 @@ export interface Params {
|
||||
const TagText = ({ text }: { text: string }) => {
|
||||
const { colors } = useTheme()
|
||||
|
||||
return <Text style={{ color: colors.blue }}>{text}</Text>
|
||||
return <CustomText style={{ color: colors.blue }}>{text}</CustomText>
|
||||
}
|
||||
|
||||
const debouncedSuggestions = debounce(
|
||||
@ -120,7 +120,7 @@ const formatText = ({
|
||||
payload: {
|
||||
count: contentLength,
|
||||
raw: content,
|
||||
formatted: createElement(Text, null, children)
|
||||
formatted: createElement(CustomText, null, children)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { HeaderLeft, HeaderRight } from '@components/Header'
|
||||
import Input from '@components/Input'
|
||||
import CustomText from '@components/Text'
|
||||
import { TabMeProfileStackScreenProps } from '@utils/navigation/navigators'
|
||||
import { useProfileMutation } from '@utils/queryHooks/profile'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
@ -7,7 +8,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { isEqual } from 'lodash'
|
||||
import React, { RefObject, useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Alert, StyleSheet, Text, View } from 'react-native'
|
||||
import { Alert, View } from 'react-native'
|
||||
import FlashMessage from 'react-native-flash-message'
|
||||
import { ScrollView } from 'react-native-gesture-handler'
|
||||
|
||||
@ -100,13 +101,25 @@ const TabMeProfileFields: React.FC<
|
||||
}, [theme, i18n.language, dirty, status, newFields])
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
|
||||
<ScrollView
|
||||
style={{
|
||||
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginBottom: StyleConstants.Spacing.L
|
||||
}}
|
||||
keyboardShouldPersistTaps='always'
|
||||
>
|
||||
<View style={{ marginBottom: StyleConstants.Spacing.L * 2 }}>
|
||||
{Array.from(Array(4).keys()).map(index => (
|
||||
<View key={index} style={styles.group}>
|
||||
<Text style={[styles.headline, { color: colors.primaryDefault }]}>
|
||||
<View key={index} style={{ marginBottom: StyleConstants.Spacing.M }}>
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{
|
||||
marginBottom: StyleConstants.Spacing.XS,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{t('me.profile.fields.group', { index: index + 1 })}
|
||||
</Text>
|
||||
</CustomText>
|
||||
<Input
|
||||
title={t('me.profile.fields.label')}
|
||||
autoFocus={false}
|
||||
@ -142,18 +155,4 @@ const TabMeProfileFields: React.FC<
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginBottom: StyleConstants.Spacing.L
|
||||
},
|
||||
group: {
|
||||
marginBottom: StyleConstants.Spacing.M
|
||||
},
|
||||
headline: {
|
||||
...StyleConstants.FontStyle.S,
|
||||
marginBottom: StyleConstants.Spacing.XS
|
||||
}
|
||||
})
|
||||
|
||||
export default TabMeProfileFields
|
||||
|
||||
@ -2,6 +2,7 @@ import analytics from '@components/analytics'
|
||||
import Button from '@components/Button'
|
||||
import Icon from '@components/Icon'
|
||||
import { MenuContainer, MenuRow } from '@components/Menu'
|
||||
import CustomText from '@components/Text'
|
||||
import { useAppDispatch } from '@root/store'
|
||||
import { isDevelopment } from '@utils/checkEnvironment'
|
||||
import { updateInstancePush } from '@utils/slices/instances/updatePush'
|
||||
@ -20,7 +21,7 @@ import * as Notifications from 'expo-notifications'
|
||||
import * as WebBrowser from 'expo-web-browser'
|
||||
import React, { useState, useEffect, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { AppState, Linking, ScrollView, Text, View } from 'react-native'
|
||||
import { AppState, Linking, ScrollView, View } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
const TabMePush: React.FC = () => {
|
||||
@ -205,14 +206,9 @@ const TabMePush: React.FC = () => {
|
||||
size={StyleConstants.Font.Size.L}
|
||||
color={colors.primaryDefault}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
...StyleConstants.FontStyle.M,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
<CustomText fontStyle='M' style={{ color: colors.primaryDefault }}>
|
||||
{t('me.push.notAvailable')}
|
||||
</Text>
|
||||
</CustomText>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { MenuContainer, MenuRow } from '@components/Menu'
|
||||
import CustomText from '@components/Text'
|
||||
import { useAppDispatch } from '@root/store'
|
||||
import { getInstanceVersion } from '@utils/slices/instancesSlice'
|
||||
import {
|
||||
@ -10,7 +11,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import Constants from 'expo-constants'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Text } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
const SettingsAnalytics: React.FC = () => {
|
||||
@ -31,25 +31,25 @@ const SettingsAnalytics: React.FC = () => {
|
||||
dispatch(changeAnalytics(!settingsAnalytics))
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
...StyleConstants.FontStyle.S,
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
color: colors.secondary
|
||||
}}
|
||||
>
|
||||
{t('me.settings.version', { version: Constants.manifest?.version })}
|
||||
</Text>
|
||||
<Text
|
||||
</CustomText>
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
...StyleConstants.FontStyle.S,
|
||||
color: colors.secondary
|
||||
}}
|
||||
>
|
||||
{t('me.settings.instanceVersion', { version: instanceVersion })}
|
||||
</Text>
|
||||
</CustomText>
|
||||
</MenuContainer>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
import Button from '@components/Button'
|
||||
import { MenuContainer, MenuRow } from '@components/Menu'
|
||||
import { displayMessage } from '@components/Message'
|
||||
import CustomText from '@components/Text'
|
||||
import { useActionSheet } from '@expo/react-native-action-sheet'
|
||||
import { persistor } from '@root/store'
|
||||
import { getInstanceActive, getInstances } from '@utils/slices/instancesSlice'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import { DevSettings, Text } from 'react-native'
|
||||
import { DevSettings } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
const SettingsDev: React.FC = () => {
|
||||
@ -18,16 +19,16 @@ const SettingsDev: React.FC = () => {
|
||||
|
||||
return (
|
||||
<MenuContainer>
|
||||
<Text
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
selectable
|
||||
style={{
|
||||
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
||||
...StyleConstants.FontStyle.S,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{instances[instanceActive]?.token}
|
||||
</Text>
|
||||
</CustomText>
|
||||
<MenuRow
|
||||
title={'Local active index'}
|
||||
content={typeof instanceActive + ' - ' + instanceActive}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import Button from '@components/Button'
|
||||
import haptics from '@components/haptics'
|
||||
import ComponentSeparator from '@components/Separator'
|
||||
import CustomText from '@components/Text'
|
||||
import TimelineDefault from '@components/Timeline/Default'
|
||||
import { useAppDispatch } from '@root/store'
|
||||
import { TabMeStackScreenProps } from '@utils/navigation/navigators'
|
||||
@ -14,7 +15,7 @@ import { adaptiveScale } from '@utils/styles/scaling'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { StyleSheet, View } from 'react-native'
|
||||
import { ScrollView } from 'react-native-gesture-handler'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
@ -76,31 +77,26 @@ const TabMeSettingsFontsize: React.FC<
|
||||
return (
|
||||
<>
|
||||
{([-1, 0, 1, 2, 3] as [-1, 0, 1, 2, 3]).map(size => (
|
||||
<Text
|
||||
<CustomText
|
||||
key={size}
|
||||
style={[
|
||||
styles.size,
|
||||
{
|
||||
fontSize: adaptiveScale(StyleConstants.Font.Size.M, size),
|
||||
lineHeight: adaptiveScale(
|
||||
StyleConstants.Font.LineHeight.M,
|
||||
size
|
||||
),
|
||||
fontWeight:
|
||||
initialSize === size
|
||||
? StyleConstants.Font.Weight.Bold
|
||||
: undefined,
|
||||
color:
|
||||
initialSize === size
|
||||
? colors.primaryDefault
|
||||
: colors.secondary,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: colors.border
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
marginHorizontal: StyleConstants.Spacing.XS,
|
||||
paddingHorizontal: StyleConstants.Spacing.XS,
|
||||
marginBottom: StyleConstants.Spacing.M,
|
||||
fontSize: adaptiveScale(StyleConstants.Font.Size.M, size),
|
||||
lineHeight: adaptiveScale(StyleConstants.Font.LineHeight.M, size),
|
||||
fontWeight:
|
||||
initialSize === size
|
||||
? StyleConstants.Font.Weight.Bold
|
||||
: undefined,
|
||||
color:
|
||||
initialSize === size ? colors.primaryDefault : colors.secondary,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: colors.border
|
||||
}}
|
||||
>
|
||||
{t(`me.fontSize.sizes.${mapFontsizeToName(size)}`)}
|
||||
</Text>
|
||||
</CustomText>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
@ -108,9 +104,17 @@ const TabMeSettingsFontsize: React.FC<
|
||||
|
||||
return (
|
||||
<ScrollView scrollEnabled={false}>
|
||||
<Text style={[styles.header, { color: colors.primaryDefault }]}>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.M,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{t('me.fontSize.showcase')}
|
||||
</Text>
|
||||
</CustomText>
|
||||
<View>
|
||||
<ComponentSeparator
|
||||
extraMarginLeft={-StyleConstants.Spacing.Global.PagePadding}
|
||||
@ -127,11 +131,33 @@ const TabMeSettingsFontsize: React.FC<
|
||||
extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
|
||||
/>
|
||||
</View>
|
||||
<Text style={[styles.header, { color: colors.primaryDefault }]}>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.M,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{t('me.fontSize.availableSizes')}
|
||||
</Text>
|
||||
<View style={styles.sizesDemo}>{sizesDemo}</View>
|
||||
<View style={styles.controls}>
|
||||
</CustomText>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
{sizesDemo}
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onPress={() => {
|
||||
if (initialSize > -1) {
|
||||
@ -144,7 +170,7 @@ const TabMeSettingsFontsize: React.FC<
|
||||
content='Minus'
|
||||
round
|
||||
disabled={initialSize <= -1}
|
||||
style={styles.control}
|
||||
style={{ marginHorizontal: StyleConstants.Spacing.S }}
|
||||
/>
|
||||
<Button
|
||||
onPress={() => {
|
||||
@ -158,38 +184,11 @@ const TabMeSettingsFontsize: React.FC<
|
||||
content='Plus'
|
||||
round
|
||||
disabled={initialSize >= 3}
|
||||
style={styles.control}
|
||||
style={{ marginHorizontal: StyleConstants.Spacing.S }}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
...StyleConstants.FontStyle.M,
|
||||
textAlign: 'center',
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.M
|
||||
},
|
||||
sizesDemo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
size: {
|
||||
marginHorizontal: StyleConstants.Spacing.XS,
|
||||
paddingHorizontal: StyleConstants.Spacing.XS,
|
||||
marginBottom: StyleConstants.Spacing.M
|
||||
},
|
||||
controls: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
control: {
|
||||
marginHorizontal: StyleConstants.Spacing.S
|
||||
}
|
||||
})
|
||||
|
||||
export default TabMeSettingsFontsize
|
||||
|
||||
@ -2,6 +2,7 @@ import analytics from '@components/analytics'
|
||||
import Button from '@components/Button'
|
||||
import haptics from '@components/haptics'
|
||||
import ComponentInstance from '@components/Instance'
|
||||
import CustomText from '@components/Text'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import initQuery from '@utils/initQuery'
|
||||
import {
|
||||
@ -13,13 +14,7 @@ import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View
|
||||
} from 'react-native'
|
||||
import { KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native'
|
||||
import { ScrollView } from 'react-native-gesture-handler'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
@ -35,7 +30,10 @@ const AccountButton: React.FC<Props> = ({ instance, selected = false }) => {
|
||||
<Button
|
||||
type='text'
|
||||
selected={selected}
|
||||
style={styles.button}
|
||||
style={{
|
||||
marginBottom: StyleConstants.Spacing.M,
|
||||
marginRight: StyleConstants.Spacing.M
|
||||
}}
|
||||
content={`@${instance.account.acct}@${instance.uri}${
|
||||
selected ? ' ✓' : ''
|
||||
}`}
|
||||
@ -70,13 +68,20 @@ const TabMeSwitch: React.FC = () => {
|
||||
>
|
||||
<ScrollView
|
||||
ref={scrollViewRef}
|
||||
style={styles.base}
|
||||
style={{ marginBottom: StyleConstants.Spacing.L * 2 }}
|
||||
keyboardShouldPersistTaps='always'
|
||||
>
|
||||
<View>
|
||||
<Text style={[styles.header, { color: colors.primaryDefault }]}>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
paddingVertical: StyleConstants.Spacing.S,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{t('me.switch.new')}
|
||||
</Text>
|
||||
</CustomText>
|
||||
<ComponentInstance
|
||||
scrollViewRef={scrollViewRef}
|
||||
disableHeaderImage
|
||||
@ -85,12 +90,32 @@ const TabMeSwitch: React.FC = () => {
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[styles.firstSection, , { borderTopColor: colors.border }]}
|
||||
style={{
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
paddingTop: StyleConstants.Spacing.M,
|
||||
marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderTopColor: colors.border
|
||||
}}
|
||||
>
|
||||
<Text style={[styles.header, { color: colors.primaryDefault }]}>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
paddingVertical: StyleConstants.Spacing.S,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{t('me.switch.existing')}
|
||||
</Text>
|
||||
<View style={styles.accountButtons}>
|
||||
</CustomText>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
marginTop: StyleConstants.Spacing.M
|
||||
}}
|
||||
>
|
||||
{instances.length
|
||||
? instances
|
||||
.slice()
|
||||
@ -121,31 +146,4 @@ const TabMeSwitch: React.FC = () => {
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
marginBottom: StyleConstants.Spacing.L * 2
|
||||
},
|
||||
header: {
|
||||
...StyleConstants.FontStyle.M,
|
||||
textAlign: 'center',
|
||||
paddingVertical: StyleConstants.Spacing.S
|
||||
},
|
||||
firstSection: {
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
paddingTop: StyleConstants.Spacing.M,
|
||||
marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
||||
borderTopWidth: StyleSheet.hairlineWidth
|
||||
},
|
||||
accountButtons: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
marginTop: StyleConstants.Spacing.M
|
||||
},
|
||||
button: {
|
||||
marginBottom: StyleConstants.Spacing.M,
|
||||
marginRight: StyleConstants.Spacing.M
|
||||
}
|
||||
})
|
||||
|
||||
export default TabMeSwitch
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import Icon from '@components/Icon'
|
||||
import CustomText from '@components/Text'
|
||||
import {
|
||||
getInstanceAccount,
|
||||
getInstanceUri
|
||||
@ -6,7 +7,7 @@ import {
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useMemo } from 'react'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { View } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { PlaceholderLine } from 'rn-placeholder'
|
||||
|
||||
@ -26,27 +27,19 @@ const AccountInformationAccount: React.FC<Props> = ({
|
||||
)
|
||||
const instanceUri = useSelector(getInstanceUri)
|
||||
|
||||
const movedStyle = useMemo(
|
||||
() =>
|
||||
StyleSheet.create({
|
||||
base: {
|
||||
textDecorationLine: account?.moved ? 'line-through' : undefined
|
||||
}
|
||||
}),
|
||||
[account?.moved]
|
||||
)
|
||||
const movedContent = useMemo(() => {
|
||||
if (account?.moved) {
|
||||
return (
|
||||
<Text
|
||||
style={[
|
||||
styles.moved,
|
||||
{ color: colors.secondary, ...StyleConstants.FontStyle.M }
|
||||
]}
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
marginLeft: StyleConstants.Spacing.S,
|
||||
color: colors.secondary
|
||||
}}
|
||||
selectable
|
||||
>
|
||||
@{account.moved.acct}
|
||||
</Text>
|
||||
</CustomText>
|
||||
)
|
||||
}
|
||||
}, [account?.moved])
|
||||
@ -54,26 +47,29 @@ const AccountInformationAccount: React.FC<Props> = ({
|
||||
if (account || (localInstance && instanceAccount)) {
|
||||
return (
|
||||
<View
|
||||
style={[styles.base, { flexDirection: 'row', alignItems: 'center' }]}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 0,
|
||||
marginBottom: StyleConstants.Spacing.L
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
movedStyle.base,
|
||||
{
|
||||
color: colors.secondary,
|
||||
...StyleConstants.FontStyle.M
|
||||
}
|
||||
]}
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
textDecorationLine: account?.moved ? 'line-through' : undefined,
|
||||
color: colors.secondary
|
||||
}}
|
||||
selectable
|
||||
>
|
||||
@{localInstance ? instanceAccount?.acct : account?.acct}
|
||||
{localInstance ? `@${instanceUri}` : null}
|
||||
</Text>
|
||||
</CustomText>
|
||||
{movedContent}
|
||||
{account?.locked ? (
|
||||
<Icon
|
||||
name='Lock'
|
||||
style={styles.type}
|
||||
style={{ marginLeft: StyleConstants.Spacing.S }}
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.M}
|
||||
/>
|
||||
@ -81,7 +77,7 @@ const AccountInformationAccount: React.FC<Props> = ({
|
||||
{account?.bot ? (
|
||||
<Icon
|
||||
name='HardDrive'
|
||||
style={styles.type}
|
||||
style={{ marginLeft: StyleConstants.Spacing.S }}
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.M}
|
||||
/>
|
||||
@ -95,23 +91,12 @@ const AccountInformationAccount: React.FC<Props> = ({
|
||||
height={StyleConstants.Font.LineHeight.M}
|
||||
color={colors.shimmerDefault}
|
||||
noMargin
|
||||
style={styles.base}
|
||||
style={{ borderRadius: 0, marginBottom: StyleConstants.Spacing.L }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
borderRadius: 0,
|
||||
marginBottom: StyleConstants.Spacing.L
|
||||
},
|
||||
type: { marginLeft: StyleConstants.Spacing.S },
|
||||
moved: {
|
||||
marginLeft: StyleConstants.Spacing.S
|
||||
}
|
||||
})
|
||||
|
||||
export default React.memo(
|
||||
AccountInformationAccount,
|
||||
(_, next) => next.account === undefined
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import Icon from '@components/Icon'
|
||||
import CustomText from '@components/Text'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { View } from 'react-native'
|
||||
import { PlaceholderLine } from 'rn-placeholder'
|
||||
|
||||
export interface Props {
|
||||
@ -24,20 +25,20 @@ const AccountInformationCreated = React.memo(
|
||||
if (account) {
|
||||
return (
|
||||
<View
|
||||
style={[styles.base, { flexDirection: 'row', alignItems: 'center' }]}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 0,
|
||||
marginBottom: StyleConstants.Spacing.M
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
name='Calendar'
|
||||
size={StyleConstants.Font.Size.S}
|
||||
color={colors.secondary}
|
||||
style={styles.icon}
|
||||
style={{ marginRight: StyleConstants.Spacing.XS }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.secondary,
|
||||
...StyleConstants.FontStyle.S
|
||||
}}
|
||||
>
|
||||
<CustomText fontStyle='S' style={{ color: colors.secondary }}>
|
||||
{t('shared.account.created_at', {
|
||||
date: new Date(account.created_at || '').toLocaleDateString(
|
||||
i18n.language,
|
||||
@ -48,7 +49,7 @@ const AccountInformationCreated = React.memo(
|
||||
}
|
||||
)
|
||||
})}
|
||||
</Text>
|
||||
</CustomText>
|
||||
</View>
|
||||
)
|
||||
} else {
|
||||
@ -58,7 +59,7 @@ const AccountInformationCreated = React.memo(
|
||||
height={StyleConstants.Font.LineHeight.S}
|
||||
color={colors.shimmerDefault}
|
||||
noMargin
|
||||
style={styles.base}
|
||||
style={{ borderRadius: 0, marginBottom: StyleConstants.Spacing.M }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -66,14 +67,4 @@ const AccountInformationCreated = React.memo(
|
||||
(_, next) => next.account === undefined
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
borderRadius: 0,
|
||||
marginBottom: StyleConstants.Spacing.M
|
||||
},
|
||||
icon: {
|
||||
marginRight: StyleConstants.Spacing.XS
|
||||
}
|
||||
})
|
||||
|
||||
export default AccountInformationCreated
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import Input from '@components/Input'
|
||||
import { ParseEmojis } from '@components/Parse'
|
||||
import CustomText from '@components/Text'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { View } from 'react-native'
|
||||
import { PlaceholderLine } from 'rn-placeholder'
|
||||
|
||||
export interface Props {
|
||||
@ -17,7 +18,7 @@ const AccountInformationName: React.FC<Props> = ({ account, edit }) => {
|
||||
const movedContent = useMemo(() => {
|
||||
if (account?.moved) {
|
||||
return (
|
||||
<View style={styles.moved}>
|
||||
<View style={{ marginLeft: StyleConstants.Spacing.S }}>
|
||||
<ParseEmojis
|
||||
content={account.moved.display_name || account.moved.username}
|
||||
emojis={account.moved.emojis}
|
||||
@ -32,13 +33,20 @@ const AccountInformationName: React.FC<Props> = ({ account, edit }) => {
|
||||
const [displatName, setDisplayName] = useState(account?.display_name)
|
||||
|
||||
return (
|
||||
<View style={[styles.base, { flexDirection: 'row' }]}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 0,
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
marginBottom: StyleConstants.Spacing.XS,
|
||||
flexDirection: 'row'
|
||||
}}
|
||||
>
|
||||
{account ? (
|
||||
edit ? (
|
||||
<Input title='昵称' value={displatName} setValue={setDisplayName} />
|
||||
) : (
|
||||
<>
|
||||
<Text
|
||||
<CustomText
|
||||
style={{
|
||||
textDecorationLine: account?.moved ? 'line-through' : undefined
|
||||
}}
|
||||
@ -49,7 +57,7 @@ const AccountInformationName: React.FC<Props> = ({ account, edit }) => {
|
||||
size='L'
|
||||
fontBold
|
||||
/>
|
||||
</Text>
|
||||
</CustomText>
|
||||
{movedContent}
|
||||
</>
|
||||
)
|
||||
@ -66,17 +74,6 @@ const AccountInformationName: React.FC<Props> = ({ account, edit }) => {
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
borderRadius: 0,
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
marginBottom: StyleConstants.Spacing.XS
|
||||
},
|
||||
moved: {
|
||||
marginLeft: StyleConstants.Spacing.S
|
||||
}
|
||||
})
|
||||
|
||||
export default React.memo(
|
||||
AccountInformationName,
|
||||
(_, next) => next.account === undefined
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import analytics from '@components/analytics'
|
||||
import CustomText from '@components/Text'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StackNavigationProp } from '@react-navigation/stack'
|
||||
import { StyleConstants } from '@root/utils/styles/constants'
|
||||
@ -6,7 +7,7 @@ import { useTheme } from '@root/utils/styles/ThemeManager'
|
||||
import { TabLocalStackParamList } from '@utils/navigation/navigators'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { StyleSheet, View } from 'react-native'
|
||||
import { PlaceholderLine } from 'rn-placeholder'
|
||||
|
||||
export interface Props {
|
||||
@ -23,7 +24,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
|
||||
return (
|
||||
<View style={[styles.stats, { flexDirection: 'row' }]}>
|
||||
{account ? (
|
||||
<Text
|
||||
<CustomText
|
||||
style={[styles.stat, { color: colors.primaryDefault }]}
|
||||
children={t('shared.account.summary.statuses_count', {
|
||||
count: account.statuses_count || 0
|
||||
@ -45,7 +46,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
|
||||
/>
|
||||
)}
|
||||
{account ? (
|
||||
<Text
|
||||
<CustomText
|
||||
style={[
|
||||
styles.stat,
|
||||
{ color: colors.primaryDefault, textAlign: 'right' }
|
||||
@ -75,7 +76,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
|
||||
/>
|
||||
)}
|
||||
{account ? (
|
||||
<Text
|
||||
<CustomText
|
||||
style={[
|
||||
styles.stat,
|
||||
{ color: colors.primaryDefault, textAlign: 'center' }
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { ParseEmojis } from '@components/Parse'
|
||||
import CustomText from '@components/Text'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import { Dimensions, StyleSheet, Text, View } from 'react-native'
|
||||
import { Dimensions, StyleSheet, View } from 'react-native'
|
||||
import Animated, {
|
||||
Extrapolate,
|
||||
interpolate,
|
||||
@ -46,29 +47,33 @@ const AccountNav = React.memo(
|
||||
return (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.base,
|
||||
styleOpacity,
|
||||
{ backgroundColor: colors.backgroundDefault, height: headerHeight }
|
||||
{
|
||||
...StyleSheet.absoluteFillObject,
|
||||
zIndex: 99,
|
||||
backgroundColor: colors.backgroundDefault,
|
||||
height: headerHeight
|
||||
}
|
||||
]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.content,
|
||||
{
|
||||
marginTop:
|
||||
useSafeAreaInsets().top + (44 - StyleConstants.Font.Size.L) / 2
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
overflow: 'hidden',
|
||||
marginTop:
|
||||
useSafeAreaInsets().top + (44 - StyleConstants.Font.Size.L) / 2
|
||||
}}
|
||||
>
|
||||
<Animated.View style={[styles.display_name, styleMarginTop]}>
|
||||
<Animated.View style={[{ flexDirection: 'row' }, styleMarginTop]}>
|
||||
{account ? (
|
||||
<Text numberOfLines={1}>
|
||||
<CustomText numberOfLines={1}>
|
||||
<ParseEmojis
|
||||
content={account.display_name || account.username}
|
||||
emojis={account.emojis}
|
||||
fontBold
|
||||
/>
|
||||
</Text>
|
||||
</CustomText>
|
||||
) : null}
|
||||
</Animated.View>
|
||||
</View>
|
||||
@ -78,19 +83,4 @@ const AccountNav = React.memo(
|
||||
(_, next) => next.account === undefined
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
zIndex: 99
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
overflow: 'hidden'
|
||||
},
|
||||
display_name: {
|
||||
flexDirection: 'row'
|
||||
}
|
||||
})
|
||||
|
||||
export default AccountNav
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import Icon from '@components/Icon'
|
||||
import { ParseEmojis } from '@components/Parse'
|
||||
import ComponentSeparator from '@components/Separator'
|
||||
import CustomText from '@components/Text'
|
||||
import TimelineAttachment from '@components/Timeline/Shared/Attachment'
|
||||
import TimelineContent from '@components/Timeline/Shared/Content'
|
||||
import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
|
||||
@ -9,7 +10,7 @@ import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import { Text, View } from 'react-native'
|
||||
import { View } from 'react-native'
|
||||
import { ScrollView } from 'react-native-gesture-handler'
|
||||
|
||||
const ContentView = ({
|
||||
@ -52,12 +53,12 @@ const ContentView = ({
|
||||
size={StyleConstants.Font.Size.M}
|
||||
color={colors.disabled}
|
||||
/>
|
||||
<Text style={{ flex: 1 }}>
|
||||
<CustomText style={{ flex: 1 }}>
|
||||
<ParseEmojis
|
||||
content={option.title}
|
||||
emojis={history.poll?.emojis}
|
||||
/>
|
||||
</Text>
|
||||
</CustomText>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { HeaderCenter, HeaderLeft } from '@components/Header'
|
||||
import { ParseEmojis } from '@components/Parse'
|
||||
import CustomText from '@components/Text'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import TabSharedAccount from '@screens/Tabs/Shared/Account'
|
||||
import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
|
||||
@ -14,7 +15,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { debounce } from 'lodash'
|
||||
import React from 'react'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { Platform, StyleSheet, Text, TextInput, View } from 'react-native'
|
||||
import { Platform, TextInput, View } from 'react-native'
|
||||
|
||||
const TabSharedRoot = ({
|
||||
Stack
|
||||
@ -61,7 +62,7 @@ const TabSharedRoot = ({
|
||||
}: TabSharedStackScreenProps<'Tab-Shared-Attachments'>) => {
|
||||
return {
|
||||
headerTitle: () => (
|
||||
<Text numberOfLines={1}>
|
||||
<CustomText numberOfLines={1}>
|
||||
<Trans
|
||||
i18nKey='screenTabs:shared.attachments.name'
|
||||
components={[
|
||||
@ -70,16 +71,16 @@ const TabSharedRoot = ({
|
||||
emojis={account.emojis}
|
||||
fontBold
|
||||
/>,
|
||||
<Text
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
...StyleConstants.FontStyle.M,
|
||||
color: colors.primaryDefault,
|
||||
fontWeight: StyleConstants.Font.Weight.Bold
|
||||
}}
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</Text>
|
||||
</CustomText>
|
||||
)
|
||||
}
|
||||
}}
|
||||
@ -126,28 +127,30 @@ const TabSharedRoot = ({
|
||||
}
|
||||
)
|
||||
return (
|
||||
<View style={styles.searchBar}>
|
||||
<View
|
||||
style={{
|
||||
flexBasis: '80%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
editable={false}
|
||||
style={[
|
||||
styles.textInput,
|
||||
{
|
||||
color: colors.primaryDefault
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
fontSize: StyleConstants.Font.Size.M,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
defaultValue={t('shared.search.header.prefix')}
|
||||
/>
|
||||
<TextInput
|
||||
accessibilityRole='search'
|
||||
keyboardAppearance={mode}
|
||||
style={[
|
||||
styles.textInput,
|
||||
{
|
||||
flex: 1,
|
||||
color: colors.primaryDefault,
|
||||
paddingLeft: StyleConstants.Spacing.XS
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
fontSize: StyleConstants.Font.Size.M,
|
||||
flex: 1,
|
||||
color: colors.primaryDefault,
|
||||
paddingLeft: StyleConstants.Spacing.XS
|
||||
}}
|
||||
autoFocus
|
||||
onChangeText={onChangeText}
|
||||
autoCapitalize='none'
|
||||
@ -199,15 +202,4 @@ const TabSharedRoot = ({
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
searchBar: {
|
||||
flexBasis: '80%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center'
|
||||
},
|
||||
textInput: {
|
||||
fontSize: StyleConstants.Font.Size.M
|
||||
}
|
||||
})
|
||||
|
||||
export default TabSharedRoot
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import ComponentAccount from '@components/Account'
|
||||
import ComponentHashtag from '@components/Hashtag'
|
||||
import ComponentSeparator from '@components/Separator'
|
||||
import CustomText from '@components/Text'
|
||||
import TimelineDefault from '@components/Timeline/Default'
|
||||
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
||||
import { useSearchQuery } from '@utils/queryHooks/search'
|
||||
@ -13,7 +14,6 @@ import {
|
||||
Platform,
|
||||
SectionList,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View
|
||||
} from 'react-native'
|
||||
import { Circle } from 'react-native-animated-spinkit'
|
||||
@ -66,10 +66,15 @@ const TabSharedSearch: React.FC<
|
||||
|
||||
const listEmpty = useMemo(() => {
|
||||
return (
|
||||
<View style={styles.emptyBase}>
|
||||
<View
|
||||
style={{
|
||||
marginVertical: StyleConstants.Spacing.Global.PagePadding,
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
{status === 'loading' ? (
|
||||
<View style={styles.loading}>
|
||||
<View style={{ flex: 1, alignItems: 'center' }}>
|
||||
<Circle
|
||||
size={StyleConstants.Font.Size.M * 1.25}
|
||||
color={colors.secondary}
|
||||
@ -77,53 +82,61 @@ const TabSharedSearch: React.FC<
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<Text
|
||||
style={[
|
||||
styles.emptyDefault,
|
||||
styles.emptyFontSize,
|
||||
{ color: colors.primaryDefault }
|
||||
]}
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{
|
||||
marginBottom: StyleConstants.Spacing.L,
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
<Trans
|
||||
i18nKey='screenTabs:shared.search.empty.general'
|
||||
components={{ bold: <Text style={styles.emptyFontBold} /> }}
|
||||
components={{
|
||||
bold: (
|
||||
<CustomText
|
||||
style={{ fontWeight: StyleConstants.Font.Weight.Bold }}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
<Text
|
||||
</CustomText>
|
||||
<CustomText
|
||||
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
|
||||
>
|
||||
{t('shared.search.empty.advanced.header')}
|
||||
</Text>
|
||||
<Text
|
||||
</CustomText>
|
||||
<CustomText
|
||||
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
|
||||
>
|
||||
<Text style={{ color: colors.secondary }}>
|
||||
<CustomText style={{ color: colors.secondary }}>
|
||||
@username@domain
|
||||
</Text>
|
||||
</CustomText>
|
||||
{' '}
|
||||
{t('shared.search.empty.advanced.example.account')}
|
||||
</Text>
|
||||
<Text
|
||||
</CustomText>
|
||||
<CustomText
|
||||
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
|
||||
>
|
||||
<Text style={{ color: colors.secondary }}>#example</Text>
|
||||
<CustomText style={{ color: colors.secondary }}>
|
||||
#example
|
||||
</CustomText>
|
||||
{' '}
|
||||
{t('shared.search.empty.advanced.example.hashtag')}
|
||||
</Text>
|
||||
<Text
|
||||
</CustomText>
|
||||
<CustomText
|
||||
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
|
||||
>
|
||||
<Text style={{ color: colors.secondary }}>URL</Text>
|
||||
<CustomText style={{ color: colors.secondary }}>URL</CustomText>
|
||||
{' '}
|
||||
{t('shared.search.empty.advanced.example.statusLink')}
|
||||
</Text>
|
||||
<Text
|
||||
</CustomText>
|
||||
<CustomText
|
||||
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
|
||||
>
|
||||
<Text style={{ color: colors.secondary }}>URL</Text>
|
||||
<CustomText style={{ color: colors.secondary }}>URL</CustomText>
|
||||
{' '}
|
||||
{t('shared.search.empty.advanced.example.accountLink')}
|
||||
</Text>
|
||||
</CustomText>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
@ -133,16 +146,21 @@ const TabSharedSearch: React.FC<
|
||||
const sectionHeader = useCallback(
|
||||
({ section: { translation } }) => (
|
||||
<View
|
||||
style={[
|
||||
styles.sectionHeader,
|
||||
{ backgroundColor: colors.backgroundDefault }
|
||||
]}
|
||||
style={{
|
||||
padding: StyleConstants.Spacing.M,
|
||||
backgroundColor: colors.backgroundDefault
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={[styles.sectionHeaderText, { color: colors.primaryDefault }]}
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
fontWeight: StyleConstants.Font.Weight.Bold,
|
||||
textAlign: 'center',
|
||||
color: colors.primaryDefault
|
||||
}}
|
||||
>
|
||||
{translation}
|
||||
</Text>
|
||||
</CustomText>
|
||||
</View>
|
||||
),
|
||||
[]
|
||||
@ -151,18 +169,27 @@ const TabSharedSearch: React.FC<
|
||||
({ section: { data, translation } }) =>
|
||||
!data.length ? (
|
||||
<View
|
||||
style={[
|
||||
styles.sectionFooter,
|
||||
{ backgroundColor: colors.backgroundDefault }
|
||||
]}
|
||||
style={{
|
||||
padding: StyleConstants.Spacing.S,
|
||||
backgroundColor: colors.backgroundDefault
|
||||
}}
|
||||
>
|
||||
<Text style={[styles.sectionFooterText, { color: colors.secondary }]}>
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{ textAlign: 'center', color: colors.secondary }}
|
||||
>
|
||||
<Trans
|
||||
i18nKey='screenTabs:shared.search.notFound'
|
||||
values={{ searchTerm: text, type: translation }}
|
||||
components={{ bold: <Text style={styles.emptyFontBold} /> }}
|
||||
components={{
|
||||
bold: (
|
||||
<CustomText
|
||||
style={{ fontWeight: StyleConstants.Font.Weight.Bold }}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</CustomText>
|
||||
</View>
|
||||
) : null,
|
||||
[text]
|
||||
@ -186,7 +213,7 @@ const TabSharedSearch: React.FC<
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<SectionList
|
||||
style={styles.base}
|
||||
style={{ minHeight: '100%' }}
|
||||
renderItem={listItem}
|
||||
stickySectionHeadersEnabled
|
||||
sections={data || []}
|
||||
@ -203,38 +230,8 @@ const TabSharedSearch: React.FC<
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
minHeight: '100%'
|
||||
},
|
||||
emptyBase: {
|
||||
marginVertical: StyleConstants.Spacing.Global.PagePadding,
|
||||
alignItems: 'center'
|
||||
},
|
||||
loading: { flex: 1, alignItems: 'center' },
|
||||
emptyFontSize: { ...StyleConstants.FontStyle.S },
|
||||
emptyFontBold: {
|
||||
fontWeight: StyleConstants.Font.Weight.Bold
|
||||
},
|
||||
emptyDefault: {
|
||||
marginBottom: StyleConstants.Spacing.L
|
||||
},
|
||||
emptyAdvanced: {
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
},
|
||||
sectionHeader: {
|
||||
padding: StyleConstants.Spacing.M
|
||||
},
|
||||
sectionHeaderText: {
|
||||
...StyleConstants.FontStyle.M,
|
||||
fontWeight: StyleConstants.Font.Weight.Bold,
|
||||
textAlign: 'center'
|
||||
},
|
||||
sectionFooter: {
|
||||
padding: StyleConstants.Spacing.S
|
||||
},
|
||||
sectionFooterText: {
|
||||
...StyleConstants.FontStyle.S,
|
||||
textAlign: 'center'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user