@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
70 lines • 3.05 kB
JavaScript
import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useElementSize } from '../../../hooks/element';
import { useUuid } from '../../../hooks/uuid';
import { getCurrentGroupName } from '../../../utils/searchBox';
import FilterButtons from '../../filter-buttons/FilterButtons';
import { StyledSearchBoxBody, StyledSearchBoxBodyContent, StyledSearchBoxBodyHead, StyledSearchBoxBodyHeadGroupName } from './SearchBoxBody.styles';
const SearchBoxBody = /*#__PURE__*/forwardRef(({
filterButtons,
selectedGroups,
height,
maxHeight = 300,
children,
shouldShow,
onGroupSelect,
shouldHideFilterButtons
}, ref) => {
const [hasScrolled, setHasScrolled] = useState(false);
const [currentGroupName, setCurrentGroupName] = useState('');
const headRef = useRef(null);
const headSize = useElementSize(headRef);
const uuid = useUuid();
const headHeight = useMemo(() => headSize?.height ? headSize.height + 15 : 0, [headSize?.height]);
useEffect(() => {
const element = document.getElementById(`searchBoxContent__${uuid}`);
if (element && (selectedGroups?.length === 1 && selectedGroups[0] === 'all' || selectedGroups?.length !== 1)) {
setCurrentGroupName(getCurrentGroupName(element));
} else {
setCurrentGroupName('');
}
}, [uuid, children, selectedGroups]);
const handlePreventDefault = event => {
event.preventDefault();
event.stopPropagation();
};
const handleScroll = useCallback(event => {
const {
scrollTop
} = event.target;
setHasScrolled(scrollTop > 1);
if (selectedGroups?.length === 1 && selectedGroups[0] === 'all' || selectedGroups?.length !== 1) {
setCurrentGroupName(getCurrentGroupName(event.target));
}
}, [selectedGroups]);
return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBoxBody, {
onClick: handlePreventDefault,
ref: ref,
inert: !shouldShow ? 'true' : undefined
}, filterButtons && filterButtons?.length > 1 && /*#__PURE__*/React.createElement(StyledSearchBoxBodyHead, {
ref: headRef,
$hasScrolled: hasScrolled,
$hasGroupName: !!currentGroupName
}, !shouldHideFilterButtons && /*#__PURE__*/React.createElement(FilterButtons, {
items: filterButtons,
size: 0,
onSelect: onGroupSelect,
selectedItemIds: selectedGroups
}), /*#__PURE__*/React.createElement(StyledSearchBoxBodyHeadGroupName, null, currentGroupName.replace('_', ''))), /*#__PURE__*/React.createElement(StyledSearchBoxBodyContent, {
$height: height,
$headHeight: headHeight,
$maxHeight: maxHeight,
key: "content",
id: `searchBoxContent__${uuid}`,
className: "chayns-scrollbar",
tabIndex: 0,
onScroll: handleScroll
}, children)), [children, currentGroupName, filterButtons, handleScroll, hasScrolled, headHeight, height, onGroupSelect, maxHeight, ref, selectedGroups, shouldHideFilterButtons, shouldShow, uuid]);
});
SearchBoxBody.displayName = 'SearchBoxBody';
export default SearchBoxBody;
//# sourceMappingURL=SearchBoxBody.js.map