react-filter-checkbox-component/dist/esm/index.js

React component for building complex checkbox filtering

import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import{useState as t}from"react";!function(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===r&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}('.filter-section-label {\r\n    display: inline-block;\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.filter-section {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n    margin-bottom: 12px;\r\n}\r\n\r\n.filter-item {\r\n    list-style: none;\r\n}\r\n\r\n.filter-item [type="checkbox"] {\r\n    width: 1.2rem;\r\n    height: 1.2rem;\r\n    vertical-align: bottom;\r\n    margin-right: 6px;\r\n}\r\n\r\n.selected-filters-container {\r\n    display: flex;\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: 12px;\r\n    padding-top: 1rem;\r\n    padding-bottom: 1rem;\r\n}\r\n\r\n.selected-filter {\r\n    display: inline-flex;\r\n    gap: 6px;\r\n    padding: 12px;\r\n    border-radius: 4px;\r\n}\r\n\r\n.close-btn {\r\n    cursor: pointer;\r\n}');var i=function(i){var l=function(){return Object.entries(i.filters).map((function(e){return new Array(e[1].length).fill(!1)}))},a=function(){return Object.entries(i.filters).map((function(e){return new Array(e[1].length).fill({})}))},c=t((function(){return l()})),o=c[0],s=c[1],d=t((function(){return a()})),u=d[0],f=d[1];function p(e,n,r){var t=o.map((function(r,t){var i=r.map((function(e,r){return r===n?!e:e}));return t===e?i:r}));s(t);var l=u.map((function(n,l){var a=n.map((function(e,n){return 1==t[l][n]?i.filters[r][n]:{}}));return l===e?a:n}));f(l)}var m=Object.entries(i.filters).map((function(r,t){var i=r[1].map((function(i,l){return e("li",{className:"filter-item",children:n("label",{children:[e("input",{type:"checkbox",checked:1==o[t][l]&&o[t][l],onChange:function(e){return p(t,l,r[0])}}),e("span",{children:i.label})]})},l+Math.random())}));return n("div",{children:[e("span",{className:"filter-section-label",children:r[0]}),e("ul",{className:"filter-section",children:i})]},t+Math.random())})),h=Object.entries(i.filters).map((function(r,t){return u[t].map((function(l,a){return void 0!==l.label&&n("span",{className:"selected-filter",style:{backgroundColor:i.selectedFilterBackgroundColour||"blue",color:i.selectedFilterTextColour||"#fff"},children:[l.label," ",e("span",{className:"close-btn",onClick:function(e){return p(t,a,r[0])},children:i.selectedFilterRemoveIcon||"X"})]},l.label+Math.random())}))})).flat();return n(r,{children:[e("div",{className:"selected-filters-container",children:h}),m,n("div",{className:"filter-button-container",children:[e("button",{className:"primary",onClick:function(){return i.onSubmit(u)},children:i.applyButtonText||"Apply Filters"}),e("button",{className:"secondary",onClick:function(){s(l()),f(a())},children:i.clearButtonText||"Clear Filters"})]})]})};export{i as FilterComponent};
//# sourceMappingURL=index.js.map