@evoke-platform/ui-components 1.0.0-dev.155 → 1.0.0-dev.156

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -1,7 +1,7 @@
 import { RemoveCircleOutline } from '@mui/icons-material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import React, { useEffect, useMemo, useState } from 'react';
-import { QueryBuilder, formatQuery, parseMongoDB, } from 'react-querybuilder';
+import { QueryBuilder, formatQuery, parseMongoDB, useRuleGroup, TestID, RuleGroupBodyComponents, RuleGroupHeaderComponents, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import { Autocomplete, Button, DatePicker, IconButton, LocalizationProvider, MenuItem, TextField, Typography, } from '../../core';
 import { Box } from '../../layout';
@@ -26,6 +26,43 @@ const ALL_OPERATORS = [
     { name: 'between', label: 'between' },
     { name: 'notBetween', label: 'not between' },
 ];
+const CustomRuleGroup = (props) => {
+    const rg = Object.assign(Object.assign({}, props), useRuleGroup(props));
+    const [addRule, addGroup, cloneGroup, toggleLockGroup, removeGroup] = [
+        rg.addRule,
+        rg.addGroup,
+        rg.cloneGroup,
+        rg.toggleLockGroup,
+        rg.removeGroup,
+    ].map(f => (event, context) => {
+        event.preventDefault();
+        event.stopPropagation();
+        f(event, context);
+    });
+    const subComponentProps = Object.assign(Object.assign({}, rg), { addRule,
+        addGroup,
+        cloneGroup,
+        toggleLockGroup,
+        removeGroup });
+    return (React.createElement("div", { ref: rg.previewRef, className: rg.outerClassName, "data-testid": TestID.ruleGroup, "data-dragmonitorid": rg.dragMonitorId, "data-dropmonitorid": rg.dropMonitorId, "data-rule-group-id": rg.id, "data-level": rg.path.length, "data-path": JSON.stringify(rg.path) },
+        React.createElement("div", { className: rg.classNames.body },
+            React.createElement(RuleGroupBodyComponents, Object.assign({}, subComponentProps))),
+        React.createElement("div", { ref: rg.dropRef, className: rg.classNames.header },
+            React.createElement(RuleGroupHeaderComponents, Object.assign({}, subComponentProps, { schema: Object.assign(Object.assign({}, subComponentProps.schema), { controls: Object.assign({}, subComponentProps.schema.controls) }) })))));
+};
+const customButton = (props) => {
+    const { title, handleOnClick, label } = props;
+    let buttonLabel = label;
+    switch (title) {
+        case 'Add group':
+            buttonLabel = '+ Condition Group';
+            break;
+        case 'Add rule':
+            buttonLabel = '+ Condition';
+            break;
+    }
+    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", sx: { backgroundColor: '#ebf4f8', color: '#0678a9', boxShadow: 'none' } }, buttonLabel));
+};
 const customSelector = (props) => {
     var _a, _b;
     const { options, value, handleOnChange, title } = props;
@@ -75,19 +112,6 @@ const customCombinator = (props) => {
             },
         }, disableClearable: true }));
 };
-const customButton = (props) => {
-    const { title, handleOnClick, label } = props;
-    let buttonLabel = label;
-    switch (title) {
-        case 'Add group':
-            buttonLabel = '+ Condition Group';
-            break;
-        case 'Add rule':
-            buttonLabel = '+ Condition';
-            break;
-    }
-    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", sx: { backgroundColor: '#ebf4f8', color: '#0678a9', boxShadow: 'none' } }, buttonLabel));
-};
 const customDelete = (props) => {
     const { handleOnClick } = props;
     return (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
@@ -320,6 +344,7 @@ const CriteriaBuilder = (props) => {
                         operatorSelector: customSelector,
                         addGroupAction: customButton,
                         addRuleAction: customButton,
+                        ruleGroup: CustomRuleGroup,
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
                         valueEditor: enablePresetValues

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.155",
+    "version": "1.0.0-dev.156",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",