react-multi-select-advanced
Version:
React multi select filter input with advanced features
2 lines (1 loc) • 16.7 kB
JavaScript
import e,{forwardRef as n,useState as t,useRef as l,useImperativeHandle as i,useEffect as o,useLayoutEffect as r}from"react";var a,s=function(){return s=Object.assign||function(e){for(var n,t=1,l=arguments.length;t<l;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},s.apply(this,arguments)};function c(e,n,t,l){return new(t||(t=Promise))((function(i,o){function r(e){try{s(l.next(e))}catch(e){o(e)}}function a(e){try{s(l.throw(e))}catch(e){o(e)}}function s(e){var n;e.done?i(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(r,a)}s((l=l.apply(e,n||[])).next())}))}function u(e,n){var t,l,i,o,r={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(a){return function(s){return function(a){if(t)throw new TypeError("Generator is already executing.");for(;o&&(o=0,a[0]&&(r=0)),r;)try{if(t=1,l&&(i=2&a[0]?l.return:a[0]?l.throw||((i=l.return)&&i.call(l),0):l.next)&&!(i=i.call(l,a[1])).done)return i;switch(l=0,i&&(a=[2&a[0],i.value]),a[0]){case 0:case 1:i=a;break;case 4:return r.label++,{value:a[1],done:!1};case 5:r.label++,l=a[1],a=[0];continue;case 7:a=r.ops.pop(),r.trys.pop();continue;default:if(!(i=r.trys,(i=i.length>0&&i[i.length-1])||6!==a[0]&&2!==a[0])){r=0;continue}if(3===a[0]&&(!i||a[1]>i[0]&&a[1]<i[3])){r.label=a[1];break}if(6===a[0]&&r.label<i[1]){r.label=i[1],i=a;break}if(i&&r.label<i[2]){r.label=i[2],r.ops.push(a);break}i[2]&&r.ops.pop(),r.trys.pop();continue}a=n.call(e,r)}catch(e){a=[6,e],l=0}finally{t=i=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,s])}}}function d(e,n,t){if(t||2===arguments.length)for(var l,i=0,o=n.length;i<o;i++)!l&&i in n||(l||(l=Array.prototype.slice.call(n,0,i)),l[i]=n[i]);return e.concat(l||Array.prototype.slice.call(n))}!function(e){if(!e||"undefined"==typeof window)return;const n=document.createElement("style");n.setAttribute("type","text/css"),n.innerHTML=e,document.head.appendChild(n)}('.Msa {\n width: 100%;\n min-width: 150px;\n height: min-content;\n font-family: inherit;\n font-size: inherit;\n}\n.Msa * {\n box-sizing: border-box;\n}\n.Msa_Selection {\n display: grid;\n gap: 8px;\n}\n.Msa_Loading {\n display: none;\n}\n.Msa_LoadingSpinner {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n position: relative;\n border: 1px solid transparent;\n border-left: 1px solid #2684ff;\n transform: translateZ(0);\n animation: loadingSpin 1.1s infinite linear;\n overflow: hidden;\n}\n.Msa_LoadingSpinner::after {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n}\n.Msa_FilterInput {\n position: relative;\n display: grid;\n align-items: center;\n height: 100%;\n min-width: 50px;\n min-height: 24px;\n grid-template-columns: 1fr;\n gap: 8px;\n border: 1px #d4d4d4 solid;\n background: #fff;\n padding: 4px;\n border-radius: 2px;\n}\n.Msa_FilterInput:focus-within {\n border: 1px solid #2684ff;\n}\n.Msa_FilterInput--invalid {\n border: 1px solid #de350b;\n}\n.Msa_FilterInput input {\n border: 0;\n font-size: 100%;\n}\n.Msa_FilterInput input:focus {\n outline: 0;\n}\n.Msa_SelectionList {\n display: block;\n list-style-type: none;\n margin: 6px 0 0 0;\n padding: 0;\n width: 100%;\n}\n.Msa_SelectionList_Item {\n display: grid;\n align-items: center;\n align-content: center;\n padding: 4px;\n background-color: #f0f0f0;\n border-radius: 2px;\n white-space: nowrap;\n float: left;\n margin: 0 4px 4px 0;\n}\n.Msa_SelectionList_Item > span {\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.Msa_SelectionList_Item:hover, .Msa_SelectionList_Item:focus, .Msa_SelectionList_Item:focus-visible {\n outline: none;\n background-color: #d6d6d6;\n}\n.Msa_SelectionList_Item--showDelete {\n grid-template-columns: min-content min-content;\n column-gap: 8px;\n}\n.Msa_SelectionList_Item--showDelete:hover .Msa_DeleteButton, .Msa_SelectionList_Item--showDelete:focus .Msa_DeleteButton, .Msa_SelectionList_Item--showDelete:focus-visible .Msa_DeleteButton {\n background-color: #de350b;\n}\n.Msa_SelectionList_Item--showDelete:hover .Msa_DeleteButton:before, .Msa_SelectionList_Item--showDelete:hover .Msa_DeleteButton:after, .Msa_SelectionList_Item--showDelete:focus .Msa_DeleteButton:before, .Msa_SelectionList_Item--showDelete:focus .Msa_DeleteButton:after, .Msa_SelectionList_Item--showDelete:focus-visible .Msa_DeleteButton:before, .Msa_SelectionList_Item--showDelete:focus-visible .Msa_DeleteButton:after {\n background-color: #fff;\n}\n.Msa_SelectionList_More {\n display: grid;\n align-items: center;\n align-content: center;\n float: left;\n}\n.Msa_SelectionList_ClearAllButtonContainer {\n display: grid;\n align-items: center;\n align-content: center;\n float: left;\n cursor: pointer;\n}\n.Msa_SelectionList_ClearAllButtonContainer:hover, .Msa_SelectionList_ClearAllButtonContainer:focus, .Msa_SelectionList_ClearAllButtonContainer:focus-visible {\n outline: none;\n}\n.Msa_SelectionList_ClearAllButtonContainer:hover .Msa_ClearAllButton, .Msa_SelectionList_ClearAllButtonContainer:focus .Msa_ClearAllButton, .Msa_SelectionList_ClearAllButtonContainer:focus-visible .Msa_ClearAllButton {\n fill: #de350b;\n}\n.Msa_SelectionList_DeleteButtonContainer {\n display: grid;\n cursor: pointer;\n}\n.Msa_SelectionList::after {\n display: block;\n content: "";\n clear: both;\n}\n.Msa_DeleteButton {\n position: relative;\n display: block;\n width: 16px;\n height: 16px;\n font-size: 80%;\n text-align: center;\n color: #d6d6d6;\n cursor: pointer;\n border-radius: 2px;\n}\n.Msa_DeleteButton:hover {\n background-color: #de350b;\n}\n.Msa_DeleteButton:hover:before, .Msa_DeleteButton:hover:after {\n background-color: #fff;\n}\n.Msa_DeleteButton:before, .Msa_DeleteButton:after {\n position: absolute;\n left: 7px;\n top: 3px;\n content: " ";\n height: 10px;\n width: 2px;\n border-radius: 2px;\n background-color: #b4b4b4;\n}\n.Msa_DeleteButton:before {\n transform: rotate(45deg);\n}\n.Msa_DeleteButton:after {\n transform: rotate(-45deg);\n}\n.Msa_ClearAllButton {\n padding: 4px;\n cursor: pointer;\n fill: #ffbdad;\n height: calc(1em + 10px);\n}\n.Msa_ClearAllButton:hover, .Msa_ClearAllButton:focus, .Msa_ClearAllButton:focus-visible {\n outline: none;\n fill: #de350b;\n}\n.Msa_MoreItem {\n padding: 4px;\n background-color: #fdfdfd;\n border-radius: 2px;\n white-space: nowrap;\n float: left;\n margin: 0 4px 4px 0;\n}\n.Msa_FilterList {\n display: none;\n width: max-content;\n position: absolute;\n z-index: 2;\n background: #fff;\n box-shadow: 5px 5px 5px -2px rgba(0, 0, 0, 0.25);\n}\n.Msa_FilterList ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n max-height: 300px;\n overflow-x: auto;\n border: 1px #d4d4d4 solid;\n border-radius: 2px;\n}\n@media only screen and (min-width: 1025px) {\n .Msa_FilterList ul::-webkit-scrollbar {\n width: 10px;\n background: #f0f0f0;\n border-radius: 2px;\n cursor: pointer;\n }\n .Msa_FilterList ul::-webkit-scrollbar-thumb {\n background-color: #d6d6d6;\n border-radius: 2px;\n }\n .Msa_FilterList ul::-webkit-scrollbar-thumb:hover {\n background-color: #b4b4b4;\n }\n}\n.Msa_FilterList ul .Msa_FilterList_Item {\n padding: 4px 6px;\n cursor: pointer;\n}\n.Msa_FilterList ul .Msa_FilterList_Item:hover, .Msa_FilterList ul .Msa_FilterList_Item:focus, .Msa_FilterList ul .Msa_FilterList_Item:focus-visible {\n background-color: #d4d4d4;\n border: 0;\n outline: none;\n}\n.Msa_FilterList ul .Msa_FilterList_Item--disabled {\n background-color: #f1f1f1;\n cursor: unset;\n}\n.Msa--loading .Msa_FilterInput {\n grid-template-columns: 1fr min-content;\n column-gap: 8px;\n}\n.Msa--loading .Msa_Loading {\n display: block;\n}\n.Msa--disabled .Msa_FilterInput {\n background-color: #e4e4e4;\n}\n.Msa--noWrap .Msa_SelectionList_Item {\n white-space: nowrap;\n}\n.Msa--open .Msa_FilterList {\n display: grid;\n}\n.Msa--top .Msa_FilterList {\n top: 0;\n}\n.Msa--bottom .Msa_FilterList {\n bottom: 0;\n}\n.Msa--left .Msa_FilterList {\n left: -1px;\n text-align: left;\n}\n.Msa--right .Msa_FilterList {\n right: 0;\n text-align: right;\n}\n\n@-webkit-keyframes loadingSpin {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes loadingSpin {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}');var f=n((function(n,f){var p=function(){return"id"+parseInt(Math.ceil(Math.random()*Date.now()).toPrecision(5).toString().replace(".",""))},m=n.className,g=n.options,h=void 0===g?[]:g,b=n.selectedValues,_=void 0===b?[]:b,M=n.label,v=n.name,w=void 0===v?p():v,x=n.id,L=void 0===x?w||p():x,y=n.disabled,k=n.invalid,S=n.inputDelay,C=void 0===S?1e3:S,B=n.placeholder,D=n.filterShowLoading,I=void 0===D||D,E=n.filterLimit,F=n.filterHighlightKeyword,A=void 0!==F&&F,N=n.filterOrderByMatchRank,R=void 0!==N&&N,O=n.selectionLimit,T=n.selectionMaxVisibleItems,z=n.hideInputOnSelectionLimit,J=void 0!==z&&z,K=n.selectionLabelMaxWidth,H=void 0===K?100:K,V=n.selectionShowClear,W=void 0!==V&&V,P=n.selectionShowDeleteButton,j=void 0===P||P,U=n.languageOverwrite,G=n.LoadingComponent,Z=n.ClearButtonComponent,q=n.DeleteButtonComponent,Q=n.MoreItemsComponent,X=n.isServerSide,Y=void 0!==X&&X,$=n.onChange,ee=n.onKeywordChange,ne=t(_),te=ne[0],le=ne[1],ie=t([]),oe=ie[0],re=ie[1],ae=t(""),se=ae[0],ce=ae[1],ue=t(!1),de=ue[0],fe=ue[1],pe=t(!1),me=pe[0],ge=pe[1],he=t("bottom"),be=he[0],_e=he[1],Me=t("left"),ve=Me[0],we=Me[1],xe=t(B),Le=xe[0],ye=xe[1],ke=l(),Se=l(),Ce=l(),Be=l(),De=l();i(f,(function(){return De.current}));var Ie="Msa"+"".concat(" Msa--"+be)+"".concat(" Msa--"+ve)+"".concat(de?" Msa--loading":"")+"".concat(y?" Msa--disabled":"")+"".concat(oe.length>0?" Msa--open":"")+"".concat(void 0!==m?" "+m:""),Ee={selectionLimitReached:"Max selection limit reached.",selectionShowClearTitle:"Clear All",selectionDeleteTitle:"Remove",moreItemsText:"{{count}} more items..."};o((function(){U&&(Ee=s(s({},Ee),U))}),[U]),r((function(){if(ke.current&&Se.current){var e=ke.current.getBoundingClientRect(),n=e.top,t=e.left,l=e.height,i=Se.current.getBoundingClientRect(),o=i.width,r=i.height,a=window.innerWidth,s=window.innerHeight,c=n<=r||s-r>=n+l?"bottom":"top";_e(c),we(a<=o||a-o>=t?"left":"right"),Se.current.setAttribute("style","".concat(c,": -").concat(r+2,"px"))}})),o((function(){O&&O<=te.length?(ge(!0),J?Be.current.style.display="none":ye(Ee.selectionLimitReached)):(ge(!1),J?Be.current.removeAttribute("style"):ye(B))}),[O,te]),o((function(){$&&JSON.stringify(te)!==JSON.stringify(_)&&$(te)}),[te]);var Fe=function(e){if(y)return!1;le(te.filter((function(n){return JSON.stringify(n)!==JSON.stringify(e)}))),De.current.focus()},Ae=function(){if(y)return!1;le([]),re([]),ce(""),De.current.focus()},Ne=function(e){e.preventDefault();var n=e.target;if("ArrowDown"===e.key&&oe.length>0&&null!==(null==n?void 0:n.nextSibling)){var t=null==n?void 0:n.nextElementSibling;t&&(null==t||t.focus())}if("ArrowUp"===e.key&&oe.length>0&&null!==(null==n?void 0:n.previousSibling)){var l=null==n?void 0:n.previousElementSibling;l&&(null==l||l.focus())}"Enter"===e.key&&oe.length>0&&n.click()},Re=function(e,n){for(var t,l=[],i=0;i<e.length;i++){var o=e[i];if(!(null==o?void 0:o.value)||!o.label){console.warn("Data should have label and value attributes");break}if(!R&&E&&l.length>=E){re(n.length>0?l:[]),fe(!1);break}for(var r=!1,a=0;a<te.length;a++)if(JSON.stringify(o.value)===JSON.stringify(te[a].value)){r=!0;break}if(!r){if(R){var s=new RegExp("^".concat(n),"i");if(o.label.match(s))o.matchRank=1,l.push(o);else{var c=new RegExp("".concat(n),"i");o.label.match(c)&&(o.matchRank=2,l.push(o))}}else(null===(t=null==o?void 0:o.label)||void 0===t?void 0:t.toLowerCase().includes(n.toLowerCase()))&&l.push(o);if(e.length-1===i){R&&l.sort((function(e,n){return e.matchRank-n.matchRank})),E&&l.length>=E&&(l.length=E),re(n.length>0?l:[]),fe(!1);break}}}},Oe=function(n){return j?e.createElement("span",{role:"button",className:"Msa_SelectionList_DeleteButtonContainer",onClick:function(){return Fe(n.item)},title:Ee.selectionDeleteTitle},q?e.createElement(q,null):e.createElement("span",{className:"Msa_DeleteButton"})):null},Te=function(){return T&&te.length>T?e.createElement("li",{className:"Msa_SelectionList_More"},Q?e.createElement(Q,null,(te.length-T).toString()):e.createElement("span",{className:"Msa_MoreItem"},Ee.moreItemsText.replace("{{count}}",(te.length-T).toString()))):null},ze=function(){return y?null:W&&te.length>1?e.createElement("li",{role:"button",className:"Msa_SelectionList_ClearAllButtonContainer",tabIndex:0,onKeyDown:function(e){return function(e){"Enter"===e.key&&Ae()}(e)},onClick:Ae,title:Ee.selectionShowClearTitle},Z?e.createElement(Z,null):e.createElement("svg",{className:"Msa_ClearAllButton",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 576 512"},e.createElement("path",{d:"M576 384C576 419.3 547.3 448 512 448H205.3C188.3 448 172 441.3 160 429.3L9.372 278.6C3.371 272.6 0 264.5 0 256C0 247.5 3.372 239.4 9.372 233.4L160 82.75C172 70.74 188.3 64 205.3 64H512C547.3 64 576 92.65 576 128V384zM271 208.1L318.1 256L271 303C261.7 312.4 261.7 327.6 271 336.1C280.4 346.3 295.6 346.3 304.1 336.1L352 289.9L399 336.1C408.4 346.3 423.6 346.3 432.1 336.1C442.3 327.6 442.3 312.4 432.1 303L385.9 256L432.1 208.1C442.3 199.6 442.3 184.4 432.1 175C423.6 165.7 408.4 165.7 399 175L352 222.1L304.1 175C295.6 165.7 280.4 165.7 271 175C261.7 184.4 261.7 199.6 271 208.1V208.1z"}))," "):null};return e.createElement("div",{className:Ie},e.createElement("div",{className:"Msa_Selection",ref:ke},M&&e.createElement("label",{className:"Msa_Label",htmlFor:w},M),e.createElement("div",{className:"Msa_FilterInput".concat(k?" Msa_FilterInput--invalid":""),ref:Be},e.createElement("input",{name:w,id:L,type:"text",onChange:function(e){var n;clearTimeout(a);var t=(null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.value)||"";if(ce(t),""===t.trim())return re([]),fe(!1),null;fe(!0),a=setTimeout((function(){return c(void 0,void 0,void 0,(function(){var e;return u(this,(function(n){switch(n.label){case 0:return Y&&ee?[4,ee(t)]:[3,2];case 1:return e=n.sent(),Array.isArray(e)&&(null==e?void 0:e.length)?Re(e,t):(fe(!1),console.warn("No results found.")),[3,3];case 2:h&&(null==h?void 0:h.length)>0?Re(h,t):(fe(!1),console.warn("No results found.")),n.label=3;case 3:return[2]}}))}))}),C)},onKeyDown:function(e){("Backspace"===e.key&&""===se&&le(d([],te.slice(0,-1),!0)),("ArrowDown"===e.key||"ArrowUp"===e.key)&&oe.length>0&&Ce.current)&&Ce.current.firstElementChild.focus();"Escape"===e.key&&""!==se&&(re([]),ce(""))},value:se,placeholder:Le,ref:De,disabled:me||y}),e.createElement((function(){return I?e.createElement("div",{className:"Msa_Loading"},G?e.createElement(G,null):e.createElement("div",{className:"Msa_LoadingSpinner"})):null}),null),e.createElement((function(){return de?null:e.createElement("div",{className:"Msa_FilterList",ref:Se},!de&&e.createElement("ul",{ref:Ce},oe.map((function(n,t){return e.createElement("li",{role:"button",className:"Msa_FilterList_Item".concat("false"===(null==n?void 0:n.disabled)!==Boolean(null==n?void 0:n.disabled)?" Msa_FilterList_Item--disabled":""),tabIndex:0,onKeyDown:Ne,onClick:function(){return function(e){if("false"===(null==e?void 0:e.disabled)!==Boolean(null==e?void 0:e.disabled))return!1;re([]),ce(""),le(d(d([],te,!0),[e],!1)),De.current.focus()}(n)},key:t.toString()+n.value},A?function(n){if(void 0===n&&(n=""),!se.trim())return n;var t=new RegExp("(".concat(se,")"),"gi");return n.split(t).filter(String).map((function(n,l){return e.createElement(e.Fragment,{key:l},t.test(n)?e.createElement("mark",null,n):n)}))}(n.label):n.label)}))))}),null))),e.createElement((function(){if(te.length>0){for(var n=[],t=function(t){var l=te[t];if(T&&T<=t)return"break";n.push(e.createElement("li",{className:"Msa_SelectionList_Item".concat(j&&!y?" Msa_SelectionList_Item--showDelete":""),key:l.value,tabIndex:0,onKeyDown:function(e){return function(e,n){"Backspace"!==e.key&&"Delete"!==e.key&&"Enter"!==e.key||Fe(n)}(e,l)}},e.createElement("span",{style:{maxWidth:H}},l.label)," ",!y&&e.createElement(Oe,{item:l})))},l=0;l<te.length;l++){if("break"===t(l))break}return e.createElement("ul",{className:"Msa_SelectionList"},n,e.createElement(Te,null),e.createElement(ze,null))}return null}),null))}));f.displayName="MultiSelectAdvanced";export{f as default};