ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

always assume twitter overflows

This commit is contained in:
keyan 2022-03-10 10:09:05 -06:00
parent 8b1a923ac1
commit f85b9a3a1d
1 changed files with 3 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/item-full.js
View File

@ -10,7 +10,7 @@ import { Button } from 'react-bootstrap'
import { TwitterTweetEmbed } from 'react-twitter-embed' import { TwitterTweetEmbed } from 'react-twitter-embed'
import YouTube from 'react-youtube' import YouTube from 'react-youtube'
import useDarkMode from 'use-dark-mode' import useDarkMode from 'use-dark-mode'
import { useEffect, useRef, useState } from 'react' import { useState } from 'react'
function BioItem ({ item, handleClick }) { function BioItem ({ item, handleClick }) {
const me = useMe() const me = useMe()
@ -53,27 +53,12 @@ function ItemEmbed ({ item }) {
const darkMode = useDarkMode() const darkMode = useDarkMode()
const [overflowing, setOverflowing] = useState(false) const [overflowing, setOverflowing] = useState(false)
const [show, setShow] = useState(false) const [show, setShow] = useState(false)
const containerRef = useRef(null)
const checkOverflow = () => {
const cont = containerRef.current
const over = cont && (cont.offsetHeight < cont.scrollHeight || cont.offsetWidth < cont.scrollWidth)
if (over) {
setOverflowing(true)
return
}
setOverflowing(false)
}
useEffect(checkOverflow, [])
const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)/) const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)/)
if (twitter?.groups?.id) { if (twitter?.groups?.id) {
return ( return (
<div className={`${styles.twitterContainer} ${show ? '' : styles.twitterContained}`} ref={containerRef}> <div className={`${styles.twitterContainer} ${show ? '' : styles.twitterContained}`}>
<TwitterTweetEmbed tweetId={twitter.groups.id} options={{ width: '550px', theme: darkMode.value ? 'dark' : 'light' }} placeholder={<TweetSkeleton />} onLoad={checkOverflow} /> <TwitterTweetEmbed tweetId={twitter.groups.id} options={{ width: '550px', theme: darkMode.value ? 'dark' : 'light' }} placeholder={<TweetSkeleton />} onLoad={() => setOverflowing(true)} />
{overflowing && !show && {overflowing && !show &&
<Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}> <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
show full tweet show full tweet