UNPKG

@krowdy-ui/views

Version:

React components that implement Google's Material Design.

67 lines (59 loc) 1.98 kB
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;