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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

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

  var _useState = useState(''),
      _useState2 = _slicedToArray(_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.createElement(Autocomplete, {
    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.createElement(TextField, _extends({}, params, {
        fullWidth: true,
        placeholder: "Valor",
        size: "small"
      }));
    },
    size: "small",
    value: values
  });
};

process.env.NODE_ENV !== "production" ? InputChip.propTypes = {
  onChange: PropTypes.func.isRequired,
  values: PropTypes.arrayOf(PropTypes.string).isRequired
} : void 0;
export default InputChip;