@chayns-components/person-finder/lib/esm/hooks/personFinder.js

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

import React, { useEffect, useMemo, useState } from 'react';
import { LoadingState } from '../types/personFinder';
import { isSiteEntry } from '../utils/personFinder';
import { VerificationBadge } from '@chayns-components/core';
import { usePersonFinder } from '../components/PersonFinderProvider';
import { StyledPersonFinderGroupErrorMessage } from '../components/person-finder/person-finder-wrapper/person-finder-body/person-finder-group/PersonFinderGroup.styles';
export const useClosestElementAbove = (containerRef, itemClass) => {
  const [closestElement, setClosestElement] = useState(null);
  useEffect(() => {
    const updateClosestElement = () => {
      if (!containerRef.current) return;
      const container = containerRef.current;
      const items = Array.from(container.getElementsByClassName(itemClass));
      const containerRect = container.getBoundingClientRect();
      let closest = null;
      let minDistance = Infinity;
      items.forEach(item => {
        const rect = item.getBoundingClientRect();
        const distance = Math.abs(rect.bottom - containerRect.top);
        if (rect.bottom < containerRect.top && distance < minDistance) {
          minDistance = distance;
          closest = item;
        }
      });
      setClosestElement(closest);
    };
    const container = containerRef.current;
    if (container) {
      container.addEventListener('scroll', updateClosestElement);
      updateClosestElement();
    }
    return () => {
      container?.removeEventListener('scroll', updateClosestElement);
    };
  }, [containerRef, itemClass]);
  return closestElement?.textContent;
};
export const usePersonFinderItem = entry => {
  const isSite = isSiteEntry(entry);
  const {
    url,
    commonSites,
    name,
    firstName,
    lastName,
    id,
    isVerified
  } = entry;
  const imageUrl = `https://sub60.tobit.com/${isSite ? 'l' : 'u'}/${id}?size=120`;
  const titleElement = isVerified && /*#__PURE__*/React.createElement(VerificationBadge, null);
  const title = isSite ? name : `${firstName ?? ''} ${lastName ?? ''}`;
  const subtitle = isSite ? url : `chaynsID: ${id}${commonSites ? ` - ${commonSites} gemeinsame Sites` : ''}`;
  return {
    isSite,
    title,
    subtitle,
    imageUrl,
    titleElement
  };
};
export const usePersonFinderSmallItem = entry => {
  const {
    name
  } = entry;
  return {
    title: name
  };
};
export const useFriends = personId => {
  const {
    friends,
    removeFriend,
    addFriend
  } = usePersonFinder();
  const isFriend = friends?.map(entry => entry.id).includes(personId);
  return {
    isFriend,
    addFriend,
    removeFriend
  };
};
export const useOnlyFriends = entries => {
  const {
    friends
  } = usePersonFinder();
  return useMemo(() => {
    if (!entries?.length) return false;
    if (!friends?.length) return false;
    const friendIds = new Set(friends.map(friend => friend.id));
    return entries.every(entry => friendIds.has(entry.id));
  }, [entries, friends]);
};
export const useErrorMessage = ({
  loadingState,
  search,
  entries,
  groupName,
  areOnlyFriendsGiven
}) => useMemo(() => {
  if (search.length <= 2 && !areOnlyFriendsGiven) {
    return /*#__PURE__*/React.createElement(StyledPersonFinderGroupErrorMessage, null, "Gib einen Suchbegriff mit mindestens drei Zeichen ein.");
  }
  if (entries.length === 0) {
    if (loadingState === LoadingState.Error && search.length) {
      return /*#__PURE__*/React.createElement(StyledPersonFinderGroupErrorMessage, null, "Es konnten keine ", groupName, " zu der Suche \"", search, "\" gefunden werden.");
    }
    if (search.length === 0) {
      return /*#__PURE__*/React.createElement(StyledPersonFinderGroupErrorMessage, null, "Gib einen Suchbegriff ein, um nach ", groupName, " zu suchen.");
    }
  }
  return null;
}, [areOnlyFriendsGiven, entries.length, groupName, loadingState, search]);
//# sourceMappingURL=personFinder.js.map