react-mapfilter/esm/FilterPanel/FilterSection.js

These components are designed for viewing data in Mapeo. They share a common interface:

import "core-js/modules/es.array.iterator";
import "core-js/modules/web.dom-collections.iterator";
// @flow
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Collapse from '@material-ui/core/Collapse';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ShowAllButton from './ShowAllButton';
/*:: type Props = {
  icon: React.Node,
  title: React.Node,
  subtitle?: React.Node,
  isFiltered: boolean,
  children: React.Node,
  onShowAllClick: () => void
}*/

const useToggle = (initialState
/*:: ?: boolean*/
) => {
  const [state, setState] = React.useState(!!initialState);
  const toggle = React.useCallback(() => setState(state => !state), []);
  return [state, toggle];
};

const FilterSection = ({
  icon,
  title,
  subtitle,
  isFiltered,
  children,
  onShowAllClick
}
/*: Props*/
) => {
  const cx = useStyles();
  const [expanded, toggleExpanded] = useToggle(false);

  const handleShowAllClick = e => {
    e.stopPropagation();
    onShowAllClick();
  };

  return /*#__PURE__*/React.createElement("div", {
    className: cx.root
  }, /*#__PURE__*/React.createElement(ListItem, {
    button: !isFiltered,
    onClick: toggleExpanded
  }, /*#__PURE__*/React.createElement(ListItemIcon, {
    className: cx.listIcon
  }, icon), /*#__PURE__*/React.createElement(ListItemText, {
    classes: {
      primary: cx.listItemText
    },
    primary: title,
    secondary: subtitle
  }), isFiltered ? /*#__PURE__*/React.createElement(ShowAllButton, {
    onClick: handleShowAllClick,
    className: cx.showAll
  }) : /*#__PURE__*/React.createElement(ExpandMoreIcon, {
    className: clsx(cx.expandIcon, {
      [cx.expanded]: expanded
    })
  })), /*#__PURE__*/React.createElement(Collapse, {
    in: expanded || isFiltered,
    classes: {
      wrapperInner: cx.collapse
    },
    unmountOnExit: true
  }, children));
};

export default FilterSection;
const useStyles = makeStyles(theme => ({
  root: {
    borderBottom: `1px solid ${theme.palette.divider}`,
    backgroundClip: 'padding-box'
  },
  listIcon: {
    minWidth: 40
  },
  listItemText: {
    fontWeight: 500
  },
  showAll: {
    fontSize: 12,
    lineHeight: '16px',
    minWidth: 'auto'
  },
  collapse: {
    position: 'relative',
    paddingBottom: 8
  },
  expanded: {},
  expandIcon: {
    transform: 'rotate(0deg)',
    transition: theme.transitions.create('transform', theme.transitions.duration.shortest),
    '&$expanded': {
      transform: 'rotate(180deg)'
    }
  }
}));
//# sourceMappingURL=FilterSection.js.map