@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
86 lines • 3.24 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 { StyledMotionSearchBoxBody, StyledSearchBoxBodyContent, StyledSearchBoxBodyHead, StyledSearchBoxBodyHeadGroupName } from './SearchBoxBody.styles';
const SearchBoxBody = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
filterButtons,
coordinates,
selectedGroups,
width,
browser,
height,
children,
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(`searchbox-content__${uuid}`);
if (element && (selectedGroups?.length === 1 && selectedGroups[0] === 'all' || selectedGroups?.length !== 1)) {
setCurrentGroupName(getCurrentGroupName(element));
} else {
setCurrentGroupName('');
}
}, [uuid, children, selectedGroups]);
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(StyledMotionSearchBoxBody, {
ref: ref,
$width: width,
style: {
left: coordinates.x,
top: coordinates.y
},
initial: {
height: 0,
opacity: 0
},
exit: {
height: 0,
opacity: 0
},
animate: {
height: 'fit-content',
opacity: 1
},
transition: {
duration: 0.2,
type: 'tween'
}
}, 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,
key: "content",
id: `searchbox-content__${uuid}`,
$browser: browser,
tabIndex: 0,
onScroll: handleScroll
}, children)), [browser, children, coordinates.x, coordinates.y, currentGroupName, filterButtons, handleScroll, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, shouldHideFilterButtons, uuid, width]);
});
SearchBoxBody.displayName = 'SearchBoxBody';
export default SearchBoxBody;
//# sourceMappingURL=SearchBoxBody.js.map