primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 11.8 kB
JavaScript
this.primereact=this.primereact||{},this.primereact.chips=function(e,n,t,r,i,l,a,o,u){"use strict";function c(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var s=c(n);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},p.apply(null,arguments)}function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function d(e,n){if("object"!=f(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function m(e){var n=d(e,"string");return"symbol"==f(n)?n:n+""}function v(e,n,t){return(n=m(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function y(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function b(e){if(Array.isArray(e))return y(e)}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function g(e,n){if(e){if("string"==typeof e)return y(e,n);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?y(e,n):void 0}}function O(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function k(e){return b(e)||h(e)||g(e)||O()}function w(e){if(Array.isArray(e))return e}function x(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,l,a,o=[],u=!0,c=!1;try{if(l=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=l.call(t)).done)&&(o.push(r.value),o.length!==n);u=!0);}catch(e){c=!0,i=e}finally{try{if(!u&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(c)throw i}}return o}}function j(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function P(e,n){return w(e)||x(e,n)||g(e,n)||j()}var D=r.ComponentBase.extend({defaultProps:{__TYPE:"Chips",addOnBlur:null,allowDuplicate:!0,ariaLabelledBy:null,autoFocus:!1,className:null,disabled:null,id:null,inputId:null,inputRef:null,invalid:!1,variant:null,itemTemplate:null,keyfilter:null,max:null,name:null,onAdd:null,onBlur:null,onChange:null,onFocus:null,onKeyDown:null,onRemove:null,placeholder:null,readOnly:!1,removable:!0,removeIcon:null,separator:null,style:null,tooltip:null,tooltipOptions:null,value:null,children:void 0},css:{classes:{removeTokenIcon:"p-chips-token-icon",label:"p-chips-token-label",token:function(e){return u.classNames("p-chips-token",{"p-focus":e.focusedIndex===e.index})},inputToken:"p-chips-input-token",container:function(e){var n=e.props,t=e.context;return u.classNames("p-inputtext p-chips-multiple-container",{"p-variant-filled":n.variant?"filled"===n.variant:t&&"filled"===t.inputStyle})},root:function(e){var n=e.focusedState;return u.classNames("p-chips p-component p-inputwrapper",{"p-inputwrapper-filled":e.isFilled,"p-inputwrapper-focus":n,"p-disabled":e.disabled,"p-invalid":e.invalid,"p-focus":n})}},styles:"\n@layer primereact {\n .p-chips {\n display: inline-flex;\n }\n \n .p-chips-multiple-container {\n margin: 0;\n padding: 0;\n list-style-type: none;\n cursor: text;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n }\n \n .p-chips-token {\n cursor: default;\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n }\n \n .p-chips-input-token {\n flex: 1 1 auto;\n display: inline-flex;\n }\n \n .p-chips-token-icon {\n cursor: pointer;\n }\n \n .p-chips-input-token input {\n border: 0 none;\n outline: 0 none;\n background-color: transparent;\n margin: 0;\n padding: 0;\n box-shadow: none;\n border-radius: 0;\n width: 100%;\n }\n \n .p-fluid .p-chips {\n display: flex;\n }\n \n .p-chips-icon-left,\n .p-chips-icon-right {\n position: relative;\n display: inline-block;\n }\n \n .p-chips-icon-left > i,\n .p-chips-icon-right > i,\n .p-chips-icon-left > svg,\n .p-chips-icon-right > svg,\n .p-chips-icon-left > .p-chips-prefix,\n .p-chips-icon-right > .p-chips-suffix {\n position: absolute;\n top: 50%;\n margin-top: -0.5rem;\n }\n \n .p-fluid .p-chips-icon-left,\n .p-fluid .p-chips-icon-right {\n display: block;\n width: 100%;\n }\n}\n"}});function E(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function S(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?E(Object(t),!0).forEach((function(n){v(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):E(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var I=s.memo(s.forwardRef((function(e,n){var c=i.useMergeProps(),f=s.useContext(t.PrimeReactContext),d=D.getProps(e,f),m=P(s.useState(!1),2),v=m[0],y=m[1],b=P(s.useState(null),2),h=b[0],g=b[1],O=D.setMetaData({props:d,state:{focused:v}}),w=O.ptm,x=O.cx;r.useHandleStyle(D.css.styles,O.isUnstyled,{name:"chips"});var j=s.useRef(null),E=s.useRef(null),I=s.useRef(d.inputRef),A=function(e,n){if(!d.disabled||!d.readOnly){var t=k(d.value),r=t.splice(n,1)[0];W(r,n)&&(d.onRemove&&d.onRemove({originalEvent:e,value:r}),d.onChange&&d.onChange({originalEvent:e,value:t,stopPropagation:function(){null==e||e.stopPropagation()},preventDefault:function(){null==e||e.preventDefault()},target:{name:d.name,id:d.id,value:t}}))}},R=function(e,n,t){if(n&&n.trim().length){var r=d.value?k(d.value):[];if(d.allowDuplicate||-1===r.indexOf(n)){var i=!0;d.onAdd&&(i=d.onAdd({originalEvent:e,value:n})),!1!==i&&r.push(n)}B(e,r,t)}},N=function(e){switch(e.code){case"ArrowLeft":C();break;case"ArrowRight":T();break;case"Backspace":_(e)}},C=function(){var e=h;0===I.current.value.length&&d.value&&d.value.length>0&&(e=null===e?d.value.length-1:e-1)<0&&(e=0),g(e)},T=function(){var e=h;0===I.current.value.length&&d.value&&d.value.length>0&&(e===d.value.length-1?(e=null,I.current.focus()):e++),g(e)},_=function(e){null!==h&&A(e,h)},F=function(e){var n=e.target.value,t=d.value||[];if(d.onKeyDown&&d.onKeyDown(e),!e.defaultPrevented)switch(e.key){case"Backspace":0===n.length&&t.length>0&&A(e,t.length-1);break;case"Enter":n&&n.trim().length&&(!d.max||d.max>t.length)&&R(e,n,!0);break;case"ArrowLeft":0===n.length&&t&&t.length>0&&u.DomHandler.focus(E.current);break;case"ArrowRight":e.stopPropagation();break;default:d.keyfilter&&a.KeyFilter.onKeyPress(e,d.keyfilter),z()&&e.preventDefault()}},B=function(e,n,t){d.onChange&&d.onChange({originalEvent:e,value:n,stopPropagation:function(){null==e||e.stopPropagation()},preventDefault:function(){null==e||e.preventDefault()},target:{name:d.name,id:d.id,value:n}}),I.current.value="",t&&e.preventDefault()},K=function(e){var n,t=null===(n=e.target.value)||void 0===n?void 0:n.trim();if(t!==d.separator){if(d.separator&&t.endsWith(d.separator)){var r=t.slice(0,-1);R(e,r)}}else I.current.value=""},U=function(e){if(d.separator){var n=d.separator.replace("\\n","\n").replace("\\r","\r").replace("\\t","\t"),t=(e.clipboardData||window.clipboardData).getData("Text");if(d.keyfilter&&a.KeyFilter.onPaste(e,d.keyfilter),t){var r=d.value||[],i=t.split(n);i=i.filter((function(e){return(d.allowDuplicate||-1===r.indexOf(e))&&e.trim().length})),r=[].concat(k(r),k(i)),B(e,r,!0)}}},H=function(){y(!0)},M=function(){g(-1),y(!1)},L=function(e){if(d.addOnBlur){var n=e.target.value,t=d.value||[];n&&n.trim().length&&(!d.max||d.max>t.length)&&R(e,n,!0)}y(!1),d.onBlur&&d.onBlur(e)},z=function(){return d.max&&d.value&&d.max===d.value.length},J=I.current&&I.current.value,V=s.useMemo((function(){return u.ObjectUtils.isNotEmpty(d.value)||u.ObjectUtils.isNotEmpty(J)}),[d.value,J]),W=function(e,n){return u.ObjectUtils.getPropValue(d.removable,{value:e,index:n,props:d})};s.useImperativeHandle(n,(function(){return{props:d,focus:function(){return u.DomHandler.focus(I.current)},getElement:function(){return j.current},getInput:function(){return I.current}}})),s.useEffect((function(){u.ObjectUtils.combinedRefs(I,d.inputRef)}),[I,d.inputRef]),i.useMountEffect((function(){d.autoFocus&&u.DomHandler.focus(I.current,d.autoFocus)}));var X,Y,$,q,G,Q=function(e,n){if(!d.disabled&&!d.readOnly&&W(e,n)){var t=c({className:x("removeTokenIcon"),onClick:function(e){return A(e,n)},"aria-hidden":"true"},w("removeTokenIcon"));return u.IconUtils.getJSXIcon(d.removeIcon||s.createElement(l.TimesCircleIcon,t),S({},t),{props:d})}return null},Z=function(e,n){var t=d.itemTemplate?d.itemTemplate(e):e,r=c({className:x("label")},w("label")),i=s.createElement("span",r,t),l=Q(e,n),a=c({id:d.inputId+"_chips_item_"+n,role:"option","aria-label":e,className:x("token",{focusedIndex:h,index:n}),"aria-selected":!0,"aria-setsize":d.value.length,"aria-posinset":n+1,"data-p-highlight":!0,"data-p-focused":h===n},w("token"));return s.createElement("li",p({},a,{key:"".concat(n,"_").concat(e)}),i,l)},ee=u.ObjectUtils.isNotEmpty(d.tooltip),ne=D.getOtherProps(d),te=u.ObjectUtils.reduceKeys(ne,u.DomHandler.ARIA_PROPS),re=($=d.value?d.value.map(Z):null,X=c({className:x("inputToken")},w("inputToken")),Y=c(S({id:d.inputId,ref:I,placeholder:d.placeholder,type:"text",enterKeyHint:"enter",name:d.name,disabled:d.disabled||z(),onKeyDown:function(e){return F(e)},onChange:function(e){return K(e)},onPaste:function(e){return U(e)},onFocus:function(e){return n=e,y(!0),g(null),void(d.onFocus&&d.onFocus(n));var n},onBlur:function(e){return L(e)},readOnly:d.readOnly},te),w("input")),q=s.createElement("li",p({},X,{key:d.inputId+"_chips_input"}),s.createElement("input",Y)),G=c({ref:E,className:x("container",{context:f}),onClick:function(e){u.DomHandler.focus(I.current)},onKeyDown:function(e){return N(e)},tabIndex:-1,role:"listbox","aria-orientation":"horizontal","aria-labelledby":d.ariaLabelledby,"aria-label":d.ariaLabel,"aria-activedescendant":v?null!==h?"".concat(d.inputId,"_chips_item_").concat(h):null:void 0,"data-p-disabled":d.disabled,"data-p-focus":v,onFocus:H,onBlur:M},w("container")),s.createElement("ul",G,$,q)),ie=c({id:d.id,ref:j,className:u.classNames(d.className,x("root",{isFilled:V,focusedState:v,disabled:d.disabled,invalid:d.invalid})),style:d.style},w("root"));return s.createElement(s.Fragment,null,s.createElement("div",ie,re),ee&&s.createElement(o.Tooltip,p({target:I,content:d.tooltip,pt:w("tooltip")},d.tooltipOptions)))})));return I.displayName="Chips",e.Chips=I,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.icons.timescircle,primereact.keyfilter,primereact.tooltip,primereact.utils);