const users = props.users; const componentOwnerId = props.componentOwnerId; const onClick = props.onClick; const onClose = props.onClose; const onAdd = props.onAdd; const onSelect = props.onSelect; const selectedUser = props.selectedUser; const addMemberStatus = props.addMemberStatus; const UserListItem = styled.div` display: flex; justify-content: space-between; align-items: center; color: #777583; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; cursor: pointer; :hover { background-color: #D0FC42; } background-color: #1d1d21; `; const UserList = styled.div` overflow: scroll; max-height: 200px; position: absolute; z-index: 30; outline-color: #777583; outline-style: solid; outline-width: 1px; border-radius: 4px; width: inherit; `; const UserInfo = styled.div` display: flex; column-gap: 0.5rem; `; const UserId = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; const CloseUserDropdownButton = styled.div` color: #6B7280; :hover { color: #D0FC42; } cursor: pointer; position: absolute; right: 10px; top: 10px; `; const AddUserButton = styled.div` color: #6B7280; :hover { ${({ disabled }) => disabled ? "color: #6B7280" : "color: #D0FC42;"} } ${({ disabled }) => disabled ? "cursor: not-allowed;" : "cursor: pointer;"} position: absolute; right: 30px; top: 10px; `; const AddUserInput = styled.div` color: #fff; display: flex; border-radius: 4px; height: 40px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; border: none; width: 100%; background-color: #1d1d21; `; const Divider = styled.div` width: 100%; height: 1px; background-color: #777583; `; const SuccessIcon = styled.div` color: #00FF66; `; const ErrorIcon = styled.div` color: #DC3545; `; const StatusIcon = styled.div` position: absolute; right: 30px; top: 10px; `; return ( <UserList> <AddUserInput> {selectedUser?.id} </AddUserInput> {users.length ? users.map((user) => ( <> <Divider /> <UserListItem key={user.id} onClick={() => onClick(user)}> <UserInfo> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: user.id, componentOwnerId, }} /> <UserId>{user.id}</UserId> </UserInfo> </UserListItem> </> ) ) : <UserListItem id={"no-user"}> <UserInfo> <UserId>No user to add</UserId> </UserInfo> </UserListItem> } <CloseUserDropdownButton onClick={onClose}> <i class="bi bi-x-circle"></i> </CloseUserDropdownButton> {addMemberStatus ? ( <StatusIcon> {addMemberStatus === "Saving..." && ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Loader.Loader`} props={{ size: 16 }} /> )} {addMemberStatus === "Saved" && ( <SuccessIcon> <i class="bi bi-check"></i> </SuccessIcon> )} {addMemberStatus === "Error" && ( <ErrorIcon> <i class="bi bi-x-circle"></i> </ErrorIcon> )} </StatusIcon> ) : <AddUserButton onClick={onAdd} disabled={selectedUser === undefined}> <i class="bi bi-plus-circle-fill"></i> </AddUserButton> } </UserList> )