{"_id":"@authsignal/react-awesome-query-builder","_rev":"1-c32d7b57f47069e140a8b5d2204d5f09","name":"@authsignal/react-awesome-query-builder","dist-tags":{"latest":"5.3.1"},"versions":{"5.1.0":{"name":"@authsignal/react-awesome-query-builder","version":"5.1.0","description":"User-friendly query builder for React. Demo: https://ukrbublik.github.io/react-awesome-query-builder","keywords":["query-builder","query","builder","query builder","react-query-builder","where","clause","operators","expression","react","reactjs","component","react-component","ui","antd","antdesign","ant-design","material","material-ui","material-design","configurable"],"main":"lib","types":"modules/index.d.ts","scripts":{"prepare":"npm run build-npm","for-npm":"sh ./scripts/for-npm.sh","for-gpr":"sh ./scripts/for-gpr.sh","build-npm":"sh ./scripts/build-npm.sh","check-hot":"node ./scripts/check-hot.js","build-global":"NODE_ENV=production COMPRESS=1 webpack","build":"npm run build-npm && npm run build-global","build-examples":"cd examples && npm run build","build-sandbox-ts":"cd sandbox && npm run build","build-sandbox-js":"cd sandbox_simple && npm run build","build-all":"npm run build-npm && npm run build-global && npm run build-examples && npm run build-sandbox-ts && npm run build-sandbox-js","examples":"cd examples && npm i && npm start","sandbox-ts":"cd sandbox && npm i && npm start","sandbox-js":"cd sandbox_simple && npm i && npm start","sandbox":"npm run sandbox-ts","start":"npm i && npm run examples","test":"karma start ./tests/karma.conf.js","tsc-lib":"tsc -p . --noEmit","tsc-examples":"tsc -p ./examples --noEmit","tsc-sandbox":"tsc -p ./sandbox --noEmit","tsc-tests":"tsc -p ./tests --noEmit","tsc-lite":"npm run tsc-lib && npm run tsc-tests","tsc":"npm run tsc-lib && npm run tsc-examples && npm run tsc-sandbox && npm run tsc-tests","eslint-fix":" ./node_modules/.bin/eslint --ext .jsx --ext .js --ext .tsx --ext .ts --fix ./modules/ ./tests/ ./examples/ ./sandbox/ ./sandbox_simple/","eslint":" ./node_modules/.bin/eslint --ext .jsx --ext .js --ext .tsx --ext .ts ./modules/ ./tests/ ./examples/ ./sandbox/ ./sandbox_simple/","eslint-lite":"eslint --ext .jsx --ext .js --ext .tsx --ext .ts ./modules/ ./tests/","lint":"npm run eslint && npm run tsc","lint-lite":"npm run eslint-lite && npm run tsc-lite","lint-fix":"npm run eslint-fix","clean":"sh ./scripts/clean.sh","install-all":"npm i && npm i -C examples && npm i -C sandbox && npm i -C sandbox_simple","reinstall":"npm run clean && npm run install-all","smoke":"npm run lint && npm run test && npm run build-all && npm run check-hot","resmoke":"npm run reinstall && npm run smoke"},"repository":{"type":"git","url":"git+https://github.com/ukrbublik/react-awesome-query-builder.git"},"author":{"name":"Denis Oblogin","email":"ukrbublik@gmail.com","url":"https://github.com/ukrbublik"},"license":"MIT","bugs":{"url":"https://github.com/ukrbublik/react-awesome-query-builder/issues"},"homepage":"https://github.com/ukrbublik/react-awesome-query-builder","funding":"https://opencollective.com/react-awesome-query-builder","engines":{"node":">=12.13","npm":">=6"},"dependencies":{"@date-io/moment":"^1.3.13","classnames":"^2.3.1","clone":"^2.1.2","immutable":"^3.8.2","lodash":"^4.17.21","moment":"^2.29.1","prop-types":"^15.7.2","react-redux":"^7.2.2","redux":"^4.1.0","spel2js":"^0.2.8","sqlstring":"^2.3.2"},"peerDependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/icons-material":"^5.2.4","@mui/lab":"^5.0.0-alpha.60","@mui/material":"^5.2.4","@fortawesome/fontawesome-svg-core":"^1.2.36","@fortawesome/free-solid-svg-icons":"^5.15.4","@fortawesome/react-fontawesome":"^0.1.16","@material-ui/core":"^4.12.3","@material-ui/icons":"^4.0.0","@material-ui/lab":"^4.0.0-alpha.57","@material-ui/pickers":"^3.2.10","antd":"^4.0.0","@ant-design/icons":"^4.0.0","bootstrap":"^5.1.3","material-ui-confirm":"^2.0.1 || ^3.0.0","react":"^16.8.4 || ^17.0.1","react-dom":"^16.8.4 || ^17.0.1","reactstrap":"^9.0.0"},"devDependencies":{"@ant-design/icons":"^4.7.0","@babel/cli":"^7.14.5","@babel/core":"^7.14.5","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-proposal-decorators":"^7.14.5","@babel/plugin-proposal-private-methods":"^7.14.5","@babel/plugin-transform-modules-commonjs":"^7.14.5","@babel/plugin-transform-runtime":"^7.14.5","@babel/preset-env":"^7.14.5","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.14.5","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@fortawesome/fontawesome-svg-core":"^1.2.36","@fortawesome/free-solid-svg-icons":"^5.15.4","@fortawesome/react-fontawesome":"^0.1.16","@material-ui/core":"^4.12.3","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.57","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.4","@mui/lab":"^5.0.0-alpha.60","@mui/material":"^5.2.4","@pmmmwh/react-refresh-webpack-plugin":"^0.5.4","@types/chai":"^4.2.18","@types/clone":"^2.1.1","@types/enzyme":"^3.10.8","@types/lodash":"^4.14.170","@types/mocha":"^9.0.0","@types/node":"^17.0.14","@types/prop-types":"^15.7.3","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/sinon":"^10.0.2","@typescript-eslint/eslint-plugin":"^5.3.0","@typescript-eslint/parser":"^5.3.0","@wojtekmaj/enzyme-adapter-react-17":"^0.6.3","antd":"^4.16.13","babel-loader":"^8.2.2","babel-plugin-import":"^1.13.3","babel-plugin-istanbul":"^6.0.0","bootstrap":"^5.1.3","chai":"^4.3.2","codecov":"^3.8.2","compression-webpack-plugin":"^9.0.0","cross-env":"^7.0.3","css-loader":"^6.2.0","dayjs":"^1.10.5","enzyme":"^3.11.0","eslint":"^8.8.0","eslint-import-resolver-webpack":"^0.13.1","eslint-plugin-babel":"^5.3.1","eslint-plugin-import":"^2.23.4","eslint-plugin-react":"^7.24.0","fibers":"^5.0.0","file-loader":"^6.2.0","karma":"^6.3.4","karma-chai":"^0.1.0","karma-chrome-launcher":"^3.1.0","karma-coverage":"^2.0.3","karma-es6-shim":"^1.0.0","karma-junit-reporter":"^2.0.1","karma-mocha":"^2.0.1","karma-mocha-reporter":"^2.2.5","karma-sourcemap-loader":"^0.3.8","karma-webpack":"^5.0.0","less":"^4.1.1","less-loader":"^10.0.0","material-ui-confirm":"^3.0.0","mini-css-extract-plugin":"^2.2.0","mocha":"^9.0.0","moment-locales-webpack-plugin":"^1.2.0","process":"^0.11.10","puppeteer":"^13.1.3","react":"^17.0.2","react-dom":"^17.0.2","react-refresh":"^0.11.0","react-router-dom":"^6.2.1","react-select":"^5.2.2","reactstrap":"^9.0.0","sass":"^1.35.0","sass-loader":"^12.1.0","sinon":"^13.0.1","style-loader":"^3.2.1","ts-loader":"^9.2.3","typescript":"^4.3.2","url-loader":"^4.1.1","webpack":"^5.61.0","webpack-bundle-analyzer":"^4.4.2","webpack-cli":"^4.9.1","webpack-dev-server":"^4.4.0"},"gitHead":"4d6cb756f94210ef7a94b8a168048655d26e5979","_id":"@authsignal/react-awesome-query-builder@5.1.0","_nodeVersion":"17.6.0","_npmVersion":"8.5.1","dist":{"integrity":"sha512-hv5pssPipcbHup14zuZLudFuBbRH3CBjVUMTaDm5G4rjW9sy32hVJAvDURBU+xTMrMFBpbipiIhII2R4HAX16Q==","shasum":"d969e38b3188b61c8d1ca5b020af445525762cbf","tarball":"https://registry.npmjs.org/@authsignal/react-awesome-query-builder/-/react-awesome-query-builder-5.1.0.tgz","fileCount":456,"unpackedSize":2185716,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwgYUF4xIashRGFQEPt2aA7me2x/KOQYLrBYNz6h/5rAiAJXxrk8Jb2jXymIvUgNy+gVeQ/ORyPRuUbwMFlT/4S/g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjduQ9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptdxAAlnIheAC3IrEfFz2DEGXxKiq4+FD2zj6yPRekOwaR6Q5S6n+T\r\npIwiXiYAWK9KQpvrjYk6WCbJpZ4aRJwISZIudEDo8m2vbrJRTqeXQh8lt4yD\r\noZUhecsPUMwe3XaIimBZmbRMq51EKRXyUC3H3FSh5IYG9QI85vAo0i3UwMnj\r\ngietcA41nOESuxBKCFcUPW9TmjoLTB0fJs6D/2ZyhK3PNQcpR2UB9lf/juqE\r\nzYJEF+AHjLSea3qotaaHM7EBXLjUgLLngnSEUOfkE6cpOf95a47drqSYj2jh\r\nf59KQOFclQGANz7DNQF//DKOkGNg+KXsqhPiRK7auQ6ZZUwWb2x+89rxLLmo\r\nYvDHT9Ch4NMuFbabyNZaxXsbv82AqwxFn24Fvj9oz1CMdbeu7yGkmkPAtGCl\r\nnUUWw75YP0y8mfgzzWhBxY+9XW1K+Y0Zg9lFER8LPJxkLe3QRExTR+vm6EEy\r\nLE2Xps1VXw51nCQ6qHWhgU+5OZZoYWe1IAFrKxIe4LP/euulDRMphg4nkA4i\r\nnecbIh12oyVczO11QoMN+UnYoKx3xBhHCA4ihGJ3Uq9jtJtWt5n70KlWeTha\r\nXn8Ea+5CuLzn/kKAl59LQvq7ZbZQ5rje2b8ctAPCK+CpXNtbhmU63N4uGR/T\r\nZC3+Nu0+v/rhKMF1dptzdAll55U/OZ33GIk=\r\n=Gt3S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hwhmeikle","email":"hwhmeikle@gmail.com"},"directories":{},"maintainers":[{"name":"hwhmeikle","email":"hwhmeikle@gmail.com"},{"name":"chrisfisheras","email":"chris@authsignal.com"},{"name":"justinsoong","email":"justinsoong@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-awesome-query-builder_5.1.0_1668736061667_0.07124415706492981"},"_hasShrinkwrap":false},"5.3.1":{"name":"@authsignal/react-awesome-query-builder","version":"5.3.1","description":"User-friendly query builder for React. Demo: https://ukrbublik.github.io/react-awesome-query-builder","keywords":["query-builder","query","builder","query builder","react-query-builder","where","clause","operators","expression","react","reactjs","component","react-component","ui","antd","antdesign","ant-design","material","material-ui","material-design","configurable"],"main":"lib","types":"modules/index.d.ts","scripts":{"prepare":"npm run build-npm","for-npm":"sh ./scripts/for-npm.sh","for-gpr":"sh ./scripts/for-gpr.sh","build-npm":"sh ./scripts/build-npm.sh","check-hot":"node ./scripts/check-hot.js","build-global":"NODE_ENV=production COMPRESS=1 webpack","build":"npm run build-npm && npm run build-global","build-examples":"cd examples && npm run build","build-sandbox-ts":"cd sandbox && npm run build","build-sandbox-js":"cd sandbox_simple && npm run build","build-all":"npm run build-npm && npm run build-global && npm run build-examples && npm run build-sandbox-ts && npm run build-sandbox-js","examples":"cd examples && npm i && npm start","sandbox-ts":"cd sandbox && npm i && npm start","sandbox-js":"cd sandbox_simple && npm i && npm start","sandbox":"npm run sandbox-ts","start":"npm i && npm run examples","test":"karma start ./tests/karma.conf.js","tsc-lib":"tsc -p . --noEmit","tsc-examples":"tsc -p ./examples --noEmit","tsc-sandbox":"tsc -p ./sandbox --noEmit","tsc-tests":"tsc -p ./tests --noEmit","tsc-lite":"npm run tsc-lib && npm run tsc-tests","tsc":"npm run tsc-lib && npm run tsc-examples && npm run tsc-sandbox && npm run tsc-tests","eslint-fix":" ./node_modules/.bin/eslint --ext .jsx --ext .js --ext .tsx --ext .ts --fix ./modules/ ./tests/ ./examples/ ./sandbox/ ./sandbox_simple/","eslint":" ./node_modules/.bin/eslint --ext .jsx --ext .js --ext .tsx --ext .ts ./modules/ ./tests/ ./examples/ ./sandbox/ ./sandbox_simple/","eslint-lite":"eslint --ext .jsx --ext .js --ext .tsx --ext .ts ./modules/ ./tests/","lint":"npm run eslint && npm run tsc","lint-lite":"npm run eslint-lite && npm run tsc-lite","lint-fix":"npm run eslint-fix","clean":"sh ./scripts/clean.sh","install-all":"npm i && npm i -C examples && npm i -C sandbox && npm i -C sandbox_simple","reinstall":"npm run clean && npm run install-all","smoke":"npm run lint && npm run test && npm run build-all && npm run check-hot","resmoke":"npm run reinstall && npm run smoke"},"repository":{"type":"git","url":"git+https://github.com/ukrbublik/react-awesome-query-builder.git"},"author":{"name":"Denis Oblogin","email":"ukrbublik@gmail.com","url":"https://github.com/ukrbublik"},"license":"MIT","bugs":{"url":"https://github.com/ukrbublik/react-awesome-query-builder/issues"},"homepage":"https://github.com/ukrbublik/react-awesome-query-builder","funding":"https://opencollective.com/react-awesome-query-builder","engines":{"node":">=12.13","npm":">=6"},"dependencies":{"@date-io/moment":"^1.3.13","classnames":"^2.3.1","clone":"^2.1.2","immutable":"^3.8.2","lodash":"^4.17.21","moment":"^2.29.4","prop-types":"^15.7.2","react-redux":"^7.2.2","redux":"^4.2.0","spel2js":"^0.2.8","sqlstring":"^2.3.3"},"peerDependencies":{"@ant-design/icons":"^4.0.0","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@fortawesome/fontawesome-svg-core":"^1.2.0 || ^6.1.0","@fortawesome/free-solid-svg-icons":"^5.15.4 || ^6.0.0","@fortawesome/react-fontawesome":"^0.1.16 || ^0.2.0","@material-ui/core":"^4.12.3","@material-ui/icons":"^4.0.0","@material-ui/lab":"^4.0.0-alpha.57","@material-ui/pickers":"^3.2.10","@mui/icons-material":"^5.2.4","@mui/lab":"^5.0.0-alpha.60","@mui/material":"^5.2.4","@mui/x-date-pickers":"^5.0.0-beta.2","antd":"^4.0.0","bootstrap":"^5.1.3","material-ui-confirm":"^2.0.1 || ^3.0.0","react":"^16.8.4 || ^17.0.1 || ^18.0.0","react-dom":"^16.8.4 || ^17.0.1 || ^18.0.0","reactstrap":"^9.0.0"},"devDependencies":{"@ant-design/icons":"^4.7.0","@babel/cli":"^7.14.5","@babel/core":"^7.14.5","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-proposal-decorators":"^7.14.5","@babel/plugin-proposal-private-methods":"^7.14.5","@babel/plugin-transform-modules-commonjs":"^7.14.5","@babel/plugin-transform-runtime":"^7.14.5","@babel/preset-env":"^7.14.5","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.14.5","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@fortawesome/fontawesome-svg-core":"^6.1.2","@fortawesome/free-solid-svg-icons":"^6.1.2","@fortawesome/react-fontawesome":"^0.2.0","@material-ui/core":"^4.12.3","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.57","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.4","@mui/lab":"^5.0.0-alpha.60","@mui/material":"^5.2.4","@mui/x-date-pickers":"^5.0.0-beta.6","@pmmmwh/react-refresh-webpack-plugin":"^0.5.7","@types/chai":"^4.2.18","@types/clone":"^2.1.1","@types/enzyme":"^3.10.8","@types/lodash":"^4.14.170","@types/mocha":"^9.0.0","@types/node":"^18.7.7","@types/prop-types":"^15.7.3","@types/react":"^18.0.17","@types/react-dom":"^18.0.6","@types/sinon":"^10.0.2","@typescript-eslint/eslint-plugin":"^5.3.0","@typescript-eslint/parser":"^5.3.0","@wojtekmaj/enzyme-adapter-react-17":"^0.6.3","antd":"^4.16.13","babel-loader":"^8.2.2","babel-plugin-import":"^1.13.3","babel-plugin-istanbul":"^6.0.0","bootstrap":"^5.1.3","chai":"^4.3.2","codecov":"^3.8.2","compression-webpack-plugin":"^9.0.0","cross-env":"^7.0.3","css-loader":"^6.2.0","dayjs":"^1.10.5","enzyme":"^3.11.0","eslint":"^8.8.0","eslint-import-resolver-webpack":"^0.13.1","eslint-plugin-babel":"^5.3.1","eslint-plugin-import":"^2.23.4","eslint-plugin-react":"^7.24.0","file-loader":"^6.2.0","karma":"^6.3.4","karma-chai":"^0.1.0","karma-chrome-launcher":"^3.1.0","karma-coverage":"^2.0.3","karma-es6-shim":"^1.0.0","karma-junit-reporter":"^2.0.1","karma-mocha":"^2.0.1","karma-mocha-reporter":"^2.2.5","karma-sourcemap-loader":"^0.3.8","karma-webpack":"^5.0.0","less":"^4.1.1","less-loader":"^10.0.0","material-ui-confirm":"^3.0.0","mini-css-extract-plugin":"^2.2.0","mocha":"^9.0.0","moment-locales-webpack-plugin":"^1.2.0","process":"^0.11.10","puppeteer":"^13.1.3","react":"^17.0.2","react-dom":"^17.0.2","react-refresh":"^0.14.0","react-router-dom":"^6.2.1","react-select":"^5.2.2","reactstrap":"^9.0.0","sass":"^1.35.0","sass-loader":"^12.1.0","sinon":"^13.0.1","style-loader":"^3.2.1","ts-loader":"^9.2.3","typescript":"~4.4.4","url-loader":"^4.1.1","webpack":"^5.61.0","webpack-bundle-analyzer":"^4.4.2","webpack-cli":"^4.9.1","webpack-dev-server":"^4.4.0"},"gitHead":"0dfca5d22a063c545001eaee5866ad49bf8ec396","_id":"@authsignal/react-awesome-query-builder@5.3.1","_nodeVersion":"17.6.0","_npmVersion":"8.5.1","dist":{"integrity":"sha512-SCflvxrSS3fX/duwLzqX4tlTcvRoARnypo/x8AHUWC3LKnv6sJrLOnyoH8m2gyYF2lKfqiWv3jrN52eDXo4srQ==","shasum":"6b6f75e7b9eea127e34bd6d6aac1a6cf309e0a5f","tarball":"https://registry.npmjs.org/@authsignal/react-awesome-query-builder/-/react-awesome-query-builder-5.3.1.tgz","fileCount":456,"unpackedSize":2208612,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClMXAe2yJ3zNuEc8c8TD4vcCc9osSdOf4hoffUi7f07QIhAOotYUpdmQczErhiYqT2mZ2tfAS9cQyf4dOszQxDpiW3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeq6iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqETQ//akJRAsffkfju4Hhh+C6sGkaeBXihKNSImKGxj+0mhelGN3Bg\r\njxLSYFbUYb5LIUDT0ybmlOlzOZ+vfTbY21/KxXyGR4wjsBmCU5mU9r2GzwiQ\r\nhdpV8/0mEqQ0wISfmblVTiYHAwck+5d0XRFnHowJ7Wv4DaQ+BXhyLysfQ5zV\r\nZg9In/q1JjZmSX8kegRnRPM71rRBn7nqmKsJ7nNTsFGdRnbwCvuaEQB+Skfr\r\nnZXXMXlmRmKG2xTcBW46zmlF0Fk4TWIemAVHPACYf0ycaTmVVQsbn9zS33uu\r\nAO56p1XP3j9YN5iKZHP/ThbREKe3T6oKQpIrHllZJ86uRCktQ0QekbH+TG+B\r\n4ArR4R7Nn7y+20r+UThtTw6+mtPCJxoFwqxDgB8of3uebw9vT6VOqyPqHoee\r\n9aIW5ujm6D4waLXpi+mDMm/auIyifm9fv4Y/jgRNgAYHrW28gWhtMatwYuN5\r\nXJn2oSS78U8LvH0fp0YO3RFwYlcD2GePK9vEPAfwD817JDKki/l+RwD/+azz\r\nY95EAVrGlLcMB3qezCVZwh+FPBfvXRhqOFGJJnroxuPYViLtpPe03LqHTJIK\r\ntRsDTAKWPt3MLGzZiwp2u7pIWegg7Yq4zkJ5HUiLBOVs8C4h39unWFzdlNxR\r\n/t/VTTijc74RMElp+7+xBmn+BeoCM1pqsbI=\r\n=O6jd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hwhmeikle","email":"hwhmeikle@gmail.com"},"directories":{},"maintainers":[{"name":"hwhmeikle","email":"hwhmeikle@gmail.com"},{"name":"chrisfisheras","email":"chris@authsignal.com"},{"name":"justinsoong","email":"justinsoong@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-awesome-query-builder_5.3.1_1668984482345_0.1874742986079978"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-18T01:47:41.607Z","5.1.0":"2022-11-18T01:47:41.959Z","modified":"2022-11-20T22:48:02.789Z","5.3.1":"2022-11-20T22:48:02.680Z"},"maintainers":[{"name":"hwhmeikle","email":"hwhmeikle@gmail.com"},{"name":"chrisfisheras","email":"chris@authsignal.com"},{"name":"justinsoong","email":"justinsoong@gmail.com"}],"description":"User-friendly query builder for React. Demo: https://ukrbublik.github.io/react-awesome-query-builder","homepage":"https://github.com/ukrbublik/react-awesome-query-builder","keywords":["query-builder","query","builder","query builder","react-query-builder","where","clause","operators","expression","react","reactjs","component","react-component","ui","antd","antdesign","ant-design","material","material-ui","material-design","configurable"],"repository":{"type":"git","url":"git+https://github.com/ukrbublik/react-awesome-query-builder.git"},"author":{"name":"Denis Oblogin","email":"ukrbublik@gmail.com","url":"https://github.com/ukrbublik"},"bugs":{"url":"https://github.com/ukrbublik/react-awesome-query-builder/issues"},"license":"MIT","readme":"\n

\n \n

\n\n\n[![npm](https://img.shields.io/npm/v/react-awesome-query-builder.svg)](https://www.npmjs.com/package/react-awesome-query-builder)\n[![Smoke](https://github.com/ukrbublik/react-awesome-query-builder/actions/workflows/smoke.yml/badge.svg?text=Test)](https://github.com/ukrbublik/react-awesome-query-builder/actions/workflows/smoke.yml?query=branch%3Amaster)\n[![travis](https://travis-ci.org/ukrbublik/react-awesome-query-builder.svg?branch=master)](https://travis-ci.com/github/ukrbublik/react-awesome-query-builder) \n[![codecov](https://codecov.io/gh/ukrbublik/react-awesome-query-builder/branch/master/graph/badge.svg?date=20201002)](https://codecov.io/gh/ukrbublik/react-awesome-query-builder)\n[![antd](https://img.shields.io/badge/skin-Ant%20Design-blue?logo=Ant%20Design)](https://ant.design)\n[![mui](https://img.shields.io/badge/skin-Material%20UI-blue?logo=MUI)](https://material-ui.com)\n[![bootstrap](https://img.shields.io/badge/skin-Bootstrap-blue?logo=Bootstrap)](https://reactstrap.github.io/)\n[![demo](https://img.shields.io/badge/demo-blue)](https://ukrbublik.github.io/react-awesome-query-builder/)\n[![sandbox TS](https://img.shields.io/badge/sandbox-TS-blue)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/sandbox?file=/src/demo/config_simple.tsx)\n[![sandbox JS](https://img.shields.io/badge/sandbox-JS-blue)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/sandbox_simple?file=/src/demo/config_simple.js)\n\n\nUser-friendly React component to build queries (filters).\n\nInspired by [jQuery QueryBuilder](http://querybuilder.js.org/). \nUsing awesome [Ant Design](https://ant.design/) v4 for widgets. \nNow [Material-UI](https://material-ui.com/) is also supported!\n\nSee [live demo](https://ukrbublik.github.io/react-awesome-query-builder) \n\n[![Open in codesandbox.io](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/sandbox?file=/src/demo/config_simple.tsx)\n\n* [Features](#features)\n* [Getting started](#getting-started)\n* [Usage](#usage)\n * [Minimal JavaScript example with class component](#minimal-javascript-example-with-class-component)\n * [Minimal TypeScript example with function component](#minimal-typescript-example-with-function-component)\n* [API](#api)\n * [Config format](#config-format)\n* [Versions](#versions)\n * [Changelog](#changelog)\n * [Migration to 5.2.0](#migration-to-520)\n * [Migration to 4.9.0](#migration-to-490)\n * [Migration from v1 to v2](#migration-from-v1-to-v2)\n* [Contributing](#contributing)\n * [Code Contributing](#code-contributing)\n * [Financial Contributing](#financial-contributing)\n\n\n### Features\n[![Screenshot](https://ukrbublik.github.io/react-awesome-query-builder/screenshot.png)](https://ukrbublik.github.io/react-awesome-query-builder)\n- Highly configurable\n- Fields can be of type:\n - simple (string, number, bool, date/time/datetime, list)\n - structs (will be displayed in selectbox as tree)\n - custom type (dev should add its own widget component in config for this)\n- Comparison operators can be:\n - binary (== != < > ..)\n - unary (is empty, is null)\n - 'between' (for numbers, dates, times)\n - complex operators like 'proximity'\n- Values of fields can be compared with:\n - values\n - another fields (of same type)\n - function (arguments also can be values/fields/funcs)\n- Reordering (drag-n-drop) support for rules and groups of rules\n- Themes:\n - [Ant Design](https://ant.design/)\n - [Material-UI](https://material-ui.com/)\n - [Bootstrap](https://reactstrap.github.io/)\n - vanilla\n (Using another UI framework and custom widgets is possible, see below)\n- Export to MongoDb, SQL, [JsonLogic](http://jsonlogic.com), [SpEL](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html), ElasticSearch or your custom format\n- Import from [JsonLogic](http://jsonlogic.com), [SpEL](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html)\n- TypeScript support (see [types](/modules/index.d.ts) and [demo in TS](/examples))\n\n\n## Getting started\nInstall: \n```\nnpm i react-awesome-query-builder --save\n```\n\nFor AntDesign widgets only:\n```\nnpm i antd @ant-design/icons --save\n```\n\nFor Material-UI 4 widgets only:\n```\nnpm i @material-ui/core @material-ui/lab @material-ui/icons @material-ui/pickers material-ui-confirm@2 --save\n```\n\nFor MUI 5 widgets only:\n```\nnpm i @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material @mui/x-date-pickers material-ui-confirm@3 --save\n```\n\nFor Bootstrap widgets only:\n```\nnpm i bootstrap reactstrap @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save\n```\n\nSee [basic usage](#usage) for minimum code example. \n\nSee [API](#api) and [config](#config-format) for documentation. \n\nDemo apps:\n- [`npm start`](/examples) - demo app with hot reload of demo code and local library code, uses TS, uses complex config to demonstrate anvanced usage.\n- [`npm run sandbox-ts`](/sandbox) - demo app with hot reload of only demo code (uses latest version of library from npm), uses TS, uses AntDesign widgets.\n- [`npm run sandbox-js`](/sandbox_simple) - demo app with hot reload of only demo code (uses latest version of library from npm), not uses TS, uses vanilla widgets.\n\n\n\n## Usage\n\n#### Minimal JavaScript example with class component\n```javascript\nimport React, {Component} from 'react';\nimport {Query, Builder, BasicConfig, Utils as QbUtils} from 'react-awesome-query-builder';\n\n// For AntDesign widgets only:\nimport AntdConfig from 'react-awesome-query-builder/lib/config/antd';\nimport 'antd/dist/antd.css'; // or import \"react-awesome-query-builder/css/antd.less\";\n// For MUI 4/5 widgets only:\nimport MaterialConfig from 'react-awesome-query-builder/lib/config/material';\nimport MuiConfig from 'react-awesome-query-builder/lib/config/mui';\n// For Bootstrap widgets only:\nimport BootstrapConfig from \"react-awesome-query-builder/lib/config/bootstrap\";\n\nimport 'react-awesome-query-builder/lib/css/styles.css';\nimport 'react-awesome-query-builder/lib/css/compact_styles.css'; //optional, for more compact styles\n\n// Choose your skin (ant/material/vanilla):\nconst InitialConfig = AntdConfig; // or MaterialConfig or MuiConfig or BootstrapConfig or BasicConfig\n\n// You need to provide your own config. See below 'Config format'\nconst config = {\n ...InitialConfig,\n fields: {\n qty: {\n label: 'Qty',\n type: 'number',\n fieldSettings: {\n min: 0,\n },\n valueSources: ['value'],\n preferWidgets: ['number'],\n },\n price: {\n label: 'Price',\n type: 'number',\n valueSources: ['value'],\n fieldSettings: {\n min: 10,\n max: 100,\n },\n preferWidgets: ['slider', 'rangeslider'],\n },\n color: {\n label: 'Color',\n type: 'select',\n valueSources: ['value'],\n fieldSettings: {\n listValues: [\n { value: 'yellow', title: 'Yellow' },\n { value: 'green', title: 'Green' },\n { value: 'orange', title: 'Orange' }\n ],\n }\n },\n is_promotion: {\n label: 'Promo?',\n type: 'boolean',\n operators: ['equal'],\n valueSources: ['value'],\n },\n }\n};\n\n// You can load query value from your backend storage (for saving see `Query.onChange()`)\nconst queryValue = {\"id\": QbUtils.uuid(), \"type\": \"group\"};\n\n\nclass DemoQueryBuilder extends Component {\n state = {\n tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), config),\n config: config\n };\n \n render = () => (\n
\n \n {this.renderResult(this.state)}\n
\n )\n\n renderBuilder = (props) => (\n
\n
\n \n
\n
\n )\n\n renderResult = ({tree: immutableTree, config}) => (\n
\n
Query string: 
{JSON.stringify(QbUtils.queryString(immutableTree, config))}
\n
MongoDb query: 
{JSON.stringify(QbUtils.mongodbFormat(immutableTree, config))}
\n
SQL where: 
{JSON.stringify(QbUtils.sqlFormat(immutableTree, config))}
\n
JsonLogic: 
{JSON.stringify(QbUtils.jsonLogicFormat(immutableTree, config))}
\n
\n )\n \n onChange = (immutableTree, config) => {\n // Tip: for better performance you can apply `throttle` - see `examples/demo`\n this.setState({tree: immutableTree, config: config});\n\n const jsonTree = QbUtils.getTree(immutableTree);\n console.log(jsonTree);\n // `jsonTree` can be saved to backend, and later loaded to `queryValue`\n }\n}\n```\n\n#### Minimal TypeScript example with function component\n([Codesandbox](https://codesandbox.io/s/relaxed-sun-erhnu?file=/src/demo/demo.tsx))\n```typescript\nimport React, { useState, useCallback } from \"react\";\nimport { Query, Builder, Utils as QbUtils } from \"react-awesome-query-builder\";\n// types\nimport {\n JsonGroup,\n Config,\n ImmutableTree,\n BuilderProps\n} from \"react-awesome-query-builder\";\n\n// For AntDesign widgets only:\nimport AntdConfig from \"react-awesome-query-builder/lib/config/antd\";\nimport \"antd/dist/antd.css\"; // or import \"react-awesome-query-builder/css/antd.less\";\n// For MUI 4/5 widgets only:\n//import MaterialConfig from 'react-awesome-query-builder/lib/config/material';\n//import MuiConfig from 'react-awesome-query-builder/lib/config/mui';\n// For Bootstrap widgets only:\n//import BootstrapConfig from \"react-awesome-query-builder/lib/config/bootstrap\";\n\nimport \"react-awesome-query-builder/lib/css/styles.css\";\nimport \"react-awesome-query-builder/lib/css/compact_styles.css\"; //optional, for more compact styles\n\n// Choose your skin (ant/material/vanilla):\nconst InitialConfig = AntdConfig; // or MaterialConfig or MuiConfig or BootstrapConfig or BasicConfig\n\n// You need to provide your own config. See below 'Config format'\nconst config: Config = {\n ...InitialConfig,\n fields: {\n qty: {\n label: \"Qty\",\n type: \"number\",\n fieldSettings: {\n min: 0\n },\n valueSources: [\"value\"],\n preferWidgets: [\"number\"]\n },\n price: {\n label: \"Price\",\n type: \"number\",\n valueSources: [\"value\"],\n fieldSettings: {\n min: 10,\n max: 100\n },\n preferWidgets: [\"slider\", \"rangeslider\"]\n },\n color: {\n label: \"Color\",\n type: \"select\",\n valueSources: [\"value\"],\n fieldSettings: {\n listValues: [\n { value: \"yellow\", title: \"Yellow\" },\n { value: \"green\", title: \"Green\" },\n { value: \"orange\", title: \"Orange\" }\n ]\n }\n },\n is_promotion: {\n label: \"Promo?\",\n type: \"boolean\",\n operators: [\"equal\"],\n valueSources: [\"value\"]\n }\n }\n};\n\n// You can load query value from your backend storage (for saving see `Query.onChange()`)\nconst queryValue: JsonGroup = { id: QbUtils.uuid(), type: \"group\" };\n\nexport const Demo: React.FC = () => {\n const [state, setState] = useState({\n tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), config),\n config: config\n });\n\n const onChange = useCallback((immutableTree: ImmutableTree, config: Config) => {\n // Tip: for better performance you can apply `throttle` - see `examples/demo`\n setState(prevState => { ...prevState, tree: immutableTree, config: config });\n\n const jsonTree = QbUtils.getTree(immutableTree);\n console.log(jsonTree);\n // `jsonTree` can be saved to backend, and later loaded to `queryValue`\n }, []);\n\n const renderBuilder = useCallback((props: BuilderProps) => (\n
\n
\n \n
\n
\n ), []);\n\n return (\n
\n \n
\n
\n Query string:{\" \"}\n 
\n            {JSON.stringify(QbUtils.queryString(state.tree, state.config))}\n
\n
\n
\n MongoDb query:{\" \"}\n 
\n            {JSON.stringify(QbUtils.mongodbFormat(state.tree, state.config))}\n
\n
\n
\n SQL where:{\" \"}\n 
\n            {JSON.stringify(QbUtils.sqlFormat(state.tree, state.config))}\n
\n
\n
\n JsonLogic:{\" \"}\n 
\n            {JSON.stringify(QbUtils.jsonLogicFormat(state.tree, state.config))}\n
\n
\n
\n
\n );\n};\n```\n\n\n\n## API\n\n### ``\nProps:\n- `{...config}` - destructured query [`CONFIG`](/CONFIG.adoc)\n- `value` - query value in internal [Immutable](https://immutable-js.github.io/immutable-js/) format\n- `onChange` - callback when query value changed. Params: `value` (in Immutable format), `config`, `actionMeta` (details about action which led to the change, see `ActionMeta` in [`index.d.ts`](/modules/index.d.ts)).\n- `renderBuilder` - function to render query builder itself. Takes 1 param `props` you need to pass into ``.\n\n*Notes*:\n- Please apply `useCallback` for `onChange` and `renderBuilder` for performance reason\n- If you put query builder component inside [Material-UI](https://github.com/mui-org/material-ui)'s `` or ``, please:\n - use prop `disableEnforceFocus={true}` for dialog or popver\n - set css `.MuiPopover-root, .MuiDialog-root { z-index: 900 !important; }` (or 1000 for AntDesign v3)\n- If you put query builder component inside [Fluent-UI](https://developer.microsoft.com/en-us/fluentui)'s ``, please:\n - set css `.ms-Layer.ms-Layer--fixed.root-119 { z-index: 900 !important; }`\n- `props` arg in `renderBuilder` have `actions` and `dispatch` you can use to run actions programmatically (for list of actions see `Actions` in [`index.d.ts`](/modules/index.d.ts)).\n\n### ``\nRender this component only inside `Query.renderBuilder()` like in example above:\n```js\n renderBuilder = (props) => (\n
\n
\n \n
\n
\n )\n```\nWrapping `` in `div.query-builder` is necessary. \nOptionally you can add class `.qb-lite` to it for showing action buttons (like delete rule/group, add, etc.) only on hover, which will look cleaner. \nWrapping in `div.query-builder-container` is necessary if you put query builder inside scrollable block. \n\n### `Utils`\n- Save, load:\n #### getTree (immutableValue, light = true, children1AsArray = true) -> Object\n Convert query value from internal Immutable format to JS format. \n You can use it to save value on backend in `onChange` callback of ``. \n Tip: Use `light = false` in case if you want to store query value in your state in JS format and pass it as `value` of `` after applying `loadTree()` (which is not recommended because of double conversion). See issue [#190](https://github.com/ukrbublik/react-awesome-query-builder/issues/190)\n #### loadTree (jsValue, config) -> Immutable\n Convert query value from JS format to internal Immutable format. \n You can use it to load saved value from backend and pass as `value` prop to `` (don't forget to also apply `checkTree()`).\n #### checkTree (immutableValue, config) -> Immutable\n Validate query value corresponding to config. \n Invalid parts of query (eg. if field was removed from config) will be always deleted. \n Invalid values (values not passing `validateValue` in config, bad ranges) will be deleted if `showErrorMessage` is false OR marked with errors if `showErrorMessage` is true.\n #### isValidTree (immutableValue) -> Boolean\n If `showErrorMessage` in config.settings is true, use this method to check is query has bad values.\n- Export:\n #### queryString (immutableValue, config, isForDisplay = false) -> String\n Convert query value to custom string representation. `isForDisplay` = true can be used to make string more \"human readable\".\n #### mongodbFormat (immutableValue, config) -> Object\n Convert query value to MongoDb query object.\n #### sqlFormat (immutableValue, config) -> String\n Convert query value to SQL where string.\n #### spelFormat (immutableValue, config) -> String\n Convert query value to [Spring Expression Language (SpEL)](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html).\n #### elasticSearchFormat (immutableValue, config) -> Object\n Convert query value to ElasticSearch query object.\n #### jsonLogicFormat (immutableValue, config) -> {logic, data, errors}\n Convert query value to [JsonLogic](http://jsonlogic.com) format. \n If there are no `errors`, `logic` will be rule object and `data` will contain all used fields with null values (\"template\" data).\n- Import:\n #### loadFromJsonLogic (jsonLogicObject, config) -> Immutable\n Convert query value from [JsonLogic](http://jsonlogic.com) format to internal Immutable format. \n #### _loadFromJsonLogic (jsonLogicObject, config) -> [Immutable, errors]\n #### loadFromSpel (string, config) -> [Immutable, errors]\n Convert query value from [Spring Expression Language (SpEL)](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html) format to internal Immutable format. \n\n\n\n### Config format\nThis library uses configarion driven aproach. \nConfig defines what value types, operators are supported, how they are rendered, imported, exported. \nAt minimum, you need to provide your own set of fields as in [basic usage](#usage). \nSee [`CONFIG`](/CONFIG.adoc) for full documentation.\n\n\n\n## Versions\n\nVersions 5.x are backward-compatible with 2.x 3.x 4.x. \nIt's recommended to update your version.\n\n### Supported versions\n| Version | Supported |\n| ------- | ------------------ |\n| 5.x | :white_check_mark: |\n| 4.x | :white_check_mark: |\n| 3.x | :white_check_mark: |\n| 2.x | :white_check_mark: |\n| 1.x | :warning: |\n| 0.x | :x: |\n\n### Changelog\nSee [`CHANGELOG`](/CHANGELOG.md)\n\n### Migration to 5.2.0\nBreaking change: `children1` is now an indexed array (instead of object) in result of `Utils.getTree()` to preserve items order. \nBefore:\n```js\nchildren1: {\n '': { type: 'rule', properties: ... },\n '': { type: 'rule', properties: ... }\n}\n```\nAfter:\n```js\nchildren1: [\n { id: '', type: 'rule', properties: ... },\n { id: '', type: 'rule', properties: ... },\n]\n```\n`Utils.loadTree()` is backward comatible with children1 being array or object. \nBut if you rely on previous format (maybe do post-processing of `getTree()` result), please use `Utils.getTree(tree, true, false)` - it will behave same as before this change. \n\n### Migration to 4.9.0\nVersion 4.9.0 has a breaking change for operators `is_empty` and `is_not_empty`. \nNow these operators can be used for text type only (for other types they will be auto converted to `is_null`/`is_not_null` during loading of query value created with previous versions). \nChanged meaning of `is_empty` - now it's just strict comparing with empty string. \nBefore change the meaning was similar to `is_null`. \nIf you used `is_empty` for text types with intention of comparing with null, please replace `is_empty` -> `is_null`, `is_not_empty` -> `is_not_null` in saved query values. \nIf you used JsonLogic for saving, you need to replace `{\"!\": {\"var\": \"your_field\"}}` -> `{\"==\": [{\"var\": \"your_field\"}, null]}` and `{\"!!\": {\"var\": \"your_field\"}}` -> `{\"!=\": [{\"var\": \"your_field\"}, null]}`.\n\n### Migration from v1 to v2\nFrom v2.0 of this lib AntDesign is now optional (peer) dependency, so you need to explicitly include `antd` (4.x) in `package.json` of your project if you want to use AntDesign UI. \nPlease import `AntdConfig` from `react-awesome-query-builder/lib/config/antd` and use it as base for your config (see below in [usage](#usage)). \nAlternatively you can use `BasicConfig` for simple vanilla UI, which is by default. \nSupport of other UI frameworks (like Bootstrap) are planned for future, see [Other UI frameworks](#other-ui-frameworks).\n\n\n\n## Contributing\n\n### Code Contributing\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\n\n### Financial Contributing\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/react-awesome-query-builder/contribute)]\n\nIf you mention in an GitHub issue that you are a sponsor, we will prioritize helping you.\n\nAs a sponsor you can ask to implement a feature that is not in a todo list or motivate for faster implementation.\n\n#### Individuals\n\n\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/react-awesome-query-builder/contribute)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\nMIT. See also `LICENSE.txt`\n\nForked from [https://github.com/fubhy/react-query-builder](https://github.com/fubhy/react-query-builder)\n","readmeFilename":"README.md"}