Sélectionner une page


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:: <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);;

}}

}}



Source link

Recent Posts