Skip to content

Commit

Permalink
feat(expandable): collapse empty last paragraph
Browse files Browse the repository at this point in the history
  • Loading branch information
robertu7 committed Oct 17, 2024
1 parent b9e8691 commit a038036
Showing 1 changed file with 14 additions and 2 deletions.
16 changes: 14 additions & 2 deletions src/components/Expandable/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const calculateContentHeight = (
export const Expandable: React.FC<ExpandableProps> = ({
children,
content,
limit = 3,
limit: _limit = 3,
buffer = 0,
color,
size,
Expand All @@ -91,6 +91,7 @@ export const Expandable: React.FC<ExpandableProps> = ({
const [isOverFlowing, setIsOverFlowing] = useState(false)
const [isExpanded, setIsExpanded] = useState(true)
const [isRichShow, setIsRichShow] = useState(_isRichShow)
const [limit, setLimit] = useState(_limit)
const node: React.RefObject<HTMLParagraphElement> | null = useRef(null)
const collapsedContent = stripHtml(content || '')

Expand Down Expand Up @@ -145,7 +146,18 @@ export const Expandable: React.FC<ExpandableProps> = ({
.getPropertyValue('line-height')
const lines = Math.max(Math.ceil(height / parseFloat(lineHeight)), 0)

if (lines > limit + buffer) {
// Check if the last paragraph is empty
const paragraphs = element.querySelectorAll('p')
const lastParagraph = paragraphs[Math.min(paragraphs.length - 1, limit - 1)]
const isLastParagraphEmpty =
lastParagraph && lastParagraph.textContent?.trim() === ''

// Adjust the limit if the last paragraph is empty
const adjustedLimit = isLastParagraphEmpty ? limit - 1 : limit

setLimit(adjustedLimit)

if (lines > adjustedLimit + buffer) {
setIsOverFlowing(true)
setIsExpanded(false)
}
Expand Down

0 comments on commit a038036

Please sign in to comment.