@evoke-platform/ui-components 1.0.0-dev.154 → 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" },
@@ -103,23 +127,23 @@ export const customValueEditorWithPresets = (props) => {
         }, options: presetValues !== null && presetValues !== void 0 ? presetValues : [
             {
                 label: 'User ID',
-                value: { name: '{{user.id}}', label: 'UserId', sublabel: 'Currently logged in user' },
+                value: { name: '{{{user.id}}}', label: 'UserId', sublabel: 'Currently logged in user' },
             },
         ], isOptionEqualToValue: (option, value) => {
             return option === value;
         }, getOptionLabel: (option) => {
             var _a;
-            if (option === '{{user.id}}')
+            if (option === '{{{user.id}}}')
                 return 'User ID';
             return (_a = option.label) !== null && _a !== void 0 ? _a : option;
-        }, disabled: ['null', 'notNull'].includes(props.operator), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value.startsWith('{{') && value.endsWith('}}'), onChange: (event) => {
+        }, disabled: ['null', 'notNull'].includes(props.operator), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value.includes('{{{') && value.includes('}}}'), onChange: (event) => {
                 handleOnChange(event.target.value);
             } }))), renderOption: (props, option) => {
             return (React.createElement(MenuItem, Object.assign({}, props, { sx: { padding: '0px 8px' } }),
                 React.createElement(Box, { padding: 0, margin: 0 },
                     React.createElement(Typography, { fontSize: '14px', fontWeight: 500 }, option.label),
                     option.value.sublabel && React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171, 1)' }, option.value.sublabel))));
-        }, componentsProps: { popper: { style: { width: 'fit-content' } } }, sx: { width: '33%' } }));
+        }, componentsProps: { popper: { style: { minWidth: '200px', width: 'fit-content' } } }, sx: { width: '33%' } }));
     return determineValueEditor(valueEditor, props);
 };
 export const customValueEditor = (props) => {
@@ -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.154",
+    "version": "1.0.0-dev.156",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",