react-tagit
Version:
Simple input tag component for react
3 lines (2 loc) • 6.8 kB
JavaScript
import{jsxs as n,jsx as t}from"react/jsx-runtime";import{useRef as e,useState as r,Fragment as a}from"react";var o=function(){return o=Object.assign||function(n){for(var t,e=1,r=arguments.length;e<r;e++)for(var a in t=arguments[e])Object.prototype.hasOwnProperty.call(t,a)&&(n[a]=t[a]);return n},o.apply(this,arguments)};function i(n,t,e){if(e||2===arguments.length)for(var r,a=0,o=t.length;a<o;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return n.concat(r||Array.prototype.slice.call(t))}function l(n,t){void 0===t&&(t={});var e=t.insertAt;if(n&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}"function"==typeof SuppressedError&&SuppressedError;function u(e){var r=e.customTagItemClass,a=e.customRemoveButtonClass,i=e.customTagContentClass,l=e.disabled,u=e.tagName,s=e.tagsStyleProps,g=e.removeTagBtnStyleProps,p=e.theme,m=e.onRemoveTag;return n("li",{className:"input-tag-tag-item ".concat(p,"-input-tag-tag-item ").concat(r||"input-tag-tag-item-element"),style:s,children:[t("button",{className:"input-tag-tag-remove-btn ".concat(p,"-input-tag-tag-remove-btn ").concat(a||"input-tag-tag-remove-btn-element"),style:o(o({},g),{display:l?"none":"inline-block"}),onClick:function(n){n.stopPropagation(),m(u)},children:"✕"}),t("span",{className:"input-tag-tag-content ".concat(p,"-input-tag-tag-content ").concat(i||"input-tag-tag-content-element"),children:u})]})}l('.input-tag-tag-item {\r\n margin: 0;\r\n padding: 0 0.5rem 0 0;\r\n display: flex;\r\n gap: 0.3rem;\r\n list-style-type: none;\r\n}\r\n\r\n.input-tag-tag-remove-btn {\r\n cursor: pointer;\r\n}\r\n\r\n.theme-1-input-tag-tag-item {\r\n padding: 0.5rem;\r\n color: white;\r\n background-color: rgb(39, 39, 39);\r\n border-radius: 5px;\r\n font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\r\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\r\n}\r\n\r\n.theme-1-input-tag-tag-remove-btn {\r\n color: white;\r\n border: none;\r\n font-weight: bold;\r\n background-color: transparent;\r\n}\r\n\r\n.theme-1-input-tag-tag-remove-btn:hover {\r\n color: rgb(207, 31, 31);\r\n}\r\n\r\n.theme-2-input-tag-tag-item,\r\n.theme-3-input-tag-tag-item {\r\n padding: 0.3rem;\r\n background-color: rgb(199, 199, 199);\r\n font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\r\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\r\n}\r\n\r\n.theme-2-input-tag-tag-remove-btn {\r\n color: white;\r\n padding: 0.1rem 0.3rem 0.15rem 0.3rem;\r\n font-weight: bold;\r\n border: none;\r\n border-radius: 50%;\r\n background-color: rgb(207, 31, 31);\r\n}\r\n\r\n.theme-3-input-tag-tag-item {\r\n padding: 0;\r\n gap: 0rem;\r\n}\r\n\r\n.theme-3-input-tag-tag-remove-btn {\r\n color: white;\r\n border: none;\r\n background-color: rgb(126, 126, 126);\r\n}\r\n\r\n.theme-3-input-tag-tag-content {\r\n padding: 0 0.3rem;\r\n}\r\n');function s(l){var s=l.autoFocus,g=void 0!==s&&s,p=l.customClass,m=l.disabled,c=void 0!==m&&m,d=l.inputTagContainerStyleProps,h=l.labelStyleProps,b=l.inputStyleProps,f=l.tagsContainerStyleProps,y=l.tagsStyleProps,v=l.removeTagBtnStyleProps,C=l.hideLabel,T=void 0!==C&&C,E=l.label,S=void 0===E?"Tags":E,x=l.maxTags,k=l.maxTagsValue,N=l.name,w=void 0===N?"tags":N,j=l.separator,P=void 0===j?"Enter":j,B=l.theme,I=l.value,A=l.onChange,L=l.onFocus,U=void 0===L?function(){}:L,F=l.onBlur,R=void 0===F?function(){}:F,O=e(null),D=r(""),z=D[0],K=D[1],V=0===I.filter((function(n){return n.toLowerCase().trim()===z.toLowerCase().trim()})).length,q=""!==z.trim()&&z.length>0,G=!(x&&x>0)||I.length<x,H="Enter"===P?"Enter":" ",J=function(n){A((function(t){return t.filter((function(t){return t!==n}))}))};return n("div",{className:"input-tag-container ".concat((null==p?void 0:p.inputTagContainerElement)||"input-tag-container-element"),style:d,onClick:function(){return O.current.focus()},children:[t("label",{htmlFor:"tag-input",className:"input-tag-label ".concat(B,"-input-tag-label ").concat((null==p?void 0:p.inputTagLabelElement)||"input-tag-label-element"),style:o(o({},h),{display:T?"none":"block"}),children:S}),n("ul",{className:"input-tag-list-container ".concat(B,"-input-tag-list-container ").concat((null==p?void 0:p.inputTagListContainerElement)||"input-tag-list-container-element"),style:o({cursor:c?"default":"text"},f),children:[I.map((function(n){return t(a,{children:t(u,{customTagItemClass:null==p?void 0:p.inputTagTagItemElement,customRemoveButtonClass:null==p?void 0:p.inputTagTagRemoveBtnElement,customTagContentClass:null==p?void 0:p.inputTagTagContentElement,disabled:c,tagName:n,tagsStyleProps:y,removeTagBtnStyleProps:v,theme:B,onRemoveTag:J})},n)})),t("li",{children:t("input",{id:"tag-input","aria-label":"".concat(S," input"),ref:O,type:"text",className:"input-tag-input ".concat(B,"-input-tag-input ").concat((null==p?void 0:p.inputTagInputElement)||"input-tag-input-element"),value:z,onKeyDown:function(n){"Enter"===n.key&&n.preventDefault(),"Backspace"===n.key&&!q&&I.length>0&&J(I[I.length-1]),n.key===H&&q&&V&&G&&(A((function(n){return i(i([],n,!0),[z],!1)})),K(""))},onChange:function(n){return K(n.target.value)},autoFocus:g,maxLength:k,name:w,style:b,onBlur:R,onFocus:U,disabled:c})})]})]})}l(".input-tag-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem 0rem;\r\n}\r\n\r\n.input-tag-list-container {\r\n cursor: text;\r\n padding: 1rem;\r\n margin: 0;\r\n display: flex;\r\n align-items: baseline;\r\n flex-wrap: wrap;\r\n list-style-type: none;\r\n border-radius: 5px;\r\n border: 1px solid rgb(70, 70, 70);\r\n}\r\n\r\n.input-tag-list-container:has(input:disabled) {\r\n border: 1px solid rgba(70, 70, 70, 0.349);\r\n}\r\n\r\n.input-tag-input {\r\n border: none;\r\n background-color: transparent;\r\n}\r\n\r\n.input-tag-label,\r\n.theme-1-input-tag-label,\r\n.theme-2-input-tag-label,\r\n.theme-3-input-tag-label {\r\n font-size: 1rem;\r\n font-weight: 500;\r\n font-family:\r\n ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\r\n 'Segoe UI Symbol', 'Noto Color Emoji';\r\n}\r\n\r\n.theme-1-input-tag-list-container,\r\n.theme-2-input-tag-list-container,\r\n.theme-3-input-tag-list-container {\r\n min-height: 4rem;\r\n padding: 0.3rem 1rem;\r\n gap: 0.2rem;\r\n}\r\n\r\n.theme-2-input-tag-list-container,\r\n.theme-3-input-tag-list-container {\r\n padding: 1rem;\r\n}\r\n\r\n.theme-1-input-tag-input,\r\n.theme-2-input-tag-input,\r\n.theme-3-input-tag-input {\r\n padding: 0.3rem;\r\n}\r\n");export{s as InputTag};
//# sourceMappingURL=index.js.map