@chayns-components/person-finder
Version:
A set of beautiful React components for developing your own applications with chayns.
70 lines • 3.21 kB
JavaScript
import React, { useCallback } from 'react';
import { Button, List, SmallWaitCursor } from '@chayns-components/core';
import { LoadingState, PersonFinderFilterTypes } from '../../../../../types/personFinder';
import { getGroupName } from '../../../../../utils/personFinder';
import { StyledPersonFinderGroup, StyledPersonFinderGroupButtonWrapper, StyledPersonFinderGroupName, StyledPersonFinderGroupWaitCursor } from './PersonFinderGroup.styles';
import { usePersonFinder } from '../../../../PersonFinderProvider';
import PersonFinderItem from './person-finder-item/PersonFinderItem';
import { useErrorMessage, useOnlyFriends } from '../../../../../hooks/personFinder';
import PersonFinderSmallItem from './person-finder-small-item/PersonFinderSmallItem';
const PersonFinderGroup = ({
entries,
filterKey,
count,
shouldShowGroupName,
onAdd,
onRemove
}) => {
const {
loadMore,
loadingState: loadingStateFromState,
search
} = usePersonFinder();
const areOnlyFriendsGiven = useOnlyFriends(entries) || filterKey === PersonFinderFilterTypes.UAC;
const groupName = getGroupName(filterKey);
const loadingState = loadingStateFromState ? loadingStateFromState[filterKey] ?? LoadingState.None : LoadingState.None;
const shouldShowLoadMoreButton = entries.length < count;
const waitCursor = (entries.length === 0 || areOnlyFriendsGiven) && loadingState === LoadingState.Pending ? /*#__PURE__*/React.createElement(StyledPersonFinderGroupWaitCursor, null, /*#__PURE__*/React.createElement(SmallWaitCursor, {
shouldHideBackground: true
})) : null;
const errorMessage = useErrorMessage({
areOnlyFriendsGiven,
entries,
loadingState,
search: search ?? '',
groupName
});
const handleLoadMore = useCallback(() => {
if (typeof loadMore === 'function') {
loadMore(filterKey);
}
}, [filterKey, loadMore]);
const handlePreventDefault = event => {
event.preventDefault();
event.stopPropagation();
};
return /*#__PURE__*/React.createElement(StyledPersonFinderGroup, {
onClick: handlePreventDefault
}, shouldShowGroupName && /*#__PURE__*/React.createElement(StyledPersonFinderGroupName, {
className: "person-finder-group-name"
}, groupName), entries.length > 0 && /*#__PURE__*/React.createElement(List, null, entries.map(entry => typeof entry.id === 'number' ? /*#__PURE__*/React.createElement(PersonFinderSmallItem, {
key: `person-finder-entry--${entry.id}`,
entry: entry,
onAdd: onAdd,
onRemove: onRemove
}) : /*#__PURE__*/React.createElement(PersonFinderItem, {
key: `person-finder-entry--${entry.id}`,
entry: entry,
onAdd: onAdd,
onRemove: onRemove
}))), waitCursor, errorMessage, shouldShowLoadMoreButton && /*#__PURE__*/React.createElement(StyledPersonFinderGroupButtonWrapper, {
key: `more-button-wrapper--${filterKey}`
}, /*#__PURE__*/React.createElement(Button, {
key: `more-button--${filterKey}`,
shouldShowWaitCursor: loadingState === LoadingState.Pending,
onClick: handleLoadMore
}, "Mehr ", getGroupName(filterKey))));
};
PersonFinderGroup.displayName = 'PersonFinderGroup';
export default PersonFinderGroup;
//# sourceMappingURL=PersonFinderGroup.js.map