gw-query-builder v0.0.25
gw-query-builder
User-friendly React component to build queries.
Forked from https://github.com/fubhy/react-query-builder
Inspired by jQuery QueryBuilder
Using awesome Ant Design for widgets
Features
- Highly configurable
- Fields can be of type:
- simple (string, number, bool, date/time/datetime, list)
- structs (will be displayed in selectbox as tree of members)
- custom type (dev should add its own widget component for this) (it's not complex, you can add slider for example)
- Comparison operators can be:
- binary (== != < > ..)
- unary (is empty, is null)
- 'between' (for numbers)
- complex operators like 'proximity'
- Values of fields can be compared with values -or- another fields (of same type)
- Reordering support for rules and groups of rules
- Using awesome Ant Design
- Export to MongoDb or SQL
- Basic/Advanced Query
- Parameter for Each single Rule
- Export Different QueryString( JS script, Huamn Readable String)
- Export Parameterized Properties
- Export ConfigGetter (Support 3 DataTypes (string,integer,boolean,object(nested object)) now. )
- Export RuleOnly Feature ( specialized for Parameterized Feature )
- Support GetFields By Json Schema
Install
Install: npm i gw-query-builder
See examples/demo
as example of usage and configuration.
For full reordering support you need to add class query-builder-container
for dom-element which is holding your querybuilder component AND has scrolling. If there is no such dom-element (only body) you can do nothing.
Use
import React, {Component} from 'react';
import {Query, Builder, Utils as QbUtils} from 'gw-query-builder';
import 'gw-query-builder/css/styles.scss';
import 'gw-query-builder/css/compact_styles.scss';
import 'gw-query-builder/css/denormalize.scss';
const fields=[
{
id:'Name',
label:'Full name',
dType: 'string'
},
{
id:'Age',
label:'Age',
dType: 'integer'
},
{
id:'Single',
label:'Single',
dType: 'boolean'
}
];
// Json Schema Tool : https://jsonschema.net/
//or get fileds by json schema
// const schema="{
// "definitions": {},
// "$schema": "http://json-schema.org/draft-07/schema#",
// "$id": "http://example.com/root.json",
// "type": "object",
// "title": "The Root Schema",
// "required": [
// "checked",
// "id"
// ],
// "properties": {
// "checked": {
// "$id": "#/properties/checked",
// "type": "boolean",
// "title": "The Checked Schema",
// "default": false,
// "examples": [
// false
// ]
// },
// "id": {
// "$id": "#/properties/id",
// "type": "integer",
// "title": "The Id Schema",
// "default": 0,
// "examples": [
// 1
// ]
// }
// }
// }";
// const fields=QbUtils.getFields(JSON.parse(schema));
class DemoQueryBuilder extends Component {
render() {
const config=QbUtils.configGetter(fields);
return (
<div>
<Query
{...config}
//you can pass object here, see treeJSON at onChange
//value=transit.fromJSON(treeJSON)
get_children={this.getChildren}
onChange={this.onChange}
></Query>
</div>
);
}
getChildren(props) {
return (
<div>
<div className="query-builder">
<Builder {...props}
queryType="advanced"
ruleOnly={false}
/>
</div>
<div>Query string: {QbUtils.queryString(props.tree, props.config)}</div>
<div>Mongodb query: {QbUtils.mongodbFormat(props.tree, props.config)}</div>
</div>
)
}
onChange(tree) {
//here you can save tree object:
//var treeJSON = transit.toJSON(tree)
}
}
Use can save tree as serialized Immutable object with transit.toJSON
/transit.fromJSON
-or- as plain JS, see loadTree = function(serTree) {...}
at examples/demo/demo.js
(using Immutable.fromJS
with a little trick)
Development
To build the component locally, clone this repo then run:
npm install
npm run examples
Then open localhost:3001 in a browser.
Scripts:
npm run build-npm
- Builds a npm module. Output path:build/npm
npm run build-global
- Builds with webpack the self contained pack of the component. Output path:build/global
npm run build-examples
- Builds with webpack the examples. Output path:examples
npm run examples
- Builds with webpack the examples and runs a dev-server on localhost:3001.sh ./scripts/gh-pages.sh
- Update gh pages
The repo sticks in general to the Airbnb JavaScript Style Guide.
Pull Requests are always welcomed :)
License
MIT. See also LICENSE.txt
S react-query-builder
$ react-query-builder
react-query-builder
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago