importer Réagir, {composant}} de ‘réagir‘;;

importer {mettre en doute, constructeur, BasicConfig, Utils comment QbUtils}} de ‘Réagissez-Awesome-Query-Builder‘;;

importer AntdConfig de ‘React-Awesome-Query-Builder / lib / config / antd‘;;

importer ‘Réagissez-Awesome-Query-Builder / CSS / Antd.less‘;;

importer MaterialConfig de ‘Réagissez-Awesome-Query-Builder / lib / config / material‘;;

const InitialConfig = AntdConfig;;

importer ‘React-Awesome-Query-Builder / lib / css / styles.css‘;;

importer ‘React-Awesome-Query-Builder / lib / css / compact_styles.css‘;;

const config = {

…InitialConfig,

Des champs:: {

quantité:: {

étiquette:: ‘quantité‘,

De l’art:: ‘numéro‘,

fieldSettings:: {

Le minimum:: 0,

}},

valeurSources:: [‘value‘],

préfère les widgets:: [‘number‘],

}},

le prix:: {

étiquette:: ‘le prix‘,

De l’art:: ‘numéro‘,

valeurSources:: [‘value‘],

fieldSettings:: {

Le minimum:: dix,

Max:: 100,

}},

préfère les widgets:: [‘slider‘, ‘rangeslider‘],

}},

Couleur:: {

étiquette:: ‘Couleur‘,

De l’art:: ‘choisir‘,

valeurSources:: [‘value‘],

fieldSettings:: {

listValues:: [

            { value: ‘yellow‘, title: ‘Yellow‘ },

            { value: ‘green‘, title: ‘Green‘ },

            { value: ‘orange‘, title: ‘Orange‘ }

          ],

}}

}},

is_promotion:: {

étiquette:: ‘Promo?‘,

De l’art:: ‘Valeur booléenne‘,

opérateur:: [‘equal‘],

valeurSources:: [‘value‘],

}},

}}

}};;

const queryValue = {«  »je voudrais«  »:: QbUtils.uuid((), «  »De l’art«  »:: «  »grouper«  »}};;

classer DemoQueryBuilder étendu composant {

Statut = {

arbre:: QbUtils.checkTree((QbUtils.loadTree((queryValue), config),

config:: config

}};;

fais = (() => ((

<div>

<mettre en doute

{…config}}

valeur={celles-ci.Statut.arbre}}

au changement={celles-ci.au changement}}

renderBuilder={celles-ci.renderBuilder}}

/.>

{celles-ci.renderResult((celles-ci.Statut)}}

</.div>

)

renderBuilder = ((accessoires) => ((

<div className=«  »Conteneur du générateur de requêtes«  » style={{tapisserie:: ‘10px‘}}}}>

<div className=«  »Générateur de requêtes qb-lite«  »>

<constructeur {…accessoires}} /.>

</.div>

</.div>

)

renderResult = (({arbre:: arbre immuable, config}}) => ((

<div className=«  »Résultat du générateur de requêtes«  »>

<div>Chaîne de requête:: <Devant>{JSON.stringifier((QbUtils.chaîne de requête((arbre immuable, config))}}</.Devant></.div>

<div>Requête MongoDb:: <Devant>{JSON.stringifier((QbUtils.format mongodb((arbre immuable, config))}}</.Devant></.div>

<div>SQL Où:: <Devant>{JSON.stringifier((QbUtils.sqlFormat((arbre immuable, config))}}</.Devant></.div>

<div>JsonLogic:: <Devant>{JSON.stringifier((QbUtils.jsonLogicFormat((arbre immuable, config))}}</.Devant></.div>

</.div>

)

au changement = ((arbre immuable, config) => {

celles-ci.setState(({arbre:: arbre immuable, config:: config}});;

const jsonTree = QbUtils.getTree((arbre immuable);;

console.Journal((jsonTree);;

}}

}}