@evoke-platform/ui-components 1.0.0-dev.100 → 1.0.0-dev.102

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ValueEditorProps } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import { AutocompleteOption } from '../../core';
@@ -21,6 +21,10 @@ declare type CriteriaInputProps = {
     setCriteria: Function;
     criteria?: Record<string, any>;
     enablePresetValues?: boolean;
+    dynamicContentInput?: {
+        component: React.ElementType;
+        previousSteps: unknown[];
+    };
     operators?: Operator[];
 };
 export declare const customValueEditorWithPresets: (props: CustomValueEditorProps) => JSX.Element;

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

@@ -126,6 +126,16 @@ export const customValueEditor = (props) => {
         }, placeholder: "Value", size: "small", sx: { width: '33%' } }));
     return determineValueEditor(valueEditor, props);
 };
+const dynamicContentInputEditor = (props) => {
+    var _a, _b, _c;
+    const { operator, value, handleOnChange } = props;
+    const DynamicContentInput = (_a = props.context) === null || _a === void 0 ? void 0 : _a.dynamicContentInput.component;
+    let valueEditor;
+    if (DynamicContentInput) {
+        valueEditor = (React.createElement(DynamicContentInput, { values: ['null', 'notNull'].includes(operator) ? '' : value, setValues: handleOnChange, disabled: ['null', 'notNull'].includes(operator), isSingleValue: true, size: 'small', previousSteps: (_c = (_b = props.context) === null || _b === void 0 ? void 0 : _b.previousSteps) !== null && _c !== void 0 ? _c : [] }));
+    }
+    return determineValueEditor(valueEditor, props);
+};
 const determineValueEditor = (baseValueEditor, props) => {
     const { handleOnChange, value, values, type, operator, inputType } = props;
     const disabled = ['null', 'notNull'].includes(operator);
@@ -170,7 +180,7 @@ const determineValueEditor = (baseValueEditor, props) => {
     return valueEditor;
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, enablePresetValues, operators } = props;
+    const { properties, criteria, setCriteria, enablePresetValues, operators, dynamicContentInput } = props;
     const [query, setQuery] = useState(undefined);
     useEffect(() => {
         if (criteria) {
@@ -208,7 +218,7 @@ const CriteriaBuilder = (props) => {
     };
     const fields = useMemo(() => {
         return properties.map((property) => {
-            return Object.assign({ name: property.id, label: property.name, inputType: property.type }, (property.enum && {
+            return Object.assign({ name: property.type === 'object' ? `${property.id}.id` : property.id, label: property.name, inputType: property.type }, (property.enum && {
                 valueEditorType: property.type === 'array' ? 'multiselect' : 'select',
                 values: property.enum.map((item) => ({ name: item, label: item })),
             }));
@@ -231,7 +241,7 @@ const CriteriaBuilder = (props) => {
                 },
             } },
             React.createElement(QueryBuilderMaterial, null,
-                React.createElement(QueryBuilder, { query: query, fields: fields, onQueryChange: (q) => {
+                React.createElement(QueryBuilder, { query: !criteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
                         handleQueryChange(q);
                     }, showCombinatorsBetweenRules: true, listsAsArrays: true, controlElements: {
                         combinatorSelector: customCombinator,
@@ -241,8 +251,8 @@ const CriteriaBuilder = (props) => {
                         addRuleAction: customButton,
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
-                        valueEditor: enablePresetValues ? customValueEditorWithPresets : customValueEditor,
-                    }, controlClassnames: {
+                        valueEditor: enablePresetValues ? customValueEditorWithPresets : dynamicContentInput ? dynamicContentInputEditor : customValueEditor,
+                    }, context: { dynamicContentInput: dynamicContentInput }, controlClassnames: {
                         queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',
                     }, operators: operators ? ALL_OPERATORS.filter((o) => operators.includes(o.name)) : ALL_OPERATORS }))));

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -70,7 +70,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }
-            : undefined, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !!readOnly })) : (React.createElement(InputMask, { mask: mask, value: value, onChange: !readOnly ? handleChange : undefined, alwaysShowMask: true },
+            : undefined, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !!readOnly })) : (React.createElement(InputMask, { mask: mask, value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true },
         React.createElement(TextField, { id: id, sx: readOnly
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
@@ -81,6 +81,6 @@ const InputFieldComponent = (props) => {
                         backgroundColor: '#f4f6f8',
                     },
                 }
-                : undefined, error: error, errorMessage: errorMessage, onBlur: onBlur, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), fullWidth: true, type: property.type === 'integer' ? 'number' : 'text' })));
+                : undefined, error: error, errorMessage: errorMessage, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), fullWidth: true, type: property.type === 'integer' ? 'number' : 'text' })));
 };
 export default InputFieldComponent;

package/dist/published/stories/CriteriaBuilder.stories.d.ts

@@ -1,10 +1,14 @@
-/// <reference types="react" />
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
 declare const _default: ComponentMeta<(props: {
     properties: import("../components/custom/CriteriaBuilder/CriteriaBuilder").ObjectProperty[];
     setCriteria: Function;
     criteria?: Record<string, any> | undefined;
     enablePresetValues?: boolean | undefined;
+    dynamicContentInput?: {
+        component: React.ElementType<any>;
+        previousSteps: unknown[];
+    } | undefined;
     operators?: ("endsWith" | "in" | "=" | "=!" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
 }) => JSX.Element>;
 export default _default;
@@ -13,6 +17,10 @@ export declare const CriteriaBuilder: ComponentStory<(props: {
     setCriteria: Function;
     criteria?: Record<string, any> | undefined;
     enablePresetValues?: boolean | undefined;
+    dynamicContentInput?: {
+        component: React.ElementType<any>;
+        previousSteps: unknown[];
+    } | undefined;
     operators?: ("endsWith" | "in" | "=" | "=!" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
 }) => JSX.Element>;
 export declare const CriteriaBuilderPresetValues: ComponentStory<(props: {
@@ -20,5 +28,9 @@ export declare const CriteriaBuilderPresetValues: ComponentStory<(props: {
     setCriteria: Function;
     criteria?: Record<string, any> | undefined;
     enablePresetValues?: boolean | undefined;
+    dynamicContentInput?: {
+        component: React.ElementType<any>;
+        previousSteps: unknown[];
+    } | undefined;
     operators?: ("endsWith" | "in" | "=" | "=!" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
 }) => JSX.Element>;

package/package.json

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