octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Remove dependency `react-native-collapsible`

This commit is contained in:
Zhiyuan Zheng 2020-12-22 11:14:00 +01:00
parent 4d6cee643b
commit e00ec84c7c
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
3 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,7 +36,6 @@
"react-dom": "16.13.1",
"react-i18next": "^11.8.4",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
"react-native-collapsible": "^1.5.3",
"react-native-gesture-handler": "~1.8.0",
"react-native-htmlview": "^0.16.0",
"react-native-image-zoom-viewer": "^3.0.1",

40
src/components/Timelines/Timeline/Shared/Content.tsx
View File

@ -1,9 +1,6 @@
import React, { useState } from 'react'
import { Pressable, Text } from 'react-native'
import Collapsible from 'react-native-collapsible'
import { LayoutAnimation, Pressable, Text, View } from 'react-native'
import ParseContent from '@components/ParseContent'
import { useTheme } from '@utils/styles/ThemeManager'
import { StyleConstants } from '@utils/styles/constants'
import { LinearGradient } from 'expo-linear-gradient'
@ -19,8 +16,9 @@ const TimelineContent: React.FC<Props> = ({
numberOfLines,
highlighted = false
}) => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
const { theme } = useTheme()
const [spoilerCollapsed, setSpoilerCollapsed] = useState(true)
const [spoilerCollapsed, setSpoilerCollapsed] = useState(false)
const lineHeight = 28
return (
@ -31,16 +29,23 @@ const TimelineContent: React.FC<Props> = ({
content={status.spoiler_text}
size={highlighted ? 'L' : 'M'}
emojis={status.emojis}
numberOfLines={999}
/>
<Collapsible collapsed={spoilerCollapsed} collapsedHeight={20}>
<View
style={{
flex: 1,
height: spoilerCollapsed ? StyleConstants.Font.Size.M : undefined,
marginTop: StyleConstants.Font.Size.M
}}
>
<ParseContent
content={status.content}
size={highlighted ? 'L' : 'M'}
emojis={status.emojis}
mentions={status.mentions}
{...(numberOfLines && { numberOfLines: numberOfLines })}
numberOfLines={999}
/>
</Collapsible>
</View>
<Pressable
onPress={() => setSpoilerCollapsed(!spoilerCollapsed)}
style={{
@ -48,11 +53,20 @@ const TimelineContent: React.FC<Props> = ({
}}
>
<LinearGradient
colors={[
theme.backgroundGradientStart,
theme.backgroundGradientEnd
]}
locations={[0, lineHeight / (StyleConstants.Font.Size.S * 5)]}
{...(spoilerCollapsed
? {
colors: [
theme.backgroundGradientStart,
theme.backgroundGradientEnd
],
locations: [
0,
lineHeight / (StyleConstants.Font.Size.S * 4)
]
}
: {
colors: ['rgba(0, 0, 0, 0)']
})}
style={{
paddingTop: StyleConstants.Font.Size.S * 2,
paddingBottom: StyleConstants.Font.Size.S

7
yarn.lock
View File

@ -5225,13 +5225,6 @@ react-is@^17.0.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
react-native-collapsible@^1.5.3:
version "1.5.3"
resolved "https://registry.yarnpkg.com/react-native-collapsible/-/react-native-collapsible-1.5.3.tgz#d6bc7274ae8f40f7688cca23ededa263e6c81c63"
integrity sha512-Ciuy3yF8wcHeLxXFtx9vxoyrq8l+9EJqLM/ADw54gVwzTQc1/e2ojhQbVFPlxhDA+Pba2qezkaKfv5ifxg8hoQ==
dependencies:
prop-types "^15.6.2"
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"