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

Simple, highly configurable query builder for react

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("styled-components"),require("uniqid")):"function"==typeof define&&define.amd?define(["exports","react","styled-components","uniqid"],n):n((e=e||self)["@vojtechportes/react-query-builder"]={},e.React,e.styled,e.uniqid)}(this,function(e,n,t,r){"use strict";var a="default"in n?n.default:n,o="default"in t?t.default:t;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}r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r;var u,c,s,f,m,p,v,g,h,E,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=o.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 a.createElement(B,{onClick:e.onClick,className:e.className},e.label)},U=o.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=o.div(s||(s=i(["\n  display: grid;\n  grid-auto-columns: min-content;\n  grid-auto-flow: column;\n  grid-gap: 0.5rem;\n"]))),_=o.div(f||(f=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"]))),j=function(e){var n=e.controls;return a.createElement(U,{className:e.className},a.createElement(M,null,e.children),a.createElement(_,null,n))},q=n.createContext({}),F=function(e){var n=e.fields,t=e.components,r=e.strings,o=e.data,i=e.readOnly,d=e.setData,u=e.onChange,c=e.children;return t=l({},we,t,{form:l({},we.form,t.form)}),r=l({},R,r,{component:l({},R.component,r.component),form:l({},R.form,r.form),group:l({},R.group,r.group),operators:l({},R.operators,r.operators)}),a.createElement(q.Provider,{value:{fields:n,components:t,strings:r,data:o,readOnly:i,setData:d,onChange:u}},c)},W=o.input(m||(m=i(["\n  min-width: 160px;\n  padding: 0.4rem 0.6rem;\n  border: 1px solid ",";\n  border-radius: 3px;\n"])),D.medium),P=function(e){var n=e.onChange,t=e.disabled;return a.createElement(W,{type:e.type,value:e.value,onChange:function(e){n(e.target.value)},className:e.className,disabled:void 0!==t&&t})},Y=o.select(p||(p=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,t=e.onChange,r=e.disabled,o=void 0!==r&&r;return a.createElement(Y,{onChange:function(e){o||t(e.target.value)},value:e.selectedValue,className:e.className,disabled:!!o},a.createElement("option",{value:"",disabled:!0},e.emptyValue),n.map(function(e){var n=e.value;return a.createElement("option",{value:n,key:n},e.label)}))},z=o.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=o.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=o.span(h||(h=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=o.span(E||(E=i(["\n  cursor: ",";\n"])),function(e){return!e.disabled&&"pointer"}),K=function(e){var n=e.onDelete,t=e.selectedValue,r=e.values,o=e.disabled,l=void 0!==o&&o;return a.createElement(z,{className:e.className},a.createElement(Q,{onChange:e.onChange,selectedValue:"",emptyValue:e.emptyValue,values:r,disabled:l}),a.createElement(H,null,t.map(function(e,t){var o=r.findIndex(function(n){return n.value===e});return a.createElement(X,{key:t},r[o].label," ",a.createElement(J,{onClick:function(){return!l&&n(e)},disabled:!!l,"data-test":"Delete"},"[x]"))})))},$=o.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=o.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&&t.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,t=e.onChange,r=e.disabled,o=void 0!==r&&r;return a.createElement(Z,{"data-test":"Switch",switched:n,disabled:!!o,onClick:function(){t&&!o&&t(!n)},className:e.className},a.createElement($,null))},ne=o.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=o.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=o.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=o.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,t=e.children;return a.createElement(ne,{className:e.className},a.createElement(te,null,a.createElement(re,null,e.controlsLeft),a.createElement(ae,null,n)),t)},le=o.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&&t.css(A||(A=i(["\n      background: ",";\n      cursor: initial;\n    "])),n?D.dark:D.darker)}),ie=function(e){var n=e.onClick,t=e.disabled,r=e.value;return a.createElement(le,{className:e.className,isSelected:e.isSelected,disabled:t,onClick:function(){t||n(r)}},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)})},fe=function(e){return ce(e)&&e.every(function(e){return de(e.value)&&de(e.label)})},me=function(e){var t=e.selectedValue,r=e.id,o=n.useContext(q),l=o.data,i=o.setData,d=o.onChange,u=o.components.form;return u?a.createElement(u.Switch,{onChange:function(e){var n=L(l),t=n.findIndex(function(e){return e.id===r});n[t].value=e,i(n),d(n)},switched:t,disabled:o.readOnly}):null},pe=function(e){var t=e.selectedValue,r=e.id,o=n.useContext(q),l=o.fields,i=o.data,d=o.setData,u=o.onChange,c=o.strings,s=o.readOnly,f=o.components.form,m=l.map(function(e){return{value:e.field,label:e.label}});return f&&c.form?a.createElement(f.Select,{values:m,selectedValue:t,emptyValue:c.form.selectYourValue,onChange:function(e){var n=L(i),t=n.findIndex(function(e){return e.id===r}),a=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,a.type){case"BOOLEAN":n[t].value=!1;break;case"DATE":case"TEXT":n[t].value=a.operators&&["BETWEEN","NOT_BETWEEN"].includes(a.operators[0])?["",""]:"",n[t].operator=a.operators&&a.operators[0],n[t].operators=a.operators;break;case"NUMBER":n[t].value=a.operators&&["BETWEEN","NOT_BETWEEN"].includes(a.operators[0])?["0","0"]:"0",n[t].operator=a.operators&&a.operators[0],n[t].operators=a.operators;break;case"LIST":fe(a.value)&&(n[t].value=a.value[0].value),n[t].operator=a.operators&&a.operators[0],n[t].operators=a.operators;break;case"MULTI_LIST":fe(a.value)&&(n[t].value=[]),n[t].operator=a.operators&&a.operators[0],n[t].operators=a.operators;break;case"STATEMENT":n[t].value=a.value}d(n),u(n)},disabled:s}):null},ve=function(e){var t=e.type,r=e.value,o=e.id,l=n.useContext(q),i=l.data,d=l.setData,u=l.onChange,c=l.readOnly,s=l.components.form,f=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(r)?a.createElement(a.Fragment,null,a.createElement(s.Input,{type:t,value:r[0],onChange:function(e){return f(e,0)},disabled:c}),a.createElement(s.Input,{type:t,value:r[1],onChange:function(e){return f(e,1)},disabled:c})):a.createElement(s.Input,{type:t,value:r,onChange:f,disabled:c}):null},ge=function(e){var t=e.values,r=e.selectedValue,o=e.id,l=n.useContext(q),i=l.fields,d=l.data,u=l.setData,c=l.onChange,s=l.strings,f=l.components.form;return f&&s.form?a.createElement(f.Select,{values:t,selectedValue:r,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},he=function(e){var t=e.selectedValue,r=e.values,o=e.id,l=n.useContext(q),i=l.data,d=l.setData,u=l.onChange,c=l.strings,s=l.readOnly,f=l.components.form;return f&&c.form&&!s?a.createElement(f.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:t,emptyValue:c.form.selectYourValue,values:r,disabled:s}):null},Ee=function(e){var t=e.values,r=e.selectedValue,o=e.id,l=n.useContext(q),i=l.data,d=l.setData,u=l.onChange,c=l.strings,s=l.components.form;return s&&c.form?a.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:r,emptyValue:c.form.selectYourValue,values:t,disabled:!!l.readOnly}):null},be=o.div(I||(I=i(["\n  align-self: center;\n"]))),ye=function(e){var t=e.field,r=e.value,o=e.operator,l=e.id,i=n.useContext(q),d=i.fields,u=i.data,c=i.setData,s=i.onChange,f=i.components,m=i.strings,p=i.readOnly,v=f.Component,g=f.Remove,h=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&&m.component){if(""===t)return a.createElement(v,{controls:!p&&a.createElement(g,{label:m.component.delete,onClick:h})},a.createElement(pe,{selectedValue:"",id:l}));try{var E=d.findIndex(function(e){return e.field===t}),b=d[E],y=b.field,x=b.operators,N=b.type,C=b.value,k=x&&x.map(function(e){return{value:e,label:m.operators&&m.operators[e]}});return a.createElement(v,{controls:!p&&a.createElement(g,{label:m.component.delete,onClick:h})},a.createElement(pe,{selectedValue:y,id:l}),"BOOLEAN"===N&&"boolean"==typeof r&&a.createElement(be,null,a.createElement(me,{id:l,selectedValue:r})),"LIST"===N&&de(r)&&fe(C)&&fe(k)&&a.createElement(a.Fragment,null,a.createElement(ge,{id:l,values:k,selectedValue:o}),o&&a.createElement(he,{id:l,selectedValue:r,values:C})),"MULTI_LIST"===N&&fe(C)&&fe(k)&&se(r)&&a.createElement(a.Fragment,null,a.createElement(ge,{id:l,values:k,selectedValue:o}),o&&a.createElement(Ee,{id:l,values:C,selectedValue:r})),"TEXT"===N&&fe(k)&&(de(r)||se(r))&&a.createElement(a.Fragment,null,a.createElement(ge,{id:l,values:k,selectedValue:o}),o&&a.createElement(ve,{type:"text",value:r,id:l})),"NUMBER"===N&&fe(k)&&(de(r)||se(r))&&a.createElement(a.Fragment,null,a.createElement(ge,{id:l,values:k,selectedValue:o}),o&&a.createElement(ve,{type:"number",value:r,id:l})),"DATE"===N&&fe(k)&&(de(r)||se(r))&&a.createElement(a.Fragment,null,a.createElement(ge,{id:l,values:k,selectedValue:o}),!ue(o)&&a.createElement(ve,{type:"date",value:r,id:l})))}catch(e){console.error('Field "'+t+'" not found in fields definition.')}}return null},xe=function(e){var t=e.value,o=e.isNegated,l=e.children,i=e.id,d=e.isRoot,u=n.useContext(q),c=u.components,s=u.data,f=u.setData,m=u.onChange,p=u.strings,v=u.readOnly,g=c.Add,h=c.GroupHeaderOption,E=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),f(a),m(a)},x=function(e){var n=b(),t=n.clonedData;t[n.parentIndex].value=e,f(t),m(t)};return p.group?a.createElement(c.Group,{controlsLeft:a.createElement(a.Fragment,null,a.createElement(h,{isSelected:!!o,value:!o,disabled:v,onClick:function(e){var n=b(),t=n.clonedData;t[n.parentIndex].isNegated=e,f(t),m(t)},"data-test":"Option[not]"},p.group.not),a.createElement(h,{isSelected:"AND"===t,value:"AND",disabled:v,onClick:x,"data-test":"Option[and]"},p.group.and),a.createElement(h,{isSelected:"OR"===t,value:"OR",disabled:v,onClick:x,"data-test":"Option[or]"},p.group.or)),controlsRight:!v&&a.createElement(a.Fragment,null,a.createElement(g,{onClick:function(){var e={field:"",id:r(),parent:i};y(e)},label:p.group.addRule,"data-test":"AddRule"}),a.createElement(g,{onClick:function(){var e={type:"GROUP",value:"AND",isNegated:!1,id:r(),parent:i,children:[]};y(e)},label:p.group.addGroup,"data-test":"AddGroup"}),!d&&a.createElement(E,{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}),f(e),m(e)},label:p.group.delete,"data-test":"Remove"}))},l):null},Ne=function e(n){var t=n.originalData,r=n.isRoot,o=void 0===r||r;return a.createElement(a.Fragment,null,n.filteredData.map(function(n){if(void 0!==n.children){var r=[];if(n.children.forEach(function(e){r.push(t.filter(function(n){return e===n.id})[0])}),"GROUP"===n.type){var l=n.id;return a.createElement(xe,{key:l,value:n.value,isNegated:n.isNegated,id:l,isRoot:o},a.createElement(e,{originalData:t,filteredData:r,isRoot:!1}))}return null}var i=n.id;return a.createElement(ye,{key:i,field:n.field,value:n.value,operator:n.operator,id:i,"data-test":"IteratorComponent"})}))},Ce=o(G)(S||(S=i(["\n  background-color: ",";\n"])),D.tertiary),ke=o.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=o.div(V||(V=i(["\n  padding: 1rem;\n  background: #fff;\n  border: 1px solid ",";\n"])),D.light),we={form:{Input:P,Select:Q,SelectMulti:K,Switch:ee},Remove:Ce,Add:G,Component:j,Group:oe,GroupHeaderOption:ie,Text:ke};e.Builder=function(e){var t,o=e.data,l=e.fields,i=e.components,u=void 0===i?we:i,c=e.strings,s=void 0===c?R:c,f=e.readOnly,m=void 0!==f&&f,p=e.onChange;0===(o=function e(n){return void 0!==n.children&&(n.children=n.children.map(function(n){return n.id=r(),e(n)})),n}({children:L(o)}).children).length&&(o=[{type:"GROUP",value:"AND",isNegated:!1,id:r(),children:o}]);try{t=function(e){var n={children:L(o)},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(t),g=v[0],h=v[1],E=g.filter(function(e){return!e.parent});n.useEffect(function(){b(t)},[]);var b=function(e){if(p)try{p((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 a.createElement(F,{fields:l,components:u,strings:s,readOnly:m,data:g,setData:h,onChange:b},a.createElement(Oe,null,a.createElement(Ne,{originalData:g,filteredData:E})))},e.BuilderContext=q,e.Button=G,e.Component=j,e.Group=oe,e.GroupHeaderOption=ie,e.Input=P,e.Option=X,e.OptionContainer=H,e.SecondaryButton=Ce,e.Select=Q,e.SelectMulti=K,e.Switch=ee,e.colors=D,e.defaultComponents=we,e.strings=R});
//# sourceMappingURL=react-query-builder.umd.production.min.js.map