input-with-tag/es/InputWithTag/index.js

Based on AntD Input, enhanced it with Tag，support for Form embedded.

import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useRef } from 'react';
import { Tag, Input, message } from 'antd';
import './index.css.js';

var InputWithTag = (function (props) {
    var _a = props.value, value = _a === void 0 ? [] : _a, _b = props.onChange, onChange = _b === void 0 ? function () { } : _b;
    var _c = useState(''), valueInput = _c[0], setValueInput = _c[1];
    var inputRef = useRef(null);
    function pressEnter(e) {
        if (e.target.value) {
            onChange(__spreadArray(__spreadArray([], value, true), [e.target.value], false));
            setValueInput('');
        }
        else {
            message.error('No input text');
        }
        e.preventDefault();
    }
    function preventDefault(str, e) {
        e.preventDefault();
        onChange(value.filter(function (item) { return item !== str; }));
    }
    function focus() {
        inputRef.current && inputRef.current.focus();
    }
    function handleChange(e) {
        var elm = e.target;
        setValueInput(elm.value);
    }
    function keyDown(e) {
        if (e.keyCode === 8 && !valueInput) {
            onChange(value.filter(function (v, i, ar) {
                return i !== ar.length - 1;
            }));
        }
    }
    return (jsx("div", { children: jsx("div", __assign({ onClick: focus, className: 'input-with-tag-container' }, { children: jsxs("ul", __assign({ className: 'input-with-tag-ul' }, { children: [value &&
                        value.map(function (item, index) { return (jsx("li", __assign({ style: { float: 'left', marginBottom: '8px' } }, { children: jsx(Tag, __assign({ closable: true, onClose: function (e) { return preventDefault(item, e); } }, { children: item })) }), index)); }), jsx("li", __assign({ style: { float: 'left' } }, { children: jsx(Input, { onKeyDown: keyDown, ref: inputRef, value: valueInput, className: 'input-with-tag-input', onPressEnter: pressEnter, onChange: handleChange }) }))] })) })) }));
});

export { InputWithTag as default };