@evoke-platform/ui-components 1.0.0-dev.239 → 1.0.0-dev.241

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

@@ -9,22 +9,22 @@ import { Box } from '../../layout';
 import { difference } from '../util';
 import ValueEditor from './ValueEditor';
 const ALL_OPERATORS = [
-    { name: '=', label: '=' },
-    { name: '!=', label: '!=' },
-    { name: '<', label: '<' },
-    { name: '>', label: '>' },
-    { name: '<=', label: '<=' },
-    { name: '>=', label: '>=' },
-    { name: 'contains', label: 'contains' },
-    { name: 'beginsWith', label: 'begins with' },
-    { name: 'endsWith', label: 'ends with' },
-    { name: 'doesNotContain', label: 'does not contain' },
-    { name: 'doesNotBeginWith', label: 'does not begin with' },
-    { name: 'doesNotEndWith', label: 'does not end with' },
-    { name: 'null', label: 'is null' },
-    { name: 'notNull', label: 'is not null' },
-    { name: 'in', label: 'in' },
-    { name: 'notIn', label: 'not in' },
+    { name: '=', label: 'Is' },
+    { name: '!=', label: 'Is not' },
+    { name: '<', label: 'Less than' },
+    { name: '>', label: 'Greater than' },
+    { name: '<=', label: 'Less than or equal to' },
+    { name: '>=', label: 'Greater than or equal to' },
+    { name: 'contains', label: 'Contains' },
+    { name: 'beginsWith', label: 'Starts with' },
+    { name: 'endsWith', label: 'Ends with' },
+    { name: 'doesNotContain', label: 'Does not contain' },
+    { name: 'doesNotBeginWith', label: 'Does not start with' },
+    { name: 'doesNotEndWith', label: 'Does not end with' },
+    { name: 'null', label: 'Is empty' },
+    { name: 'notNull', label: 'Is not empty' },
+    { name: 'in', label: 'In' },
+    { name: 'notIn', label: 'Not in' },
 ];
 const CustomRuleGroup = (props) => {
     const rg = { ...props, ...useRuleGroup(props) };
@@ -86,6 +86,7 @@ const customSelector = (props) => {
     let width = '90px';
     let val = value;
     let opts = options;
+    const inputType = props.fieldData?.inputType;
     let readOnly = false;
     if (context.disabledCriteria) {
         readOnly =
@@ -98,18 +99,42 @@ const customSelector = (props) => {
     switch (title) {
         case 'Operators':
             width = '20%';
-            if (props.fieldData?.inputType === 'array') {
+            if (inputType === 'array') {
                 opts = options
                     .filter((option) => ['null', 'notNull', 'in', 'notIn'].includes(option.name))
                     .map((option) => ({ name: option.name, label: option.label }));
                 val = val === '=' ? '' : options.find((option) => option.name === val).name;
             }
-            else if (props.fieldData?.inputType === 'document') {
+            else if (inputType === 'document') {
                 opts = options
                     .filter((option) => ['null', 'notNull'].includes(option.name))
                     .map((option) => ({ name: option.name, label: option.label }));
                 val = val === '=' ? '' : options.find((option) => option.name === val).name;
             }
+            else if (inputType === 'date' || inputType === 'date-time' || inputType === 'time') {
+                opts = options
+                    .filter((option) => ['=', '!=', '<', '>', '<=', '>=', 'null', 'notNull'].includes(option.name))
+                    .map((option) => ({
+                    ...option,
+                    label: option.name === '>'
+                        ? inputType === 'time'
+                            ? 'Later than'
+                            : 'After'
+                        : option.name === '>='
+                            ? inputType === 'time'
+                                ? 'Later than or at'
+                                : 'After or on'
+                            : option.name === '<'
+                                ? inputType === 'time'
+                                    ? 'Earlier than'
+                                    : 'Before'
+                                : option.name === '<='
+                                    ? inputType === 'time'
+                                        ? 'Earlier than or at'
+                                        : 'Before or on'
+                                    : option.label,
+                }));
+            }
             break;
         case 'Fields':
             width = '33%';

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js

@@ -1,5 +1,4 @@
 import { ReactComponent } from '@formio/react';
-import Handlebars from 'handlebars';
 import { isArray, isEmpty, isNil, uniq } from 'lodash';
 import { DateTime } from 'luxon';
 import React from 'react';
@@ -10,20 +9,20 @@ import { isPropertyVisible } from '../utils';
 function isAddressProperties(key) {
     return /\.line1|\.line2|\.city|\.county|\.state|\.zipCode$/.test(key);
 }
-Handlebars.registerHelper('addDays', function (addend1, addend2) {
+function addDays(addend1, addend2) {
     const dateAddend1 = DateTime.fromISO(addend1);
     if (dateAddend1.isValid) {
         return dateAddend1.plus({ days: addend2 }).toISODate();
     }
     return undefined;
-});
-Handlebars.registerHelper('subDays', function (minuend, subtrahend) {
+}
+function subDays(minuend, subtrahend) {
     const dateMinuend = DateTime.fromISO(minuend);
     if (dateMinuend.isValid) {
         return dateMinuend.minus({ days: subtrahend }).toISODate();
     }
     return undefined;
-});
+}
 export class FormFieldComponent extends ReactComponent {
     /**
      * Called when the component has been instantiated. This is useful to define
@@ -345,29 +344,63 @@ export class FormFieldComponent extends ReactComponent {
         else {
             delete this.errorDetails['regexes'];
         }
-        if (this.component.validate.minDate || this.component.validate.maxDate) {
+        const evaluateDateValidation = (dateValidation) => {
             const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-            const data = {
-                input: { ...this.root.data },
-                __today__: DateTime.now().toISODate(),
-            };
-            let { minDate, maxDate } = validate;
-            if (minDate && !dateRegex.test(minDate)) {
-                try {
-                    minDate = Handlebars.compile(minDate)(data);
-                }
-                catch (err) {
-                    console.log(err);
-                }
-            }
-            if (maxDate && !dateRegex.test(maxDate)) {
+            const exactDateRegex = /^{{(?<inputProperty>input\.[a-zA-Z][a-zA-Z0-9_]*|__today__)}}$/;
+            const relativeDateRegex = /^{{(?<operation>addDays|subDays) (?<operand1>input\.[a-zA-Z][a-zA-Z0-9_]*|__today__) (?<operand2>[0-9]+)}}$/;
+            // If the date validation isn't a literal date, evaluate it
+            if (dateValidation && !dateRegex.test(dateValidation)) {
                 try {
-                    maxDate = Handlebars.compile(maxDate)(data);
+                    const today = DateTime.now().toISODate();
+                    if (exactDateRegex.test(dateValidation)) {
+                        const { groups = {} } = exactDateRegex.exec(dateValidation) ?? {};
+                        const { inputProperty } = groups;
+                        if (inputProperty === '__today__') {
+                            return today;
+                        }
+                        else if (inputProperty.split('.').length > 1) {
+                            const propertyId = inputProperty.split('.')[1];
+                            if (propertyId in this.root.data) {
+                                return this.root.data[propertyId];
+                            }
+                        }
+                    }
+                    else if (relativeDateRegex.test(dateValidation)) {
+                        const { groups = {} } = relativeDateRegex.exec(dateValidation) ?? {};
+                        // eslint-disable-next-line prefer-const
+                        let { operation, operand1, operand2 } = groups;
+                        if (operation && operand1 && operand2) {
+                            if (operand1 === '__today__') {
+                                operand1 = today;
+                            }
+                            else if (operand1.split('.').length > 1) {
+                                const propertyId = operand1.split('.')[1];
+                                if (propertyId in this.root.data) {
+                                    operand1 = this.root.data[propertyId];
+                                }
+                            }
+                            else {
+                                throw `Invalid operand: ${operand1}`;
+                            }
+                            if (operation === 'addDays') {
+                                return addDays(operand1, parseInt(operand2));
+                            }
+                            else {
+                                return subDays(operand1, parseInt(operand2));
+                            }
+                        }
+                    }
+                    throw `Invalid date validation: ${dateValidation}`;
                 }
                 catch (err) {
                     console.log(err);
+                    return undefined;
                 }
             }
+        };
+        if (this.component.validate.minDate || this.component.validate.maxDate) {
+            const minDate = validate.minDate ? evaluateDateValidation(validate.minDate) : undefined;
+            const maxDate = validate.maxDate ? evaluateDateValidation(validate.maxDate) : undefined;
             if ((minDate && value < minDate) || (maxDate && value > maxDate)) {
                 this.errorDetails['date'] = validate.customMessage;
             }
@@ -423,7 +456,11 @@ export class FormFieldComponent extends ReactComponent {
                 !this.root.customErrors.some((err) => err.message === error)) {
                 this.root.customErrors = [
                     ...this.root.customErrors,
-                    { component: this.component, message: error, formattedKeyOrPath: this.component.key },
+                    {
+                        component: this.component,
+                        message: error,
+                        formattedKeyOrPath: this.component.key,
+                    },
                 ];
             }
         });

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -1,5 +1,5 @@
 import cleanDeep from 'clean-deep';
-import Handlebars from 'handlebars';
+import Handlebars from 'kbn-handlebars';
 import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Close } from '../../../../../icons';
@@ -132,7 +132,7 @@ export const ObjectPropertyInput = (props) => {
         setOpenCreateDialog(false);
     };
     const compileExpression = (expression, instance) => {
-        const template = Handlebars.compile(expression);
+        const template = Handlebars.compileAST(expression);
         return instance ? template(instance) : undefined;
     };
     const navigationSlug = defaultPages && property.objectId && defaultPages[property.objectId];

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.js

@@ -1,4 +1,4 @@
-import Handlebars from 'handlebars';
+import Handlebars from 'kbn-handlebars';
 import { difference, isEmpty, isObject } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { FormField } from '../../../..';
@@ -60,7 +60,7 @@ export const DropdownRepeatableFieldInput = (props) => {
         }
     };
     const compileExpression = (instance, expression) => {
-        const template = Handlebars.compile(expression);
+        const template = Handlebars.compileAST(expression);
         return template(instance);
     };
     return (React.createElement(React.Fragment, null, !readOnly ? (property && (React.createElement(React.Fragment, null,
@@ -87,5 +87,8 @@ export const DropdownRepeatableFieldInput = (props) => {
                     } })),
                 loading: loading,
             } }),
-        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
+                isError: snackbarError.isError,
+                showAlert: false,
+            }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.239",
+    "version": "1.0.0-dev.241",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -114,8 +114,8 @@
         "eslint-plugin-no-inline-styles": "^1.0.5",
         "flat": "^6.0.1",
         "formiojs": "^4.15.0-rc.23",
-        "handlebars": "^4.7.8",
         "html-react-parser": "^5.1.18",
+        "kbn-handlebars": "^1.0.0",
         "luxon": "^2.5.2",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",