Added show more for long posts

This commit is contained in:
Haider Ali Punjabi 2023-10-26 19:38:39 +05:30
parent c13b6946ba
commit 7fa0708e0e
6 changed files with 64 additions and 5 deletions

View file

@ -8,7 +8,7 @@ import {
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {PostThreadItemModel} from 'state/models/content/post-thread-item'
import {Link} from '../util/Link'
import {Link, TextLink} from '../util/Link'
import {RichText} from '../util/text/RichText'
import {Text} from '../util/text/Text'
import {PostDropdownBtn} from '../util/forms/PostDropdownBtn'
@ -18,7 +18,7 @@ import {s} from 'lib/styles'
import {niceDate} from 'lib/strings/time'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {pluralize} from 'lib/strings/helpers'
import {countLines, pluralize} from 'lib/strings/helpers'
import {isEmbedByEmbedder} from 'lib/embeds'
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
import {useStores} from 'state/index'
@ -35,6 +35,7 @@ import {formatCount} from '../util/numeric/format'
import {TimeElapsed} from 'view/com/util/TimeElapsed'
import {makeProfileLink} from 'lib/routes/links'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {MAX_POST_LINES} from 'lib/constants'
export const PostThreadItem = observer(function PostThreadItem({
item,
@ -50,6 +51,9 @@ export const PostThreadItem = observer(function PostThreadItem({
const pal = usePalette('default')
const store = useStores()
const [deleted, setDeleted] = React.useState(false)
const [limitLines, setLimitLines] = React.useState(
countLines(item.richText?.text) >= MAX_POST_LINES,
)
const styles = useStyles()
const record = item.postRecord
const hasEngagement = item.post.likeCount || item.post.repostCount
@ -151,6 +155,10 @@ export const PostThreadItem = observer(function PostThreadItem({
)
}, [item, store])
const onPressShowMore = React.useCallback(() => {
setLimitLines(false)
}, [setLimitLines])
if (!record) {
return <ErrorMessage message="Invalid or unsupported post record" />
}
@ -489,9 +497,18 @@ export const PostThreadItem = observer(function PostThreadItem({
richText={item.richText}
style={[pal.text, s.flex1]}
lineHeight={1.3}
numberOfLines={limitLines ? MAX_POST_LINES : undefined}
/>
</View>
) : undefined}
{limitLines ? (
<TextLink
text="Show More"
style={pal.link}
onPress={onPressShowMore}
href="#"
/>
) : undefined}
{item.post.embed && (
<ContentHider
style={styles.contentHider}