Mobile Facet using Desktop Filters

// some imports
import Facet from 'components/Facet'; // this is what we use for Desktop filters

// some code

 <div className={theme.body}>
   // You will find a code snippet like this. Remove <Branch />
   /*	<Branch
      config={config}
      theme={theme}
      selectFacet={selectFacet}
      active={activeFacet}
      facets={facets}
      condition={!!activeFacet}
      right={FacetTitles}
      left={FacetContent} /> */
        
  // and instead use this:
    <div className='findify-mobilefacet--custom'>
      <MapArray
        theme={{ root: theme.facet }}
        array={facets}
        factory={Facet}
        config={config}
        keyAccessor={i => i.get('name')} />
    </div>

// some code

/* adds some basic style to match the desktop layout */
.findify-mobilefacet--custom {
  padding: 0 15px;
}

.findify-mobilefacet--custom > div {
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
}

// some imports
import Breadcrumbs from 'components/Breadcrumbs';

// add this where you want the breadcrumbs to appear
<Breadcrumbs theme={{ root: theme.breadcrumbs }} />

.findify-mobilefacet--custom {
  margin-top: 15px;
}

.findify-components--breadcrumbs__breadcrumb {
  margin-right: 12px;
  margin-left: 0;
}

/**
 * @module components/search/MobileFacets
 */

import React from 'react';
import { withHandlers } from 'recompose';
import Branch from 'components/common/Branch';
import MapArray from 'components/common/MapArray';
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 { ThemedSFCProps, IFacet, MJSConfiguration, MJSValue } from 'types';
import { List } from 'immutable';

// imports
import Facet from 'components/Facet';
import Breadcrumbs from 'components/Breadcrumbs';

/** Props that FacetContent accepts */
export interface IFacetContentProps extends ThemedSFCProps {
  /** Currently active facet */
  active: IFacet;
  /** MJS Configuration */
  config: MJSConfiguration;
}

const FacetContent = ({ active, config, theme }: IFacetContentProps) => (
  <div className={cx(theme.container, theme[active.get('type') as string])}>
    <Component
      isExpanded
      type={active.get('type')}
      facet={active}
      config={config}
      theme={{
        range: theme.range,
        expand: theme.expand,
        expandedList: theme.expandedList,
      }}
      isMobile={true}
    />
  </div>
);

/** Props that MobileFacets view accepts */
export interface IMobileFacetsProps extends ThemedSFCProps {
  /** immutable.List() of Facets */
  facets: List<IFacet>;
  /** Currently active facet */
  activeFacet?: IFacet;
  /** Method used to select a facet */
  selectFacet: (name?: string) => any
  /** Method used to reset facet */
  onReset: () => any
  /** MJS Configuration */
  config: MJSConfiguration;
  /** MJS API Request Metadata */
  meta: Map<string, MJSValue>;
  /** Method used for hiding modal / drawer */
  hideModal: (name: string) => any
  /** Total filters selected */
  total: number;
  /** Filters selected for active facet */
  filtersSelected: number;
}

export default ({
  theme,
  facets,
  activeFacet,
  selectFacet,
  onReset,
  config,
  meta,
  hideModal,
  total,
  filtersSelected,
}: IMobileFacetsProps) =>
<div className={cx(theme.modal, 'mobile')}>
  <div className={theme.header}>

    <div className={theme.title}>
      <Text primary uppercase display-if={!activeFacet}>
        { config.getIn(['facets', 'i18n', 'filters'], 'Filters') }
      </Text>
      <Text secondary uppercase display-if={!activeFacet && total} className={theme.filterCount}>
        ({ total })
      </Text>
      <Text primary uppercase display-if={!!activeFacet}>
        { config.getIn(['facets', 'labels', activeFacet!.get('name')]) }
      </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' />
    </Button>

    <Button
      display-if={meta.get('filters') && meta!.get('filters')!.size}
      onClick={onReset}>
      <Text secondary uppercase>
        { config.getIn(['facets', 'i18n', 'clearAll'], 'Clear All')}
      </Text>
    </Button>

  </div>
  <div className={theme.body}>
    // div with breadcrumbs and desktop filters
    <div className='findify-mobilefacet--custom'>
      <Breadcrumbs theme={{ root: theme.breadcrumbs }} />
      <MapArray
      theme={{ root: theme.facet }}
      array={facets}
      factory={Facet}
      config={config}
      keyAccessor={i => i.get('name')} />
    </div>
  </div>
  <Button className={theme.footer} onClick={activeFacet ? selectFacet : hideModal}>
    { config.getIn(['facets', 'i18n', activeFacet ? 'done' : 'showResults'], 'See results')}
  </Button>
</div>

/* adds some basic style to match the desktop layout */
.findify-mobilefacet--custom {
  padding: 0 15px;
  margin-top: 15px;
}

.findify-mobilefacet--custom > div {
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
}

/*  breadcrumbs */
.findify-components--breadcrumbs__breadcrumb {
  margin-right: 12px;
  margin-left: 0;
}