react-bootstrap-select-dropdown/dist/index.js

A custom Bootstrap select / multiselect using dropdown button, designed to behave like regular select form control. Bootstrap Select/Multiselect developed to use with **React 16+** and **Bootstrap 4**.

"use strict";var _react=_interopRequireWildcard(require("react"));require("./css/bootstrap-select.min.css");var _excluded=["error","disabled","showSearch","showAction","showTick","isMultiSelect","selectStyle","actionBtnStyle","menuSize","className","defaultOptions","options","placeholder","showCountOn","onChange","onClose"];function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(_getRequireWildcardCache=function(e){return e?r:t})(e)}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!==_typeof(e)&&"function"!=typeof e)return{default:e};var r=_getRequireWildcardCache(t);if(r&&r.has(e))return r.get(e);var n={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var l=a?Object.getOwnPropertyDescriptor(e,o):null;l&&(l.get||l.set)?Object.defineProperty(n,o,l):n[o]=e[o]}return n.default=e,r&&r.set(e,n),n}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(this,arguments)}function _typeof(e){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_typeof(e)}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){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 _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function _iterableToArrayLimit(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,o=[],l=!0,c=!1;try{for(r=r.call(e);!(l=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);l=!0);}catch(e){c=!0,a=e}finally{try{l||null==r.return||r.return()}finally{if(c)throw a}}return o}}function _arrayWithHoles(e){if(Array.isArray(e))return e}function _objectWithoutProperties(e,t){if(null==e)return{};var r,n,a=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}var BootstrapSelect=function(e){e.error;var t=e.disabled,r=void 0!==t&&t,n=e.showSearch,a=void 0!==n&&n,o=e.showAction,l=void 0!==o&&o,c=e.showTick,i=void 0!==c&&c,u=e.isMultiSelect,s=void 0!==u&&u,d=e.selectStyle,f=void 0===d?"btn-light":d,y=e.actionBtnStyle,b=void 0===y?"btn-outline-dark":y,p=e.menuSize,m=void 0===p?"auto":p,h=e.className,v=void 0===h?"":h,_=e.defaultOptions,g=void 0===_?[]:_,S=e.options,w=e.placeholder,A=e.showCountOn,E=e.onChange,O=e.onClose,N=_objectWithoutProperties(e,_excluded);g.length&&S.forEach((function(e){e.isSelected=-1!==g.indexOf(e.labelKey)}));var x=_react.default.useRef(),C=_slicedToArray((0,_react.useState)(S),2),k=C[0],T=C[1],j=_slicedToArray((0,_react.useState)(!1),2),K=j[0],L=j[1],I=_slicedToArray((0,_react.useState)("hide"),2),W=I[0],q=I[1],P=_slicedToArray((0,_react.useState)("auto"),2),R=P[0],H=P[1],V=_slicedToArray((0,_react.useState)(""),2),J=V[0],M=V[1],B=_slicedToArray((0,_react.useState)([]),2),D=B[0],z=B[1],F=w&&null!==w?w:"No option selected",U=(0,_react.useRef)(),Y=(0,_react.useRef)(),$={value:_toConsumableArray(S.filter((function(e){return e.isSelected})).map((function(e){return e.value}))),labelKey:_toConsumableArray(S.filter((function(e){return e.isSelected})).map((function(e){return e.labelKey})))},G=_slicedToArray((0,_react.useState)($.value.length>0?$.value:[]),2),Q=G[0],X=G[1],Z=_slicedToArray((0,_react.useState)($.labelKey.length>0?$.labelKey:[]),2),ee=Z[0],te=Z[1];(0,_react.useEffect)((function(){JSON.stringify(U.current)===JSON.stringify(S)&&JSON.stringify(Y.current)===JSON.stringify(g)||(g.length&&S.forEach((function(e){e.isSelected=-1!==g.indexOf(e.labelKey)})),U.current=S,Y.current=g,X(_toConsumableArray(S.filter((function(e){return e.isSelected})).map((function(e){return e.value})))),te(_toConsumableArray(S.filter((function(e){return e.isSelected})).map((function(e){return e.labelKey})))),T(S))}),[S,g]);var re=function(){JSON.stringify(D)!==JSON.stringify(Q)&&S.length>0&&O&&O({el:x.current,selectedValue:Q,selectedKey:ee}),L(!1),q("hide"),T(S),M("")};(0,_react.useEffect)((function(){E&&E({el:x.current,selectedValue:Q,selectedKey:ee}),!s&&K&&re()}),[Q,ee]);var ne=function(){if(k.length){var e=0,t=0,r=x.current,n=r.querySelector(".dropdown-menu:not(.inner)"),o=window.innerHeight,c=r.getBoundingClientRect(),i=o-c.bottom,u=n.cloneNode(!0);u.style.visibility="hidden",u.classList.add("show"),u.classList.remove("hide"),document.body.appendChild(u),t+=a?u.querySelector(".bs-searchbox").offsetHeight:0,t+=s&&l?u.querySelector(".bs-actionsbox").offsetHeight:0;var d=u.querySelector(".dropdown-menu.inner").children,f=d[0].offsetHeight,y=d.length*f;if(m&&c.top>0&&i>0){if("number"==typeof m)e=(d.length>m?f*m:y)+"px";else{var b=(c.top>i?c.top:o-c.bottom)-t-23-2;e=b<y?b:y}H(e)}c.top>i&&y+t>i?r.classList.add("dropup"):r.classList.remove("dropup"),document.body.removeChild(u)}};(0,_react.useEffect)((function(){q(K?"show":"hide")}),[K]);var ae=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0,t={currentValue:_toConsumableArray(Q),currentKey:_toConsumableArray(ee)};if(e){var r=t.currentKey.indexOf(e);if(-1!==r)t.currentValue.splice(r,1),t.currentKey.splice(r,1);else{var n=S.findIndex((function(t){return t.labelKey===e})),a=t.currentKey.findIndex((function(e){return S.findIndex((function(t){return t.labelKey===e}))>n})),o=S[n],l=o.value,c=o.labelKey;-1===a?(t.currentValue.push(l),t.currentKey.push(c)):(t.currentValue.splice(a,0,l),t.currentKey.splice(a,0,c))}}return t},oe=(0,_react.useCallback)((function(e){K&&e.target.closest(".dropdown")!==x.current&&re()}),[x,K,W,S,J,Q,ee]);return(0,_react.useEffect)((function(){return document.addEventListener("click",oe),function(){document.removeEventListener("click",oe)}}),[oe]),(0,_react.useEffect)((function(){var e=function(){K&&ne()};window.addEventListener("resize",e);var t=function(){K&&ne()};return window.addEventListener("scroll",t),function(){window.removeEventListener("resize",e),window.removeEventListener("scroll",t)}})),_react.default.createElement("div",_extends({ref:x,className:"".concat(i?"show-tick ":"").concat(a?"show-search ":"").concat(r?"disabled ":"","dropdown hk--custom--select ").concat(v)},N),_react.default.createElement("button",{type:"button",disabled:r,className:"btn dropdown-toggle ".concat(f," ").concat(r?"disabled":""," ").concat(Q&&0===Q.length?"bs-placeholder":""),"aria-expanded":K,title:Q,onClick:function(e){return function(){if(ne(),L(!K),!K){var e=ae();JSON.stringify(D)!==JSON.stringify(e.currentValue)&&z(e.currentValue)}}()}},_react.default.createElement("div",{className:"filter-option"},_react.default.createElement("div",{className:"filter-option-inner"},_react.default.createElement("div",{className:"filter-option-inner-inner"},!0===s?Q&&Q.length>0?A&&A<Q.length?Q.length+" items selected":Q.join(", "):F:Q&&Q.length>0?Q:F)))),_react.default.createElement("div",{className:"dropdown-menu ".concat(W)},S.length>0&&a&&_react.default.createElement("div",{className:"bs-box bs-searchbox bg-light border-bottom border-primary"},_react.default.createElement("input",{className:"form-control",type:"search",autoComplete:"off",role:"combobox","aria-label":"Search",placeholder:"Search",value:J,"aria-autocomplete":"list",onChange:function(e){return function(e){var t,r=e.target.value;t=S.filter((function(t){return t.value.toLowerCase().includes(e.target.value.trim().toLowerCase())})),T(t),M(r)}(e)}})),s&&l&&k.length>0&&_react.default.createElement("div",{className:"bs-box bs-actionsbox"},_react.default.createElement("div",{className:"btn-group btn-group-sm btn-block text-nowrap"},_react.default.createElement("button",{type:"button",disabled:0===k.length&&!0,className:"btn actions-btn bs-select-all ".concat(b," ").concat(0===k.length?"disabled":""),onClick:function(e){return t=[],r=[],k.forEach((function(e){e.isDisabled||(t.push(e.value),r.push(e.labelKey))})),X(t),void te(r);var t,r}},"Select All"),_react.default.createElement("button",{type:"button",disabled:0===k.length&&!0,className:"btn actions-btn bs-deselect-all ".concat(b," ").concat(0===k.length?"disabled":""),onClick:function(e){return X([]),void te([])}},"Deselect All"))),_react.default.createElement("div",{className:"inner show",role:"listbox",style:{maxHeight:R,overflowY:"auto"}},_react.default.createElement("ul",{className:"dropdown-menu inner show",role:"presentation"},k.length>0?k.map((function(e,t){var r=e.isDisabled?" disabled":-1!==Q.indexOf(e.value)?" selected active":"",n=e.className?e.className+"":"";return _react.default.createElement("li",{key:"option_".concat(t),"data-value":e.value,className:"".concat(n+r)},_react.default.createElement("button",{type:"button",role:"option",style:e.style,onClick:function(){return function(e){var t=e.labelKey,r=e.value;if(s){if("object"===_typeof(Q)){var n=ae(t);X(n.currentValue),te(n.currentKey)}}else X([r]),te([t])}(e)},className:"dropdown-item".concat(r)},e.icon&&_react.default.createElement("span",{className:"mr-2 hkoption-icon ".concat(e.icon)}),i&&-1!==Q.indexOf(e.value)&&_react.default.createElement("span",{className:"hkicon-checkmark check-mark"}),_react.default.createElement("span",{className:"text"},e.value)))})):_react.default.createElement("li",null,_react.default.createElement("div",{className:"dropdown-item disabled"},S.length>0&&a&&void 0!==x.current?_react.default.createElement(_react.default.Fragment,null,"No result match ",_react.default.createElement("span",{className:"font-italic font-weight-bold"},"'",x.current.querySelector('[type = "search"]').value,"'")):"No option to select"))))))};module.exports=BootstrapSelect;
// @author : Developed by Hardik Kondhiya <sonihardik90@gmail.com>