react-multi-checkbox-select/lib/MultiCheckboxSelect.js

React JS component for multi-select field with checkboxes

module.exports=function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=l(n(1)),c=l(n(2));function l(e){return e&&e.__esModule?e:{default:e}}var a=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.handleClickOutside=function(e){n.refSelect&&n.refSelect.current&&!n.refSelect.current.contains(e.target)&&(n.setState({expanded:!1}),n.props.onClose())},n.handleDefaultTextClick=function(e){var t=!n.state.expanded;n.setState({expanded:t}),t?n.props.onOpen():n.props.onClose()},n.handleOptionItemClick=function(e){var t=!1,o=[].concat(function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}(n.state.selectedValues));n.state.selectedValues.filter((function(t){return e.value==t})).length>0?(o=n.state.selectedValues.filter((function(t){return t!=e.value})),n.setState({selectedValues:o}),t=!1):(o.push(e.value),n.setState({selectedValues:o}),t=!0),n.props.onChange(n.props.name,t,e.value,o)},n.isItemSelected=function(e){return n.state.selectedValues.filter((function(t){return t==e.value})).length>0},n.renderHiddenFields=function(){return n.state.selectedValues.length<1?null:n.state.selectedValues.map((function(e,t){return r.default.createElement("input",{key:t,name:n.props.name+"["+t+"]",type:"hidden",value:e})}))},n.renderCheckbox=function(e){return n.props.customCheckedCheckbox&&n.props.customUncheckedCheckbox?n.isItemSelected(e)?n.props.customCheckedCheckbox:n.props.customUncheckedCheckbox:r.default.createElement("span",{className:"multi-checkboxes-select-checkbox"},r.default.createElement("input",{onChange:function(){},checked:n.isItemSelected(e),type:"checkbox",className:"multi-checkboxes-select-option-item-checkbox"}))},n.renderOptions=function(){return n.props.options.length<1?null:r.default.createElement("div",{ref:!0,id:n.props.id,className:"multi-checkboxes-select-options "+n.props.className},n.renderHiddenFields(),r.default.createElement("div",{className:"multi-checkboxes-select-options-wrapper",style:{display:n.state.expanded?"block":"none"}},n.props.options.map((function(e){return r.default.createElement("div",{onClick:function(t){n.handleOptionItemClick(e)},key:e.value,className:"multi-checkboxes-select-option-item-wrapper"},n.renderCheckbox(e)," ",r.default.createElement("span",{className:"multi-checkboxes-select-option-item-text"},e.label))}))))},n.renderDefaultText=function(){return n.state.selectedValues.length<1?r.default.createElement("div",{className:"multi-checkboxes-select-default-label"},r.default.createElement("span",{className:"multi-checkboxes-select-label-text"},n.props.defaultText),r.default.createElement("span",{className:"multi-checkboxes-select-label-icon"},n.state.expanded?"▲":"▼")):r.default.createElement("div",{className:"multi-checkboxes-select-selected-labels-wrapper"},n.state.selectedValues.map((function(e){var t=n.props.options.filter((function(t){return t.value==e}))[0];return r.default.createElement("span",{key:e,className:"multi-checkboxes-select-selected-item-label"},t.label," ",r.default.createElement("span",{onClick:function(t){t.stopPropagation(),n.setState({selectedValues:n.state.selectedValues.filter((function(t){return t!=e}))}),n.props.onRemove(n.props.name,e,n.state.selectedValues.filter((function(t){return t!=e})))},className:"multi-checkboxes-remove-icon"},"×"))})))},n.state={expanded:!1,selectedValues:[]},n.refSelect=r.default.createRef(),n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),o(t,[{key:"componentDidMount",value:function(){this.props.values&&this.props.values.length>0&&this.setState({selectedValues:this.props.values}),document.addEventListener("mousedown",this.handleClickOutside)}},{key:"render",value:function(){var e=this;return r.default.createElement("div",{ref:this.refSelect,className:"multi-checkboxes-select"},r.default.createElement("div",{className:"multi-checkboxes-select-wrapper"},r.default.createElement("div",{onClick:function(t){e.handleDefaultTextClick(t)},className:"multi-checkboxes-select-default-text"},this.renderDefaultText()),this.renderOptions()))}}]),t}(r.default.Component);a.defaultProps={id:"",name:"",options:[],values:[],defaultText:"",onChange:function(e,t,n,o){},onRemove:function(e,t,n){},onOpen:function(){},onClose:function(){}},a.propTypes={id:c.default.string,name:c.default.string,className:c.default.string,options:c.default.array,values:c.default.array,defaultText:c.default.string,onChange:c.default.func,onRemove:c.default.func,onOpen:c.default.func,onClose:c.default.func,customCheckedCheckbox:function(e,t,n){if(null!=e[t]&&null!=e[t]&&""!=e[t]&&(null==e.customUncheckedCheckbox||null==e.customUncheckedCheckbox||""==e.customUncheckedCheckbox))return new Error("MultiCheckboxSelect: When customCheckedCheckbox prop is present, customUncheckedCheckbox prop also needs to be provided.")},customUncheckedCheckbox:function(e,t,n){if(null!=e[t]&&null!=e[t]&&""!=e[t]&&(null==e.customCheckedCheckbox||null==e.customCheckedCheckbox||""==e.customCheckedCheckbox))return new Error("MultiCheckboxSelect: When customUncheckedCheckbox prop is present, customCheckedCheckbox prop also needs to be provided.")}},t.default=a},function(e,t){e.exports=require("react")},function(e,t,n){e.exports=n(3)()},function(e,t,n){"use strict";var o=n(4);function r(){}function c(){}c.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,c,l){if(l!==o){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:c,resetWarningCache:r};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}]);