@bryancode/react-select
Version:
A customizable modular select built for React JS
3 lines (2 loc) • 6.25 kB
JavaScript
;function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),o=e(require("classnames")),r=require("react-dom"),i=require("react-icons/md");function u(){return(u=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function l(e,n){return(l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,n){return e.__proto__=n,e})(e,n)}function a(e){var t=n.useMemo((function(){if(e.option)return e.option.content}),[e.option]);return{model:{currentText:t,className:o(e.className,{"w-full outline-none px-2 py-3 flex-1 cursor-pointer":!0,"placeholder-gray-700":!t,"placeholder-black":!!t})},operations:{}}}var c=n.forwardRef((function(e,n){var o=a(e).model;return t.createElement("input",Object.assign({},e,{ref:n,value:e.text,className:o.className,placeholder:o.currentText||e.placeholder}))})),s=function(e){var n,t;function o(){var n;return(n=e.apply(this,arguments)||this).state={element:null},n}t=e,(n=o).prototype=Object.create(t.prototype),n.prototype.constructor=n,l(n,t);var i=o.prototype;return i.componentDidMount=function(){if(this.props.portal){var e=document.createElement("div");document.body.appendChild(e),this.setState({element:e})}},i.render=function(){var e=this.state.element;return e?r.createPortal(this.props.children,e):this.props.children},o}(n.Component);function p(e){return t.createElement("div",{className:"min-w-10 flex items-center justify-center select-none",onClick:e.onClick},t.createElement(e.open?i.MdArrowDropUp:i.MdArrowDropDown,{size:26}))}function d(e){return{model:{className:o("option-container",{flex:e.open,hidden:!e.open})},operations:{}}}function m(e){var n=e.options,o=e.OptionComponent,r=e.EmptyListComponent,i=d(e);return t.createElement("div",{style:e.style,className:i.model.className},t.createElement(t.Fragment,null,n.map((function(e,t){return null==o?void 0:o({value:e,index:t,options:n})})),n.length<=0&&(null==r?void 0:r())))}function f(){return t.createElement("div",{className:"empty"},t.createElement("span",null,"List empty"))}function v(e){var n,r,i,u=e.value,l=e.onOptionSelected;return t.createElement("div",{onMouseDown:function(){return null==l?void 0:l(u)},className:(n=e.index,r=e.options,i=e.selected,o("option",{"bg-teal-200":!!i,"border-b":n!==r.length-1}))},t.createElement("span",{className:"text-sm leading-5"},u.content))}function C(e){var t=n.useState(!1),o=t[0],r=t[1];return n.useEffect((function(){function n(n){r(!(!e.current||e.current.contains(n.target)))}return document.addEventListener("mousedown",n),function(){document.removeEventListener("mousedown",n)}}),[e]),o}var h=function(e){return{top:e.top+46,right:e.right,left:e.left,width:e.width,zIndex:9999999999}};function E(e,t){var r=e.options,i=void 0===r?[]:r,u=e.value,l=void 0===u?"":u,a=e.components,s=n.useState(!1),d=s[0],C=s[1],h=n.useState(""),E=h[0],x=h[1],y=n.useState(),g=y[0],O=y[1],w=n.useMemo((function(){return(null==a?void 0:a.ContentRenderComponent)||c}),[a]),N=n.useMemo((function(){return(null==a?void 0:a.DropdownIconComponent)||p}),[a]),b=n.useMemo((function(){return(null==a?void 0:a.OptionsContainerComponent)||m}),[a]),L=n.useMemo((function(){return(null==a?void 0:a.EmptyListComponent)||f}),[a]),M=n.useMemo((function(){return(null==a?void 0:a.OptionComponent)||v}),[a]),S=n.useMemo((function(){return i.filter((function(e){return"string"!=typeof e.content?e.value.toString().toLowerCase().includes(E.toLowerCase()):e.content.toLowerCase().includes(E.toLowerCase())}))}),[i,E]),j=o("select-container",e.className),D=o("select",e.selectClassName);return n.useEffect((function(){t&&C(!1)}),[t]),n.useEffect((function(){S.length<=0&&(null==e.onEmpty||e.onEmpty(E))}),[S]),n.useEffect((function(){if(null==g){var e=S.find((function(e){return e.value==l}));O(e)}}),[g,l,S]),n.useEffect((function(){if(g){var e=S.find((function(e){return e.value===(null==g?void 0:g.value)}));e&&g===e||O(e)}}),[S]),{model:{open:d,text:E,current:g,containerClassNames:j,selectClassNames:D,filteredOptions:S,components:{Content:w,Icon:N,Container:b,EmptyListComponent:L,OptionComponent:M}},operations:{handleInputChange:function(e){x(e.target.value),O(void 0)},toogleOpen:function(){return C((function(e){return!e}))},openDropdown:function(){return C(!0)},clearText:function(){return x("")},handleOptionSelected:function(n){C(!1),x(""),O(n),null==e.onChange||e.onChange(n)}}}}var x=n.forwardRef((function(e,o){var r,i=n.useRef(null),l=n.useRef(null),a=C(i),c=E(e,a),p=c.model,d=c.operations,m=p.components,f=m.Content,v=m.Icon,x=m.Container,y=m.EmptyListComponent,g=m.OptionComponent,O=n.useMemo((function(){var n;return null!=(n=e.config)&&n.portal&&i.current?h(i.current.getBoundingClientRect()):{position:"absolute",width:"100%"}}),[i.current,e.config]);return n.useImperativeHandle(o,(function(){return u({},p,{value:p.current,openDropdown:function(){return d.openDropdown()},clearInput:function(){return d.clearText()}})})),t.createElement("div",{ref:i,className:p.containerClassNames},t.createElement("div",{className:p.selectClassNames},t.createElement(f,{ref:l,text:p.text,option:p.current,placeholder:e.placeholder,onChange:d.handleInputChange,onClick:d.toogleOpen}),t.createElement(v,{open:p.open,onClick:d.toogleOpen})),t.createElement(s,{portal:null==(r=e.config)?void 0:r.portal},t.createElement(x,{open:p.open,options:p.filteredOptions,style:O,EmptyListComponent:function(){return t.createElement(y,null)},OptionComponent:function(e){var n,o,r;return t.createElement(g,{key:null==(n=e.value)?void 0:n.value,index:e.index,options:e.options,value:e.value,selected:(null==(o=e.value)?void 0:o.value)==(null==(r=p.current)?void 0:r.value),onOptionSelected:d.handleOptionSelected})}})))}));exports.ContentRenderer=c,exports.DropdownIcon=p,exports.EmptyList=f,exports.Option=v,exports.OptionContainer=m,exports.PortalContainer=s,exports.Select=x,exports.positionContainerInElement=h,exports.useClickOutside=C,exports.useContentRenderer=a,exports.useOptionContainer=d,exports.useSelect=E;
//# sourceMappingURL=react-select.cjs.production.min.js.map