algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-29 05:02:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

[resumes][fix] fix expandable text not updating

Browse Source
This commit is contained in:
Keane Chan
2022-10-18 10:25:23 +08:00
parent 71838f4ac7
commit 7d1ffb9887
3 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
View File

@ -54,7 +54,7 @@ export default function ResumeCommentListItem({
</div> </div>
{/* Description */} {/* Description */}
<ResumeExpandableText>{comment.description}</ResumeExpandableText> <ResumeExpandableText text={comment.description} />
{/* Upvote and edit */} {/* Upvote and edit */}
<div className="flex flex-row space-x-1 pt-1 align-middle"> <div className="flex flex-row space-x-1 pt-1 align-middle">

23
apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
View File

@ -1,23 +1,24 @@
import clsx from 'clsx'; import clsx from 'clsx';
import type { ReactNode } from 'react'; import { useEffect, useState } from 'react';
import { useLayoutEffect, useRef, useState } from 'react';
type ResumeExpandableTextProps = Readonly<{ type ResumeExpandableTextProps = Readonly<{
children: ReactNode; text: string;
}>; }>;
export default function ResumeExpandableText({ export default function ResumeExpandableText({
children, text,
}: ResumeExpandableTextProps) { }: ResumeExpandableTextProps) {
const ref = useRef<HTMLSpanElement>(null);
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const [descriptionOverflow, setDescriptionOverflow] = useState(false); const [descriptionOverflow, setDescriptionOverflow] = useState(false);
useLayoutEffect(() => { useEffect(() => {
if (ref.current && ref.current.clientHeight < ref.current.scrollHeight) { const lines = text.split(/\r\n|\r|\n/);
if (lines.length > 3) {
setDescriptionOverflow(true); setDescriptionOverflow(true);
} else {
setDescriptionOverflow(false);
} }
}, [ref]); }, [text]);
const onSeeActionClicked = () => { const onSeeActionClicked = () => {
setIsExpanded((prevExpanded) => !prevExpanded); setIsExpanded((prevExpanded) => !prevExpanded);
@ -26,13 +27,11 @@ export default function ResumeExpandableText({
return ( return (
<div> <div>
<span <span
ref={ref}
className={clsx( className={clsx(
'whitespace-pre-wrap text-sm', 'line-clamp-3 whitespace-pre-wrap text-sm',
'line-clamp-3',
isExpanded ? 'line-clamp-none' : '', isExpanded ? 'line-clamp-none' : '',
)}> )}>
{children} {text}
</span> </span>
{descriptionOverflow && ( {descriptionOverflow && (
<p <p

4
apps/portal/src/pages/resumes/[resumeId].tsx
View File

@ -189,9 +189,7 @@ export default function ResumeReviewPage() {
aria-hidden="true" aria-hidden="true"
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
/> />
<ResumeExpandableText> <ResumeExpandableText text={detailsQuery.data.additionalInfo} />
{detailsQuery.data.additionalInfo}
</ResumeExpandableText>
</div> </div>
)} )}
<div className="flex w-full flex-col py-4 lg:flex-row"> <div className="flex w-full flex-col py-4 lg:flex-row">