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} setIsEditingComment={setIsEditingComment}
/> />
) : ( ) : (
<ResumeExpandableText text={comment.description} /> <ResumeExpandableText
key={comment.description}
text={comment.description}
/>
)} )}
{/* Upvote and edit */} {/* Upvote and edit */}

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

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