algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 04:33:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

[resumes][fix] fix expandable text bug

Browse Source
This commit is contained in:
Keane Chan
2022-10-21 15:56:40 +08:00
parent d10377e0f9
commit 35494dc7ea
3 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,7 +86,10 @@ export default function ResumeCommentListItem({
setIsEditingComment={setIsEditingComment}
/>
) : (
<ResumeExpandableText text={comment.description} />
<ResumeExpandableText
key={comment.description}
text={comment.description}
/>
)}
{/* Upvote and edit */}

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

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

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

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