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

React components that implement Google's Material Design.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect, useMemo } from 'react';
import clsx from 'clsx';
import { Dialog, DialogContent, makeStyles, DialogTitle, Typography, IconButton, Button, DialogActions, CircularProgress } from '@krowdy-ui/core';
import { Close as CloseIcon } from '@material-ui/icons';
import InputChip from './InputChip';
import PropTypes from 'prop-types';
import { generateRandomId } from '../utils';

var transform = function transform(Interval1, Interval2, x) {
  return Math.round((x - Interval1.min) / (Interval1.max - Interval1.min) * (Interval2.max - Interval2.min) + Interval2.min);
};

var _ref2 = /*#__PURE__*/React.createElement(Typography, {
  variant: "h6"
}, "Nube de palabras");

var _ref3 = /*#__PURE__*/React.createElement(CloseIcon, {
  fontSize: "small"
});

var KeywordFilter = function KeywordFilter(_ref) {
  var _ref$onResetCategoryI = _ref.onResetCategoryItems,
      onResetCategoryItems = _ref$onResetCategoryI === void 0 ? function () {} : _ref$onResetCategoryI,
      _ref$loadMore = _ref.loadMore,
      loadMore = _ref$loadMore === void 0 ? function () {} : _ref$loadMore,
      _ref$items = _ref.items,
      items = _ref$items === void 0 ? [] : _ref$items,
      _ref$PaperProps = _ref.PaperProps,
      PaperProps = _ref$PaperProps === void 0 ? {} : _ref$PaperProps,
      _ref$filter = _ref.filter,
      filter = _ref$filter === void 0 ? {} : _ref$filter,
      edit = _ref.edit,
      onClickApply = _ref.onClickApply,
      isOpen = _ref.isOpen,
      isLoading = _ref.isLoading,
      onClose = _ref.onClose;
  var classes = useStyles();

  var _useState = useState(filter.value || []),
      _useState2 = _slicedToArray(_useState, 2),
      selectedItems = _useState2[0],
      setSelectedItems = _useState2[1];

  var _handleClose = function _handleClose() {
    setSelectedItems([]);
    onClose();
  };

  useEffect(function () {
    if (isOpen) {
      var key = filter.key,
          value = filter.value;
      if (value) setSelectedItems(value);
      onResetCategoryItems(key);
      loadMore(key);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [isOpen]);
  var tags = useMemo(function () {
    var max = items.reduce(function (r, a) {
      return Math.max(r, a.count);
    }, 1);
    var min = items.reduce(function (r, a) {
      return Math.min(r, a.count);
    }, Infinity);
    var rangeDataSource = {
      max: max,
      min: min
    };
    return _toConsumableArray(items.map(function (element) {
      return {
        _id: element._id,
        count: transform(rangeDataSource, {
          max: 35,
          min: 12
        }, element.count),
        value: element.label
      };
    })).sort(function (a, b) {
      return b.count - a.count;
    }); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [items]);

  var _handleClickTag = function _handleClickTag(tag) {
    var existsValue = selectedItems.includes(tag.value); // Don't add if value already exists

    if (!existsValue) setSelectedItems(selectedItems.concat(tag.value));
  };

  var _handleChangeInput = function _handleChangeInput(items) {
    setSelectedItems(items);
  };

  var _handleClickApply = function _handleClickApply() {
    var configValue = selectedItems;

    var _id = edit ? filter._id : generateRandomId();

    onClickApply({
      _id: _id,
      key: filter.key,
      label: filter.label,
      operator: '$regex',
      operatorLabel: 'Contiene exactamente',
      optionIndex: filter.optionIndex,
      queryBase: filter.queryBase,
      reference: filter.reference,
      type: filter.type,
      value: configValue
    });
    setSelectedItems([]);
  };

  return /*#__PURE__*/React.createElement(Dialog, {
    fullWidth: true,
    onClose: _handleClose,
    open: isOpen,
    PaperProps: PaperProps
  }, /*#__PURE__*/React.createElement(DialogTitle, {
    className: classes.dialogTitleContainer,
    disableTypography: true
  }, _ref2, /*#__PURE__*/React.createElement(IconButton, {
    "aria-label": "close",
    className: classes.closeButton,
    onClick: _handleClose,
    size: "small"
  }, _ref3)), /*#__PURE__*/React.createElement(DialogContent, {
    className: classes.tagCloudWordsContainer
  }, /*#__PURE__*/React.createElement(InputChip, {
    onChange: _handleChangeInput,
    values: selectedItems
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.tagsContainer
  }, isLoading ? /*#__PURE__*/React.createElement(CircularProgress, {
    className: classes.loading,
    size: 40
  }) : tags.map(function (tag) {
    return /*#__PURE__*/React.createElement(CloudTag, {
      key: tag._id,
      onClick: _handleClickTag,
      selectedTags: selectedItems,
      tag: tag
    });
  }))), /*#__PURE__*/React.createElement(DialogActions, {
    className: classes.dialogActionsContainer
  }, /*#__PURE__*/React.createElement(Button, {
    className: classes.applyButton,
    color: "primary",
    onClick: _handleClickApply,
    size: "large",
    variant: "outlined"
  }, "Aplicar filtro")));
};

var CloudTag = function CloudTag(_ref4) {
  var tag = _ref4.tag,
      _onClick = _ref4.onClick,
      selectedTags = _ref4.selectedTags;
  var count = tag.count,
      value = tag.value;
  var classes = useStyles({
    count: count
  });
  var selected = useMemo(function () {
    return selectedTags.includes(tag.value);
  }, [selectedTags, tag.value]);
  return /*#__PURE__*/React.createElement("span", {
    className: clsx(classes.cloudTag, selected && classes.selected),
    onClick: function onClick() {
      return _onClick(tag);
    }
  }, value);
};

var useStyles = makeStyles(function (theme) {
  return {
    applyButton: {
      marginTop: 20
    },
    button: {
      marginTop: 12
    },
    closeButton: {
      color: theme.palette.grey[500],
      position: 'absolute',
      right: theme.spacing(1),
      top: theme.spacing(1)
    },
    cloudTag: {
      color: theme.palette.secondary[500],
      cursor: 'pointer',
      display: 'inline-block',
      fontSize: function fontSize(_ref5) {
        var count = _ref5.count;
        return count;
      },
      // color   : ({ color }) => color,
      fontWeight: 300,
      margin: theme.spacing(0, .5)
    },
    dialogActionsContainer: {
      justifyContent: 'center'
    },
    dialogTitleContainer: {
      margin: 0,
      padding: theme.spacing(2)
    },
    loading: {
      marginTop: theme.spacing(1)
    },
    selected: {
      color: theme.palette.primary.main,
      fontWeight: 500
    },
    tagCloudWordsContainer: {
      height: 420,
      textAlign: 'center'
    },
    tagsContainer: {
      marginTop: 12
    }
  };
});
process.env.NODE_ENV !== "production" ? KeywordFilter.propTypes = {
  PaperProps: PropTypes.object,
  edit: PropTypes.bool,
  filter: PropTypes.shape({
    _id: PropTypes.string.isRequired,
    key: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired
  }),
  items: PropTypes.arrayOf(PropTypes.shape({
    _id: PropTypes.string.isRequired,
    count: PropTypes.number.isRequired,
    label: PropTypes.string
  })).isRequired,
  loadMore: PropTypes.func.isRequired,
  onClickApply: PropTypes.func.isRequired,
  onResetCategoryItems: PropTypes.func.isRequired
} : void 0;
export default KeywordFilter;