@findify/react-components/lib/components/search/MobileFacets/index.jsx

Findify react UI components

/**
 * @module components/search/MobileFacets
 */
import Branch from 'components/common/Branch';
import FacetTitles from 'components/search/MobileFacets/Titles';
import Component from 'components/Facet/Component';
import Button from 'components/Button';
import cx from 'classnames';
import Icon from 'components/Icon';
import Text from 'components/Text';
import styles from 'components/search/MobileFacets/styles.css';
import { useFacets, useQuery } from '@findify/react-connect';
import { memo, useCallback, useMemo, useState } from 'react';
import useTranslations from 'helpers/useTranslations';
const FacetContent = ({ active, config, theme = styles, }) => {
    const _config = config.merge(config.getIn(['facets', 'filters', active.get('name')]));
    return (<div className={cx(theme.container, theme[_config.get('type')])}>
      <Component isExpanded isMobile type={_config.get('type')} facet={active} config={_config}/>
    </div>);
};
export default memo(({ theme = styles, hideModal }) => {
    const { facets, config, update } = useFacets();
    const { query } = useQuery();
    const translate = useTranslations();
    const [activeFacetName, setActiveFacet] = useState(null);
    const total = useMemo(() => query
        .get('filters')
        ?.reduce((acc, filter) => acc +
        (/category[2-9]/.test(filter.get('name'))
            ? 0
            : filter.get('values').size), 0) || 0, [query]);
    const activeFacet = useMemo(() => facets.find((f) => f.get('name') === activeFacetName), [activeFacetName]);
    const filtersSelected = useMemo(() => {
        if (!activeFacet)
            return 0;
        return activeFacet.get('values').filter((item) => item.get('selected'))
            .size;
    }, [activeFacet]);
    const selectFacet = useCallback((name) => {
        setActiveFacet(name || null);
    }, []);
    const onReset = useCallback(() => {
        update('filters', (f) => f?.clear());
    }, []);
    return (<div className={cx(theme.modal, 'mobile')}>
      <div className={theme.header}>
        <div className={theme.title}>
          <Text primary uppercase display-if={!activeFacet}>
            {translate('facets.filters')}
          </Text>

          <Text secondary uppercase display-if={!activeFacet && total} className={theme.filterCount}>
            ({total})
          </Text>

          <Text primary uppercase display-if={activeFacet}>
            {config
        .getIn(['facets', 'filters', activeFacet?.get('name')])
        ?.get('label')}
          </Text>

          <Text secondary uppercase display-if={activeFacet && filtersSelected} className={theme.filterCount}>
            ({filtersSelected})
          </Text>
        </div>

        <Button onClick={activeFacet ? selectFacet : hideModal} className={theme.backButton}>
          <Icon name="ArrowBack" title={translate('facets.back')}/>
        </Button>

        <Button display-if={query?.get('filters')?.size} onClick={onReset}>
          <Text secondary uppercase>
            {translate('facets.clearAll')}
          </Text>
        </Button>
      </div>
      <div className={theme.body}>
        <Branch config={config} theme={theme} selectFacet={selectFacet} active={facets.find((f) => f.get('name') === activeFacetName)} facets={facets} condition={activeFacet} right={FacetTitles} left={FacetContent}/>
      </div>
      <Button className={theme.footer} onClick={activeFacet ? selectFacet : hideModal}>
        {activeFacet
        ? translate('facets.done')
        : translate('facets.seeResults')}
      </Button>
    </div>);
});