[resumes][fix] fix expandable text

pull/378/head
Keane Chan 3 years ago
parent 7852dcc96b
commit 84416ba60a
No known key found for this signature in database
GPG Key ID: 32718398E1E9F87C

@ -10,7 +10,7 @@ export default function ResumeExpandableText({
children, children,
}: ResumeExpandableTextProps) { }: ResumeExpandableTextProps) {
const ref = useRef<HTMLSpanElement>(null); const ref = useRef<HTMLSpanElement>(null);
const [descriptionExpanded, setDescriptionExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const [descriptionOverflow, setDescriptionOverflow] = useState(false); const [descriptionOverflow, setDescriptionOverflow] = useState(false);
useLayoutEffect(() => { useLayoutEffect(() => {
@ -20,29 +20,27 @@ export default function ResumeExpandableText({
}, [ref]); }, [ref]);
const onSeeActionClicked = () => { const onSeeActionClicked = () => {
setDescriptionExpanded(!descriptionExpanded); setIsExpanded((prevExpanded) => !prevExpanded);
}; };
return ( return (
<> <div>
<span <span
ref={ref} ref={ref}
className={clsx( className={clsx(
'whitespace-pre-wrap text-sm', 'whitespace-pre-wrap text-sm',
'line-clamp-3', 'line-clamp-3',
descriptionExpanded ? 'line-clamp-none' : '', isExpanded ? 'line-clamp-none' : '',
)}> )}>
{children} {children}
</span> </span>
{descriptionOverflow && ( {descriptionOverflow && (
<div className="flex flex-row"> <p
<div className="mt-1 cursor-pointer text-xs text-indigo-500 hover:text-indigo-300"
className="text-xs text-indigo-500 hover:text-indigo-300"
onClick={onSeeActionClicked}> onClick={onSeeActionClicked}>
{descriptionExpanded ? 'See Less' : 'See More'} {isExpanded ? 'See Less' : 'See More'}
</div> </p>
</div>
)} )}
</> </div>
); );
} }

@ -282,7 +282,7 @@ export default function SubmitResumeForm() {
<div className="flex gap-2"> <div className="flex gap-2">
<p <p
className="cursor-pointer underline underline-offset-1 hover:text-indigo-600" className="cursor-pointer underline underline-offset-1 hover:text-indigo-600"
onClick={(event) => onClickDownload(event)}> onClick={onClickDownload}>
{resumeFile.name} {resumeFile.name}
</p> </p>
</div> </div>
@ -293,7 +293,7 @@ export default function SubmitResumeForm() {
className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2" className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
htmlFor="file-upload"> htmlFor="file-upload">
<div className="flex gap-1 "> <div className="flex gap-1 ">
<p className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-500"> <p className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-400">
{resumeFile == null {resumeFile == null
? 'Upload a file' ? 'Upload a file'
: 'Replace file'} : 'Replace file'}

Loading…
Cancel
Save