uipack-input-tag-component/dist/index.js

UI Input Tag component for React.js / Next.js to create tags in an input

import * as React from 'react';
import { useState, useRef } from 'react';

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".container {\n    min-height: 50px;\n    width: 600px;\n    border: 1px solid rgb(105, 105, 105);\n    border-radius: 8px;\n    padding: 5px;\n    background-color: white;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n\n}\n\n.tag{\n    min-width: 65px;\n    height: 25px;\n    max-width: 180px;\n    border-radius: 10px;\n    background-color: rgba(175, 175, 175, 0.699);\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 3px;\n   margin-left: 8px;\n   margin-top: 9px;\n    cursor: pointer;\n\n}\n\n#txt{\n    margin-left: 2px;\n}\n\n#crs{\n    height: 10px;\n    width: 10px;\n    padding: 5px;\n    border-radius: 80%;\n    background-color: rgb(30, 236, 30);\n    font-size: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: white;\n    margin-left: 5px;\n\n}\n\n#inp{\n    flex-grow: 1;\n    margin-left: 8px;\n    height: 35px;\n    margin-top: 8px;\n    outline: none;\n    border: none;\n    font-size: 15px;\n\n}\n\n\n#inp::placeholder{\n    font-size: 15px;\n}\n\n#but{\n    height: 35px;\n    width: 90px;\n    border: none;\n    border-radius: 8px;\n    background-color: black;\n    color: white;\n    font-size: 15px;\n    cursor: pointer;\n    margin-left: 4px;\n    margin-top: 8px;\n}\n\n@media only screen and (max-width: 600px){\n    .container {\n        min-height: 50px;\n        width: 320px;\n        border: 1px solid rgb(105, 105, 105);\n        border-radius: 8px;\n        padding: 5px;\n        background-color: white;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n    \n    }\n    \n}";
styleInject(css_248z);

function InputTag(props) {
    const [tags, settags] = useState([]);
    const [val, setval] = useState("");
    const inp = useRef(null);
    const handleenter = (e) => {
        if (inp?.current?.value !== "") {
            if (e.key !== 'Enter') {
                return;
            }
            //@ts-ignore
            settags([...tags, inp?.current?.value]);
            props.data([...tags, inp?.current?.value]);
            setval("");
        }
    };
    const handlesubmit = (e) => {
        if (inp?.current?.value !== "") {
            //@ts-ignore
            settags([...tags, inp?.current?.value]);
            props.data([...tags, inp?.current?.value]);
            setval("");
        }
    };
    const handleinp = (e) => {
        setval(e.target.value);
    };
    const removetag = (index) => {
        settags(tags.filter((el, i) => i !== index));
        props.data(tags.filter((el, i) => i !== index));
    };
    return (React.createElement("div", { className: 'container' },
        tags.map((item, index) => (React.createElement("div", { key: index, className: 'tag' },
            React.createElement("span", { id: 'txt' }, item),
            React.createElement("span", { id: 'crs', onClick: () => { removetag(index); } }, "\u00D7")))),
        React.createElement("input", { type: "text", id: 'inp', placeholder: 'Type Here ..', value: val, ref: inp, onChange: handleinp, onKeyDown: handleenter, autoFocus: true }),
        React.createElement("button", { onClick: handlesubmit, id: 'but' }, "Add")));
}

export { InputTag };