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