@chayns-components/person-finder
Version:
A set of beautiful React components for developing your own applications with chayns.
82 lines (81 loc) • 2.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _PersonFinderItem = require("./PersonFinderItem.styles");
var _core = require("@chayns-components/core");
var _personFinder = require("../../../../../../hooks/personFinder");
var _PersonFinderProvider = require("../../../../../PersonFinderProvider");
var _styledComponents = require("styled-components");
var _chaynsApi = require("chayns-api");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const PersonFinderItem = ({
entry,
onAdd,
onRemove
}) => {
const {
id: entryId
} = entry;
const id = typeof entryId === 'string' ? entryId : entryId.toString();
const {
isSite,
imageUrl,
title,
subtitle,
titleElement
} = (0, _personFinder.usePersonFinderItem)(entry);
const {
isFriend,
addFriend,
removeFriend
} = (0, _personFinder.useFriends)(id);
const {
tags
} = (0, _PersonFinderProvider.usePersonFinder)();
const theme = (0, _styledComponents.useTheme)();
const user = (0, _chaynsApi.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.default.createElement(_core.Icon, {
icons: [`${isFriend ? 'fas' : 'far'} fa-star`],
color: isFriend ? theme['yellow-3'] : undefined,
onClick: handleIconClick
});
return /*#__PURE__*/_react.default.createElement(_PersonFinderItem.StyledPersonFinderItem, {
onClick: handleClick,
$isSelected: isSelected
}, /*#__PURE__*/_react.default.createElement(_core.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';
var _default = exports.default = PersonFinderItem;
//# sourceMappingURL=PersonFinderItem.js.map