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� �r�e�a�c�t�-�q�u�e�r�y�-�b�u�i�l�d�e�r� � �$� �r�e�a�c�t�-�q�u�e�r�y�-�b�u�i�l�d�e�r� � �#� �r�e�a�c�t�-�q�u�e�r�y�-�b�u�i�l�d�e�r� � �