@krowdy-ui/views/Filters/InputChip.js

React components that implement Google's Material Design.

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));

var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplete"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var InputChip = function InputChip(props) {
  var onChange = props.onChange,
      values = props.values;

  var _useState = (0, _react.useState)(''),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      inputValue = _useState2[0],
      setInputValue = _useState2[1];

  var _handleKeyDown = function _handleKeyDown(event) {
    if (event.keyCode === 13 && inputValue) {
      var existsValue = values.includes(inputValue); // Don't add if value already exists

      if (!existsValue) onChange(values.concat(inputValue));
      setInputValue('');
    }
  };

  var _handleInputChange = function _handleInputChange(_, text) {
    return setInputValue(text);
  };

  var _handleChange = function _handleChange(_, values) {
    return onChange(values);
  };

  return /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
    ChipProps: {
      color: 'primary',
      variant: 'outlined'
    },
    forcePopupIcon: false,
    getOptionLabel: function getOptionLabel(option) {
      return option;
    },
    inputValue: inputValue,
    multiple: true,
    onChange: _handleChange,
    onInputChange: _handleInputChange,
    onKeyDown: _handleKeyDown,
    open: false,
    options: [],
    popupIcon: null,
    renderInput: function renderInput(params) {
      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({}, params, {
        fullWidth: true,
        placeholder: "Valor",
        size: "small"
      }));
    },
    size: "small",
    value: values
  });
};

process.env.NODE_ENV !== "production" ? InputChip.propTypes = {
  onChange: _propTypes["default"].func.isRequired,
  values: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired
} : void 0;
var _default = InputChip;
exports["default"] = _default;