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

React component for building complex checkbox filtering

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("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}');exports.FilterComponent=function(r){var t=function(){return Object.entries(r.filters).map((function(e){return new Array(e[1].length).fill(!1)}))},i=function(){return Object.entries(r.filters).map((function(e){return new Array(e[1].length).fill({})}))},l=n.useState((function(){return t()})),a=l[0],c=l[1],s=n.useState((function(){return i()})),o=s[0],u=s[1];function d(e,n,t){var i=a.map((function(r,t){var i=r.map((function(e,r){return r===n?!e:e}));return t===e?i:r}));c(i);var l=o.map((function(n,l){var a=n.map((function(e,n){return 1==i[l][n]?r.filters[t][n]:{}}));return l===e?a:n}));u(l)}var f=Object.entries(r.filters).map((function(n,r){var t=n[1].map((function(t,i){return e.jsx("li",{className:"filter-item",children:e.jsxs("label",{children:[e.jsx("input",{type:"checkbox",checked:1==a[r][i]&&a[r][i],onChange:function(e){return d(r,i,n[0])}}),e.jsx("span",{children:t.label})]})},i+Math.random())}));return e.jsxs("div",{children:[e.jsx("span",{className:"filter-section-label",children:n[0]}),e.jsx("ul",{className:"filter-section",children:t})]},r+Math.random())})),p=Object.entries(r.filters).map((function(n,t){return o[t].map((function(i,l){return void 0!==i.label&&e.jsxs("span",{className:"selected-filter",style:{backgroundColor:r.selectedFilterBackgroundColour||"blue",color:r.selectedFilterTextColour||"#fff"},children:[i.label," ",e.jsx("span",{className:"close-btn",onClick:function(e){return d(t,l,n[0])},children:r.selectedFilterRemoveIcon||"X"})]},i.label+Math.random())}))})).flat();return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"selected-filters-container",children:p}),f,e.jsxs("div",{className:"filter-button-container",children:[e.jsx("button",{className:"primary",onClick:function(){return r.onSubmit(o)},children:r.applyButtonText||"Apply Filters"}),e.jsx("button",{className:"secondary",onClick:function(){c(t()),u(i())},children:r.clearButtonText||"Clear Filters"})]})]})};
//# sourceMappingURL=index.js.map