import React, { useState, useRef, useEffect } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import TaskAssignee from 'shared/components/TaskAssignee'; import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons'; import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-icons'; import { EditorTextarea, EditorContent, CompleteIcon, DescriptionBadge, DueDateCardBadge, ListCardBadges, ListCardBadge, ListCardBadgeText, ListCardContainer, ListCardInnerContainer, ListCardDetails, ClockIcon, ListCardLabels, ListCardLabel, ListCardOperation, CardTitle, CardMembers, } from './Styles'; type DueDate = { isPastDue: boolean; formattedDate: string; }; type Checklist = { complete: number; total: number; }; type Props = { title: string; taskID: string; taskGroupID: string; complete?: boolean; onContextMenu?: ($target: React.RefObject, taskID: string, taskGroupID: string) => void; onClick?: (e: React.MouseEvent) => void; description?: null | string; dueDate?: DueDate; checklists?: Checklist | null; labels?: Array; watched?: boolean; wrapperProps?: any; members?: Array | null; onCardMemberClick?: OnCardMemberClick; editable?: boolean; onEditCard?: (taskGroupID: string, taskID: string, cardName: string) => void; onCardTitleChange?: (name: string) => void; }; const Card = React.forwardRef( ( { wrapperProps, onContextMenu, taskID, taskGroupID, complete, onClick, labels, title, dueDate, description, checklists, watched, members, onCardMemberClick, editable, onEditCard, onCardTitleChange, }: Props, $cardRef: any, ) => { const [currentCardTitle, setCardTitle] = useState(title); const $editorRef: any = useRef(); useEffect(() => { setCardTitle(title); }, [title]); useEffect(() => { if ($editorRef && $editorRef.current) { $editorRef.current.focus(); $editorRef.current.select(); } }, []); const handleKeyDown = (e: any) => { if (e.key === 'Enter') { e.preventDefault(); if (onEditCard) { onEditCard(taskGroupID, taskID, currentCardTitle); } } }; const [isActive, setActive] = useState(false); const $innerCardRef: any = useRef(null); const onOpenComposer = () => { if (onContextMenu) { onContextMenu($innerCardRef, taskID, taskGroupID); } }; const onTaskContext = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); onOpenComposer(); }; const onOperationClick = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); onOpenComposer(); }; return ( setActive(true)} onMouseLeave={() => setActive(false)} ref={$cardRef} onClick={e => { if (onClick) { onClick(e); } }} onContextMenu={onTaskContext} isActive={isActive} editable={editable} {...wrapperProps} > {isActive && ( )} {labels && labels.map(label => ( {label.name} ))} {editable ? ( {complete && } { setCardTitle(e.currentTarget.value); if (onCardTitleChange) { onCardTitleChange(e.currentTarget.value); } }} onClick={e => { e.stopPropagation(); }} onKeyDown={handleKeyDown} value={currentCardTitle} ref={$editorRef} /> ) : ( {complete && } {title} )} {watched && ( )} {dueDate && ( {dueDate.formattedDate} )} {description && ( )} {checklists && ( {`${checklists.complete}/${checklists.total}`} )} {members && members.map(member => ( { if (onCardMemberClick) { onCardMemberClick($target, taskID, member.id); } }} /> ))} ); }, ); Card.displayName = 'Card'; export default Card;