primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 80+ 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) • 14.5 kB
JavaScript
import*as e from"react";import t,{localeOption as n}from"primereact/api";import{Button as o}from"primereact/button";import{useOverlayListener as l,useMountEffect as r,useUpdateEffect as i,useUnmountEffect as a}from"primereact/hooks";import{InputText as u}from"primereact/inputtext";import{OverlayService as c}from"primereact/overlayservice";import{Tooltip as p}from"primereact/tooltip";import{classNames as s,ObjectUtils as m,UniqueComponentId as d,DomHandler as f,ZIndexUtils as g,IconUtils as v}from"primereact/utils";import{CSSTransition as h}from"primereact/csstransition";import{Portal as y}from"primereact/portal";import{Ripple as b}from"primereact/ripple";import{VirtualScroller as E}from"primereact/virtualscroller";function C(){return C=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},C.apply(this,arguments)}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function S(e){if(Array.isArray(e))return w(e)}function x(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function O(e,t){if(e){if("string"==typeof e)return w(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?w(e,t):void 0}}function k(){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 I(e){if(Array.isArray(e))return e}function D(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,l,r=[],i=!0,a=!1;try{for(n=n.call(e);!(i=(o=n.next()).done)&&(r.push(o.value),!t||r.length!==t);i=!0);}catch(e){a=!0,l=e}finally{try{i||null==n.return||n.return()}finally{if(a)throw l}}return r}}function N(){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 T(e,t){return I(e)||D(e,t)||O(e,t)||N()}function M(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function P(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function F(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?P(Object(n),!0).forEach((function(t){M(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):P(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var R=e.memo(e.forwardRef((function(t,o){var l,r,i,a=function(e){return m.resolveFieldData(e,t.optionGroupLabel)},u=function(n,o,l){return t.getOptionGroupChildren(n).map((function(n,r){var i=o+"_"+r,a=t.selectedItem===n,u=t.itemTemplate?m.getJSXElement(t.itemTemplate,n,r):t.field?m.resolveFieldData(n,t.field):n;return e.createElement("li",{key:i,role:"option","aria-selected":a,className:"p-autocomplete-item",style:l,onClick:function(e){return t.onItemClick(e,n)},"data-group":o,"data-index":r},u,e.createElement(b,null))}))},c=function(n,o){var l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r={height:l.props?l.props.itemSize:void 0};if(t.optionGroupLabel){var i=t.optionGroupTemplate?m.getJSXElement(t.optionGroupTemplate,n,o):t.getOptionGroupLabel(n),c=u(n,o,r),p=o+"_"+a(n);return e.createElement(e.Fragment,{key:p},e.createElement("li",{className:"p-autocomplete-item-group",style:r},i),c)}var s=t.itemTemplate?m.getJSXElement(t.itemTemplate,n,o):t.field?m.resolveFieldData(n,t.field):n;return e.createElement("li",{key:o,role:"option","aria-selected":t.selectedItem===n,className:"p-autocomplete-item",style:r,onClick:function(e){return t.onItemClick(e,n)}},s,e.createElement(b,null))},p=function(){if(t.showEmptyMessage&&m.isEmpty(t.suggestions)){var o=t.emptyMessage||n("emptyMessage");return e.createElement("ul",{className:"p-autocomplete-items"},e.createElement("li",{className:"p-autocomplete-item"},o))}if(t.virtualScrollerOptions){var l=F(F({},t.virtualScrollerOptions),{style:F(F({},t.virtualScrollerOptions.style),{height:t.scrollHeight}),autoSize:!0,items:t.suggestions,itemTemplate:function(e,t){return e&&c(e,t.index,t)},contentTemplate:function(n){var o=s("p-autocomplete-items",n.className);return e.createElement("ul",{ref:n.contentRef,className:o,role:"listbox",id:t.listId},n.children)}});return e.createElement(E,C({ref:t.virtualScrollerRef},l))}var r=t.suggestions?t.suggestions.map(c):null;return e.createElement("ul",{className:"p-autocomplete-items",role:"listbox",id:t.listId},r)},d=(l=s("p-autocomplete-panel p-component",t.panelClassName),r=F({maxHeight:t.scrollHeight},t.panelStyle||{}),i=p(),e.createElement(h,{nodeRef:o,classNames:"p-connected-overlay",in:t.in,timeout:{enter:120,exit:100},options:t.transitionOptions,unmountOnExit:!0,onEnter:t.onEnter,onEntering:t.onEntering,onEntered:t.onEntered,onExit:t.onExit,onExited:t.onExited},e.createElement("div",{ref:o,className:l,style:r,onClick:t.onClick},i)));return e.createElement(y,{element:d,appendTo:t.appendTo})})));R.displayName="AutoCompletePanel";var j=e.memo(e.forwardRef((function(h,y){var b=T(e.useState(h.id),2),E=b[0],w=b[1],I=T(e.useState(!1),2),D=I[0],N=I[1],M=T(e.useState(!1),2),P=M[0],F=M[1],A=T(e.useState(!1),2),L=A[0],G=A[1],K=e.useRef(null),U=e.useRef(null),H=e.useRef(h.inputRef),_=e.useRef(null),z=e.useRef(null),B=e.useRef(null),J=e.useRef(null),X=T(l({target:K,overlay:U,listener:function(e,t){t.valid&&("outside"===t.type?!Y(e)&&oe():oe())},when:L}),2),V=X[0],q=X[1],Y=function(e){return h.multiple?e.target===_.current||_.current.contains(e.target):e.target===H.current},Z=function(e){B.current&&clearTimeout(B.current);var t=e.target.value;h.multiple||W(e,t),m.isEmpty(t)?(oe(),h.onClear&&h.onClear(e)):t.length>=h.minLength?B.current=setTimeout((function(){$(e,t,"input")}),h.delay):oe()},$=function(e,t,n){null!=t&&("input"===n&&0===t.trim().length||h.completeMethod&&(N(!0),h.completeMethod({originalEvent:e,query:t})))},Q=function(e,t,n){if(h.multiple){if(H.current.value="",!he(t)){var o=h.value?[].concat(S(l=h.value)||x(l)||O(l)||k(),[t]):[t];W(e,o)}}else te(t),W(e,t);var l;h.onSelect&&h.onSelect({originalEvent:e,value:t}),n||(f.focus(H.current),oe())},W=function(e,t){J&&J.current===t||(h.onChange&&h.onChange({originalEvent:e,value:t,stopPropagation:function(){},preventDefault:function(){},target:{name:h.name,id:E,value:t}}),J.current=t)},ee=function(e){if(e){if("string"==typeof e)return e;if(h.selectedItemTemplate){var t=m.getJSXElement(h.selectedItemTemplate,e);return t||e}if(h.field){var n=m.resolveFieldData(e,h.field);return null!=n?n:e}return e}return""},te=function(e){H.current.value=ee(e)},ne=function(){G(!0)},oe=function(){G(!1),N(!1)},le=function(){f.alignOverlay(U.current,h.multiple?_.current:H.current,h.appendTo||t.appendTo)},re=function(e){h.dropdownAutoFocus&&f.focus(H.current,h.dropdownAutoFocus),"blank"===h.dropdownMode?$(e,"","dropdown"):"current"===h.dropdownMode&&$(e,H.current.value,"dropdown"),h.onDropdownClick&&h.onDropdownClick({originalEvent:e,query:H.current.value})},ie=function(e,t){var n=h.value[t],o=h.value.filter((function(e,n){return t!==n}));W(e,o),h.onUnselect&&h.onUnselect({originalEvent:e,value:n})},ae=function(e){if(L){var t=f.findSingle(U.current,"li.p-highlight");switch(e.which){case 40:if(t){var n=ce(t);n&&(f.addClass(n,"p-highlight"),f.removeClass(t,"p-highlight"),f.scrollInView(ye(),n))}else t=f.findSingle(U.current,"li"),f.hasClass(t,"p-autocomplete-item-group")&&(t=ce(t)),t&&f.addClass(t,"p-highlight");e.preventDefault();break;case 38:if(t){var o=pe(t);o&&(f.addClass(o,"p-highlight"),f.removeClass(t,"p-highlight"),f.scrollInView(ye(),o))}e.preventDefault();break;case 13:t&&(ue(e,t),oe(),e.preventDefault());break;case 27:oe(),e.preventDefault();break;case 9:t&&ue(e,t),oe()}}if(h.multiple&&8===e.which)if(h.value&&h.value.length&&!H.current.value){var l=h.value[h.value.length-1],r=h.value.slice(0,-1);W(e,r),h.onUnselect&&h.onUnselect({originalEvent:e,value:l})}},ue=function(e,t){h.optionGroupLabel?Q(e,be(h.suggestions[t.dataset.group])[t.dataset.index]):Q(e,h.suggestions[f.index(t)])},ce=function e(t){var n=t.nextElementSibling;return n?f.hasClass(n,"p-autocomplete-item-group")?e(n):n:null},pe=function e(t){var n=t.previousElementSibling;return n?f.hasClass(n,"p-autocomplete-item-group")?e(n):n:null},se=function(e){F(!0),h.onFocus&&h.onFocus(e)},me=function(e){var t=e.target.value.trim(),n=(h.suggestions||[]).find((function(e){var n=h.field?m.resolveFieldData(e,h.field):e;return n&&t===n.trim()}));n?Q(e,n,!0):(H.current.value="",W(e,null),h.onClear&&h.onClear(e))},de=function(e){F(!1),h.forceSelection&&me(e),h.onBlur&&h.onBlur(e)},fe=function(e){f.focus(H.current),h.onClick&&h.onClick(e)},ge=function(e){se(e),f.addClass(_.current,"p-focus")},ve=function(e){de(e),f.removeClass(_.current,"p-focus")},he=function(e){return!!h.value&&h.value.some((function(t){return m.equals(t,e)}))},ye=function(){return z.current?U.current.firstChild:U.current},be=function(e){return m.resolveFieldData(e,h.optionGroupChildren)};e.useEffect((function(){m.combinedRefs(H,h.inputRef)}),[H,h.inputRef]),r((function(){E||w(d()),h.autoFocus&&f.focus(H.current,h.autoFocus)})),i((function(){D&&(m.isNotEmpty(h.suggestions)||h.showEmptyMessage?ne():oe(),N(!1))}),[h.suggestions]),i((function(){H.current&&!h.multiple&&te(h.value)})),a((function(){B.current&&clearTimeout(B.current),g.clear(U.current)})),e.useImperativeHandle(y,(function(){return{props:h,search:$,show:ne,hide:oe,getElement:function(){return K.current},getOverlay:function(){return U.current},getInput:function(){return H.current},getVirtualScroller:function(){return z.current}}}));var Ee=function(){var t=ee(h.value),n=L?E+"_list":null,o=s("p-autocomplete-input",h.inputClassName,{"p-autocomplete-dd-input":h.dropdown});return e.createElement(u,C({ref:H,id:h.inputId,type:h.type,name:h.name,defaultValue:t,role:"combobox","aria-autocomplete":"list","aria-controls":n,"aria-haspopup":"listbox","aria-expanded":L,className:o,style:h.inputStyle,autoComplete:"off",readOnly:h.readOnly,disabled:h.disabled,placeholder:h.placeholder,size:h.size,maxLength:h.maxLength,tabIndex:h.tabIndex,onBlur:de,onFocus:se,onChange:Z,onMouseDown:h.onMouseDown,onKeyUp:h.onKeyUp,onKeyDown:ae,onKeyPress:h.onKeyPress,onContextMenu:h.onContextMenu,onClick:h.onClick,onDoubleClick:h.onDblClick},Oe))},Ce=function(){var t=s("p-autocomplete-multiple-container p-component p-inputtext",{"p-disabled":h.disabled}),n=m.isNotEmpty(h.value)?h.value.map((function(t,n){return e.createElement("li",{key:n+"multi-item",className:"p-autocomplete-token p-highlight"},e.createElement("span",{className:"p-autocomplete-token-label"},ee(t)),!h.disabled&&v.getJSXIcon(h.removeIcon,{className:"p-autocomplete-token-icon",onClick:function(e){return ie(e,n)}},{props:h}))})):null,o=e.createElement("li",{className:"p-autocomplete-input-token"},e.createElement("input",C({ref:H,type:h.type,disabled:h.disabled,placeholder:h.placeholder,role:"combobox","aria-autocomplete":"list","aria-controls":L?E+"_list":null,"aria-haspopup":"listbox","aria-expanded":L,autoComplete:"off",readOnly:h.readOnly,tabIndex:h.tabIndex,onChange:Z,id:h.inputId,name:h.name,style:h.inputStyle,className:h.inputClassName,maxLength:h.maxLength,onKeyUp:h.onKeyUp,onKeyDown:ae,onKeyPress:h.onKeyPress,onFocus:ge,onBlur:ve},Oe)));return e.createElement("ul",{ref:_,className:t,onContextMenu:h.onContextMenu,onMouseDown:h.onMouseDown,onClick:fe,onDoubleClick:h.onDblClick},n,o)},we=E+"_list",Se=m.isNotEmpty(h.tooltip),xe=m.findDiffKeys(h,j.defaultProps),Oe=m.reduceKeys(xe,f.ARIA_PROPS),ke=s("p-autocomplete p-component p-inputwrapper",{"p-autocomplete-dd":h.dropdown,"p-autocomplete-multiple":h.multiple,"p-inputwrapper-filled":h.value,"p-inputwrapper-focus":P},h.className),Ie=D?e.createElement("i",{className:"p-autocomplete-loader pi pi-spinner pi-spin"}):null,De=h.multiple?Ce():Ee(),Ne=function(){if(h.dropdown){var t=h.dropdownAriaLabel||h.placeholder||n("choose");return e.createElement(o,{type:"button",icon:h.dropdownIcon,className:"p-autocomplete-dropdown",disabled:h.disabled,onClick:re,"aria-label":t})}return null}();return e.createElement(e.Fragment,null,e.createElement("span",C({ref:K,id:E,style:h.style,className:ke},xe),De,Ie,Ne,e.createElement(R,C({ref:U,virtualScrollerRef:z},h,{listId:we,onItemClick:Q,selectedItem:J,onClick:function(e){c.emit("overlay-click",{originalEvent:e,target:K.current})},getOptionGroupLabel:function(e){return h.optionGroupLabel?m.resolveFieldData(e,h.optionGroupLabel):e},getOptionGroupChildren:be,in:L,onEnter:function(){g.set("overlay",U.current,t.autoZIndex,t.zIndex.overlay),le()},onEntering:function(){if(h.autoHighlight&&h.suggestions&&h.suggestions.length){var e=ye().firstChild.firstChild;f.addClass(e,"p-highlight")}},onEntered:function(){V(),h.onShow&&h.onShow()},onExit:function(){q()},onExited:function(){g.clear(U.current),h.onHide&&h.onHide()}}))),Se&&e.createElement(p,C({target:K,content:h.tooltip},h.tooltipOptions)))})));j.displayName="AutoComplete",j.defaultProps={__TYPE:"AutoComplete",id:null,appendTo:null,autoFocus:!1,autoHighlight:!1,className:null,completeMethod:null,delay:300,disabled:!1,dropdown:!1,dropdownAriaLabel:null,dropdownAutoFocus:!0,dropdownIcon:"pi pi-chevron-down",dropdownMode:"blank",emptyMessage:null,field:null,forceSelection:!1,inputClassName:null,inputId:null,inputRef:null,inputStyle:null,itemTemplate:null,maxLength:null,minLength:1,multiple:!1,name:null,onBlur:null,onChange:null,onClear:null,onClick:null,onContextMenu:null,onDblClick:null,onDropdownClick:null,onFocus:null,onHide:null,onKeyPress:null,onKeyUp:null,onMouseDown:null,onSelect:null,onShow:null,onUnselect:null,optionGroupChildren:null,optionGroupLabel:null,optionGroupTemplate:null,panelClassName:null,panelStyle:null,placeholder:null,readOnly:!1,removeIcon:"pi pi-times-circle",scrollHeight:"200px",selectedItemTemplate:null,showEmptyMessage:!1,size:null,style:null,suggestions:null,tabIndex:null,tooltip:null,tooltipOptions:null,transitionOptions:null,type:"text",value:null,virtualScrollerOptions:null};export{j as AutoComplete};