@chayns-components/person-finder
Version:
A set of beautiful React components for developing your own applications with chayns.
47 lines • 1.89 kB
JavaScript
import React from 'react';
import { StyledPersonFinderHeader, StyledPersonFinderHeaderFilter, StyledPersonFinderHeaderGroupName } from './PersonFinderHeader.styles';
import { FilterButtons, FilterButtonSize } from '@chayns-components/core';
import { usePersonFinder } from '../../../../PersonFinderProvider';
import { capitalizeFirstLetter } from '../../../../../utils/personFinder';
import { PersonFinderFilterTypes } from '../../../../../types/personFinder';
const PersonFinderHeader = ({
filterTypes,
currentGroupName,
defaultGroupName,
isScrollTop,
shouldShowGroupNames
}) => {
const {
activeFilter,
updateActiveFilter
} = usePersonFinder();
const handleFilterSelect = keys => {
if (typeof updateActiveFilter === 'function') {
const ordered = [PersonFinderFilterTypes.PERSON, PersonFinderFilterTypes.SITE].filter(key => keys.includes(key));
updateActiveFilter(ordered);
}
};
const filter = Object.values(filterTypes ?? {}).map(type => ({
id: type,
text: capitalizeFirstLetter(type.replace(/_/g, ' '))
}));
if (filter.length <= 1) {
return null;
}
const handlePreventDefault = event => {
event.preventDefault();
event.stopPropagation();
};
return /*#__PURE__*/React.createElement(StyledPersonFinderHeader, {
$isScrollTop: isScrollTop,
onClick: handlePreventDefault
}, /*#__PURE__*/React.createElement(StyledPersonFinderHeaderFilter, null, /*#__PURE__*/React.createElement(FilterButtons, {
size: FilterButtonSize.Small,
items: filter,
onSelect: handleFilterSelect,
selectedItemIds: activeFilter
})), shouldShowGroupNames && /*#__PURE__*/React.createElement(StyledPersonFinderHeaderGroupName, null, currentGroupName ?? defaultGroupName));
};
PersonFinderHeader.displayName = 'PersonFinderHeader';
export default PersonFinderHeader;
//# sourceMappingURL=PersonFinderHeader.js.map