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

React components that implement Google's Material Design.

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { FormControlLabel, Checkbox, makeStyles, List } from '@krowdy-ui/core';
const useStyles = makeStyles(theme => ({
  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'
});

const ListItems = ({
  items = [],
  selectedItems = [],
  categoryKey,
  onResetCategoryItems = () => {},
  onChangeSelected
}) => {
  const classes = useStyles();

  const _handleChange = item => event => {
    onChangeSelected(event.target.checked ? [...selectedItems, item] : selectedItems.filter(selected => selected._id !== item._id));
  };

  useEffect(() => {
    onResetCategoryItems(categoryKey, selectedItems); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/React.createElement(List, null, items.map((item, index) => /*#__PURE__*/React.createElement(FormControlLabel, {
    classes: {
      label: classes.formLabel,
      root: classes.formControlLabel
    },
    color: "primary",
    control: /*#__PURE__*/React.createElement(Checkbox, {
      checked: Boolean(selectedItems.filter(({
        _id
      }) => _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;