@findify/react-components
Version:
Findify react UI components
23 lines (22 loc) • 1.06 kB
JSX
/**
* @module components/Breadcrumbs
*/
import MapArray from 'components/common/MapArray';
import Button from 'components/Button';
import Text from 'components/Text';
import Icon from 'components/Icon';
import { useMemo } from 'react';
const Item = ({ mapping, theme, item, name, config: _config, }) => {
const [Content, config] = useMemo(() => {
const facetConfig = _config.getIn(['facets', 'filters', name]);
const _type = facetConfig?.get('type') || item.get('type');
return [mapping[_type], _config.merge(facetConfig)];
}, [mapping]);
return (<Button className={theme.breadcrumb} onClick={item.toggle}>
<Text secondary uppercase className={theme.title}>
<Content item={item} config={config} theme={theme}/>
</Text>
<Icon className={theme.cross} name="XDark" title="Remove filter"/>
</Button>);
};
export default (mapping) => ({ item, theme, config, }) => (<MapArray array={item.get('values')} name={item.get('name')} factory={Item} theme={theme} mapping={mapping} config={config}/>);