@findify/react-components
Version:
Findify react UI components
34 lines (33 loc) • 1.53 kB
JSX
/**
* @module components/search/MobileFacets
*/
import MapArray from 'components/common/MapArray';
import Button from 'components/Button';
import Text from 'components/Text';
import { List } from 'immutable';
import { useCallback, useMemo } from 'react';
const FacetLabel = ({ item, theme, selectFacet, config }) => {
const [isTextFacet, selectedValues] = useMemo(() => [
item && ['category', 'text'].includes(item.get('type')),
(item && item.get('values').filter((item) => item.get('selected'))) ||
List(),
], [item]);
const onClick = useCallback(() => {
selectFacet(item.get('name'));
}, [item]);
return (<Button raw className={theme.facetTitle} onClick={onClick}>
<div className={theme.flexFix}>
<Text primary uppercase inlineBlock>
{config.getIn(['facets', 'filters', item.get('name'), 'label'], item.get('name'))}
</Text>
<Text display-if={isTextFacet} secondary inlineBlock className={theme.selectedValues}>
{selectedValues.map((item) => item.get('value')).join(', ')}
</Text>
<Text display-if={selectedValues.size > 0 && !isTextFacet} className={theme.filterCount} secondary uppercase inlineBlock>
({selectedValues.size})
</Text>
</div>
</Button>);
};
const MobileFacetsTitlesView = ({ theme, facets, selectFacet, config, }) => (<MapArray config={config} theme={theme} selectFacet={selectFacet} factory={FacetLabel} array={facets}/>);
export default MobileFacetsTitlesView;