import React, { useState, useRef } from 'react'; import { DraggableProvidedDraggableProps } from 'react-beautiful-dnd'; import PropTypes from 'prop-types'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons'; import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-icons'; import { DescriptionBadge, DueDateCardBadge, ListCardBadges, ListCardBadge, ListCardBadgeText, ListCardContainer, ListCardInnerContainer, ListCardDetails, ClockIcon, ListCardLabels, ListCardLabel, ListCardOperation, CardTitle, } from './Styles'; type DueDate = { isPastDue: boolean; formattedDate: string; }; type Checklist = { complete: number; total: number; }; type Props = { title: string; description: string; cardId: string; listId: string; onContextMenu: (e: ContextMenuEvent) => void; onClick: (e: React.MouseEvent) => void; dueDate?: DueDate; checklists?: Checklist; watched?: boolean; labels?: Label[]; wrapperProps?: any; }; const Card = React.forwardRef( ( { wrapperProps, onContextMenu, cardId, listId, onClick, labels, title, dueDate, description, checklists, watched, }: Props, $cardRef: any, ) => { const [isActive, setActive] = useState(false); const $innerCardRef: any = useRef(null); const onOpenComposer = () => { if (typeof $innerCardRef.current !== 'undefined') { const pos = $innerCardRef.current.getBoundingClientRect(); onContextMenu({ top: pos.top, left: pos.left, listId, cardId, }); } }; 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={onClick} onContextMenu={onTaskContext} isActive={isActive} {...wrapperProps} > {labels && labels.map(label => ( {label.name} ))} {title} {watched && ( )} {dueDate && ( {dueDate.formattedDate} )} {description && ( )} {checklists && ( {`${checklists.complete}/${checklists.total}`} )} ); }, ); Card.displayName = 'Card'; export default Card;