const { onChangeShowDeleteBoardDialog, editedBoardId, addMemberInputOpen, componentOwnerId, setSelectedUser, setMemberInputOpen, selectedUser, boardMembers, selectedOption, users, addMember, addMemberStatus, onSelectRemovingMember } = props; const OptionContainer = styled.div` display: flex; flex-direction: column; width: 100%; position: relative; `; const DeleteButton = styled.div` color: #DC3545; :hover { opacity: 0.8; } background-color: #0E0E10; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left; width: 100%; padding-right: 32px; padding-left: 32px; padding-top: 16px; padding-bottom: 16px; `; const DeleteButtonText = styled.p` margin: 0; `; const AddMemberButton = styled.div` color: #0E0E10; background-color: #D0FC42; display: flex; flex-direction: row; border-radius: 4px; height: 40px; gap: 4px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; cursor: pointer; :hover { opacity: 0.8; } `; const MemberListItem = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #777583; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; cursor: pointer; `; const MemberList = styled.div` margin-top: 16px; overflow: scroll; max-height: 24rem; `; const MemberInfo = styled.div` display: flex; column-gap: 0.5rem; `; const MemberId = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; const RemoveMemberButton = styled.div` color: #6B7280; :hover { color: #D0FC42; } cursor: pointer; `; switch(selectedOption) { case 1: return ( <OptionContainer> <DeleteButton onClick={() => onChangeShowDeleteBoardDialog(true, editedBoardId)}> <DeleteButtonText>Delete board</DeleteButtonText> </DeleteButton> </OptionContainer> ) case 2: return ( <OptionContainer> {addMemberInputOpen ? <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.UserDropdown`} props={{ users, componentOwnerId, onClick: setSelectedUser, onClose: () => { setMemberInputOpen(false) setSelectedUser(undefined) }, selectedUser, onAdd: () => addMember(selectedUser.id), addMemberStatus }} /> : <AddMemberButton onClick={() => setMemberInputOpen(true)}> <i className="bi bi-plus-circle-fill"></i> <p>Add new Member</p> </AddMemberButton> } <MemberList> {boardMembers.length && boardMembers.map((member, id) => ( <MemberListItem key={id}> <MemberInfo> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: member.id, componentOwnerId, }} /> <MemberId>{member.id}</MemberId> </MemberInfo> <RemoveMemberButton onClick={() => onSelectRemovingMember(member)}> <i className="bi bi-x-circle"></i> </RemoveMemberButton> </MemberListItem> ))} </MemberList> </OptionContainer> ) }