UNPKG

@gongiskhan/react-query-builder

Version:
3 lines (2 loc) 20 kB
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var n=require("react"),r=e(n),t=require("styled-components"),a=e(t),o=e(require("uniqid"));function i(){return(i=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function l(e,n){return n||(n=e.slice(0)),e.raw=n,e}function u(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var d={primary:"#20639B",secondary:"#3CAEA3",tertiary:"#911803",light:"#f4f4f4",medium:"#d9d9d9",darker:"#bfbfbf",dark:"#848484",enabled:"#3caea3",disabled:"#9fb2b0"},c={group:{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",EXISTS:"Exists",NOT_EXISTS:"Not exists",CONTAINS:"Contains",NOT_CONTAINS:"Not contains",LESS_THAN:"Less than",GREATER_THAN:"Greater than"}},s=function(e){return JSON.parse(JSON.stringify(e))};function f(){var e=l(["\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"]);return f=function(){return e},e}var p=a.button(f(),d.primary),m=function(e){return r.createElement(p,{onClick:e.onClick,className:e.className},e.label)};function v(){var e=l(["\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"]);return v=function(){return e},e}function g(){var e=l(["\n display: grid;\n grid-auto-columns: min-content;\n grid-auto-flow: column;\n grid-gap: 0.5rem;\n"]);return g=function(){return e},e}function E(){var e=l(["\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"]);return E=function(){return e},e}var h=a.div(E(),d.medium),b=a.div(g()),y=a.div(v()),x=function(e){var n=e.controls;return r.createElement(h,{className:e.className},r.createElement(b,null,e.children),r.createElement(y,null,n))},N=n.createContext({}),C=function(e){var n=e.fields,t=e.components,a=e.strings,o=e.data,l=e.readOnly,u=e.setData,d=e.onChange,s=e.children;return t=i({},Oe,t,{form:i({},Oe.form,t.form)}),a=i({},c,a,{component:i({},c.component,a.component),form:i({},c.form,a.form),group:i({},c.group,a.group),operators:i({},c.operators,a.operators)}),r.createElement(N.Provider,{value:{fields:n,components:t,strings:a,data:o,readOnly:l,setData:u,onChange:d}},s)};function T(){var e=l(["\n min-width: 10px;\n padding: 0.4rem 0.6rem;\n border: 1px solid ",";\n border-radius: 3px;\n"]);return T=function(){return e},e}var S=a.input(T(),d.medium),O=function(e){var n=e.onChange,t=e.disabled;return r.createElement(S,{type:e.type,value:e.value,onChange:function(e){n(e.target.value)},className:e.className,disabled:void 0!==t&&t})};function A(){var e=l(["\n min-width: 160px;\n padding: 0.4rem 0.6rem;\n border: 1px solid ",";\n border-radius: 3px;\n"]);return A=function(){return e},e}var k=a.select(A(),d.medium),I=function(e){var n=e.values,t=e.onChange,a=e.disabled,o=void 0!==a&&a;return r.createElement(k,{onChange:function(e){o||t(e.target.value)},value:e.selectedValue,className:e.className,disabled:!!o},r.createElement("option",{value:"",disabled:!0},e.emptyValue),n.map(function(e){var n=e.value;return r.createElement("option",{value:n,key:n},e.label)}))};function w(){var e=l(["\n cursor: ",";\n"]);return w=function(){return e},e}function V(){var e=l(["\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"]);return V=function(){return e},e}function R(){var e=l(["\n display: grid;\n grid-auto-columns: min-content;\n grid-auto-flow: column;\n grid-gap: 0.5rem;\n align-self: center;\n"]);return R=function(){return e},e}function D(){var e=l(["\n display: grid;\n grid-auto-columns: min-content;\n grid-auto-flow: column;\n grid-gap: 0.5rem;\n"]);return D=function(){return e},e}var L=a.div(D()),B=a.div(R()),_=a.span(V(),d.dark,d.dark),G=a.span(w(),function(e){return!e.disabled&&"pointer"}),M=function(e){var n=e.onDelete,t=e.selectedValue,a=e.values,o=e.disabled,i=void 0!==o&&o;return r.createElement(L,{className:e.className},r.createElement(I,{onChange:e.onChange,selectedValue:"",emptyValue:e.emptyValue,values:a,disabled:i}),r.createElement(B,null,t.map(function(e,t){var o=a.findIndex(function(n){return n.value===e});return r.createElement(_,{key:t},a[o].label," ",r.createElement(G,{onClick:function(){return!i&&n(e)},disabled:!!i,"data-test":"Delete"},"[x]"))})))};function U(){var e=l(["\n background-color: ",";\n cursor: initial;\n\n "," {\n background: ",";\n }\n "]);return U=function(){return e},e}function W(){var e=l(["\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"]);return W=function(){return e},e}function F(){var e=l(["\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"]);return F=function(){return e},e}var j=a.div(F(),d.dark),q=a.div(W(),function(e){return e.switched?d.primary:d.darker},d.dark,function(e){return e.disabled&&t.css(U(),d.darker,j,d.disabled)},j,function(e){return e.switched?"1.3rem":"0.1rem"}),X=function(e){var n=e.switched,t=e.onChange,a=e.disabled,o=void 0!==a&&a;return r.createElement(q,{"data-test":"Switch",switched:n,disabled:!!o,onClick:function(){t&&!o&&t(!n)},className:e.className},r.createElement(j,null))};function Y(){var e=l(["\n display: grid;\n grid-auto-columns: min-content;\n grid-auto-flow: column;\n grid-gap: 0.5rem;\n justify-self: end;\n"]);return Y=function(){return e},e}function H(){var e=l(["\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"]);return H=function(){return e},e}function P(){var e=l(["\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"]);return P=function(){return e},e}function Q(){var e=l(["\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"]);return Q=function(){return e},e}var z=a.div(Q(),d.medium),J=a.div(P(),d.medium),$=a.div(H()),K=a.div(Y()),Z=function(e){var n=e.controlsRight,t=e.children;return r.createElement(z,{className:e.className},r.createElement(J,null,r.createElement($,null,e.controlsLeft),r.createElement(K,null,n)),t)};function ee(){var e=l(["\n background: ",";\n cursor: initial;\n "]);return ee=function(){return e},e}function ne(){var e=l(["\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"]);return ne=function(){return e},e}var re=a.div(ne(),function(e){return e.isSelected?d.primary:d.darker},d.dark,function(e){var n=e.isSelected;return e.disabled&&t.css(ee(),n?d.dark:d.darker)}),te=function(e){var n=e.onClick,t=e.disabled,a=e.value;return r.createElement(re,{className:e.className,isSelected:e.isSelected,disabled:t,onClick:function(){t||n(a)}},e.children)},ae=function(e){return"string"==typeof e},oe=function(e){return void 0===e},ie=function(e){return Array.isArray(e)},le=function(e){return ie(e)&&e.every(function(e){return ae(e)})},ue=function(e){return ie(e)&&e.every(function(e){return ae(e.value)&&ae(e.label)})},de=function(e){var t=e.selectedValue,a=e.id,o=n.useContext(N),i=o.data,l=o.setData,u=o.onChange,d=o.components.form;return d?r.createElement(d.Switch,{onChange:function(e){var n=s(i),r=n.findIndex(function(e){return e.id===a});n[r].value=e,l(n),u(n)},switched:t,disabled:o.readOnly}):null},ce=function(e){var t=e.selectedValue,a=e.id,o=n.useContext(N),i=o.fields,l=o.data,u=o.setData,d=o.onChange,c=o.strings,f=o.readOnly,p=o.components.form,m=i.map(function(e){return{value:e.field,label:e.label}});return p&&c.form?r.createElement(p.Select,{values:m,selectedValue:t,emptyValue:c.form.selectYourValue,onChange:function(e){var n=s(l),r=n.findIndex(function(e){return e.id===a}),t=i.filter(function(n){return n.field===e})[0];switch(n[r].field=e,delete n[r].value,delete n[r].operators,delete n[r].operator,t.type){case"BOOLEAN":n[r].value=!1;break;case"DATE":case"TEXT":n[r].value=t.operators&&["BETWEEN","NOT_BETWEEN"].includes(t.operators[0])?["",""]:"",n[r].operator=t.operators&&t.operators[0],n[r].operators=t.operators;break;case"NUMBER":n[r].value=t.operators&&["BETWEEN","NOT_BETWEEN"].includes(t.operators[0])?["0","0"]:"0",n[r].operator=t.operators&&t.operators[0],n[r].operators=t.operators;break;case"LIST":ue(t.value)&&(n[r].value=t.value[0].value),n[r].operator=t.operators&&t.operators[0],n[r].operators=t.operators;break;case"MULTI_LIST":ue(t.value)&&(n[r].value=[]),n[r].operator=t.operators&&t.operators[0],n[r].operators=t.operators;break;case"STATEMENT":n[r].value=t.value}u(n),d(n)},disabled:f}):null},se=function(e){var t=e.type,a=e.value,o=e.id,i=n.useContext(N),l=i.data,u=i.setData,d=i.onChange,c=i.readOnly,f=i.components.form,p=function(e,n){var r=s(l),t=r.findIndex(function(e){return e.id===o});oe(n)?r[t].value=e:r[t].value[n]=e,u(r),d(r)};if(f){var m=l.find(function(e){return e.id===o});if(le(a))return r.createElement(r.Fragment,null,r.createElement(f.Input,{type:t,value:a[0],onChange:function(e){return p(e,0)},disabled:c}),r.createElement(f.Input,{type:t,value:a[1],onChange:function(e){return p(e,1)},disabled:c}));if("EXISTS"!==m.operator&&"NOT_EXISTS"!==m.operator)return r.createElement(f.Input,{type:t,value:a,onChange:p,disabled:c})}return null},fe=function(e){var t=e.values,a=e.selectedValue,o=e.id,i=n.useContext(N),l=i.fields,u=i.data,d=i.setData,c=i.onChange,f=i.strings,p=i.components.form;return p&&f.form?r.createElement(p.Select,{values:t,selectedValue:a,emptyValue:f.form.selectYourValue,onChange:function(e){var n=s(u),r=n.findIndex(function(e){return e.id===o}),t=l.findIndex(function(e){return n[r].field===e.field});["DATE","TEXT","NUMBER"].includes(l[t].type)&&(!["BETWEEN","NOT_BETWEEN"].includes(e)&&le(n[r].value)?n[r].value="NUMBER"===l[t].type?"0":"":["BETWEEN","NOT_BETWEEN"].includes(e)&&!le(n[r].value)&&(n[r].value="NUMBER"===l[t].type?["0","0"]:["",""])),n[r].operator=e,d(n),c(n)},disabled:i.readOnly}):null},pe=function(e){var t=e.selectedValue,a=e.values,o=e.id,i=n.useContext(N),l=i.data,u=i.setData,d=i.onChange,c=i.strings,f=i.readOnly,p=i.components.form;return p&&c.form&&!f?r.createElement(p.Select,{onChange:function(e){var n=s(l),r=n.findIndex(function(e){return e.id===o});n[r].value=e,u(n),d(n)},selectedValue:t,emptyValue:c.form.selectYourValue,values:a,disabled:f}):null},me=function(e){var t=e.values,a=e.selectedValue,o=e.id,i=n.useContext(N),l=i.data,u=i.setData,d=i.onChange,c=i.strings,f=i.components.form;return f&&c.form?r.createElement(f.SelectMulti,{onChange:function(e){if(u&&d){var n=s(l),r=n.findIndex(function(e){return e.id===o});n[r].value=n[r].value.filter(function(n){return n!==e}),n[r].value.push(e),u(n),d(n)}},onDelete:function(e){var n=s(l),r=n.findIndex(function(e){return e.id===o});n[r].value=n[r].value.filter(function(n){return n!==e}),u(n),d(n)},selectedValue:a,emptyValue:c.form.selectYourValue,values:t,disabled:!!i.readOnly}):null};function ve(){var e=l(["\n align-self: center;\n"]);return ve=function(){return e},e}var ge=a.div(ve()),Ee=function(e){var t=e.field,a=e.value,o=e.operator,i=e.id,l=n.useContext(N),u=l.fields,d=l.data,c=l.setData,f=l.onChange,p=l.components,m=l.strings,v=l.readOnly,g=p.Component,E=p.Remove,h=function(){var e=s(d),n=e.findIndex(function(e){return e.id===i}),r=e.findIndex(function(r){return r.id===e[n].parent}),t=e[r];t.children=t.children.filter(function(e){return e!==i}),e=e.filter(function(e){return e.id!==i}),c(e),f(e)};if(u&&m.component){if(""===t)return r.createElement(g,{controls:!v&&r.createElement(E,{label:m.component.delete,onClick:h})},r.createElement(ce,{selectedValue:"",id:i}));try{if(u.length>0&&t){var b=u.findIndex(function(e){return e.field===t}),y=u[b],x=y.field,C=y.operators,T=y.type,S=y.value,O=C&&C.map(function(e){return{value:e,label:m.operators&&m.operators[e]}});return r.createElement(g,{controls:!v&&r.createElement(E,{label:m.component.delete,onClick:h})},r.createElement(ce,{selectedValue:x,id:i}),"BOOLEAN"===T&&"boolean"==typeof a&&r.createElement(ge,null,r.createElement(de,{id:i,selectedValue:a})),"LIST"===T&&ae(a)&&ue(S)&&ue(O)&&r.createElement(r.Fragment,null,r.createElement(fe,{id:i,values:O,selectedValue:o}),o&&r.createElement(pe,{id:i,selectedValue:a,values:S})),"MULTI_LIST"===T&&ue(S)&&ue(O)&&le(a)&&r.createElement(r.Fragment,null,r.createElement(fe,{id:i,values:O,selectedValue:o}),o&&r.createElement(me,{id:i,values:S,selectedValue:a})),"TEXT"===T&&ue(O)&&(ae(a)||le(a))&&r.createElement(r.Fragment,null,r.createElement(fe,{id:i,values:O,selectedValue:o}),o&&r.createElement(se,"BETWEEN"===o||"NOT_BETWEEN"===o?"TIME_RANGE"===t?{type:"time",value:a,id:i}:{type:"number",value:a,id:i}:{type:"text",value:a,id:i})),"NUMBER"===T&&ue(O)&&(ae(a)||le(a))&&r.createElement(r.Fragment,null,r.createElement(fe,{id:i,values:O,selectedValue:o}),o&&r.createElement(se,{type:"number",value:a,id:i})),"DATE"===T&&ue(O)&&(ae(a)||le(a))&&r.createElement(r.Fragment,null,r.createElement(fe,{id:i,values:O,selectedValue:o}),!oe(o)&&r.createElement(se,{type:"date",value:a,id:i})))}}catch(e){console.error('Field "'+t+'" not found in fields definition.')}}return null},he=function(e){var t=e.value,a=e.children,i=e.id,l=e.isRoot,u=n.useContext(N),d=u.components,c=u.data,f=u.setData,p=u.onChange,m=u.strings,v=u.readOnly,g=d.Add,E=d.GroupHeaderOption,h=d.Remove,b=function(){var e=s(c),n=e.findIndex(function(e){return e.id===i}),r=n;if(c[n].children&&c[n].children.length>0){var t=e[n].children.slice(-1)[0];r=e.findIndex(function(e){return e.id===t})}return{insertAfter:r,parentIndex:n,clonedData:e}},y=function(e){var n=b(),r=n.insertAfter,t=n.parentIndex,a=n.clonedData;a[t].children||(a[r].children=[]),a[t].children.push(e.id),a.splice(Number(r)+1,0,e),f(a),p(a)},x=function(e){var n=b(),r=n.clonedData;r[n.parentIndex].value=e,f(r),p(r)};return m.group?r.createElement(d.Group,{controlsLeft:r.createElement(r.Fragment,null,r.createElement(E,{isSelected:"AND"===t,value:"AND",disabled:v,onClick:x,"data-test":"Option[and]"},m.group.and),r.createElement(E,{isSelected:"OR"===t,value:"OR",disabled:v,onClick:x,"data-test":"Option[or]"},m.group.or)),controlsRight:!v&&r.createElement(r.Fragment,null,r.createElement(g,{onClick:function(){var e={field:"",id:o(),parent:i};y(e)},label:m.group.addRule,"data-test":"AddRule"}),r.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"}),!l&&r.createElement(h,{onClick:function(){var e=s(c).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),p(e)},label:m.group.delete,"data-test":"Remove"}))},a):null},be=function e(n){var t=n.originalData,a=n.isRoot,o=void 0===a||a;return r.createElement(r.Fragment,null,n.filteredData.map(function(n){if(void 0!==n.children){var a=[];if(n.children.forEach(function(e){a.push(t.filter(function(n){return e===n.id})[0])}),"GROUP"===n.type){var i=n.id;return r.createElement(he,{key:i,value:n.value,isNegated:n.isNegated,id:i,isRoot:o},r.createElement(e,{originalData:t,filteredData:a,isRoot:!1}))}return null}var l=n.id;return r.createElement(Ee,{key:l,field:n.field,value:n.value,operator:n.operator,id:l,"data-test":"IteratorComponent"})}))};function ye(){var e=l(["\n background-color: ",";\n"]);return ye=function(){return e},e}var xe=a(m)(ye(),d.tertiary);function Ne(){var e=l(["\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"]);return Ne=function(){return e},e}var Ce=a.span(Ne(),d.dark,d.medium);function Te(){var e=l(["\n padding: 1rem;\n background: #fff;\n border: 1px solid ",";\n"]);return Te=function(){return e},e}var Se=a.div(Te(),d.light),Oe={form:{Input:O,Select:I,SelectMulti:M,Switch:X},Remove:xe,Add:m,Component:x,Group:Z,GroupHeaderOption:te,Text:Ce};exports.Builder=function(e){var t,a=e.data,i=e.fields,l=e.components,d=void 0===l?Oe:l,f=e.strings,p=void 0===f?c:f,m=e.readOnly,v=void 0!==m&&m,g=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:s(a)}).children).length&&(a=[{type:"GROUP",value:"AND",isNegated:!1,id:o(),children:a}]);try{t=function(e){var n={children:s(a)},r=[];return function e(n,t){if(void 0===t&&(t=0),void 0!==n.children){var a=[];if(n.children.map(function(n){0!==t&&(n.parent=t);var o=s(n);delete o.children,r.push(o),a.push(o.id),e(n,n.id)}),0!==t)for(var o,i=function(e,n){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,n){if(e){if("string"==typeof e)return u(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?u(e,void 0):void 0}}(e))){r&&(e=r);var t=0;return function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}(r);!(o=i()).done;){var l=o.value;l.id===t&&(l.children=a)}}}(n),r}()}catch(e){throw new Error("Input data tree is in invalid format")}var E=n.useState(t),h=E[0],b=E[1],y=h.filter(function(e){return!e.parent});n.useEffect(function(){x(t)},[]);var x=function(e){if(g)try{g((function e(n,r){n.map(function(n){if(void 0!==n.children){var t=s(n);delete n.children,delete n.id,delete n.parent,delete n.operators,n.children=[],t.children.map(function(e){var t=s(r.filter(function(n){return n.id===e})[0]);delete t.id,delete t.parent,delete t.operators,n.children.push(t)}),e(n.children,r)}})}(r=(n=s(e)).filter(function(e){return!e.parent}),n),r))}catch(e){throw new Error("Input data tree is in invalid format")}var n,r};return r.createElement(C,{fields:i,components:d,strings:p,readOnly:v,data:h,setData:b,onChange:x},r.createElement(Se,null,r.createElement(be,{originalData:h,filteredData:y})))},exports.BuilderContext=N,exports.Button=m,exports.Component=x,exports.Group=Z,exports.GroupHeaderOption=te,exports.Input=O,exports.Option=_,exports.OptionContainer=B,exports.SecondaryButton=xe,exports.Select=I,exports.SelectMulti=M,exports.Switch=X,exports.colors=d,exports.defaultComponents=Oe,exports.strings=c; //# sourceMappingURL=react-query-builder.cjs.production.min.js.map