@chayns-components/person-finder
Version:
A set of beautiful React components for developing your own applications with chayns.
75 lines • 2.16 kB
JavaScript
import React from 'react';
import { StyledPersonFinderItem } from './PersonFinderItem.styles';
import { Icon, ListItem } from '@chayns-components/core';
import { useFriends, usePersonFinderItem } from '../../../../../../hooks/personFinder';
import { usePersonFinder } from '../../../../../PersonFinderProvider';
import { useTheme } from 'styled-components';
import { useUser } from 'chayns-api';
const PersonFinderItem = ({
entry,
onAdd,
onRemove
}) => {
const {
id: entryId
} = entry;
const id = typeof entryId === 'string' ? entryId : entryId.toString();
const {
isSite,
imageUrl,
title,
subtitle,
titleElement
} = usePersonFinderItem(entry);
const {
isFriend,
addFriend,
removeFriend
} = useFriends(id);
const {
tags
} = usePersonFinder();
const theme = useTheme();
const user = useUser();
const isSelected = tags && tags.map(tag => tag.id).includes(id);
const handleIconClick = event => {
event.preventDefault();
event.stopPropagation();
if (isFriend) {
if (typeof removeFriend === 'function') {
removeFriend(id);
}
} else if (typeof addFriend === 'function') {
addFriend(id);
}
};
const handleClick = event => {
event.preventDefault();
event.stopPropagation();
if (isSelected) {
onRemove(id);
} else {
onAdd(id);
}
};
const rightElements = /*#__PURE__*/React.createElement(Icon, {
icons: [`${isFriend ? 'fas' : 'far'} fa-star`],
color: isFriend ? theme['yellow-3'] : undefined,
onClick: handleIconClick
});
return /*#__PURE__*/React.createElement(StyledPersonFinderItem, {
onClick: handleClick,
$isSelected: isSelected
}, /*#__PURE__*/React.createElement(ListItem, {
title: title,
subtitle: subtitle,
images: imageUrl ? [imageUrl] : undefined,
titleElement: titleElement,
shouldShowRoundImageOrIcon: !isSite,
rightElements: !isSite && id !== user.personId ? rightElements : undefined,
shouldForceHover: true
}));
};
PersonFinderItem.displayName = 'PersonFinderItem';
export default PersonFinderItem;
//# sourceMappingURL=PersonFinderItem.js.map