@vojtechportes/react-query-builder/dist/react-query-builder.cjs.production.min.js

Simple, highly configurable query builder for react

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var n=require("react"),t=e(n),r=require("styled-components"),a=e(r),o=e(require("uniqid"));function l(){return(l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function i(e,n){return n||(n=e.slice(0)),e.raw=n,e}function d(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var u,c,s,p,f,m,v,g,E,h,b,y,x,N,C,k,O,w,A,I,S,T,V,D={primary:"#20639B",secondary:"#3CAEA3",tertiary:"#911803",light:"#f4f4f4",medium:"#d9d9d9",darker:"#bfbfbf",dark:"#848484",enabled:"#3caea3",disabled:"#9fb2b0"},R={group:{not:"Not",or:"Or",and:"And",addRule:"Add Rule",addGroup:"Add Group",delete:"Delete"},component:{delete:"Delete"},form:{selectYourValue:"Select your value"},operators:{LARGER:"Larger",SMALLER:"Smaller",LARGER_EQUAL:"Larger or equal",SMALLER_EQUAL:"Smaller or equal",EQUAL:"Equal",NOT_EQUAL:"Not equal",ALL_IN:"All in",ANY_IN:"Any in",NOT_IN:"Not in",BETWEEN:"Between",NOT_BETWEEN:"Not between",LIKE:"Like",NOT_LIKE:"Not like"}},L=function(e){return JSON.parse(JSON.stringify(e))},B=a.button(u||(u=i(["\n  padding: 0.6rem 1.2rem;\n  color: #fff;\n  font-size: 0.7rem;\n  white-space: nowrap;\n  text-transform: uppercase;\n  background-color: ",";\n  border: 0;\n  border-radius: 3px;\n  outline: none;\n  cursor: pointer;\n"])),D.primary),G=function(e){return t.createElement(B,{onClick:e.onClick,className:e.className},e.label)},U=a.div(c||(c=i(["\n  display: grid;\n  grid-auto-flow: column;\n  margin: 0.5rem 0;\n  padding: 0.7rem;\n  background-color: #fff;\n  border: 1px solid ",";\n"])),D.medium),M=a.div(s||(s=i(["\n  display: grid;\n  grid-auto-columns: min-content;\n  grid-auto-flow: column;\n  grid-gap: 0.5rem;\n"]))),_=a.div(p||(p=i(["\n  display: grid;\n  grid-auto-columns: min-content;\n  grid-auto-flow: column;\n  grid-gap: 0.5rem;\n  justify-self: flex-end;\n"]))),F=function(e){var n=e.controls;return t.createElement(U,{className:e.className},t.createElement(M,null,e.children),t.createElement(_,null,n))},W=n.createContext({}),j=function(e){var n=e.fields,r=e.components,a=e.strings,o=e.data,i=e.readOnly,d=e.setData,u=e.onChange,c=e.children;return r=l({},we,r,{form:l({},we.form,r.form)}),a=l({},R,a,{component:l({},R.component,a.component),form:l({},R.form,a.form),group:l({},R.group,a.group),operators:l({},R.operators,a.operators)}),t.createElement(W.Provider,{value:{fields:n,components:r,strings:a,data:o,readOnly:i,setData:d,onChange:u}},c)},q=a.input(f||(f=i(["\n  min-width: 160px;\n  padding: 0.4rem 0.6rem;\n  border: 1px solid ",";\n  border-radius: 3px;\n"])),D.medium),Y=function(e){var n=e.onChange,r=e.disabled;return t.createElement(q,{type:e.type,value:e.value,onChange:function(e){n(e.target.value)},className:e.className,disabled:void 0!==r&&r})},P=a.select(m||(m=i(["\n  min-width: 160px;\n  padding: 0.4rem 0.6rem;\n  border: 1px solid ",";\n  border-radius: 3px;\n"])),D.medium),Q=function(e){var n=e.values,r=e.onChange,a=e.disabled,o=void 0!==a&&a;return t.createElement(P,{onChange:function(e){o||r(e.target.value)},value:e.selectedValue,className:e.className,disabled:!!o},t.createElement("option",{value:"",disabled:!0},e.emptyValue),n.map(function(e){var n=e.value;return t.createElement("option",{value:n,key:n},e.label)}))},z=a.div(v||(v=i(["\n  display: grid;\n  grid-auto-columns: min-content;\n  grid-auto-flow: column;\n  grid-gap: 0.5rem;\n"]))),H=a.div(g||(g=i(["\n  display: grid;\n  grid-auto-columns: min-content;\n  grid-auto-flow: column;\n  grid-gap: 0.5rem;\n  align-self: center;\n"]))),X=a.span(E||(E=i(["\n  padding: 0.3rem 0.5rem;\n  color: ",";\n  font-size: 0.7rem;\n  line-height: 0.7rem;\n  white-space: nowrap;\n  border: 1px solid ",";\n  border-radius: 3rem;\n"])),D.dark,D.dark),J=a.span(h||(h=i(["\n  cursor: ",";\n"])),function(e){return!e.disabled&&"pointer"}),K=function(e){var n=e.onDelete,r=e.selectedValue,a=e.values,o=e.disabled,l=void 0!==o&&o;return t.createElement(z,{className:e.className},t.createElement(Q,{onChange:e.onChange,selectedValue:"",emptyValue:e.emptyValue,values:a,disabled:l}),t.createElement(H,null,r.map(function(e,r){var o=a.findIndex(function(n){return n.value===e});return t.createElement(X,{key:r},a[o].label," ",t.createElement(J,{onClick:function(){return!l&&n(e)},disabled:!!l,"data-test":"Delete"},"[x]"))})))},$=a.div(b||(b=i(["\n  position: absolute;\n  width: 1.3rem;\n  height: 1.3rem;\n  background: white;\n  border: 1px solid ",";\n  border-radius: 50%;\n  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);\n"])),D.dark),Z=a.div(y||(y=i(["\n  position: relative;\n  width: 3rem;\n  height: 1.65rem;\n  background-color: ",";\n  border: 1px solid ",";\n  border-radius: 1.4rem;\n  cursor: pointer;\n  transition: all 0.5s;\n\n  ","\n\n  "," {\n    top: 0.1rem;\n    left: ",";\n    transition: all 0.5s;\n  }\n"])),function(e){return e.switched?D.primary:D.darker},D.dark,function(e){return e.disabled&&r.css(x||(x=i(["\n      background-color: ",";\n      cursor: initial;\n\n      "," {\n        background: ",";\n      }\n    "])),D.darker,$,D.disabled)},$,function(e){return e.switched?"1.3rem":"0.1rem"}),ee=function(e){var n=e.switched,r=e.onChange,a=e.disabled,o=void 0!==a&&a;return t.createElement(Z,{"data-test":"Switch",switched:n,disabled:!!o,onClick:function(){r&&!o&&r(!n)},className:e.className},t.createElement($,null))},ne=a.div(N||(N=i(["\n  margin: 0.5rem 0;\n  padding: 0.7rem;\n  background: #f4f4f4;\n  border: 1px solid ",";\n  box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.15);\n"])),D.medium),te=a.div(C||(C=i(["\n  display: grid;\n  grid-gap: 1rem;\n  grid-template-columns: 1fr 1fr;\n  padding: 0 0 0.5rem;\n  border-bottom: 1px solid ",";\n"])),D.medium),re=a.div(k||(k=i(["\n  display: grid;\n  grid-auto-columns: min-content;\n  grid-auto-flow: column;\n  align-self: end;\n  justify-self: start;\n\n  > div:first-child {\n    border-right: 0;\n    border-top-left-radius: 3px;\n    border-bottom-left-radius: 3px;\n  }\n\n  > div:last-child {\n    border-left: 0;\n    border-top-right-radius: 3px;\n    border-bottom-right-radius: 3px;\n  }\n\n  > div:nth-child(2) {\n    border-right: 0;\n    border-left: 0;\n  }\n"]))),ae=a.div(O||(O=i(["\n  display: grid;\n  grid-auto-columns: min-content;\n  grid-auto-flow: column;\n  grid-gap: 0.5rem;\n  justify-self: end;\n"]))),oe=function(e){var n=e.controlsRight,r=e.children;return t.createElement(ne,{className:e.className},t.createElement(te,null,t.createElement(re,null,e.controlsLeft),t.createElement(ae,null,n)),r)},le=a.div(w||(w=i(["\n  padding: 0.5rem 0.6rem;\n  color: #fff;\n  font-weight: bold;\n  font-size: 0.7rem;\n  text-transform: uppercase;\n  background: ",";\n  border: 1px solid ",";\n  cursor: pointer;\n\n  ","\n"])),function(e){return e.isSelected?D.primary:D.darker},D.dark,function(e){var n=e.isSelected;return e.disabled&&r.css(A||(A=i(["\n      background: ",";\n      cursor: initial;\n    "])),n?D.dark:D.darker)}),ie=function(e){var n=e.onClick,r=e.disabled,a=e.value;return t.createElement(le,{className:e.className,isSelected:e.isSelected,disabled:r,onClick:function(){r||n(a)}},e.children)},de=function(e){return"string"==typeof e},ue=function(e){return void 0===e},ce=function(e){return Array.isArray(e)},se=function(e){return ce(e)&&e.every(function(e){return de(e)})},pe=function(e){return ce(e)&&e.every(function(e){return de(e.value)&&de(e.label)})},fe=function(e){var r=e.selectedValue,a=e.id,o=n.useContext(W),l=o.data,i=o.setData,d=o.onChange,u=o.components.form;return u?t.createElement(u.Switch,{onChange:function(e){var n=L(l),t=n.findIndex(function(e){return e.id===a});n[t].value=e,i(n),d(n)},switched:r,disabled:o.readOnly}):null},me=function(e){var r=e.selectedValue,a=e.id,o=n.useContext(W),l=o.fields,i=o.data,d=o.setData,u=o.onChange,c=o.strings,s=o.readOnly,p=o.components.form,f=l.map(function(e){return{value:e.field,label:e.label}});return p&&c.form?t.createElement(p.Select,{values:f,selectedValue:r,emptyValue:c.form.selectYourValue,onChange:function(e){var n=L(i),t=n.findIndex(function(e){return e.id===a}),r=l.filter(function(n){return n.field===e})[0];switch(n[t].field=e,delete n[t].value,delete n[t].operators,delete n[t].operator,r.type){case"BOOLEAN":n[t].value=!1;break;case"DATE":case"TEXT":n[t].value=r.operators&&["BETWEEN","NOT_BETWEEN"].includes(r.operators[0])?["",""]:"",n[t].operator=r.operators&&r.operators[0],n[t].operators=r.operators;break;case"NUMBER":n[t].value=r.operators&&["BETWEEN","NOT_BETWEEN"].includes(r.operators[0])?["0","0"]:"0",n[t].operator=r.operators&&r.operators[0],n[t].operators=r.operators;break;case"LIST":pe(r.value)&&(n[t].value=r.value[0].value),n[t].operator=r.operators&&r.operators[0],n[t].operators=r.operators;break;case"MULTI_LIST":pe(r.value)&&(n[t].value=[]),n[t].operator=r.operators&&r.operators[0],n[t].operators=r.operators;break;case"STATEMENT":n[t].value=r.value}d(n),u(n)},disabled:s}):null},ve=function(e){var r=e.type,a=e.value,o=e.id,l=n.useContext(W),i=l.data,d=l.setData,u=l.onChange,c=l.readOnly,s=l.components.form,p=function(e,n){var t=L(i),r=t.findIndex(function(e){return e.id===o});ue(n)?t[r].value=e:t[r].value[n]=e,d(t),u(t)};return s?se(a)?t.createElement(t.Fragment,null,t.createElement(s.Input,{type:r,value:a[0],onChange:function(e){return p(e,0)},disabled:c}),t.createElement(s.Input,{type:r,value:a[1],onChange:function(e){return p(e,1)},disabled:c})):t.createElement(s.Input,{type:r,value:a,onChange:p,disabled:c}):null},ge=function(e){var r=e.values,a=e.selectedValue,o=e.id,l=n.useContext(W),i=l.fields,d=l.data,u=l.setData,c=l.onChange,s=l.strings,p=l.components.form;return p&&s.form?t.createElement(p.Select,{values:r,selectedValue:a,emptyValue:s.form.selectYourValue,onChange:function(e){var n=L(d),t=n.findIndex(function(e){return e.id===o}),r=i.findIndex(function(e){return n[t].field===e.field});["DATE","TEXT","NUMBER"].includes(i[r].type)&&(!["BETWEEN","NOT_BETWEEN"].includes(e)&&se(n[t].value)?n[t].value="NUMBER"===i[r].type?"0":"":["BETWEEN","NOT_BETWEEN"].includes(e)&&!se(n[t].value)&&(n[t].value="NUMBER"===i[r].type?["0","0"]:["",""])),n[t].operator=e,u(n),c(n)},disabled:l.readOnly}):null},Ee=function(e){var r=e.selectedValue,a=e.values,o=e.id,l=n.useContext(W),i=l.data,d=l.setData,u=l.onChange,c=l.strings,s=l.readOnly,p=l.components.form;return p&&c.form&&!s?t.createElement(p.Select,{onChange:function(e){var n=L(i),t=n.findIndex(function(e){return e.id===o});n[t].value=e,d(n),u(n)},selectedValue:r,emptyValue:c.form.selectYourValue,values:a,disabled:s}):null},he=function(e){var r=e.values,a=e.selectedValue,o=e.id,l=n.useContext(W),i=l.data,d=l.setData,u=l.onChange,c=l.strings,s=l.components.form;return s&&c.form?t.createElement(s.SelectMulti,{onChange:function(e){if(d&&u){var n=L(i),t=n.findIndex(function(e){return e.id===o});n[t].value=n[t].value.filter(function(n){return n!==e}),n[t].value.push(e),d(n),u(n)}},onDelete:function(e){var n=L(i),t=n.findIndex(function(e){return e.id===o});n[t].value=n[t].value.filter(function(n){return n!==e}),d(n),u(n)},selectedValue:a,emptyValue:c.form.selectYourValue,values:r,disabled:!!l.readOnly}):null},be=a.div(I||(I=i(["\n  align-self: center;\n"]))),ye=function(e){var r=e.field,a=e.value,o=e.operator,l=e.id,i=n.useContext(W),d=i.fields,u=i.data,c=i.setData,s=i.onChange,p=i.components,f=i.strings,m=i.readOnly,v=p.Component,g=p.Remove,E=function(){var e=L(u),n=e.findIndex(function(e){return e.id===l}),t=e.findIndex(function(t){return t.id===e[n].parent}),r=e[t];r.children=r.children.filter(function(e){return e!==l}),e=e.filter(function(e){return e.id!==l}),c(e),s(e)};if(d&&f.component){if(""===r)return t.createElement(v,{controls:!m&&t.createElement(g,{label:f.component.delete,onClick:E})},t.createElement(me,{selectedValue:"",id:l}));try{var h=d.findIndex(function(e){return e.field===r}),b=d[h],y=b.field,x=b.operators,N=b.type,C=b.value,k=x&&x.map(function(e){return{value:e,label:f.operators&&f.operators[e]}});return t.createElement(v,{controls:!m&&t.createElement(g,{label:f.component.delete,onClick:E})},t.createElement(me,{selectedValue:y,id:l}),"BOOLEAN"===N&&"boolean"==typeof a&&t.createElement(be,null,t.createElement(fe,{id:l,selectedValue:a})),"LIST"===N&&de(a)&&pe(C)&&pe(k)&&t.createElement(t.Fragment,null,t.createElement(ge,{id:l,values:k,selectedValue:o}),o&&t.createElement(Ee,{id:l,selectedValue:a,values:C})),"MULTI_LIST"===N&&pe(C)&&pe(k)&&se(a)&&t.createElement(t.Fragment,null,t.createElement(ge,{id:l,values:k,selectedValue:o}),o&&t.createElement(he,{id:l,values:C,selectedValue:a})),"TEXT"===N&&pe(k)&&(de(a)||se(a))&&t.createElement(t.Fragment,null,t.createElement(ge,{id:l,values:k,selectedValue:o}),o&&t.createElement(ve,{type:"text",value:a,id:l})),"NUMBER"===N&&pe(k)&&(de(a)||se(a))&&t.createElement(t.Fragment,null,t.createElement(ge,{id:l,values:k,selectedValue:o}),o&&t.createElement(ve,{type:"number",value:a,id:l})),"DATE"===N&&pe(k)&&(de(a)||se(a))&&t.createElement(t.Fragment,null,t.createElement(ge,{id:l,values:k,selectedValue:o}),!ue(o)&&t.createElement(ve,{type:"date",value:a,id:l})))}catch(e){console.error('Field "'+r+'" not found in fields definition.')}}return null},xe=function(e){var r=e.value,a=e.isNegated,l=e.children,i=e.id,d=e.isRoot,u=n.useContext(W),c=u.components,s=u.data,p=u.setData,f=u.onChange,m=u.strings,v=u.readOnly,g=c.Add,E=c.GroupHeaderOption,h=c.Remove,b=function(){var e=L(s),n=e.findIndex(function(e){return e.id===i}),t=n;if(s[n].children&&s[n].children.length>0){var r=e[n].children.slice(-1)[0];t=e.findIndex(function(e){return e.id===r})}return{insertAfter:t,parentIndex:n,clonedData:e}},y=function(e){var n=b(),t=n.insertAfter,r=n.parentIndex,a=n.clonedData;a[r].children||(a[t].children=[]),a[r].children.push(e.id),a.splice(Number(t)+1,0,e),p(a),f(a)},x=function(e){var n=b(),t=n.clonedData;t[n.parentIndex].value=e,p(t),f(t)};return m.group?t.createElement(c.Group,{controlsLeft:t.createElement(t.Fragment,null,t.createElement(E,{isSelected:!!a,value:!a,disabled:v,onClick:function(e){var n=b(),t=n.clonedData;t[n.parentIndex].isNegated=e,p(t),f(t)},"data-test":"Option[not]"},m.group.not),t.createElement(E,{isSelected:"AND"===r,value:"AND",disabled:v,onClick:x,"data-test":"Option[and]"},m.group.and),t.createElement(E,{isSelected:"OR"===r,value:"OR",disabled:v,onClick:x,"data-test":"Option[or]"},m.group.or)),controlsRight:!v&&t.createElement(t.Fragment,null,t.createElement(g,{onClick:function(){var e={field:"",id:o(),parent:i};y(e)},label:m.group.addRule,"data-test":"AddRule"}),t.createElement(g,{onClick:function(){var e={type:"GROUP",value:"AND",isNegated:!1,id:o(),parent:i,children:[]};y(e)},label:m.group.addGroup,"data-test":"AddGroup"}),!d&&t.createElement(h,{onClick:function(){var e=L(s).filter(function(e){return e.id!==i});e=e.map(function(e){return e.children&&e.children.length>0&&(e.children=e.children.filter(function(e){return e!==i})),e}),p(e),f(e)},label:m.group.delete,"data-test":"Remove"}))},l):null},Ne=function e(n){var r=n.originalData,a=n.isRoot,o=void 0===a||a;return t.createElement(t.Fragment,null,n.filteredData.map(function(n){if(void 0!==n.children){var a=[];if(n.children.forEach(function(e){a.push(r.filter(function(n){return e===n.id})[0])}),"GROUP"===n.type){var l=n.id;return t.createElement(xe,{key:l,value:n.value,isNegated:n.isNegated,id:l,isRoot:o},t.createElement(e,{originalData:r,filteredData:a,isRoot:!1}))}return null}var i=n.id;return t.createElement(ye,{key:i,field:n.field,value:n.value,operator:n.operator,id:i,"data-test":"IteratorComponent"})}))},Ce=a(G)(S||(S=i(["\n  background-color: ",";\n"])),D.tertiary),ke=a.span(T||(T=i(["\n  min-width: 160px;\n  padding: 0.4rem 0.6rem;\n  color: ",";\n  line-height: 1.3;\n  border: 1px solid ",";\n  border-radius: 3px;\n"])),D.dark,D.medium),Oe=a.div(V||(V=i(["\n  padding: 1rem;\n  background: #fff;\n  border: 1px solid ",";\n"])),D.light),we={form:{Input:Y,Select:Q,SelectMulti:K,Switch:ee},Remove:Ce,Add:G,Component:F,Group:oe,GroupHeaderOption:ie,Text:ke};exports.Builder=function(e){var r,a=e.data,l=e.fields,i=e.components,u=void 0===i?we:i,c=e.strings,s=void 0===c?R:c,p=e.readOnly,f=void 0!==p&&p,m=e.onChange;0===(a=function e(n){return void 0!==n.children&&(n.children=n.children.map(function(n){return n.id=o(),e(n)})),n}({children:L(a)}).children).length&&(a=[{type:"GROUP",value:"AND",isNegated:!1,id:o(),children:a}]);try{r=function(e){var n={children:L(a)},t=[];return function e(n,r){if(void 0===r&&(r=0),void 0!==n.children){var a=[];if(n.children.map(function(n){0!==r&&(n.parent=r);var o=L(n);delete o.children,t.push(o),a.push(o.id),e(n,n.id)}),0!==r)for(var o,l=function(e,n){var t;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return d(e,void 0);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?d(e,void 0):void 0}}(e))){t&&(e=t);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}(t);!(o=l()).done;){var i=o.value;i.id===r&&(i.children=a)}}}(n),t}()}catch(e){throw new Error("Input data tree is in invalid format")}var v=n.useState(r),g=v[0],E=v[1],h=g.filter(function(e){return!e.parent});n.useEffect(function(){b(r)},[]);var b=function(e){if(m)try{m((function e(n,t){n.map(function(n){if(void 0!==n.children){var r=L(n);delete n.children,delete n.id,delete n.parent,delete n.operators,n.children=[],r.children.map(function(e){var r=L(t.filter(function(n){return n.id===e})[0]);delete r.id,delete r.parent,delete r.operators,n.children.push(r)}),e(n.children,t)}})}(t=(n=L(e)).filter(function(e){return!e.parent}),n),t))}catch(e){throw new Error("Input data tree is in invalid format")}var n,t};return t.createElement(j,{fields:l,components:u,strings:s,readOnly:f,data:g,setData:E,onChange:b},t.createElement(Oe,null,t.createElement(Ne,{originalData:g,filteredData:h})))},exports.BuilderContext=W,exports.Button=G,exports.Component=F,exports.Group=oe,exports.GroupHeaderOption=ie,exports.Input=Y,exports.Option=X,exports.OptionContainer=H,exports.SecondaryButton=Ce,exports.Select=Q,exports.SelectMulti=K,exports.Switch=ee,exports.colors=D,exports.defaultComponents=we,exports.strings=R;
//# sourceMappingURL=react-query-builder.cjs.production.min.js.map