@oneblink/apps-react 2.2.0 → 2.3.0-beta.2

package/dist/form-elements/FormElementBoolean.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.BooleanElement;
-    value: unknown;
-    onChange: FormElementValueChangeHandler<boolean>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementBoolean({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementBoolean>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    id: string;
+    element: FormTypes.BooleanElement;
+    value: unknown;
+    onChange: FormElementValueChangeHandler<boolean>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementBoolean({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementBoolean>;
+export default _default;

package/dist/form-elements/FormElementBoolean.js

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import useBooleanState from '../hooks/useBooleanState';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import { Switch } from '@mui/material';
-function FormElementBoolean({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    return (React.createElement("div", { className: "cypress-boolean-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-boolean", id: id, element: element, required: element.required, leading: React.createElement(Switch, { id: id, name: element.name, color: "primary", edge: "start", className: "ob-boolean__input cypress-boolean-control", classes: {
-                    checked: 'ob-boolean__input-checked',
-                }, checked: !!value, disabled: element.readOnly, onChange: (e) => {
-                    setIsDirty();
-                    onChange(element, e.target.checked);
-                }, disableRipple: true }) }, (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-            React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
-}
-export default React.memo(FormElementBoolean);
+import * as React from 'react';
+import useBooleanState from '../hooks/useBooleanState';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import { Switch } from '@mui/material';
+function FormElementBoolean({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    return (React.createElement("div", { className: "cypress-boolean-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-boolean", id: id, element: element, required: element.required, leading: React.createElement(Switch, { id: id, name: element.name, color: "primary", edge: "start", className: "ob-boolean__input cypress-boolean-control", classes: {
+                    checked: 'ob-boolean__input-checked',
+                }, checked: !!value, disabled: element.readOnly, onChange: (e) => {
+                    setIsDirty();
+                    onChange(element, e.target.checked);
+                }, disableRipple: true }) }, (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+            React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
+}
+export default React.memo(FormElementBoolean);
 //# sourceMappingURL=FormElementBoolean.js.map

package/dist/form-elements/FormElementCalculation.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    element: FormTypes.CalculationElement;
-    onChange: FormElementValueChangeHandler<number>;
-    value: unknown | undefined;
-};
-declare function FormElementCalculation({ element, onChange, value }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementCalculation>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    element: FormTypes.CalculationElement;
+    onChange: FormElementValueChangeHandler<number>;
+    value: unknown | undefined;
+};
+declare function FormElementCalculation({ element, onChange, value }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementCalculation>;
+export default _default;

package/dist/form-elements/FormElementCalculation.js

@@ -1,180 +1,180 @@
-import * as React from 'react';
-import ExpressionParser from 'morph-expressions';
-import escapeString from 'escape-string-regexp';
-import sanitizeHtmlStandard from '../services/sanitize-html';
-import useFormSubmissionModel from '../hooks/useFormSubmissionModelContext';
-import { Sentry } from '@oneblink/apps';
-import { localisationService } from '@oneblink/apps';
-const isUnenteredValue = (value) => {
-    return !value && value !== 0;
-};
-const isObjectWithValue = (obj) => {
-    return typeof obj === 'object' && obj !== null && 'value' in obj;
-};
-function FormElementCalculation({ element, onChange, value }) {
-    const { formSubmissionModel } = useFormSubmissionModel();
-    const htmlValue = React.useMemo(() => {
-        let htmlTemplate;
-        if (!isNaN(value)) {
-            htmlTemplate = element.defaultValue;
-        }
-        else {
-            console.log('[Calculation] Was not a number... setting pre-calculation display');
-            htmlTemplate = element.preCalculationDisplay;
-        }
-        const numberValue = typeof value === 'number' ? value : 0;
-        return sanitizeHtmlStandard((htmlTemplate || '').replace(/{result}/gi, element.displayAsCurrency
-            ? localisationService.formatCurrency(numberValue)
-            : localisationService.formatNumber(numberValue)));
-    }, [element, value]);
-    const registerProperty = React.useCallback((exprParser, { replacement, nestedElementNames, }) => {
-        exprParser.registerProperty(replacement, (submission) => {
-            const defaultAccumulator = submission[nestedElementNames[0]];
-            return nestedElementNames.reduce((elementValue, elementName, index) => {
-                // Numbers can just be returned as is
-                if (typeof elementValue === 'number') {
-                    return elementValue;
-                }
-                // attempt to get a number from the element value as a string.
-                // NaN is accounted for is the calculation
-                // so we can return that from here
-                if (typeof elementValue === 'string') {
-                    return parseFloat(elementValue);
-                }
-                if (Array.isArray(elementValue)) {
-                    // If there are no entries, we can return null
-                    // to prevent the calculation from running.
-                    if (!elementValue.length) {
-                        return NaN;
-                    }
-                    // An array could be an element that allows multiple
-                    // values e.g. checkboxes. If thats that case, we just
-                    // add them all together and move on
-                    const elementValues = elementValue.map((entry) => parseFloat(entry));
-                    if (elementValues.every((entry) => !Number.isNaN(entry))) {
-                        return elementValues.reduce((number, entry) => number + entry, 0);
-                    }
-                    // Other wise attempt to process it as a repeatable set
-                    // If we found another repeatable set to process,
-                    // pass it to the next element name to
-                    // iterate over the entries
-                    // If we are processing the entries in a repeatable set,
-                    // we can sum the numbers elements in the entries
-                    const nextElementName = nestedElementNames[index + 1];
-                    let isNestedRepeatableSet = false;
-                    const nestedElementValues = elementValue.reduce((nestedElementValues, entry) => {
-                        if (entry) {
-                            const nextElementValue = entry[nextElementName];
-                            if (Array.isArray(nextElementValue)) {
-                                if (nextElementValue.length) {
-                                    nestedElementValues.push(...nextElementValue);
-                                    isNestedRepeatableSet = true;
-                                }
-                            }
-                            else {
-                                nestedElementValues.push(nextElementValue);
-                            }
-                        }
-                        return nestedElementValues;
-                    }, []);
-                    // If the nested element values are all arrays, we can pass them on to the next iteration
-                    if (isNestedRepeatableSet) {
-                        return nestedElementValues;
-                    }
-                    return nestedElementValues.reduce((total, nestedElementValue) => {
-                        if (Number.isNaN(total)) {
-                            return NaN;
-                        }
-                        const value = parseFloat(nestedElementValue);
-                        if (Number.isNaN(value)) {
-                            return NaN;
-                        }
-                        return total + value;
-                    }, 0);
-                }
-                // "compliance" form element has an object value with a "value" property.
-                if (isObjectWithValue(elementValue) &&
-                    typeof elementValue.value === 'string') {
-                    return parseFloat(elementValue.value);
-                }
-                // We did not find a number value from the known elements,
-                // we will assume we are at the end of the line.
-                return NaN;
-            }, defaultAccumulator);
-        });
-    }, []);
-    const { calculation, hasError } = React.useMemo(() => {
-        const exprParser = new ExpressionParser();
-        exprParser.registerFunction('ROUND', (value, precision) => {
-            if (!Number.isNaN(value) && Number.isFinite(value)) {
-                return parseFloat(value.toFixed(precision));
-            }
-            return null;
-        });
-        exprParser.registerFunction('ISNULL', (value, defaultValue) => {
-            if (isUnenteredValue(value)) {
-                return defaultValue || 0;
-            }
-            return value;
-        });
-        try {
-            if (!element.calculation)
-                throw new Error('Element has no calculation.');
-            let matches;
-            const elementNames = [];
-            const re = /({ELEMENT:)([^}]+)(})/g;
-            while ((matches = re.exec(element.calculation)) !== null) {
-                if (matches) {
-                    elementNames.push(matches[2]);
-                }
-            }
-            const code = elementNames.reduce((code, elementName, index) => {
-                const regex = new RegExp(escapeString(`{ELEMENT:${elementName}}`), 'g');
-                const replacement = `a${index}`;
-                registerProperty(exprParser, {
-                    replacement,
-                    nestedElementNames: elementName.split('|'),
-                });
-                return code.replace(regex, replacement);
-            }, element.calculation || '');
-            return {
-                calculation: exprParser.parse(code.trim()),
-                hasError: false,
-            };
-        }
-        catch (e) {
-            console.warn('Error while setting up parsing for calculation element', element, e);
-            Sentry.captureException(e);
-            return {
-                calculation: null,
-                hasError: true,
-            };
-        }
-    }, [element, registerProperty]);
-    // MODEL LISTENER
-    React.useEffect(() => {
-        if (!calculation)
-            return;
-        const newValue = calculation.eval(formSubmissionModel);
-        if (value === newValue || (value === undefined && isNaN(newValue))) {
-            return;
-        }
-        if (!isNaN(newValue)) {
-            onChange(element, newValue);
-        }
-        else {
-            onChange(element, undefined);
-        }
-    }, [calculation, element, formSubmissionModel, onChange, value]);
-    return (React.createElement("div", { className: "cypress-calculation-element" },
-        React.createElement("div", { className: "ob-form__element ob-calculation" },
-            React.createElement("div", { className: "cypress-calculation-result ob-calculation__content ql-editor", dangerouslySetInnerHTML: { __html: htmlValue } }),
-            hasError && (React.createElement("div", { className: "notification cypress-calculation-is-invalid", role: "alert" },
-                React.createElement("div", { className: "columns is-vcentered" },
-                    React.createElement("div", { className: "column is-narrow" },
-                        React.createElement("i", { className: "material-icons has-text-warning" }, "error")),
-                    React.createElement("div", { className: "column" },
-                        React.createElement("p", null, "There is an error in the calculation for this element."))))))));
-}
-export default React.memo(FormElementCalculation);
+import * as React from 'react';
+import ExpressionParser from 'morph-expressions';
+import escapeString from 'escape-string-regexp';
+import sanitizeHtmlStandard from '../services/sanitize-html';
+import useFormSubmissionModel from '../hooks/useFormSubmissionModelContext';
+import { Sentry } from '@oneblink/apps';
+import { localisationService } from '@oneblink/apps';
+const isUnenteredValue = (value) => {
+    return !value && value !== 0;
+};
+const isObjectWithValue = (obj) => {
+    return typeof obj === 'object' && obj !== null && 'value' in obj;
+};
+function FormElementCalculation({ element, onChange, value }) {
+    const { formSubmissionModel } = useFormSubmissionModel();
+    const htmlValue = React.useMemo(() => {
+        let htmlTemplate;
+        if (!isNaN(value)) {
+            htmlTemplate = element.defaultValue;
+        }
+        else {
+            console.log('[Calculation] Was not a number... setting pre-calculation display');
+            htmlTemplate = element.preCalculationDisplay;
+        }
+        const numberValue = typeof value === 'number' ? value : 0;
+        return sanitizeHtmlStandard((htmlTemplate || '').replace(/{result}/gi, element.displayAsCurrency
+            ? localisationService.formatCurrency(numberValue)
+            : localisationService.formatNumber(numberValue)));
+    }, [element, value]);
+    const registerProperty = React.useCallback((exprParser, { replacement, nestedElementNames, }) => {
+        exprParser.registerProperty(replacement, (submission) => {
+            const defaultAccumulator = submission[nestedElementNames[0]];
+            return nestedElementNames.reduce((elementValue, elementName, index) => {
+                // Numbers can just be returned as is
+                if (typeof elementValue === 'number') {
+                    return elementValue;
+                }
+                // attempt to get a number from the element value as a string.
+                // NaN is accounted for is the calculation
+                // so we can return that from here
+                if (typeof elementValue === 'string') {
+                    return parseFloat(elementValue);
+                }
+                if (Array.isArray(elementValue)) {
+                    // If there are no entries, we can return null
+                    // to prevent the calculation from running.
+                    if (!elementValue.length) {
+                        return NaN;
+                    }
+                    // An array could be an element that allows multiple
+                    // values e.g. checkboxes. If thats that case, we just
+                    // add them all together and move on
+                    const elementValues = elementValue.map((entry) => parseFloat(entry));
+                    if (elementValues.every((entry) => !Number.isNaN(entry))) {
+                        return elementValues.reduce((number, entry) => number + entry, 0);
+                    }
+                    // Other wise attempt to process it as a repeatable set
+                    // If we found another repeatable set to process,
+                    // pass it to the next element name to
+                    // iterate over the entries
+                    // If we are processing the entries in a repeatable set,
+                    // we can sum the numbers elements in the entries
+                    const nextElementName = nestedElementNames[index + 1];
+                    let isNestedRepeatableSet = false;
+                    const nestedElementValues = elementValue.reduce((nestedElementValues, entry) => {
+                        if (entry) {
+                            const nextElementValue = entry[nextElementName];
+                            if (Array.isArray(nextElementValue)) {
+                                if (nextElementValue.length) {
+                                    nestedElementValues.push(...nextElementValue);
+                                    isNestedRepeatableSet = true;
+                                }
+                            }
+                            else {
+                                nestedElementValues.push(nextElementValue);
+                            }
+                        }
+                        return nestedElementValues;
+                    }, []);
+                    // If the nested element values are all arrays, we can pass them on to the next iteration
+                    if (isNestedRepeatableSet) {
+                        return nestedElementValues;
+                    }
+                    return nestedElementValues.reduce((total, nestedElementValue) => {
+                        if (Number.isNaN(total)) {
+                            return NaN;
+                        }
+                        const value = parseFloat(nestedElementValue);
+                        if (Number.isNaN(value)) {
+                            return NaN;
+                        }
+                        return total + value;
+                    }, 0);
+                }
+                // "compliance" form element has an object value with a "value" property.
+                if (isObjectWithValue(elementValue) &&
+                    typeof elementValue.value === 'string') {
+                    return parseFloat(elementValue.value);
+                }
+                // We did not find a number value from the known elements,
+                // we will assume we are at the end of the line.
+                return NaN;
+            }, defaultAccumulator);
+        });
+    }, []);
+    const { calculation, hasError } = React.useMemo(() => {
+        const exprParser = new ExpressionParser();
+        exprParser.registerFunction('ROUND', (value, precision) => {
+            if (!Number.isNaN(value) && Number.isFinite(value)) {
+                return parseFloat(value.toFixed(precision));
+            }
+            return null;
+        });
+        exprParser.registerFunction('ISNULL', (value, defaultValue) => {
+            if (isUnenteredValue(value)) {
+                return defaultValue || 0;
+            }
+            return value;
+        });
+        try {
+            if (!element.calculation)
+                throw new Error('Element has no calculation.');
+            let matches;
+            const elementNames = [];
+            const re = /({ELEMENT:)([^}]+)(})/g;
+            while ((matches = re.exec(element.calculation)) !== null) {
+                if (matches) {
+                    elementNames.push(matches[2]);
+                }
+            }
+            const code = elementNames.reduce((code, elementName, index) => {
+                const regex = new RegExp(escapeString(`{ELEMENT:${elementName}}`), 'g');
+                const replacement = `a${index}`;
+                registerProperty(exprParser, {
+                    replacement,
+                    nestedElementNames: elementName.split('|'),
+                });
+                return code.replace(regex, replacement);
+            }, element.calculation || '');
+            return {
+                calculation: exprParser.parse(code.trim()),
+                hasError: false,
+            };
+        }
+        catch (e) {
+            console.warn('Error while setting up parsing for calculation element', element, e);
+            Sentry.captureException(e);
+            return {
+                calculation: null,
+                hasError: true,
+            };
+        }
+    }, [element, registerProperty]);
+    // MODEL LISTENER
+    React.useEffect(() => {
+        if (!calculation)
+            return;
+        const newValue = calculation.eval(formSubmissionModel);
+        if (value === newValue || (value === undefined && isNaN(newValue))) {
+            return;
+        }
+        if (!isNaN(newValue)) {
+            onChange(element, newValue);
+        }
+        else {
+            onChange(element, undefined);
+        }
+    }, [calculation, element, formSubmissionModel, onChange, value]);
+    return (React.createElement("div", { className: "cypress-calculation-element" },
+        React.createElement("div", { className: "ob-form__element ob-calculation" },
+            React.createElement("div", { className: "cypress-calculation-result ob-calculation__content ql-editor", dangerouslySetInnerHTML: { __html: htmlValue } }),
+            hasError && (React.createElement("div", { className: "notification cypress-calculation-is-invalid", role: "alert" },
+                React.createElement("div", { className: "columns is-vcentered" },
+                    React.createElement("div", { className: "column is-narrow" },
+                        React.createElement("i", { className: "material-icons has-text-warning" }, "error")),
+                    React.createElement("div", { className: "column" },
+                        React.createElement("p", null, "There is an error in the calculation for this element."))))))));
+}
+export default React.memo(FormElementCalculation);
 //# sourceMappingURL=FormElementCalculation.js.map

package/dist/form-elements/FormElementCamera.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementBinaryStorageValue } from '../types/attachments';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.CameraElement;
-    value: FormElementBinaryStorageValue;
-    onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementCamera({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementCamera>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementBinaryStorageValue } from '../types/attachments';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    id: string;
+    element: FormTypes.CameraElement;
+    value: FormElementBinaryStorageValue;
+    onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementCamera({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementCamera>;
+export default _default;