react-mapfilter/commonjs/FilterPanel/FilterSection.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));

var React = _interopRequireWildcard(require("react"));

var _styles = require("@material-ui/core/styles");

var _clsx2 = _interopRequireDefault(require("clsx"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));

var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));

var _ShowAllButton = _interopRequireDefault(require("./ShowAllButton"));

// @flow
var useToggle = function useToggle(initialState
/*:: ?: boolean*/
) {
  var _React$useState = React.useState(!!initialState),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      state = _React$useState2[0],
      setState = _React$useState2[1];

  var toggle = React.useCallback(function () {
    return setState(function (state) {
      return !state;
    });
  }, []);
  return [state, toggle];
};

var FilterSection = function FilterSection(_ref) {
  var icon = _ref.icon,
      title = _ref.title,
      subtitle = _ref.subtitle,
      isFiltered = _ref.isFiltered,
      children = _ref.children,
      onShowAllClick = _ref.onShowAllClick;
  var cx = useStyles();

  var _useToggle = useToggle(false),
      _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
      expanded = _useToggle2[0],
      toggleExpanded = _useToggle2[1];

  var handleShowAllClick = function handleShowAllClick(e) {
    e.stopPropagation();
    onShowAllClick();
  };

  return /*#__PURE__*/React.createElement("div", {
    className: cx.root
  }, /*#__PURE__*/React.createElement(_ListItem.default, {
    button: !isFiltered,
    onClick: toggleExpanded
  }, /*#__PURE__*/React.createElement(_ListItemIcon.default, {
    className: cx.listIcon
  }, icon), /*#__PURE__*/React.createElement(_ListItemText.default, {
    classes: {
      primary: cx.listItemText
    },
    primary: title,
    secondary: subtitle
  }), isFiltered ? /*#__PURE__*/React.createElement(_ShowAllButton.default, {
    onClick: handleShowAllClick,
    className: cx.showAll
  }) : /*#__PURE__*/React.createElement(_ExpandMore.default, {
    className: (0, _clsx2.default)(cx.expandIcon, (0, _defineProperty2.default)({}, cx.expanded, expanded))
  })), /*#__PURE__*/React.createElement(_Collapse.default, {
    in: expanded || isFiltered,
    classes: {
      wrapperInner: cx.collapse
    },
    unmountOnExit: true
  }, children));
};

var _default = FilterSection;
exports.default = _default;
var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    root: {
      borderBottom: "1px solid ".concat(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