@evoke-platform/ui-components 1.0.0-dev.243 → 1.0.0-dev.244

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

@@ -1,4 +1,5 @@
 import { ReactComponent } from '@formio/react';
+import Handlebars from 'handlebars';
 import { isArray, isEmpty, isNil, uniq } from 'lodash';
 import { DateTime } from 'luxon';
 import React from 'react';
@@ -9,20 +10,20 @@ import { isPropertyVisible } from '../utils';
 function isAddressProperties(key) {
     return /\.line1|\.line2|\.city|\.county|\.state|\.zipCode$/.test(key);
 }
-function addDays(addend1, addend2) {
+Handlebars.registerHelper('addDays', function (addend1, addend2) {
     const dateAddend1 = DateTime.fromISO(addend1);
     if (dateAddend1.isValid) {
         return dateAddend1.plus({ days: addend2 }).toISODate();
     }
     return undefined;
-}
-function subDays(minuend, subtrahend) {
+});
+Handlebars.registerHelper('subDays', function (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
@@ -344,63 +345,29 @@ export class FormFieldComponent extends ReactComponent {
         else {
             delete this.errorDetails['regexes'];
         }
-        const evaluateDateValidation = (dateValidation) => {
+        if (this.component.validate.minDate || this.component.validate.maxDate) {
             const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-            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)) {
+            const data = {
+                input: { ...this.root.data },
+                __today__: DateTime.now().toISODate(),
+            };
+            let { minDate, maxDate } = validate;
+            if (minDate && !dateRegex.test(minDate)) {
                 try {
-                    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}`;
+                    minDate = Handlebars.compile(minDate)(data);
+                }
+                catch (err) {
+                    console.log(err);
+                }
+            }
+            if (maxDate && !dateRegex.test(maxDate)) {
+                try {
+                    maxDate = Handlebars.compile(maxDate)(data);
                 }
                 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;
             }
@@ -456,11 +423,7 @@ 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 'kbn-handlebars';
+import Handlebars from '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.compileAST(expression);
+        const template = Handlebars.compile(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 'kbn-handlebars';
+import Handlebars from '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.compileAST(expression);
+        const template = Handlebars.compile(expression);
         return template(instance);
     };
     return (React.createElement(React.Fragment, null, !readOnly ? (property && (React.createElement(React.Fragment, null,
@@ -87,8 +87,5 @@ 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.243",
+    "version": "1.0.0-dev.244",
     "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",