react-dropdown-z/build/index.esm.js

React hook. Simple dropdown. (Lib)

import e,{useRef as t,useState as l,useEffect as n}from"react";import{CmUtils as o,HtmlUtils as a,Hooks as r}from"@delpi/common";import i from"rc-tc-ifn";import{Ifz as c,If as s,Else as d,ElseIf as u,When as m}from"react-if-vz";import p from"react-perfect-scrollbar-z";var f=function(){return f=Object.assign||function(e){for(var t,l=1,n=arguments.length;l<n;l++)for(var o in t=arguments[l])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},f.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var v=function(e){return"string"==typeof e&&""!==e.trim()},b=function(e,t,l,n){if(o.isNil(e))return{value:"",label:""};if((null==e?void 0:e.isGroup)&&Array.isArray(e.items)){var a=e.items.map((function(e){return b(e,t,l)})).find((function(e){return e.value===n}));if(a)return a}var r="string"==typeof e?e:JSON.stringify(e);if(!v(l))return{value:r,label:r};var i=o.isNil(null==e?void 0:e[l])?r:e[l];return{value:i,label:o.isNil(null==e?void 0:e[t])?i:e[t]}},w=function(t){var l=t.item,n=t.labelName,o=void 0===n?"":n,r=t.keyName,s=void 0===r?"":r,d=t.tabIndex,u=t.selectValue,m=t.tooltipIfDropdownProps,p=t.handleSelectValue,v=b(l,o,s),w=v.value,E=v.label,N=w===u;return e.createElement("button",{tabIndex:d,className:a.joinClass("dropdown2-item",m&&"dropdown2-item-tooltip",N&&"dropdown2-item-selected",l.className,l.disabled&&"dropdown2-item-disabled"),onClick:function(e){e.preventDefault(),!l.disabled&&p(l)},role:"option","aria-selected":N?"true":"false"},e.createElement(c,null,e.createElement(c.If,{condition:Boolean(m)},e.createElement(i,f({width:"100%",right:!0,tagName:"span"},m),E)),e.createElement(c.Else,null,e.createElement("span",null,E))))},E=function(t){var l=t.options,n=t.groupItemClassName,o=t.tabIndex,r=t.keyName,i=t.labelName,u=t.selectValue,m=t.tooltipIfDropdownProps,p=t.handleSelectValue;return e.createElement(e.Fragment,null,l.map((function(t,l){var f;return e.createElement(c,{key:l},e.createElement(s,{condition:t.isGroup},e.createElement(e.Fragment,null,e.createElement("div",{className:a.joinClass("dropdown2-group-item",n,t.className)},t.groupName),null===(f=t.items)||void 0===f?void 0:f.map((function(t,l){return e.createElement(w,{key:l,item:t,keyName:r,labelName:i,tabIndex:o,selectValue:u,tooltipIfDropdownProps:m,handleSelectValue:p})})))),e.createElement(d,null,e.createElement(w,{item:t,keyName:r,labelName:i,tabIndex:o,selectValue:u,tooltipIfDropdownProps:m,handleSelectValue:p})))})))},N=function(w){var N,h,g=w.className,y=w.arrowClassName,I=w.groupItemClassName,x=w.dropdownClassName,C=w.placeholderClassName,S=w.showAbove,k=w.options,V=w.keyName,D=void 0===V?"":V,P=w.labelName,j=void 0===P?"":P,O=w.value,H=w.customizeArrow,A=w.placeholder,T=void 0===A?"":A,z=w.noDataText,F=void 0===z?"No option":z,W=w.width,B=void 0===W?"100%":W,L=w.height,G=void 0===L?"40px":L,M=w.fullWidth,R=void 0===M||M,q=w.enablePerfectScroll,J=void 0===q||q,Y=w.tabIndex,K=void 0===Y?-1:Y,Q=w.disabled,U=w.dropdownHeight,X=w.fitToWindowHeight,Z=void 0===X||X,$=w.autoAdjustDirection,_=void 0===$||$,ee=w.spacingVerticalOffset,te=void 0===ee?-2:ee,le=w.preserveScrollPosition,ne=void 0===le||le,oe=w.closeOnResize,ae=void 0===oe||oe,re=w.closeOnEscape,ie=void 0===re||re,ce=w.closeOnOutside,se=void 0===ce||ce,de=w.tooltipIfLabelProps,ue=w.tooltipIfDropdownProps,me=w.handleSelection,pe=void 0===me?function(){}:me,fe=r.useWindowSize(),ve=t(null),be=t(null),we=t(null),Ee=l(!1),Ne=Ee[0],he=Ee[1],ge=l(null),ye=ge[0],Ie=ge[1],xe=l({value:null,label:e.createElement(e.Fragment,null)}),Ce=xe[0],Se=xe[1],ke=Array.isArray(k)&&k.length>0;n((function(){var t=k.map((function(e){return b(e,j,D,O)})),l=v(D)?t.find((function(e){return e[D]===O})):t.find((function(e){return e.value===O}));Se(l?{value:l.value,label:l.label}:{value:null,label:e.createElement(e.Fragment,null)})}),[O,j,D,k]),n((function(){ae&&Ne&&Ve()}),[fe]),r.useEventListener("scroll",(function(){return Ve()})),r.useEventListener("keydown",(function(e){ie&&"Escape"===e.key&&Ve()})),r.useOutsideClick(ve,(function(){return se&&Ve()}));var Ve=function(){Ie(null),he(!1)},De=function(e){var t=b(e,j,D),l=t.value,n=t.label;Se({value:l,label:n}),pe(l,e),he(!1),Ie(null)};return e.createElement("div",{ref:ve,className:a.joinClass("dp-dropdown2-container",g),style:{width:R?B:"auto",height:G}},e.createElement("button",{className:a.joinClass("dropdown2-button",!ke&&"dropdown2-button-no-data"),disabled:Q,"aria-haspopup":"listbox",onClick:function(){ke&&he((function(e){var t=!e;return t||Ie(null),t}))}},e.createElement(c,null,e.createElement(s,{condition:!ke},e.createElement("span",{className:"dropdown2-label dropdown2-no-message"},F)),e.createElement(u,{condition:o.isNil(null==Ce?void 0:Ce.value)},e.createElement("span",{className:a.joinClass("dropdown2-label dropdown2-placeholder",C)},T)),e.createElement(u,{condition:Boolean(de)},e.createElement(i,f({width:"100%",right:!0,tagName:"span",className:"dropdown2-label dropdown2-selected"},de),Ce.label)),e.createElement(d,null,e.createElement("span",{className:"dropdown2-label dropdown2-selected"},Ce.label))),e.createElement("span",{className:"dropdown2-anything"}),e.createElement("span",{className:a.joinClass("dropdown2-arrow",y,Ne&&"dropdown2-arrow-active")},H)),e.createElement(m,{condition:Ne},e.createElement("div",{ref:function(e){if(e instanceof Element&&(ne&&setTimeout((function(){var t=e.querySelector(".scroll-content");t&&(t.scrollTop=we.current||0)}),10),Z&&ve.current)){var t=ve.current.getBoundingClientRect(),l=t.bottom,n=t.top,o=2*t.height+4,a=Math.round(n)-8,r=Math.round(window.innerHeight-l)-8,i=S?a:r,c=e.clientHeight;if(!_)return c>i&&Ie("".concat(c=i,"px")),void(S&&(e.style.top="".concat(-c-4,"px")));c>i&&(c=i),c<o?(S?i=r:(e.style.top="".concat(-e.clientHeight-4,"px"),i=a),(c=e.clientHeight)>i&&(c=i)):S&&(e.style.top="".concat(-c-4,"px")),Ie("".concat(c,"px"))}},tabIndex:K,className:a.joinClass("dropdown2-list-items",x),style:{top:(null===(N=ve.current)||void 0===N?void 0:N.offsetHeight)+te,width:R?null===(h=ve.current)||void 0===h?void 0:h.offsetWidth:"auto"},"aria-expanded":"true"},e.createElement(c,null,e.createElement(c.If,{condition:J},e.createElement(p,{style:{maxHeight:ye||U},effectData:[k,U,Z,_,S],always:!0,wheelStop:!0,onScrollY:function(e){we.current=e.target.scrollTop}},e.createElement(E,{groupItemClassName:I,options:k,tabIndex:K,keyName:D,labelName:j,tooltipIfDropdownProps:ue,selectValue:Ce.value,handleSelectValue:De}))),e.createElement(c.Else,null,e.createElement("div",{ref:be,className:"dropdown2-list-default scroll-content",style:{maxHeight:ye||U},onScroll:function(e){we.current=e.target.scrollTop}},e.createElement(E,{groupItemClassName:I,options:k,tabIndex:K,keyName:D,labelName:j,tooltipIfDropdownProps:ue,selectValue:Ce.value,handleSelectValue:De})))))))};export{w as DropDownItem,E as DropdownListItem,N as default};