@findify/react-components
Version:
Findify react UI components
26 lines (25 loc) • 1.2 kB
JSX
/**
* @module components/CategoryFacet
*/
import MapArray from 'components/common/MapArray';
import content from 'components/CategoryFacet/content';
import Button from 'components/Button';
import Text from 'components/Text';
import Icon from 'components/Icon';
import styles from 'components/CategoryFacet/styles.css';
import cx from 'classnames';
const Item = ({ item, theme = styles, style, config, isMobile, }) => (<>
<Button style={style} className={cx(theme.item, isMobile && theme.mobile)} onClick={item.toggle} role="checkbox" area-checked={item.get('selected') ? 'true' : 'false'}>
<Text className={theme.content} primary lowercase bold={item.get('selected')}>
{content({ item })}
<Icon display-if={item.get('has_children')} name={item.get('selected') ? 'ArrowDown' : 'ArrowRight'} title={item.get('selected') ? 'Extended' : 'Collapsed'}/>
</Text>
<Text secondary uppercase>
({item.get('count')})
</Text>
</Button>
<div display-if={item.get('children')} className={theme.nested}>
<MapArray config={config} array={item.get('children')} factory={Item} theme={theme} isMobile={isMobile}/>
</div>
</>);
export default Item;