Search Query Builder

a form to build queries

Install

npm install --save search-query-builder

Usage

import React from 'react';

import SearchQueryBuilder from 'search-query-builder';

const theme = {
     primaryColor:'purple',
     secondaryColor:'black',
     accentColor:'orange',
     lightestColor:'white',
     darkestColor:'black'
};

const uiConfig = {
    addRuleButton:  {
        text: 'RULE',
        className: 'add-rule-btn',
        icon: 'plus'
    },
    addGroupButton: {
        text: 'GROUP',
        className: 'add-group-btn',
        icon: 'plus-circle'
    },
    buildButton:  {
        text: 'BUILD',
        className: 'build-btn'

    },
    resetButton:  {
        text: 'RESET',
        className: 'reset-btn'
    }
};

const mainConfig = {
       'CATEGORY': [
           {
               'type': 'option',
               'items': [
                   {
                       'name': 'First'
                   },
                   {
                       'name': 'Second'
                   },
                   {
                       'name': 'Third'
                   }
               ]
           }
       ]
};

# TBD;
const mainConfig_v2 = {
       'CATEGORY': {
            'operators': ['is', 'is not'],
            'values' :[
                 {
                     'type': 'category',
                     'items': ['First', 'Second', 'Third' ]
                 }
            ]
       }   
};

const defaultQuery = {
    condition: 'OR',
    children: [
        {
            type: 'RULE',
            name: 'CATEGORY',
            properties:{
                'option' : 'Third'
            }       
        },
        {
            type: 'RULE',
            name: 'CATEGORY',
            properties:{
                'option' : 'First'
            }       
        }
    ]
};

const conditions = ['AND', 'OR'];

const minimalMode = false;

const outputType = 'JSON';

function YourComponent() {
    return (
        <SearchQueryBuilder
            mainConfig={mainConfig} // all options is required
            uiConfig={uiConfig} // elements configuration [in progress]
            theme={theme} // colors
            minimalMode={minimalMode} // everything black and white 
            conditions={conditions} // all conditions default [AND OR]
            defaultSelectedConditionIndex={0} // selected selected condition default [0]
            defaultQuery={defaultQuery} //elements which will be selected default [none]
            outputType={outputType} // type of the parameter below default JSON [[TBD]]
            onSubmitted={builtQuery => {
                // do smth 
            }}
        />
    )
}