@krowdy-ui/views/esm/SuperFilters/ListItems.js

React components that implement Google's Material Design.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { FormControlLabel, Checkbox, makeStyles, List } from '@krowdy-ui/core';
var useStyles = makeStyles(function (theme) {
  return {
    formControlLabel: {
      boxSizing: 'border-box',
      paddingLeft: theme.spacing(1.4),
      width: '100%'
    },
    formLabel: {
      '-webkit-box-orient': 'vertical',
      '-webkit-line-clamp': 2,
      display: '-webkit-box',
      lineHeight: '1.5',
      maxHeight: 32,
      maxWidth: 120,
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    },
    loadingContainer: {
      display: 'flex',
      justifyContent: 'center'
    }
  };
}, {
  name: 'KrowdyListItems'
});

var ListItems = function ListItems(_ref) {
  var _ref$items = _ref.items,
      items = _ref$items === void 0 ? [] : _ref$items,
      _ref$selectedItems = _ref.selectedItems,
      selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
      categoryKey = _ref.categoryKey,
      _ref$onResetCategoryI = _ref.onResetCategoryItems,
      onResetCategoryItems = _ref$onResetCategoryI === void 0 ? function () {} : _ref$onResetCategoryI,
      onChangeSelected = _ref.onChangeSelected;
  var classes = useStyles();

  var _handleChange = function _handleChange(item) {
    return function (event) {
      onChangeSelected(event.target.checked ? [].concat(_toConsumableArray(selectedItems), [item]) : selectedItems.filter(function (selected) {
        return selected._id !== item._id;
      }));
    };
  };

  useEffect(function () {
    onResetCategoryItems(categoryKey, selectedItems); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/React.createElement(List, null, items.map(function (item, index) {
    return /*#__PURE__*/React.createElement(FormControlLabel, {
      classes: {
        label: classes.formLabel,
        root: classes.formControlLabel
      },
      color: "primary",
      control: /*#__PURE__*/React.createElement(Checkbox, {
        checked: Boolean(selectedItems.filter(function (_ref2) {
          var _id = _ref2._id;
          return _id === item._id;
        }).length),
        color: "primary",
        onChange: _handleChange(item),
        size: "small",
        value: item._id
      }),
      key: index,
      label: item.label,
      size: "small"
    });
  }));
};

process.env.NODE_ENV !== "production" ? ListItems.propTypes = {
  categoryKey: PropTypes.string,
  items: PropTypes.arrayOf(PropTypes.shape({
    _id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired
  })).isRequired,
  onChangeSelected: PropTypes.func.isRequired,
  onResetCategoryItems: PropTypes.func,
  selectedItems: PropTypes.arrayOf(PropTypes.shape({
    _id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired
  })).isRequired
} : void 0;
export default ListItems;