1
0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
This commit is contained in:
Zhiyuan Zheng
2021-03-13 17:56:57 +01:00
parent 2620ec52bb
commit bde6c77cc1
3 changed files with 126 additions and 151 deletions

View File

@ -46,7 +46,6 @@
"expo-firebase-analytics": "~2.6.0",
"expo-haptics": "~8.4.0",
"expo-image-picker": "~9.2.0",
"expo-linear-gradient": "~8.4.0",
"expo-linking": "~2.0.1",
"expo-localization": "~9.1.0",
"expo-notifications": "~0.8.2",

View File

@ -9,10 +9,9 @@ import { StyleConstants } from '@utils/styles/constants'
import layoutAnimation from '@utils/styles/layoutAnimation'
import { adaptiveScale } from '@utils/styles/scaling'
import { useTheme } from '@utils/styles/ThemeManager'
import { LinearGradient } from 'expo-linear-gradient'
import React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Platform, Pressable, Text, View } from 'react-native'
import { Pressable, Text, View } from 'react-native'
import HTMLView from 'react-native-htmlview'
import { useSelector } from 'react-redux'
@ -164,7 +163,8 @@ export interface Props {
disableDetails?: boolean
}
const ParseHTML: React.FC<Props> = ({
const ParseHTML = React.memo(
({
content,
size = 'M',
adaptiveSize = false,
@ -175,7 +175,7 @@ const ParseHTML: React.FC<Props> = ({
numberOfLines = 10,
expandHint,
disableDetails = false
}) => {
}: Props) => {
const adaptiveFontsize = useSelector(getSettingsFontsize)
const adaptedFontsize = adaptiveScale(
StyleConstants.Font.Size[size],
@ -190,7 +190,7 @@ const ParseHTML: React.FC<Props> = ({
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const route = useRoute()
const { theme } = useTheme()
const { mode, theme } = useTheme()
const { t, i18n } = useTranslation('componentParse')
if (!expandHint) {
expandHint = t('HTML.defaultHint')
@ -235,18 +235,9 @@ const ParseHTML: React.FC<Props> = ({
const [expanded, setExpanded] = useState(false)
const onTextLayout = useCallback(({ nativeEvent }) => {
switch (Platform.OS) {
case 'ios':
if (nativeEvent.lines.length === numberOfLines + 1) {
if (nativeEvent.lines.length >= numberOfLines) {
setExpandAllow(true)
}
break
case 'android':
if (nativeEvent.lines.length > numberOfLines + 1) {
setExpandAllow(true)
}
break
}
}, [])
return (
@ -254,7 +245,7 @@ const ParseHTML: React.FC<Props> = ({
<Text
children={children}
onTextLayout={onTextLayout}
numberOfLines={expanded ? 999 : numberOfLines + 1}
numberOfLines={expanded ? 999 : numberOfLines}
/>
{expandAllow ? (
<Pressable
@ -264,20 +255,10 @@ const ParseHTML: React.FC<Props> = ({
setExpanded(!expanded)
}}
style={{
marginTop: expanded
? 0
: -adaptedLineheight * (numberOfLines === 0 ? 1 : 2)
}}
>
<LinearGradient
colors={[
theme.backgroundGradientStart,
theme.backgroundGradientEnd
]}
locations={[0, adaptedLineheight / (adaptedFontsize * 5)]}
style={{
paddingTop: StyleConstants.Font.Size.S * 2,
paddingBottom: StyleConstants.Font.Size.S
justifyContent: 'center',
marginTop: expanded ? 0 : -adaptedLineheight,
minHeight: 44,
backgroundColor: theme.background
}}
>
<Text
@ -286,18 +267,16 @@ const ParseHTML: React.FC<Props> = ({
...StyleConstants.FontStyle.S,
color: theme.primary
}}
>
{expanded
? t('HTML.expanded.true', { hint: expandHint })
: t('HTML.expanded.false', { hint: expandHint })}
</Text>
</LinearGradient>
children={t(`HTML.expanded.${expanded.toString()}`, {
hint: expandHint
})}
/>
</Pressable>
) : null}
</View>
)
},
[theme, i18n.language]
[mode, i18n.language]
)
return (
@ -308,7 +287,8 @@ const ParseHTML: React.FC<Props> = ({
renderNode={renderNodeCallback}
/>
)
}
},
() => true
)
// export default ParseHTML
export default React.memo(ParseHTML, () => true)
export default ParseHTML

View File

@ -1,8 +1,6 @@
import { ParseHTML } from '@components/Parse'
import { StyleConstants } from '@utils/styles/constants'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { View } from 'react-native'
export interface Props {
status: Mastodon.Status
@ -24,7 +22,6 @@ const TimelineContent = React.memo(
<>
{status.spoiler_text ? (
<>
<View style={{ marginBottom: StyleConstants.Font.Size.M }}>
<ParseHTML
content={status.spoiler_text}
size={highlighted ? 'L' : 'M'}
@ -35,7 +32,6 @@ const TimelineContent = React.memo(
numberOfLines={999}
disableDetails={disableDetails}
/>
</View>
<ParseHTML
content={status.content}
size={highlighted ? 'L' : 'M'}
@ -43,7 +39,7 @@ const TimelineContent = React.memo(
emojis={status.emojis}
mentions={status.mentions}
tags={status.tags}
numberOfLines={0}
numberOfLines={1}
expandHint={t('shared.content.expandHint')}
disableDetails={disableDetails}
/>