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

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.240",
+    "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",