import classNames from 'classnames' ; import Avatar from 'components/Avatar' ; import PriorityMenu from 'components/contextmenu/PriorityMenu' ; import PriorityIcon from 'components/PriorityIcon' ; import React from 'react' ; import { Draggable , DraggableProvided , DraggableStateSnapshot } from 'react-beautiful-dnd' ; import { useDispatch } from 'react-redux' ; import { AppDispatch } from 'store' ; import { updateIssuePriority } from 'store/actions/issueActions' ; import { Issue } from 'types/issue' ; interface IssueProps { issue : Issue ; index : number ; } export default function IssueItem ( { issue , index } ) { let priorityIcon = ( < span className = 'inline-block m-0.5 rounded-sm border border-gray-100 hover:border-gray-200 p-0.5' > < PriorityIcon priority = { issue . priority } /> < /span>); const dispatch = useDispatch < AppDispatch > ( ) ; const updatePriority = ( priority ) => { dispatch ( updateIssuePriority ( issue , priority ) ) ; } ; return ( < Draggable draggableId = { issue . id || 'id' } index = { index } key = { issue . id } > { ( provided , snapshot ) => { let isDragging = snapshot . isDragging && ! snapshot . isDropAnimating ; return ( < div ref = { provided . innerRef } className = { classNames ( 'cursor-default flex flex-col w-full px-4 py-3 mb-2 bg-white rounded focus:outline-none' , { 'shadow-modal' : isDragging , } ) } { ... provided . draggableProps } { ... provided . dragHandleProps } > < div className = 'flex justify-between w-full cursor-default' > < div className = 'flex flex-col' > < span className = 'text-xs font-normal text-gray-500 uppercase' > { issue . id } < /span> < span className = 'mt-1 text-sm font-medium text-gray-700 line-clamp-2 overflow-ellipsis' > { issue . title } < /span> < /div> < div className = 'flex-shrink-0' > { issue . owner ? < Avatar name = { issue . owner . name } avatarUrl = { issue . owner . avatar } / > : < Avatar />} < /div> < /div> < div className = 'mt-2.5 flex items-center' > < PriorityMenu button = { priorityIcon } id = { 'priority-menu-' + issue . id } filterKeyword = { true } onSelect = { ( p ) => updatePriority ( p ) } /> < /div> < /div>); } } < /Draggable>); }