@chayns-components/person-finder/lib/cjs/components/person-finder/person-finder-wrapper/person-finder-body/person-finder-group/person-finder-small-item/PersonFinderSmallItem.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _personFinder = require("../../../../../../hooks/personFinder");
var _PersonFinderProvider = require("../../../../../PersonFinderProvider");
var _PersonFinderSmallItem = require("./PersonFinderSmallItem.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const PersonFinderSmallItem = ({
  entry,
  onAdd,
  onRemove
}) => {
  const {
    id: entryId
  } = entry;
  const id = typeof entryId === 'string' ? entryId : entryId.toString();
  const {
    title
  } = (0, _personFinder.usePersonFinderSmallItem)(entry);
  const {
    tags
  } = (0, _PersonFinderProvider.usePersonFinder)();
  const isSelected = tags && tags.map(tag => tag.id).includes(id);
  const handleClick = event => {
    event.preventDefault();
    event.stopPropagation();
    if (isSelected) {
      onRemove(id);
    } else {
      onAdd(id);
    }
  };
  return /*#__PURE__*/_react.default.createElement(_PersonFinderSmallItem.StyledPersonFinderSmallItem, {
    onClick: handleClick,
    $isSelected: isSelected
  }, title);
};
PersonFinderSmallItem.displayName = 'PersonFinderSmallItem';
var _default = exports.default = PersonFinderSmallItem;
//# sourceMappingURL=PersonFinderSmallItem.js.map