@chayns-components/person-finder
Version:
A set of beautiful React components for developing your own applications with chayns.
62 lines • 2.36 kB
JavaScript
import React, { forwardRef, useMemo, useRef, useState } from 'react';
import { StyledPersonFinderBody, StyledPersonFinderBodyContent } from './PersonFinderBody.styles';
import { usePersonFinder } from '../../../PersonFinderProvider';
import { useDevice } from 'chayns-api';
import { getGroupName } from '../../../../utils/personFinder';
import { useClosestElementAbove } from '../../../../hooks/personFinder';
import PersonFinderGroup from './person-finder-group/PersonFinderGroup';
import PersonFinderHeader from './person-finder-header/PersonFinderHeader';
const PersonFinderBody = /*#__PURE__*/forwardRef(({
onAdd,
filterTypes,
onRemove
}, ref) => {
const {
activeFilter,
data
} = usePersonFinder();
const {
browser
} = useDevice();
const [isScrollTop, setIsScrollTop] = useState(true);
const contentRef = useRef(null);
const currentGroupName = useClosestElementAbove(contentRef, 'person-finder-group-name');
const shouldShowGroupNames = (activeFilter?.length ?? 0) !== 1;
const defaultGroupName = getGroupName(Object.keys(data ?? {})[0] ?? '');
const handleContentScroll = event => {
setIsScrollTop(event.target.scrollTop === 0);
};
const content = useMemo(() => Object.entries(data ?? {}).map(([key, singleData], index) => {
const {
count,
entries,
searchString
} = singleData;
return /*#__PURE__*/React.createElement(PersonFinderGroup, {
key: `person-finder-group--${key}`,
filterKey: key,
onAdd: onAdd,
onRemove: onRemove,
entries: entries,
count: count,
search: searchString,
shouldShowGroupName: shouldShowGroupNames && index !== 0
});
}), [data, onAdd, onRemove, shouldShowGroupNames]);
return /*#__PURE__*/React.createElement(StyledPersonFinderBody, {
ref: ref
}, /*#__PURE__*/React.createElement(PersonFinderHeader, {
filterTypes: filterTypes,
isScrollTop: isScrollTop,
shouldShowGroupNames: shouldShowGroupNames,
currentGroupName: currentGroupName,
defaultGroupName: defaultGroupName
}), /*#__PURE__*/React.createElement(StyledPersonFinderBodyContent, {
ref: contentRef,
$browser: browser?.name,
onScroll: handleContentScroll
}, content));
});
PersonFinderBody.displayName = 'PersonFinderBody';
export default PersonFinderBody;
//# sourceMappingURL=PersonFinderBody.js.map