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> );