chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
116 lines (114 loc) • 4.16 kB
JavaScript
/* eslint-disable jsx-a11y/alt-text */
import PropTypes from 'prop-types';
import React, { useCallback } from 'react';
import FriendsIndicator from './result-item/FriendsIndicator';
import VerificationIcon from '../../react-chayns-verification_icon/component/VerificationIcon';
import Checkbox from '../../react-chayns-checkbox/component/Checkbox';
import getText from '../utils/getText';
import { personIdRegex } from '../../utils/constants';
const PersonFinderResultItem = _ref => {
let {
onClick,
data,
orm,
isFocused,
roundIcons = false,
hideFriendsIcon = false,
showCheckbox = false,
tags = [],
onRemoveTag,
inputValue = '',
hideVerifiedIcon = false
} = _ref;
const selectedValue = tags === null || tags === void 0 ? void 0 : tags.find(_ref2 => {
let {
value
} = _ref2;
return value[orm.identifier] === data[orm.identifier];
});
const handleClick = useCallback(() => {
if (selectedValue) {
onRemoveTag(selectedValue);
} else {
onClick({
relation: data
});
}
}, [onClick, data, selectedValue, onRemoveTag]);
let hasRelations = orm.relations && Array.isArray(data[orm.relations]) ? data[orm.relations].length > 0 : false;
if (data.relationCount !== undefined && data.relationCount !== null) {
hasRelations = true;
}
const subtitleParts = [];
if (typeof data[orm.identifier] === 'string' && data[orm.identifier].match(personIdRegex) && inputValue) {
subtitleParts.push(`chaynsID: ${data[orm.identifier]}`);
}
if (hasRelations) {
subtitleParts.push(`${data.relationCount} ${getText(data.relationCount === 1 ? 'COMMON_SITE' : 'COMMON_SITES')}`);
} else if (orm.subtitle) {
subtitleParts.push(`(${data[orm.subtitle]})`);
} else if (data.isFriend && inputValue) {
subtitleParts.push('befreundet');
}
return /*#__PURE__*/React.createElement("div", {
className: 'result-item' + (isFocused ? " result-item--focused" : ""),
tabIndex: "-1",
onClick: handleClick
}, showCheckbox ? /*#__PURE__*/React.createElement(Checkbox, {
checked: !!selectedValue,
onChange: handleClick,
stopPropagation: true,
className: "checkbox"
}) : null, orm.imageUrl ? /*#__PURE__*/React.createElement("div", {
className: 'img' + (roundIcons ? " circle" : ""),
style: {
backgroundImage: `url(${data[orm.imageUrl]})`
}
}) : null, /*#__PURE__*/React.createElement("div", {
className: "text",
style: {
justifyContent: 'center'
}
}, /*#__PURE__*/React.createElement("div", {
className: "title"
}, /*#__PURE__*/React.createElement("div", {
className: "name"
}, orm.verified && hideVerifiedIcon !== true ? /*#__PURE__*/React.createElement(VerificationIcon, {
name: data[orm.showName],
verified: data[orm.verified]
}) : data[orm.showName]), hasRelations && orm.subtitle && /*#__PURE__*/React.createElement("div", {
className: "identifier"
}, `(${data[orm.subtitle]})`)), /*#__PURE__*/React.createElement("span", {
className: "relation"
}, subtitleParts.join(' - '))), data.personId && !hideFriendsIcon && /*#__PURE__*/React.createElement(FriendsIndicator, {
personId: data.personId,
userId: data.userId,
name: data[orm.showName]
}));
};
PersonFinderResultItem.propTypes = {
orm: PropTypes.shape({
identifier: PropTypes.string,
showName: PropTypes.string,
imageUrl: PropTypes.string,
relations: PropTypes.string,
subtitle: PropTypes.string,
verified: PropTypes.string
}).isRequired,
onClick: PropTypes.func.isRequired,
// eslint-disable-next-line react/forbid-prop-types
data: PropTypes.object.isRequired,
isFocused: PropTypes.bool.isRequired,
roundIcons: PropTypes.bool,
hideFriendsIcon: PropTypes.bool,
tags: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.shape({})
})),
showCheckbox: PropTypes.bool,
onRemoveTag: PropTypes.func.isRequired,
inputValue: PropTypes.string,
hideVerifiedIcon: PropTypes.bool
};
PersonFinderResultItem.displayName = 'PersonFinderResultItem';
export default PersonFinderResultItem;
//# sourceMappingURL=PersonFinderResultItem.js.map