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) • 12.3 kB
JavaScript
import*as e from"react";import n from"primereact/api";import{CSSTransition as t}from"primereact/csstransition";import{useMountEffect as r,useUpdateEffect as o,useOverlayListener as a,useUnmountEffect as l}from"primereact/hooks";import{OverlayService as i}from"primereact/overlayservice";import{Portal as c}from"primereact/portal";import{ObjectUtils as u,classNames as p,DomHandler as s,UniqueComponentId as f,ZIndexUtils as d}from"primereact/utils";import{Ripple as m}from"primereact/ripple";function v(){return v=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},v.apply(this,arguments)}function h(e){if(Array.isArray(e))return e}function b(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,a,l,i=[],c=!0,u=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(r=a.call(t)).done)&&(i.push(r.value),i.length!==n);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(u)throw o}}return i}}function y(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function g(e,n){if(e){if("string"==typeof e)return y(e,n);var t=Object.prototype.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 S(){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 w(e,n){return h(e)||b(e,n)||g(e,n)||S()}var E={defaultProps:{__TYPE:"CascadeSelect",id:null,inputRef:null,style:null,className:null,value:null,name:null,options:null,optionLabel:null,optionValue:null,optionGroupLabel:null,optionGroupChildren:null,placeholder:null,itemTemplate:null,disabled:!1,dataKey:null,breakpoint:void 0,inputId:null,tabIndex:null,ariaLabelledBy:null,appendTo:null,transitionOptions:null,dropdownIcon:"pi pi-chevron-down",scrollHeight:"400px",onChange:null,onGroupChange:null,onBeforeShow:null,onBeforeHide:null,onShow:null,onHide:null,children:void 0},getProps:function(e){return u.getMergedProps(e,E.defaultProps)},getOtherProps:function(e){return u.getDiffProps(e,E.defaultProps)}},O=e.memo((function(t){var a=w(e.useState(null),2),l=a[0],i=a[1],c=e.useRef(null),f=function(e){t.onOptionSelect&&t.onOptionSelect(e)},d=function(e,n){var r=e.currentTarget.parentElement;switch(e.key){case"Down":case"ArrowDown":var o=v(r);o&&o.children[0].focus();break;case"Up":case"ArrowUp":var a=h(r);a&&a.children[0].focus();break;case"Right":case"ArrowRight":E(n)&&(l===n?r.children[1].children[0].children[0].focus():i(n));break;case"Left":case"ArrowLeft":i(null);var c=e.currentTarget.parentElement.parentElement.previousElementSibling;c&&c.focus();break;case"Enter":b(e,n);break;case"Tab":case"Escape":t.onPanelHide&&(t.onPanelHide(),e.preventDefault())}e.preventDefault()},v=function e(n){var t=n.nextElementSibling;return t?s.hasClass(t,"p-disabled")||!s.hasClass(t,"p-cascadeselect-item")?e(t):t:null},h=function e(n){var t=n.previousElementSibling;return t?s.hasClass(t,"p-disabled")||!s.hasClass(t,"p-cascadeselect-item")?e(t):t:null},b=function(e,n){E(n)?(i((function(e){return e===n?null:n})),t.onOptionGroupSelect&&t.onOptionGroupSelect({originalEvent:e,value:n})):t.onOptionSelect&&t.onOptionSelect({originalEvent:e,value:S(n)})},y=function(e){t.onOptionGroupSelect&&t.onOptionGroupSelect(e)},g=function(e){return t.optionLabel?u.resolveFieldData(e,t.optionLabel):e},S=function(e){return t.optionValue?u.resolveFieldData(e,t.optionValue):e},E=function(e){return Object.prototype.hasOwnProperty.call(e,t.optionGroupChildren[t.level])},P=function(e){return E(e)?(n=e,t.optionGroupLabel?u.resolveFieldData(n,t.optionGroupLabel):null):g(e);var n};r((function(){if(t.selectionPath&&t.options&&!t.dirty){var e=t.options.find((function(e){return t.selectionPath.includes(e)}));e&&i(e)}var n,r,o,a,l;t.root||(r=s.getOffset(n=c.current.parentElement),o=s.getViewport(),a=c.current.offsetParent?c.current.offsetWidth:s.getHiddenElementOuterWidth(element),l=s.getOuterWidth(n.children[0]),parseInt(r.left,10)+l+a>o.width-s.calculateScrollbarWidth()&&(c.current.style.left="-100%"))})),o((function(){i(null)}),[t.parentActive]);var C=function(n){if(E(n)&&l===n){var r=u.resolveFieldData(n,t.optionGroupChildren[t.level]);return e.createElement(O,{options:r,className:"p-cascadeselect-sublist",selectionPath:t.selectionPath,optionLabel:t.optionLabel,optionValue:t.optionValue,level:t.level+1,onOptionSelect:f,onOptionGroupSelect:y,parentActive:l===n,optionGroupLabel:t.optionGroupLabel,optionGroupChildren:t.optionGroupChildren,dirty:t.dirty,template:t.template,onPanelHide:t.onPanelHide})}return null},G=function(n,r){var o=p("p-cascadeselect-item",{"p-cascadeselect-item-group":E(n),"p-cascadeselect-item-active p-highlight":l===n},n.className),a=C(n),i=t.template?u.getJSXElement(t.template,S(n)):e.createElement("span",{className:"p-cascadeselect-item-text"},P(n)),c=E(n)&&e.createElement("span",{className:"p-cascadeselect-group-icon pi pi-angle-right"}),s=P(n)+"_"+r;return e.createElement("li",{key:s,className:o,style:n.style,role:"none"},e.createElement("div",{className:"p-cascadeselect-item-content",onClick:function(e){return b(e,n)},tabIndex:0,onKeyDown:function(e){return d(e,n)}},i,c,e.createElement(m,null)),a)},x=p("p-cascadeselect-panel p-cascadeselect-items",t.className,{"p-input-filled":"filled"===n.inputStyle,"p-ripple-disabled":!1===n.ripple}),A=t.options?t.options.map(G):null;return e.createElement("ul",{ref:c,className:x,role:"listbox","aria-orientation":"horizontal"},A)}));function P(e,n){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!t){if(Array.isArray(e)||(t=C(e))||n&&e&&"number"==typeof e.length){t&&(e=t);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,l=!0,i=!1;return{s:function(){t=t.call(e)},n:function(){var e=t.next();return l=e.done,e},e:function(e){i=!0,a=e},f:function(){try{l||null==t.return||t.return()}finally{if(i)throw a}}}}function C(e,n){if(e){if("string"==typeof e)return G(e,n);var t=Object.prototype.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)?G(e,n):void 0}}function G(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var x=e.memo(e.forwardRef((function(m,h){var b=E.getProps(m),y=w(e.useState(!1),2),g=y[0],S=y[1],C=w(e.useState(!1),2),G=C[0],x=C[1],A=w(e.useState(null),2),I=A[0],L=A[1],N=e.useRef(null),k=e.useRef(null),R=e.useRef(null),D=e.useRef(null),H=e.useRef(null),T=e.useRef(!1),j=e.useRef(null),V=w(a({target:N,overlay:k,listener:function(e,n){n.valid&&ne()},when:G}),2),B=V[0],F=V[1],K=function(e){b.onChange&&b.onChange({originalEvent:e,value:e.value}),$(),ne(),s.focus(R.current)},_=function(e){T.current=!0,b.onGroupChange&&b.onGroupChange(e)},M=function(e){return(b.optionLabel?u.resolveFieldData(e,b.optionLabel):e)||e},U=function(e){return b.optionValue?u.resolveFieldData(e,b.optionValue):e},W=function(e,n){return u.resolveFieldData(e,b.optionGroupChildren[n])},z=function(e,n){return Object.prototype.hasOwnProperty.call(e,b.optionGroupChildren[n])},$=function(){var e;if(null!=b.value&&b.options){var n,t=P(b.options);try{for(t.s();!(n=t.n()).done;){if(e=q(n.value,0))break}}catch(e){t.e(e)}finally{t.f()}}j.current=e},q=function e(n,t){if(z(n,t)){var r,o,a=P(W(n,t));try{for(a.s();!(o=a.n()).done;){if(r=e(o.value,t+1))return r.unshift(n),r}}catch(e){a.e(e)}finally{a.f()}}else if(u.equals(b.value,U(n),b.dataKey))return[n];return null},J=function(e){b.disabled||k.current&&k.current.contains(e.target)||(s.focus(R.current),G?ne():ee())},X=function(){S(!0)},Y=function(){S(!1)},Z=function(e){switch(e.which){case 40:G?s.findSingle(k.current,".p-cascadeselect-item").children[0].focus():e.altKey&&b.options&&b.options.length&&ee(),e.preventDefault();break;case 32:G?ne():ee(),e.preventDefault();break;case 9:ne()}},Q=function(e){i.emit("overlay-click",{originalEvent:e,target:N.current})},ee=function(){b.onBeforeShow&&b.onBeforeShow(),x(!0)},ne=function(){b.onBeforeHide&&b.onBeforeHide(),x(!1),s.focus(R.current)},te=function(){d.set("overlay",k.current,n.autoZIndex,n.zIndex.overlay),le(),I&&b.breakpoint&&(k.current.setAttribute(I+"_panel",""),ie())},re=function(){B(),b.onShow&&b.onShow()},oe=function(){F(),T.current=!1},ae=function(){d.clear(k.current),b.onHide&&b.onHide(),ce()},le=function(){s.alignOverlay(k.current,D.current.parentElement,b.appendTo||n.appendTo)},ie=function(){if(!H.current){H.current=s.createInlineStyle(n.nonce);var e="".concat(I,"_panel"),t="\n@media screen and (max-width: ".concat(b.breakpoint,") {\n .p-cascadeselect-panel[").concat(e,"] .p-cascadeselect-items-wrapper > ul {\n max-height: ").concat(b.scrollHeight,";\n overflow: ").concat(b.scrollHeight?"auto":"",";\n }\n\n .p-cascadeselect-panel[").concat(e,"] .p-cascadeselect-sublist {\n position: relative;\n }\n\n .p-cascadeselect-panel[").concat(e,"] .p-cascadeselect-item-active > .p-cascadeselect-sublist {\n left: 0 !important;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-cascadeselect-panel[").concat(e,'] .p-cascadeselect-group-icon:before {\n content: "\\e930";\n }\n}\n');H.current.innerHTML=t}},ce=function(){H.current=s.removeInlineStyle(H.current)};e.useImperativeHandle(h,(function(){return{props:b,getElement:function(){return N.current},getOverlay:function(){return k.current},getInput:function(){return R.current},getLabel:function(){return D.current},focus:function(){return s.focus(R.current)}}})),r((function(){b.breakpoint&&!I&&L(f())})),e.useEffect((function(){u.combinedRefs(R,b.inputRef)}),[R,b.inputRef]),o((function(){$()}),[b.value]),l((function(){d.clear(k.current)}));var ue=E.getOtherProps(b);u.reduceKeys(ue,s.DATA_PROPS);var pe,se,fe,de,me,ve,he,be,ye,ge=u.reduceKeys(ue,s.ARIA_PROPS);return me=p("p-cascadeselect p-component p-inputwrapper",{"p-disabled":b.disabled,"p-focus":g,"p-inputwrapper-filled":b.value,"p-inputwrapper-focus":g||G},b.className),pe=b.value?M(b.value):void 0,ve=e.createElement("div",{className:"p-hidden-accessible"},e.createElement("input",v({ref:R,type:"text",id:b.inputId,name:b.name,defaultValue:pe,readOnly:!0,disabled:b.disabled,onFocus:X,onBlur:Y,onKeyDown:Z,tabIndex:b.tabIndex,"aria-haspopup":"listbox"},ge))),se=b.value?M(b.value):b.placeholder||"p-emptylabel",fe=p("p-cascadeselect-label ",{"p-placeholder":se===b.placeholder,"p-cascadeselect-label-empty":!b.value&&"p-emptylabel"===se}),he=e.createElement("span",{ref:D,className:fe},se),de=p("p-cascadeselect-trigger-icon",b.dropdownIcon),be=e.createElement("div",{className:"p-cascadeselect-trigger",role:"button","aria-haspopup":"listbox","aria-expanded":G},e.createElement("span",{className:de})),ye=e.createElement(c,{element:e.createElement(t,{nodeRef:k,classNames:"p-connected-overlay",in:G,timeout:{enter:120,exit:100},options:b.transitionOptions,unmountOnExit:!0,onEnter:te,onEntered:re,onExit:oe,onExited:ae},e.createElement("div",{ref:k,className:"p-cascadeselect-panel p-component",onClick:Q},e.createElement("div",{className:"p-cascadeselect-items-wrapper"},e.createElement(O,{options:b.options,selectionPath:j.current,className:"p-cascadeselect-items",optionLabel:b.optionLabel,optionValue:b.optionValue,level:0,optionGroupLabel:b.optionGroupLabel,optionGroupChildren:b.optionGroupChildren,onOptionSelect:K,onOptionGroupSelect:_,root:!0,template:b.itemTemplate,onPanelHide:ne})))),appendTo:b.appendTo}),e.createElement("div",v({ref:N,id:b.id,className:me,style:b.style},ue,{onClick:J}),ve,he,be,ye)})));x.displayName="CascadeSelect";export{x as CascadeSelect};