88 lines
3.6 KiB
TypeScript
88 lines
3.6 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { IoCheckmark } from 'react-icons/io5';
|
|
import { MdKeyboardArrowDown } from 'react-icons/md';
|
|
import { useSelector } from 'react-redux';
|
|
import { RootState } from '../../../../store/store';
|
|
|
|
|
|
interface SelectedRecipientsIntr {
|
|
id: number;
|
|
firstName: string;
|
|
lastName: string;
|
|
color: string;
|
|
}
|
|
|
|
interface RecipientsAttrConIntr {
|
|
selectedRecipientId: number;
|
|
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
|
}
|
|
|
|
const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientId, handlePropertyChange }) => {
|
|
|
|
const [selectedRecipient, setSelectedRecipient] = useState(null);
|
|
|
|
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
|
|
const [dropDownToggle, setDropDownToggle] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (selectedRecipients.length) {
|
|
const filter = selectedRecipients.filter((obj, indx) => obj.id == selectedRecipientId)
|
|
setSelectedRecipient(filter[0]);
|
|
}
|
|
}, [selectedRecipientId])
|
|
|
|
|
|
if (!selectedRecipient) {
|
|
return (
|
|
<>
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className='relative'
|
|
tabIndex={0}
|
|
onBlur={() => setDropDownToggle(false)}>
|
|
{/* Selected Recipient */}
|
|
<div
|
|
onClick={() => setDropDownToggle(!dropDownToggle)}
|
|
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
|
|
<div className='flex items-center gap-1.5'>
|
|
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
|
|
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
|
|
<p>{"firstName" in selectedRecipient && selectedRecipient.firstName} {"lastName" in selectedRecipient && selectedRecipient.lastName}</p>
|
|
</div>
|
|
<MdKeyboardArrowDown />
|
|
</div>
|
|
|
|
<div
|
|
className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
|
|
{selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
|
|
return (<div
|
|
key={indx}
|
|
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
|
|
onClick={() => {
|
|
handlePropertyChange('recipientId', recipient.id);
|
|
setTimeout(() => {
|
|
setDropDownToggle(false);
|
|
}, 0)
|
|
}}
|
|
>
|
|
<div className='flex items-center gap-1.5'>
|
|
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
|
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
|
|
<p>{recipient.firstName} {recipient.lastName} </p>
|
|
</div>
|
|
{selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
|
|
</div>)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default RecipientsAttrCon |