const { componentOwnerId, assignee, setAssignee, projectId, contract } = props; const SelectTrigger = styled('Select.Trigger')` display: flex; flex-direction: row; align-items: center; height: 31px; background-color: #373d43; color: #fff; font-family: Helvetica Neue; font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: 0em; border: none; border-radis: 0.5rem; gap: 0.25rem; :focus { outline-color: transparent; outline-style: solid; outline-width: 1px; } `; const SelectGroup = styled('Select.Group')` display: flex; flex-direction: column; padding: 16px; background-color: #0e0e10; color: #777583; width: 328px; border-radius: 0.5rem; `; const SelectContent = styled('Select.Content')` z-index: 100; `; const SelectItem = styled('Select.Item')` display: flex; column-gap: 0.5rem; :hover { background-color: #d0fc42; } border: none; :focus { outline-color: transparent; outline-style: solid; outline-width: 1px; } padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.25rem; `; const SelectIcon = styled('Select.Icon')` color: #fff; transition: transform 3s ease-in-out; transform: rotate(${({ open }) => (open ? '180deg' : '0deg')}); `; const ButtonsContainer = styled.div` display: flex; flex-direction: row; gap: 8px; `; const SelectedMember = styled.div` display: flex; column-gap: 0.5rem; padding: 0.5rem; `; const Header = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 1rem; `; const CloseButton = styled.div` background-color: transparent; :hover { color: #fff; } `; const Text = styled.div` padding: 0; margin: 0; `; const ResetButton = styled.div` display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0.3rem; background-color: transparent; color: #777583; :hover { color: #fff; } `; const placeholder = 'Assign a person'; const label = 'Assign to task'; const NO_ASSIGNEE = 'no_assignee'; const accountId = context.accountId; const [members, setMembers] = useState([]); const [isOpen, setIsOpen] = useState(false); const toggleOpen = () => { setIsOpen((prevIsOpen) => !prevIsOpen); }; const getMembers = useCallback(async (projectId) => { try { Near.asyncCalimeroView(contract, 'get_members', { project_id: projectId, }).then((members) => { setMembers( members .map((member) => ({ id: member })) .filter((member) => member.id !== accountId), ); }); } catch (e) { console.log('getMembers', e); } }, []); useEffect(() => { if (projectId) { getMembers(projectId); } }, [projectId]); return ( <Select.Root value={assignee} onValueChange={setAssignee} placeholder={placeholder} open={isOpen} onOpenChange={toggleOpen} > <ButtonsContainer> <SelectTrigger> <Select.Value value={assignee}> {assignee !== NO_ASSIGNEE && assignee !== null ? ( <SelectedMember> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: assignee, componentOwnerId, }} /> <Text>{assignee}</Text> </SelectedMember> ) : ( placeholder )} </Select.Value> <SelectIcon open={isOpen}> <i className="bi bi-caret-down-fill"></i> </SelectIcon> </SelectTrigger> {assignee !== NO_ASSIGNEE && assignee !== null && ( <ResetButton type="button" onClick={(e) => { setAssignee(NO_ASSIGNEE); }} > <i className="bi bi-x-circle-fill"></i> Remove </ResetButton> )} </ButtonsContainer> <SelectContent position="popper" sideOffset={10}> <Select.Viewport> <SelectGroup> <Header> <Select.Label>{label}</Select.Label> <CloseButton type="button" onClick={() => setIsOpen(false)}> <i className="bi bi-x"></i> </CloseButton> </Header> <SelectItem id={accountId} key={accountId} value={accountId} ref="forwardedRef" > <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: accountId, componentOwnerId, }} /> <Select.ItemText>Assign to me</Select.ItemText> <Select.ItemIndicator> <i className="bi bi-check"></i> </Select.ItemIndicator> </SelectItem> {members?.map((member, id) => ( <SelectItem id={id} key={id} value={member.id} ref="forwardedRef"> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: member.id, componentOwnerId, }} /> <Select.ItemText>{member.id}</Select.ItemText> </SelectItem> ))} </SelectGroup> </Select.Viewport> </SelectContent> </Select.Root> );