react-smart-select
Version:
A very flexible and smart React select component
3 lines (2 loc) • 8.18 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("styled-components"),e=require("react"),t=require("@floating-ui/react-dom");function r(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var o=r(n),i=r(e);function a(){return a=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},a.apply(this,arguments)}function l(n,e){return e||(e=n.slice(0)),n.raw=e,n}var u,s,d,c,f,p,m,b="ignore-click-outside",h="rss-option",g=o.default.div(u||(u=l(["\ndisplay: none;\n\n@media (max-width: ","px) {\n display: ",";\n background: rgba(0,0,0,.5);\n position: fixed;\n z-index: 999;\n bottom: 0;\n right: 0;\n left: 0;\n top: 0;\n}\n"])),375,(function(n){return n.open?"block":"none"})),v=o.default.ul(s||(s=l(["\nbox-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%),\n 0 8px 10px 1px rgb(0 0 0 / 14%),\n 0 3px 14px 2px rgb(0 0 0 / 12%);\n\ndisplay: none;\n\nborder-radius: 0 0 4px 4px;\nmin-width: 100%;\nz-index: 1000;\nborder: 0;\n\nlist-style: none;\npadding: 0;\nmargin: 0;\n\nbackground: inherit;\nfont-family: inherit;\ntext-align: inherit;\nfont-size: inherit;\ncolor: inherit;\n\n@media (max-width: ","px) {\n inset: 50% 1rem auto 1rem !important;\n transform: translateY(-50%) !important;\n position: fixed !important;\n\n max-height: calc(85% - 1rem);\n min-width: unset;\n min-height: 50%;\n height: auto;\n width: auto;\n\n border-radius: 4px;\n overflow: auto;\n}\n"])),375),x=o.default.div(d||(d=l(["\nborder-radius: 4px 4px 0 0;\nbox-sizing: border-box;\ndisplay: inline-block;\nposition: relative;\nmin-width: 8rem;\n\nbackground: #f5f5f5;\nfont-family: Roboto,sans-serif;\ntext-align: left;\nfont-size: 1rem;\ncolor: rgba(0,0,0,.87);\n"]))),y=o.default.button(c||(c=l(["\ntransition: color .15s ease-in-out,\n background-color .15s ease-in-out,\n border-color .15s ease-in-out,\n box-shadow .15s ease-in-out;\n\nborder-bottom-color: ",";\nborder-width: 0 0 2px;\n\njustify-content: space-between;\ncursor: pointer;\ndisplay: flex;\nwidth: 100%;\n\nletter-spacing: .009375em;\npadding: .375rem .75rem;\nline-height: 1.75rem;\nwhite-space: nowrap;\nmargin: 0;\n\nbackground: inherit;\nborder-radius: inherit;\nfont-family: inherit;\ntext-align: inherit;\nfont-size: inherit;\ncolor: inherit;\n\n&:hover {\n background: rgba(0,0,0,.15);\n}\n\n&:after {\n transform: ",';\n font-weight: normal;\n font-style: normal;\n content: "\\25BE";\n text-align: right;\n margin-left: 1em;\n flex-grow: 1;\n}\n'],["\ntransition: color .15s ease-in-out,\n background-color .15s ease-in-out,\n border-color .15s ease-in-out,\n box-shadow .15s ease-in-out;\n\nborder-bottom-color: ",";\nborder-width: 0 0 2px;\n\njustify-content: space-between;\ncursor: pointer;\ndisplay: flex;\nwidth: 100%;\n\nletter-spacing: .009375em;\npadding: .375rem .75rem;\nline-height: 1.75rem;\nwhite-space: nowrap;\nmargin: 0;\n\nbackground: inherit;\nborder-radius: inherit;\nfont-family: inherit;\ntext-align: inherit;\nfont-size: inherit;\ncolor: inherit;\n\n&:hover {\n background: rgba(0,0,0,.15);\n}\n\n&:after {\n transform: ",';\n font-weight: normal;\n font-style: normal;\n content: "\\\\25BE";\n text-align: right;\n margin-left: 1em;\n flex-grow: 1;\n}\n'])),(function(n){return n.open?"#6200ee":"rgba(0,0,0,.4)"}),(function(n){return n.open?"scale(1, -1)":"none"})),k=o.default.li(f||(f=l(["\nbackground: inherit;\npadding: 0;\nmargin: 0;\n\n> input {\n pointer-events: none;\n position:absolute;\n z-index: -9999;\n opacity: 0;\n}\n\ninput:focus-visible + label {\n outline: auto;\n}\n\n> label {\n cursor: pointer;\n display: block;\n\n padding: .75rem 1rem;\n white-space: nowrap;\n text-align: inherit;\n font-size: inherit;\n margin: 0;\n\n background: transparent;\n font-family: inherit;\n text-align: inherit;\n font-size: inherit;\n color: inherit;\n\n &.selected:hover {\n background: rgba(98,0,238,.16);\n }\n\n &.selected {\n background: rgba(98,0,238,.08);\n }\n\n &:hover {\n background: rgba(0,0,0,.05);\n }\n}\n"]))),w=o.default(k)(p||(p=l(["\ninput[type=checkbox] + label .check {\n display: none;\n}\n"]))),E=o.default(k)(m||(m=l(['\ninput[type=checkbox] + label .check {\n display: inline-block;\n position: relative;\n height: 1rem;\n width: 1rem;\n top: 0.3rem;\n\n border: 2px solid #6200ee;\n background: transparent;\n border-radius: 3px;\n margin-right: 8px;\n}\n\ninput[type=checkbox]:checked + label .check {\n background: #6200ee;\n\n &:after {\n position: absolute;\n height: 0.6rem;\n width: 0.3rem;\n left: 0.25rem;\n content: "";\n\n border-bottom: 3px solid white;\n border-right: 3px solid white;\n transform: rotate(45deg);\n border-left: none;\n border-top: none;\n }\n}\n'])));function z(){return e.useMemo((function(){return Math.random().toString(36).substring(2,6)||"-"}),[])}function j(n){return n.label}var N=function(n){var e,t=n.option,r=n.index,o=n.value,a=n.multi,l=n.style,u=n.onClick,s=n.formatOption,d=void 0===s?j:s,c=a?E:w,f=o,p=t.value,m=(e=!0===a?o.some((function(n){return n.value===p})):!!o&&f.value===p)?h+" selected":h,b=d(t,e),g=z();return i.default.createElement(c,{key:p,role:"menuitem"},i.default.createElement("input",{type:"checkbox",id:g,name:p,checked:e,"data-index":r,onChange:u}),i.default.createElement("label",{htmlFor:g,className:m,style:l},i.default.createElement("span",{className:"check"}),b))},O=i.default.memo(N),C=function(n,e,t,r){var o=n.some((function(n){return n.value===e.value})),i=e.value;return"0"===t?o?[]:r:r.length===n.length?r.slice(1).filter((function(n){return n.value!==i})):o?n.filter((function(n){return n.value!==i})):r.length!==n.length+2?n.concat(e):r},L=function(n,e){var t=n.some((function(n){return n.value===e.value})),r=e.value;return t?n.filter((function(n){return n.value!==r})):n.concat(e)},M="smart-select",S=b,q="rss-label",P={middleware:[t.shift()],placement:"bottom-start"},A=function(n){var r=n.disabled,o=void 0!==r&&r,l=n.placeholder,u=n.className,s=n.onChange,d=n.options,c=n.toggle,f=void 0!==c&&c,p=n.multi,m=void 0===p?f||!1:p,h=n.value,k=void 0===h?m?[]:null:h,w=t.useFloating(P),E=w.x,j=w.y,N=w.refs,A=w.reference,B=w.floating,D=w.strategy,F=w.update,_=n.formatLabel||function(n){var e=n||" ";return function(n,t){return Array.isArray(n)?0===n.length?e:t.filter((function(e){return n.some((function(n){return n.value===e.value}))})).map((function(n){return n.label})).join(", "):n?n.label:e}}(l),I=function(n){void 0===n&&(n=!1);var t=e.useState(n),r=t[0],o=t[1],i=e.useCallback((function(n){n&&n.preventDefault(),o(!r)}),[r]);return[r,i]}(),R=I[0],T=I[1],Y=z(),G=e.useCallback((function(n){var e=n.currentTarget.dataset.index||"0",t=parseInt(e,10),r=d[t];if(!0!==m)s(r,r,d),T();else{var o=(f?C:L)(k,r,e,d);s(o,r,d)}}),[d,k,m,f,T,s]);!function(n,t){e.useEffect((function(){if("function"==typeof t){var e=function(e){var r,o,i=e.target;if(null!==n.current){for(;i&&i.parentNode;)if(r=i.classList.contains(b),o=i===n.current||!0===r,i=i.parentNode,!0===o)return;e.stopPropagation(),e.preventDefault(),t(e)}};return document.addEventListener("mousedown",e,!0),function(){document.removeEventListener("mousedown",e,!0)}}}),[n,t])}(N.floating,R?T:void 0),e.useLayoutEffect((function(){!0===R&&F()}),[R,F]);var H=u?M+" "+u:M,J=R?q+" "+S:q,K=_(k,d),Q=!R,U=null===E?0:Math.round(E),V=null===j?0:Math.round(j),W=a({},n.dropdownStyle,{display:R?"block":void 0,position:D,left:U,top:V});return i.default.createElement(x,{className:H,style:n.style},i.default.createElement(y,{type:"button",ref:A,id:Y,className:J,"aria-haspopup":!0,"aria-expanded":R,style:n.labelStyle,open:R,disabled:o,onClick:T},K),i.default.createElement(g,{open:R}),i.default.createElement(v,{role:"menu",ref:B,className:"rss-dropdown","aria-labelledby":Y,"aria-hidden":Q,style:W},d.map((function(e,t){return i.default.createElement(O,{option:e,index:t,value:k,multi:m,key:e.value,style:n.optionStyle,formatOption:n.formatOption,onClick:G})}))))};exports.default=i.default.memo(A);
//# sourceMappingURL=react-smart-select.cjs.production.min.js.map