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

package/dist/form-elements/FormElementSection.js

@@ -1,70 +1,70 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { Collapse, Tooltip } from '@mui/material';
-import useBooleanState from '../hooks/useBooleanState';
-import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
-import { checkSectionValidity } from '../services/form-validation';
-function FormElementSection({ element, onLookup, displayValidationMessages, ...props }) {
-    const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed);
-    const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed);
-    React.useEffect(() => {
-        if (isCollapsed && !isDisplayingError) {
-            setIsDisplayingError(true);
-        }
-    }, [isCollapsed, isDisplayingError]);
-    const displayValidationMessage = displayValidationMessages || isDisplayingError;
-    const isInvalid = React.useMemo(() => {
-        return (displayValidationMessage &&
-            checkSectionValidity(element, props.formElementsValidation));
-    }, [displayValidationMessage, element, props.formElementsValidation]);
-    const isValid = React.useMemo(() => {
-        return !checkSectionValidity(element, props.formElementsValidation);
-    }, [element, props.formElementsValidation]);
-    const handleLookup = React.useCallback((mergeLookupResults) => {
-        onLookup((currentFormSubmission) => {
-            let model = currentFormSubmission.submission;
-            const elements = currentFormSubmission.elements.map((formElement) => {
-                if (formElement.type === 'section' && formElement.id === element.id) {
-                    const { elements, submission } = mergeLookupResults({
-                        elements: formElement.elements,
-                        submission: currentFormSubmission.submission,
-                    });
-                    model = submission;
-                    return {
-                        ...formElement,
-                        elements,
-                    };
-                }
-                return formElement;
-            });
-            return {
-                elements,
-                submission: model,
-            };
-        });
-    }, [element.id, onLookup]);
-    return (React.createElement("div", { className: clsx('ob-section', {
-            'ob-section__invalid': isInvalid,
-            'ob-section__valid': isValid,
-        }) },
-        React.createElement("div", { className: "ob-section__header cypress-section-header", onClick: toggle },
-            React.createElement("h3", { className: "ob-section__header-text title is-3" },
-                element.label,
-                element.hint && (React.createElement(Tooltip, { title: element.hint, arrow: true, enterTouchDelay: 0, leaveTouchDelay: 10000 },
-                    React.createElement("i", { className: "material-icons has-text-grey-light ob-label__hint" }, "info")))),
-            React.createElement("div", { className: "ob-section__header-icon-container" },
-                isInvalid && (React.createElement(Tooltip, { title: "Section has errors" },
-                    React.createElement("i", { className: "material-icons has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in" }, "warning"))),
-                React.createElement("i", { className: clsx('ob-section__header-icon material-icons', {
-                        'is-rotated': !isCollapsed,
-                    }) }, "expand_more"))),
-        React.createElement("hr", { className: "ob-section__divider" }),
-        React.createElement(Collapse, { in: !isCollapsed, classes: {
-                root: 'ob-section__content',
-                entered: 'ob-section__expanded',
-                hidden: 'ob-section__collapsed',
-            } },
-            React.createElement(OneBlinkFormElements, { ...props, displayValidationMessages: displayValidationMessage, onLookup: handleLookup, elements: element.elements }))));
-}
-export default React.memo(FormElementSection);
+import * as React from 'react';
+import clsx from 'clsx';
+import { Collapse, Tooltip } from '@mui/material';
+import useBooleanState from '../hooks/useBooleanState';
+import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
+import { checkSectionValidity } from '../services/form-validation';
+function FormElementSection({ element, onLookup, displayValidationMessages, ...props }) {
+    const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed);
+    const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed);
+    React.useEffect(() => {
+        if (isCollapsed && !isDisplayingError) {
+            setIsDisplayingError(true);
+        }
+    }, [isCollapsed, isDisplayingError]);
+    const displayValidationMessage = displayValidationMessages || isDisplayingError;
+    const isInvalid = React.useMemo(() => {
+        return (displayValidationMessage &&
+            checkSectionValidity(element, props.formElementsValidation));
+    }, [displayValidationMessage, element, props.formElementsValidation]);
+    const isValid = React.useMemo(() => {
+        return !checkSectionValidity(element, props.formElementsValidation);
+    }, [element, props.formElementsValidation]);
+    const handleLookup = React.useCallback((mergeLookupResults) => {
+        onLookup((currentFormSubmission) => {
+            let model = currentFormSubmission.submission;
+            const elements = currentFormSubmission.elements.map((formElement) => {
+                if (formElement.type === 'section' && formElement.id === element.id) {
+                    const { elements, submission } = mergeLookupResults({
+                        elements: formElement.elements,
+                        submission: currentFormSubmission.submission,
+                    });
+                    model = submission;
+                    return {
+                        ...formElement,
+                        elements,
+                    };
+                }
+                return formElement;
+            });
+            return {
+                elements,
+                submission: model,
+            };
+        });
+    }, [element.id, onLookup]);
+    return (React.createElement("div", { className: clsx('ob-section', {
+            'ob-section__invalid': isInvalid,
+            'ob-section__valid': isValid,
+        }) },
+        React.createElement("div", { className: "ob-section__header cypress-section-header", onClick: toggle },
+            React.createElement("h3", { className: "ob-section__header-text title is-3" },
+                element.label,
+                element.hint && (React.createElement(Tooltip, { title: element.hint, arrow: true, enterTouchDelay: 0, leaveTouchDelay: 10000 },
+                    React.createElement("i", { className: "material-icons has-text-grey-light ob-label__hint" }, "info")))),
+            React.createElement("div", { className: "ob-section__header-icon-container" },
+                isInvalid && (React.createElement(Tooltip, { title: "Section has errors" },
+                    React.createElement("i", { className: "material-icons has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in" }, "warning"))),
+                React.createElement("i", { className: clsx('ob-section__header-icon material-icons', {
+                        'is-rotated': !isCollapsed,
+                    }) }, "expand_more"))),
+        React.createElement("hr", { className: "ob-section__divider" }),
+        React.createElement(Collapse, { in: !isCollapsed, classes: {
+                root: 'ob-section__content',
+                entered: 'ob-section__expanded',
+                hidden: 'ob-section__collapsed',
+            } },
+            React.createElement(OneBlinkFormElements, { ...props, displayValidationMessages: displayValidationMessage, onLookup: handleLookup, elements: element.elements }))));
+}
+export default React.memo(FormElementSection);
 //# sourceMappingURL=FormElementSection.js.map

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

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.SelectElement;
-    value: unknown | undefined;
-    onChange: FormElementValueChangeHandler<string | string[]>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
-};
-declare function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementSelect>;
-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.SelectElement;
+    value: unknown | undefined;
+    onChange: FormElementValueChangeHandler<string | string[]>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
+};
+declare function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementSelect>;
+export default _default;

package/dist/form-elements/FormElementSelect.js

@@ -1,45 +1,45 @@
-import * as React from 'react';
-import useBooleanState from '../hooks/useBooleanState';
-import FormElementOptions from '../components/renderer/FormElementOptions';
-import useFormElementOptions from '../hooks/useFormElementOptions';
-import LookupButton from '../components/renderer/LookupButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox';
-function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const filteredOptions = useFormElementOptions({
-        element,
-        value,
-        onChange,
-        conditionallyShownOptions,
-    });
-    const selectedValuesAsArray = React.useMemo(() => {
-        if (Array.isArray(value))
-            return value;
-        if (typeof value === 'string')
-            return [value];
-        return [];
-    }, [value]);
-    return (React.createElement("div", { className: "cypress-select-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-select", id: id, element: element, required: element.required },
-            React.createElement(FormElementOptions, { options: element.options },
-                element.multi && element.canToggleAll && (React.createElement(ToggleAllCheckbox, { id: id, element: element, options: filteredOptions, selected: selectedValuesAsArray, disabled: element.readOnly, onChange: onChange })),
-                !element.multi ? (React.createElement("div", { className: "field has-addons" },
-                    React.createElement("div", { className: "control is-expanded" },
-                        React.createElement("div", { className: "select is-fullwidth" },
-                            React.createElement("select", { id: id, name: element.name, className: "cypress-select-single-control ob-input ob-select__single", value: typeof value === 'string' ? value : '', onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty },
-                                React.createElement("option", { value: "" }, "Please choose"),
-                                filteredOptions.map(({ label, value }) => (React.createElement("option", { key: value, value: value }, label)))))))) : (React.createElement("div", { className: "select is-multiple control" },
-                    React.createElement("select", { multiple: true, id: id, name: element.name, className: "cypress-select-multiple-control ob-input ob-select__multi", value: Array.isArray(value) ? value : [], onChange: (e) => {
-                            const vals = [];
-                            for (let i = 0; i < e.target.selectedOptions.length; i++) {
-                                vals.push(e.target.selectedOptions[i].value);
-                            }
-                            onChange(element, vals.length ? vals : undefined);
-                        }, required: element.required, disabled: element.readOnly, onBlur: setIsDirty }, filteredOptions.map(({ label, value }) => (React.createElement("option", { key: value, value: value }, label)))),
-                    React.createElement(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage }))),
-                (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(FormElementSelect);
+import * as React from 'react';
+import useBooleanState from '../hooks/useBooleanState';
+import FormElementOptions from '../components/renderer/FormElementOptions';
+import useFormElementOptions from '../hooks/useFormElementOptions';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox';
+function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const filteredOptions = useFormElementOptions({
+        element,
+        value,
+        onChange,
+        conditionallyShownOptions,
+    });
+    const selectedValuesAsArray = React.useMemo(() => {
+        if (Array.isArray(value))
+            return value;
+        if (typeof value === 'string')
+            return [value];
+        return [];
+    }, [value]);
+    return (React.createElement("div", { className: "cypress-select-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-select", id: id, element: element, required: element.required },
+            React.createElement(FormElementOptions, { options: element.options },
+                element.multi && element.canToggleAll && (React.createElement(ToggleAllCheckbox, { id: id, element: element, options: filteredOptions, selected: selectedValuesAsArray, disabled: element.readOnly, onChange: onChange })),
+                !element.multi ? (React.createElement("div", { className: "field has-addons" },
+                    React.createElement("div", { className: "control is-expanded" },
+                        React.createElement("div", { className: "select is-fullwidth" },
+                            React.createElement("select", { id: id, name: element.name, className: "cypress-select-single-control ob-input ob-select__single", value: typeof value === 'string' ? value : '', onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty },
+                                React.createElement("option", { value: "" }, "Please choose"),
+                                filteredOptions.map(({ label, value }) => (React.createElement("option", { key: value, value: value }, label)))))))) : (React.createElement("div", { className: "select is-multiple control" },
+                    React.createElement("select", { multiple: true, id: id, name: element.name, className: "cypress-select-multiple-control ob-input ob-select__multi", value: Array.isArray(value) ? value : [], onChange: (e) => {
+                            const vals = [];
+                            for (let i = 0; i < e.target.selectedOptions.length; i++) {
+                                vals.push(e.target.selectedOptions[i].value);
+                            }
+                            onChange(element, vals.length ? vals : undefined);
+                        }, required: element.required, disabled: element.readOnly, onBlur: setIsDirty }, filteredOptions.map(({ label, value }) => (React.createElement("option", { key: value, value: value }, label)))),
+                    React.createElement(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage }))),
+                (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(FormElementSelect);
 //# sourceMappingURL=FormElementSelect.js.map

package/dist/form-elements/FormElementSignature.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.DrawElement;
-    value: FormElementBinaryStorageValue;
-    onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementSignature({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementSignature>;
-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.DrawElement;
+    value: FormElementBinaryStorageValue;
+    onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementSignature({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementSignature>;
+export default _default;

package/dist/form-elements/FormElementSignature.js

@@ -1,136 +1,139 @@
-import * as React from 'react';
-import SignatureCanvas from 'react-signature-canvas';
-import scrollingService from '../services/scrolling-service';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import OnLoading from '../components/renderer/OnLoading';
-import useAttachment from '../hooks/attachments/useAttachment';
-import { prepareNewAttachment } from '../services/attachments';
-import AttachmentStatus from '../components/renderer/attachments/AttachmentStatus';
-import useBooleanState from '../hooks/useBooleanState';
-import { canvasToBlob } from '../services/blob-utils';
-import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable';
-import useIsPageVisible from '../hooks/useIsPageVisible';
-function FormElementSignature({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const isPageVisible = useIsPageVisible();
-    const handleChange = React.useCallback((formElement, newValue) => {
-        setIsDirty();
-        onChange(formElement, newValue);
-    }, [onChange, setIsDirty]);
-    return (React.createElement("div", { className: "cypress-signature-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-signature", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "control" }, value ? (React.createElement(SignatureDisplay, { element: element, value: value, onChange: handleChange })) : isPageVisible ? (React.createElement(SignatureDrawing, { element: element, onChange: handleChange })) : null),
-            (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(FormElementSignature);
-const SignatureDrawing = React.memo(function SignatureDrawing({ element, onChange, }) {
-    const canvasRef = React.useRef(null);
-    const [isEmpty, setIsEmpty] = React.useState(true);
-    const [canvasDimensions, setCanvasDimensions] = React.useState({});
-    const handleClear = React.useCallback(() => {
-        if (canvasRef.current) {
-            console.log('Clearing signature...');
-            canvasRef.current.clear();
-        }
-        setIsEmpty(true);
-    }, []);
-    const handleDone = React.useCallback(async () => {
-        if (!canvasRef.current)
-            return;
-        const trimmedCanvas = canvasRef.current.getTrimmedCanvas();
-        // Convert base64 data uri to blob and send it on its way
-        const blob = await canvasToBlob(trimmedCanvas);
-        onChange(element, prepareNewAttachment(blob, 'signature.png', element));
-    }, [element, onChange]);
-    // HANDLING CANVAS CHANGE
-    const handleEndDraw = React.useCallback(() => {
-        if (window.cordova) {
-            scrollingService.enableScrolling();
-        }
-        if (isEmpty) {
-            setIsEmpty(false);
-        }
-    }, [isEmpty]);
-    // HANDLE RESIZE
-    React.useEffect(() => {
-        const signatureCanvas = canvasRef.current;
-        if (!signatureCanvas)
-            return;
-        const resize = () => {
-            const parentDiv = signatureCanvas.getCanvas().parentNode;
-            if (parentDiv) {
-                setCanvasDimensions({
-                    // @ts-expect-error ???
-                    width: parentDiv.clientWidth,
-                    // @ts-expect-error ???
-                    height: parentDiv.clientHeight,
-                });
-            }
-        };
-        window.addEventListener('resize', resize);
-        resize();
-        return () => {
-            window.removeEventListener('resize', resize);
-        };
-    }, [canvasRef]);
-    // REACTIVE DISABLING OF CANVAS
-    React.useEffect(() => {
-        if (!canvasRef.current)
-            return;
-        if (element.readOnly) {
-            canvasRef.current.off();
-        }
-        else {
-            canvasRef.current.on();
-        }
-    }, [canvasRef, element.readOnly]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", null,
-            React.createElement(SignatureCanvas, { ref: canvasRef, canvasProps: {
-                    ...canvasDimensions,
-                    className: 'input ob-signature__control cypress-signature-control signature-pad',
-                    // @ts-expect-error ???
-                    disabled: element.readOnly,
-                }, onEnd: handleEndDraw, onBegin: window.cordova ? scrollingService.disableScrolling : undefined })),
-        React.createElement("div", { className: "buttons ob-buttons" },
-            React.createElement("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: handleClear, disabled: element.readOnly || isEmpty }, "Clear"),
-            React.createElement("button", { type: "button", className: "button ob-button ob-button__done is-primary cypress-done-signature-button", onClick: handleDone, disabled: element.readOnly || isEmpty }, "Done"))));
-});
-const SignatureDisplay = React.memo(function SignatureDisplay({ element, value, onChange, }) {
-    const result = useAttachment(value, element, React.useCallback((id, attachment) => {
-        onChange(element, attachment);
-    }, [element, onChange]));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("figure", { className: "ob-figure" },
-            React.createElement("div", { className: "figure-content" },
-                React.createElement(DisplayImage, { ...result }))),
-        React.createElement("div", { className: "buttons ob-buttons" },
-            React.createElement("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: () => onChange(element, undefined), disabled: element.readOnly }, "Clear"))));
-});
-const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingImageUrl, imageUrl, loadImageUrlError, }) {
-    if (uploadErrorMessage) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("h3", { className: "title is-3" }, "Upload Failed"),
-            React.createElement("p", null,
-                "Your signature failed to upload, please press the ",
-                React.createElement("b", null, "Clear"),
-                " button and try again.")));
-    }
-    if (loadImageUrlError) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("h3", { className: "title is-3" }, "Preview Failed"),
-            React.createElement("p", null, loadImageUrlError.message)));
-    }
-    if (isLoadingImageUrl) {
-        return React.createElement(OnLoading, { small: true, className: "cypress-signature-loading-image" });
-    }
-    if (imageUrl) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("span", { className: "ob-figure__status" },
-                React.createElement(AttachmentStatus, { isLoadingImageUrl: isLoadingImageUrl, loadImageUrlError: loadImageUrlError, isUploading: isUploading, imageUrl: imageUrl })),
-            React.createElement("img", { src: imageUrl, className: "cypress-signature-image ob-signature__img" })));
-    }
-    return React.createElement(ImagePreviewUnavailable, null);
-});
+import * as React from 'react';
+import SignatureCanvas from 'react-signature-canvas';
+import scrollingService from '../services/scrolling-service';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import OnLoading from '../components/renderer/OnLoading';
+import useAttachment from '../hooks/attachments/useAttachment';
+import { prepareNewAttachment } from '../services/attachments';
+import AttachmentStatus from '../components/renderer/attachments/AttachmentStatus';
+import useBooleanState from '../hooks/useBooleanState';
+import { canvasToBlob } from '../services/blob-utils';
+import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable';
+import useIsPageVisible from '../hooks/useIsPageVisible';
+import ProgressBar from '../components/renderer/attachments/ProgressBar';
+function FormElementSignature({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const isPageVisible = useIsPageVisible();
+    const handleChange = React.useCallback((formElement, newValue) => {
+        setIsDirty();
+        onChange(formElement, newValue);
+    }, [onChange, setIsDirty]);
+    return (React.createElement("div", { className: "cypress-signature-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-signature", id: id, element: element, required: element.required },
+            React.createElement("div", { className: "control" }, value ? (React.createElement(SignatureDisplay, { element: element, value: value, onChange: handleChange })) : isPageVisible ? (React.createElement(SignatureDrawing, { element: element, onChange: handleChange })) : null),
+            (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(FormElementSignature);
+const SignatureDrawing = React.memo(function SignatureDrawing({ element, onChange, }) {
+    const canvasRef = React.useRef(null);
+    const [isEmpty, setIsEmpty] = React.useState(true);
+    const [canvasDimensions, setCanvasDimensions] = React.useState({});
+    const handleClear = React.useCallback(() => {
+        if (canvasRef.current) {
+            console.log('Clearing signature...');
+            canvasRef.current.clear();
+        }
+        setIsEmpty(true);
+    }, []);
+    const handleDone = React.useCallback(async () => {
+        if (!canvasRef.current)
+            return;
+        const trimmedCanvas = canvasRef.current.getTrimmedCanvas();
+        // Convert base64 data uri to blob and send it on its way
+        const blob = await canvasToBlob(trimmedCanvas);
+        onChange(element, prepareNewAttachment(blob, 'signature.png', element));
+    }, [element, onChange]);
+    // HANDLING CANVAS CHANGE
+    const handleEndDraw = React.useCallback(() => {
+        if (window.cordova) {
+            scrollingService.enableScrolling();
+        }
+        if (isEmpty) {
+            setIsEmpty(false);
+        }
+    }, [isEmpty]);
+    // HANDLE RESIZE
+    React.useEffect(() => {
+        const signatureCanvas = canvasRef.current;
+        if (!signatureCanvas)
+            return;
+        const resize = () => {
+            const parentDiv = signatureCanvas.getCanvas().parentNode;
+            if (parentDiv) {
+                setCanvasDimensions({
+                    // @ts-expect-error ???
+                    width: parentDiv.clientWidth,
+                    // @ts-expect-error ???
+                    height: parentDiv.clientHeight,
+                });
+            }
+        };
+        window.addEventListener('resize', resize);
+        resize();
+        return () => {
+            window.removeEventListener('resize', resize);
+        };
+    }, [canvasRef]);
+    // REACTIVE DISABLING OF CANVAS
+    React.useEffect(() => {
+        if (!canvasRef.current)
+            return;
+        if (element.readOnly) {
+            canvasRef.current.off();
+        }
+        else {
+            canvasRef.current.on();
+        }
+    }, [canvasRef, element.readOnly]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null,
+            React.createElement(SignatureCanvas, { ref: canvasRef, canvasProps: {
+                    ...canvasDimensions,
+                    className: 'input ob-signature__control cypress-signature-control signature-pad',
+                    // @ts-expect-error ???
+                    disabled: element.readOnly,
+                }, onEnd: handleEndDraw, onBegin: window.cordova ? scrollingService.disableScrolling : undefined })),
+        React.createElement("div", { className: "buttons ob-buttons" },
+            React.createElement("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: handleClear, disabled: element.readOnly || isEmpty }, "Clear"),
+            React.createElement("button", { type: "button", className: "button ob-button ob-button__done is-primary cypress-done-signature-button", onClick: handleDone, disabled: element.readOnly || isEmpty }, "Done"))));
+});
+const SignatureDisplay = React.memo(function SignatureDisplay({ element, value, onChange, }) {
+    const result = useAttachment(value, element, React.useCallback((id, attachment) => {
+        onChange(element, attachment);
+    }, [element, onChange]));
+    const progressTooltipRef = React.useRef(null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("figure", { className: "ob-figure", ref: progressTooltipRef },
+            React.createElement("div", { className: "figure-content" },
+                React.createElement(DisplayImage, { ...result, progressTooltipRef: progressTooltipRef }))),
+        React.createElement("div", { className: "buttons ob-buttons" },
+            React.createElement("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: () => onChange(element, undefined), disabled: element.readOnly }, "Clear"))));
+});
+const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingImageUrl, imageUrl, loadImageUrlError, progress, progressTooltipRef, }) {
+    if (uploadErrorMessage) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("h3", { className: "title is-3" }, "Upload Failed"),
+            React.createElement("p", null,
+                "Your signature failed to upload, please press the ",
+                React.createElement("b", null, "Clear"),
+                " button and try again.")));
+    }
+    if (loadImageUrlError) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("h3", { className: "title is-3" }, "Preview Failed"),
+            React.createElement("p", null, loadImageUrlError.message)));
+    }
+    if (isLoadingImageUrl) {
+        return React.createElement(OnLoading, { small: true, className: "cypress-signature-loading-image" });
+    }
+    if (imageUrl) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "ob-figure__status" },
+                React.createElement(AttachmentStatus, { isLoadingImageUrl: isLoadingImageUrl, loadImageUrlError: loadImageUrlError, isUploading: isUploading, imageUrl: imageUrl })),
+            React.createElement("img", { src: imageUrl, className: "cypress-signature-image ob-signature__img" }),
+            progressTooltipRef.current && (React.createElement(ProgressBar, { progress: progress, isShowing: isUploading, tooltipAnchorEl: progressTooltipRef.current }))));
+    }
+    return React.createElement(ImagePreviewUnavailable, null);
+});
 //# sourceMappingURL=FormElementSignature.js.map