FiltersExpander.js

import classNames from "classnames";
import React from "react";
import PropTypes from "prop-types";
import Grid from "@material-ui/core/Grid";
import Collapse from "@material-ui/core/Collapse";

const styles = (theme) => ({
  filterContainer: {
    width: "calc(100% + 30px)",
    marginLeft: "-15px",
    marginRight: "-15px"
  },
  filterParametersContainer: {
    width: "calc(100% + 30px)",
    background: theme.hv.palette.atmosphere.atmo1
  },
  filterParametersContainerOpen: {
    borderTop: `solid 1px ${theme.hv.palette.atmosphere.atmo6}`,
    borderBottom: `solid 1px ${theme.hv.palette.atmosphere.atmo6}`
  }
});

const FiltersExpander = ({ classes, children, open }) => (
  <Grid
    id="filtersExpander"
    container
    className={classNames(classes.filterContainer)}
  >
    <Collapse
      in={open}
      classes={{
        wrapperInner: classes.filterParametersContainerOpen
      }}
      className={classNames(classes.filterParametersContainer)}
    >
      <Grid item xs={12}>
        {children}
      </Grid>
    </Collapse>
  </Grid>
);

FiltersExpander.propTypes = {
  children: PropTypes.node.isRequired,
  classes: PropTypes.instanceOf(Object).isRequired,
  open: PropTypes.bool
};

FiltersExpander.defaultProps = {
  open: false
};

export default withStyles(styles, { withTheme: true, index: Infinity })(FiltersExpander);