@findify/react-components
Version:
Findify react UI components
52 lines (51 loc) • 2.03 kB
JSX
/**
* @module layouts/Autocomplete/Dropdown
*/
import Layout from 'components/autocomplete/Layout';
import { useSuggestions, createConnect, useItems, } from '@findify/react-connect';
import { usePosition } from 'layouts/Autocomplete/Dropdown/trackPosition';
import { useAutocompleteLogic } from 'layouts/Autocomplete/withAutocompleteLogic';
import { useEffect } from 'react';
import styles from 'layouts/Autocomplete/Dropdown/styles.css';
const getContainer = (config) => document.querySelector(config
.get('cssSelector')
?.split(' ')
.map((i) => `.${i}`)
.join(''));
const { hook: useAllContent } = createConnect({
field: 'content',
mapProps: (field) => ({ content: field }),
});
const hasAvailableContent = (config) => {
const { content } = useAllContent();
const { suggestions } = useSuggestions();
const { items } = useItems();
const contentKeys = config.get('content')
? Object.keys(config.get('content').toJS())
: [];
return (items.size ||
suggestions.size ||
contentKeys.find((k) => content.get(k).size));
};
export default ({ theme = styles, config, isFullScreen, }) => {
const { suggestions, meta } = useSuggestions();
const hasContent = hasAvailableContent(config);
const { closeAutocomplete } = useAutocompleteLogic();
const [position, register] = usePosition(config);
const isTrendingSearches = !meta.get('q');
useEffect(() => {
if (!isFullScreen)
return;
getContainer(config).classList.add(theme.fullscreen);
}, []);
if (!hasContent)
return null;
return (<div className={theme.wrapper}>
<div display-if={config.get('overlay')} className={theme.overlay} onClick={closeAutocomplete}/>
<section className={theme.root} data-findify-autocomplete={true} tabIndex={0} ref={register} style={{
[position]: 0,
}}>
<Layout className={theme.container} config={config} isTrendingSearches={isTrendingSearches}/>
</section>
</div>);
};