npm - @oneblink/apps-react - Versions diffs - 2.3.0-beta.1 → 2.3.0-beta.11 - Mend

@oneblink/apps-react 2.3.0-beta.1 → 2.3.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/components/renderer/attachments/AttachmentStatus.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tooltip } from '@mui/material';
 import useIsOffline from '../../../hooks/useIsOffline';
-const AttachmentStatus = ({ isUploading, isUploadPaused, uploadError, loadImageUrlError, isLoadingImageUrl, imageUrl, }) => {
+const AttachmentStatus = ({ isUploading, isUploadPaused, uploadError, loadImageUrlError, isLoadingImageUrl, imageUrl, progress, }) => {
     const isOffline = useIsOffline();
     const tooltip = React.useMemo(() => {
         if (isLoadingImageUrl && !imageUrl) {
@@ -27,7 +27,10 @@ const AttachmentStatus = ({ isUploading, isUploadPaused, uploadError, loadImageU
                 React.createElement("div", { className: "cypress-attachment-uploading" },
                     React.createElement("i", { className: "material-icons has-text-warning" }, "wifi_off"))));
         }
-        return null;
+        return (React.createElement(Tooltip, { title: "Uploading" },
+            React.createElement("div", { className: "cypress-attachment-uploading" },
+                Math.round(progress || 0),
+                "%")));
     }
     return (React.createElement(Tooltip, { title: tooltip },
         React.createElement("span", { className: "attachment__status-wrapper" },

package/dist/components/renderer/attachments/AttachmentStatus.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AttachmentStatus.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/AttachmentStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,YAAY,MAAM,6BAA6B,CAAA;AAEtD,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,~~GAQT~~,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAEhC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,iBAAiB,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO,kEAAkE,CAAA;SAC1E;QACD,IAAI,iBAAiB,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO,qEAAqE,CAAA;SAC7E;QAED,OAAO,yBAAyB,CAAA;IAClC,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEpD,IAAI,WAAW,EAAE;QACf,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,WAAW,CAAC,OAAO;YACjC,8BAAM,SAAS,EAAC,4BAA4B;gBAC1C,2BAAG,SAAS,EAAC,gCAAgC,YAAU,CAClD,CACC,CACX,CAAA;KACF;IAED,IAAI,WAAW,EAAE;QACf,IAAI,cAAc,EAAE;YAClB,OAAO,CACL,8BAAM,SAAS,EAAC,4BAA4B;gBAC1C,2BAAG,SAAS,EAAC,gBAAgB,YAAU,CAClC,CACR,CAAA;SACF;QACD,IAAI,SAAS,EAAE;YACb,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAC,oDAAoD;gBACjE,6BAAK,SAAS,EAAC,8BAA8B;oBAC3C,2BAAG,SAAS,EAAC,iCAAiC,eAAa,CACvD,CACE,CACX,CAAA;SACF;QACD,OAAO,IAAI,CAAA;~~KACZ~~;IAED,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,OAAO;QACrB,8BAAM,SAAS,EAAC,4BAA4B;YAC1C,2BAAG,SAAS,EAAC,iCAAiC,mBAAiB,CAC1D,CACC,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport useIsOffline from '../../../hooks/useIsOffline'\n\nconst AttachmentStatus = ({\n isUploading,\n isUploadPaused,\n uploadError,\n loadImageUrlError,\n isLoadingImageUrl,\n imageUrl,\n}: {\n isUploading?: boolean\n isUploadPaused?: boolean\n uploadError?: Error\n loadImageUrlError?: Error\n isLoadingImageUrl?: boolean\n imageUrl: string \| null \| undefined\n}) => {\n const isOffline = useIsOffline()\n\n const tooltip = React.useMemo(() => {\n if (isLoadingImageUrl && !imageUrl) {\n return 'Attempting to load file preview. File is synced with submission.'\n }\n if (loadImageUrlError && !imageUrl) {\n return 'File preview not available, however file is synced with submission.'\n }\n\n return 'Synced with submission.'\n }, [imageUrl, isLoadingImageUrl, loadImageUrlError])\n\n if (uploadError) {\n return (\n <Tooltip title={uploadError.message}>\n <span className=\"attachment__status-wrapper\">\n <i className=\"material-icons has-text-danger\">error</i>\n </span>\n </Tooltip>\n )\n }\n\n if (isUploading) {\n if (isUploadPaused) {\n return (\n <span className=\"attachment__status-wrapper\">\n <i className=\"material-icons\">pause</i>\n </span>\n )\n }\n if (isOffline) {\n return (\n <Tooltip title=\"Upload will start when you connect to the internet\">\n <div className=\"cypress-attachment-uploading\">\n <i className=\"material-icons has-text-warning\">wifi_off</i>\n </div>\n </Tooltip>\n )\n }\n return ~~null~~\n }\n\n return (\n <Tooltip title={tooltip}>\n <span className=\"attachment__status-wrapper\">\n <i className=\"material-icons has-text-success\">check_circle</i>\n </span>\n </Tooltip>\n )\n}\n\nexport default React.memo(AttachmentStatus)\n"]}
1	+ {"version":3,"file":"AttachmentStatus.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/AttachmentStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,YAAY,MAAM,6BAA6B,CAAA;AAEtD,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,GAST,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAEhC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,iBAAiB,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO,kEAAkE,CAAA;SAC1E;QACD,IAAI,iBAAiB,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO,qEAAqE,CAAA;SAC7E;QAED,OAAO,yBAAyB,CAAA;IAClC,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEpD,IAAI,WAAW,EAAE;QACf,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,WAAW,CAAC,OAAO;YACjC,8BAAM,SAAS,EAAC,4BAA4B;gBAC1C,2BAAG,SAAS,EAAC,gCAAgC,YAAU,CAClD,CACC,CACX,CAAA;KACF;IAED,IAAI,WAAW,EAAE;QACf,IAAI,cAAc,EAAE;YAClB,OAAO,CACL,8BAAM,SAAS,EAAC,4BAA4B;gBAC1C,2BAAG,SAAS,EAAC,gBAAgB,YAAU,CAClC,CACR,CAAA;SACF;QACD,IAAI,SAAS,EAAE;YACb,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAC,oDAAoD;gBACjE,6BAAK,SAAS,EAAC,8BAA8B;oBAC3C,2BAAG,SAAS,EAAC,iCAAiC,eAAa,CACvD,CACE,CACX,CAAA;SACF;QACD,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAC,WAAW;YACxB,6BAAK,SAAS,EAAC,8BAA8B;gBAC1C,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC;oBACtB,CACE,CACX,CAAA;KACF;IAED,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,OAAO;QACrB,8BAAM,SAAS,EAAC,4BAA4B;YAC1C,2BAAG,SAAS,EAAC,iCAAiC,mBAAiB,CAC1D,CACC,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport useIsOffline from '../../../hooks/useIsOffline'\n\nconst AttachmentStatus = ({\n isUploading,\n isUploadPaused,\n uploadError,\n loadImageUrlError,\n isLoadingImageUrl,\n imageUrl,\n progress,\n}: {\n isUploading?: boolean\n isUploadPaused?: boolean\n uploadError?: Error\n loadImageUrlError?: Error\n isLoadingImageUrl?: boolean\n imageUrl: string \| null \| undefined\n progress: number \| undefined\n}) => {\n const isOffline = useIsOffline()\n\n const tooltip = React.useMemo(() => {\n if (isLoadingImageUrl && !imageUrl) {\n return 'Attempting to load file preview. File is synced with submission.'\n }\n if (loadImageUrlError && !imageUrl) {\n return 'File preview not available, however file is synced with submission.'\n }\n\n return 'Synced with submission.'\n }, [imageUrl, isLoadingImageUrl, loadImageUrlError])\n\n if (uploadError) {\n return (\n <Tooltip title={uploadError.message}>\n <span className=\"attachment__status-wrapper\">\n <i className=\"material-icons has-text-danger\">error</i>\n </span>\n </Tooltip>\n )\n }\n\n if (isUploading) {\n if (isUploadPaused) {\n return (\n <span className=\"attachment__status-wrapper\">\n <i className=\"material-icons\">pause</i>\n </span>\n )\n }\n if (isOffline) {\n return (\n <Tooltip title=\"Upload will start when you connect to the internet\">\n <div className=\"cypress-attachment-uploading\">\n <i className=\"material-icons has-text-warning\">wifi_off</i>\n </div>\n </Tooltip>\n )\n }\n return (\n <Tooltip title=\"Uploading\">\n <div className=\"cypress-attachment-uploading\">\n {Math.round(progress \|\| 0)}%\n </div>\n </Tooltip>\n )\n }\n\n return (\n <Tooltip title={tooltip}>\n <span className=\"attachment__status-wrapper\">\n <i className=\"material-icons has-text-success\">check_circle</i>\n </span>\n </Tooltip>\n )\n}\n\nexport default React.memo(AttachmentStatus)\n"]}

package/dist/components/renderer/attachments/FileCard.js CHANGED Viewed

@@ -53,8 +53,8 @@ function FileCard({ element, isUploading, isUploadPaused, uploadErrorMessage, lo
                             } }, "Remove")))),
             React.createElement("div", { className: "ob-files__file-name is-size-6" },
                 React.createElement("span", { className: "ob-files__file-name-inner" }, fileName),
-                React.createElement(AttachmentStatus, { isUploading: isUploading, isUploadPaused: isUploadPaused, uploadError: uploadError, loadImageUrlError: loadImageUrlError, isLoadingImageUrl: isLoadingImageUrl, imageUrl: imageUrl }),
-                isUploading && React.createElement(ProgressBar, { progress: progress })))));
+                React.createElement(AttachmentStatus, { isUploading: isUploading, isUploadPaused: isUploadPaused, uploadError: uploadError, loadImageUrlError: loadImageUrlError, isLoadingImageUrl: isLoadingImageUrl, imageUrl: imageUrl, progress: progress }),
+                React.createElement(ProgressBar, { progress: progress, isShowing: !!isUploading })))));
 }
 export default React.memo(FileCard);
 //# sourceMappingURL=FileCard.js.map

package/dist/components/renderer/attachments/FileCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/FileCard.tsx"],"names":[],"mappings":"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~~gBACD~~,~~WAAW,IAAI,~~oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,GAAI,~~CAC/C~~,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../../../hooks/useBooleanState'\nimport useClickOutsideElement from '../../../hooks/useClickOutsideElement'\nimport { FormTypes } from '@oneblink/types'\nimport FileCardContent from './FileCardContent'\nimport AttachmentStatus from './AttachmentStatus'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../../../services/form-validation'\nimport ProgressBar from './ProgressBar'\n\ntype Props = {\n element: FormTypes.FilesElement\n isUploading?: boolean\n isUploadPaused?: boolean\n uploadErrorMessage?: string\n loadImageUrlError?: Error\n isLoadingImageUrl?: boolean\n fileName: string\n imageUrl: string \| undefined \| null\n onRemove: () => void\n onDownload?: () => void\n onRetry?: () => void\n progress: undefined \| number\n}\n\nfunction FileCard({\n element,\n isUploading,\n isUploadPaused,\n uploadErrorMessage,\n loadImageUrlError,\n isLoadingImageUrl,\n imageUrl,\n fileName,\n onDownload,\n onRemove,\n onRetry,\n progress,\n}: Props) {\n const dropDownRef = React.useRef(null)\n const [isShowingMore, showMore, hideMore] = useBooleanState(false)\n\n const uploadError = React.useMemo(() => {\n if (!checkFileNameIsValid(element, fileName)) {\n return new Error(`${fileName.split('.').pop()} files are not allowed`)\n }\n if (!checkFileNameExtensionIsValid(element, fileName)) {\n return new Error(`${fileName} must have an extension`)\n }\n if (uploadErrorMessage) {\n return new Error(uploadErrorMessage)\n }\n }, [element, fileName, uploadErrorMessage])\n\n useClickOutsideElement(\n dropDownRef,\n React.useCallback(() => {\n if (isShowingMore) {\n hideMore()\n }\n }, [hideMore, isShowingMore]),\n )\n\n return (\n <div className=\"column is-one-quarter\">\n <div className=\"ob-files__box\">\n <div className=\"ob-files__content\">\n <FileCardContent imageUrl={imageUrl} />\n </div>\n <div\n className={clsx('dropdown is-right ob-files__menu', {\n 'is-active': isShowingMore,\n })}\n ref={dropDownRef}\n >\n <div className=\"dropdown-trigger\">\n <button\n type=\"button\"\n className=\"button ob-files__menu-button cypress-file-menu-button\"\n aria-haspopup=\"true\"\n aria-controls=\"dropdown-menu\"\n onClick={isShowingMore ? hideMore : showMore}\n >\n <i className=\"material-icons ob-files__menu-icon\">more_vert</i>\n </button>\n </div>\n <div className=\"dropdown-menu\" role=\"menu\">\n <div className=\"dropdown-content\">\n {onRetry && (\n <a\n className=\"dropdown-item cypress-file-retry-button\"\n onClick={() => {\n hideMore()\n onRetry()\n }}\n >\n Retry\n </a>\n )}\n {onDownload && (\n <a\n className=\"dropdown-item cypress-file-download-button\"\n onClick={() => {\n hideMore()\n onDownload()\n }}\n >\n Download\n </a>\n )}\n <a\n className={clsx('dropdown-item cypress-file-remove-button', {\n 'ob-files__menu-remove-hidden': element.readOnly,\n })}\n onClick={() => {\n hideMore()\n onRemove()\n }}\n >\n Remove\n </a>\n </div>\n </div>\n </div>\n\n <div className=\"ob-files__file-name is-size-6\">\n <span className=\"ob-files__file-name-inner\">{fileName}</span>\n <AttachmentStatus\n isUploading={isUploading}\n isUploadPaused={isUploadPaused}\n uploadError={uploadError}\n loadImageUrlError={loadImageUrlError}\n isLoadingImageUrl={isLoadingImageUrl}\n imageUrl={imageUrl}\n />\n ~~{isUploading &&~~ <ProgressBar progress={progress} />}\n </div>\n </div>\n </div>\n )\n}\n\nexport default React.memo(FileCard)\n"]}
1	+ {"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/FileCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../../../hooks/useBooleanState'\nimport useClickOutsideElement from '../../../hooks/useClickOutsideElement'\nimport { FormTypes } from '@oneblink/types'\nimport FileCardContent from './FileCardContent'\nimport AttachmentStatus from './AttachmentStatus'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../../../services/form-validation'\nimport ProgressBar from './ProgressBar'\n\ntype Props = {\n element: FormTypes.FilesElement\n isUploading?: boolean\n isUploadPaused?: boolean\n uploadErrorMessage?: string\n loadImageUrlError?: Error\n isLoadingImageUrl?: boolean\n fileName: string\n imageUrl: string \| undefined \| null\n onRemove: () => void\n onDownload?: () => void\n onRetry?: () => void\n progress: undefined \| number\n}\n\nfunction FileCard({\n element,\n isUploading,\n isUploadPaused,\n uploadErrorMessage,\n loadImageUrlError,\n isLoadingImageUrl,\n imageUrl,\n fileName,\n onDownload,\n onRemove,\n onRetry,\n progress,\n}: Props) {\n const dropDownRef = React.useRef(null)\n const [isShowingMore, showMore, hideMore] = useBooleanState(false)\n\n const uploadError = React.useMemo(() => {\n if (!checkFileNameIsValid(element, fileName)) {\n return new Error(`${fileName.split('.').pop()} files are not allowed`)\n }\n if (!checkFileNameExtensionIsValid(element, fileName)) {\n return new Error(`${fileName} must have an extension`)\n }\n if (uploadErrorMessage) {\n return new Error(uploadErrorMessage)\n }\n }, [element, fileName, uploadErrorMessage])\n\n useClickOutsideElement(\n dropDownRef,\n React.useCallback(() => {\n if (isShowingMore) {\n hideMore()\n }\n }, [hideMore, isShowingMore]),\n )\n\n return (\n <div className=\"column is-one-quarter\">\n <div className=\"ob-files__box\">\n <div className=\"ob-files__content\">\n <FileCardContent imageUrl={imageUrl} />\n </div>\n <div\n className={clsx('dropdown is-right ob-files__menu', {\n 'is-active': isShowingMore,\n })}\n ref={dropDownRef}\n >\n <div className=\"dropdown-trigger\">\n <button\n type=\"button\"\n className=\"button ob-files__menu-button cypress-file-menu-button\"\n aria-haspopup=\"true\"\n aria-controls=\"dropdown-menu\"\n onClick={isShowingMore ? hideMore : showMore}\n >\n <i className=\"material-icons ob-files__menu-icon\">more_vert</i>\n </button>\n </div>\n <div className=\"dropdown-menu\" role=\"menu\">\n <div className=\"dropdown-content\">\n {onRetry && (\n <a\n className=\"dropdown-item cypress-file-retry-button\"\n onClick={() => {\n hideMore()\n onRetry()\n }}\n >\n Retry\n </a>\n )}\n {onDownload && (\n <a\n className=\"dropdown-item cypress-file-download-button\"\n onClick={() => {\n hideMore()\n onDownload()\n }}\n >\n Download\n </a>\n )}\n <a\n className={clsx('dropdown-item cypress-file-remove-button', {\n 'ob-files__menu-remove-hidden': element.readOnly,\n })}\n onClick={() => {\n hideMore()\n onRemove()\n }}\n >\n Remove\n </a>\n </div>\n </div>\n </div>\n\n <div className=\"ob-files__file-name is-size-6\">\n <span className=\"ob-files__file-name-inner\">{fileName}</span>\n <AttachmentStatus\n isUploading={isUploading}\n isUploadPaused={isUploadPaused}\n uploadError={uploadError}\n loadImageUrlError={loadImageUrlError}\n isLoadingImageUrl={isLoadingImageUrl}\n imageUrl={imageUrl}\n progress={progress}\n />\n <ProgressBar progress={progress} isShowing={!!isUploading} />\n </div>\n </div>\n </div>\n )\n}\n\nexport default React.memo(FileCard)\n"]}

package/dist/components/renderer/attachments/ProgressBar.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from 'react';
 interface Props {
     progress: number | undefined;
+    isShowing: boolean;
 }
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/dist/components/renderer/attachments/ProgressBar.js CHANGED Viewed

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { Tooltip } from '@mui/material';
+import { Fade } from '@mui/material';
 import ProgressBar from '../ProgressBar';
-const AttachmentProgressBar = ({ progress }) => {
-    return (React.createElement("div", { className: "ob-progress__attachment-wrapper" },
-        React.createElement(Tooltip, { title: typeof progress === 'number'
-                ? `Attachment upload progress: ${Math.round(progress)}%`
-                : '' },
-            React.createElement("span", { className: "ob-progress__attachment-tooltip-element" })),
-        React.createElement(ProgressBar, { className: "ob-progress__attachment-bar", progress: progress || 0 })));
+const AttachmentProgressBar = ({ progress, isShowing }) => {
+    return (React.createElement(Fade, { in: isShowing },
+        React.createElement("span", null,
+            React.createElement("div", { className: "ob-progress__attachment-wrapper" },
+                React.createElement(ProgressBar, { className: "ob-progress__attachment-bar", progress: progress || 0 })))));
 };
 export default React.memo(AttachmentProgressBar);
 //# sourceMappingURL=ProgressBar.js.map

package/dist/components/renderer/attachments/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,~~OAAO~~,EAAE,MAAM,eAAe,CAAA;~~AACvC~~,OAAO,WAAW,MAAM,gBAAgB,CAAA;~~AAMxC~~,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;~~IACpD~~,OAAO,CACL,~~6BAAK,SAAS,EAAC,iCAAiC;QAC9C,~~oBAAC,~~OAAO,IACN,KAAK,EACH,OAAO,QAAQ,KAAK,QAAQ;gBAC1B,CAAC,CAAC,+BAA+B,~~IAAI,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~QAAQ,CAAC,GAAG~~;~~gBACxD,CAAC,CAAC,EAAE~~;~~YAGR~~,~~8BAAM~~,SAAS,EAAC,~~yCAAyC,GAAG,CACpD~~;~~QACV~~,oBAAC,WAAW,IACV,SAAS,EAAC,6BAA6B,EACvC,QAAQ,EAAE,QAAQ,IAAI,CAAC,GACvB,CACE,~~CACP~~,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,qBAAqB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { ~~Tooltip~~ } from '@mui/material'\nimport ProgressBar from '../ProgressBar'\n\ninterface Props {\n progress: number \| undefined\n}\n\nconst AttachmentProgressBar = ({ progress }: Props) => {\n return (\n <~~div~~ ~~className=\"ob-progress__attachment-wrapper\">\n <Tooltip\n title~~={~~\n typeof progress === 'number'\n ? `Attachment upload progress: ${Math.round(progress)~~}~~%`\~~n ~~: ''\n }\n~~ >\n <~~span~~ className=\"ob-progress__attachment-~~tooltip-element~~\" ~~/>\n </Tooltip~~>\n <ProgressBar\n className=\"ob-progress__attachment-bar\"\n progress={progress \|\| 0}\n />\n </div>\n )\n}\n\nexport default React.memo<Props>(AttachmentProgressBar)\n"]}
1	+ {"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AAOxC,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAS,EAAE,EAAE;IAC/D,OAAO,CACL,oBAAC,IAAI,IAAC,EAAE,EAAE,SAAS;QACjB;YACE,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,oBAAC,WAAW,IACV,SAAS,EAAC,6BAA6B,EACvC,QAAQ,EAAE,QAAQ,IAAI,CAAC,GACvB,CACE,CACD,CACF,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,qBAAqB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Fade } from '@mui/material'\nimport ProgressBar from '../ProgressBar'\n\ninterface Props {\n progress: number \| undefined\n isShowing: boolean\n}\n\nconst AttachmentProgressBar = ({ progress, isShowing }: Props) => {\n return (\n <Fade in={isShowing}>\n <span>\n <div className=\"ob-progress__attachment-wrapper\">\n <ProgressBar\n className=\"ob-progress__attachment-bar\"\n progress={progress \|\| 0}\n />\n </div>\n </span>\n </Fade>\n )\n}\n\nexport default React.memo<Props>(AttachmentProgressBar)\n"]}

package/dist/form-elements/FormElementCamera.js CHANGED Viewed

@@ -12,7 +12,6 @@ import AttachmentStatus from '../components/renderer/attachments/AttachmentStatu
 import { canvasToBlob, urlToBlobAsync } from '../services/blob-utils';
 import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable';
 import ProgressBar from '../components/renderer/attachments/ProgressBar';
-import { Fade } from '@mui/material';
 function FormElementCamera({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
     const [{ cameraError, isLoading }, setState] = React.useState({
         isLoading: false,
@@ -165,15 +164,14 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
         image.setAttribute('crossorigin', 'anonymous');
         image.src = imageUrl;
     }, [clearIsAnnotating, element, imageUrl, onChange]);
+    const progressTooltipRef = React.useRef(null);
     return (React.createElement(React.Fragment, null,
         React.createElement(FormElementLabelContainer, { className: "ob-camera", element: element, id: id, required: element.required },
             React.createElement("div", { className: "control" },
                 (value || isLoading) && (React.createElement(React.Fragment, null,
-                    React.createElement("figure", { className: "ob-figure" },
+                    React.createElement("figure", { className: "ob-figure", ref: progressTooltipRef },
                         React.createElement(DisplayImage, { isUploading: isUploading, uploadErrorMessage: uploadErrorMessage, isLoadingImageUrl: isLoadingImageUrl, imageUrl: imageUrl, loadImageUrlError: loadImageUrlError, isLoading: isLoading, element: element, onAnnotate: setIsAnnotating, canDownload: canDownload, progress: progress }),
-                        React.createElement(Fade, { in: isUploading },
-                            React.createElement("span", null,
-                                React.createElement(ProgressBar, { progress: progress })))))),
+                        React.createElement(ProgressBar, { isShowing: isUploading, progress: progress })))),
                 React.createElement("input", { ref: fileInputRef, className: "ob-input ob-camera__input-hidden cypress-camera-control", type: "file", accept: "image/*", capture: "environment", id: id, name: element.name, required: element.required, disabled: element.readOnly, onChange: fileChange }),
                 React.createElement("div", { className: "buttons ob-buttons" }, value ? (React.createElement(React.Fragment, null,
                     React.createElement("button", { type: "button", className: "button ob-button ob-button__clear is-light cypress-clear-camera", onClick: clearImage, disabled: element.readOnly || isLoading }, "Clear"),
@@ -194,7 +192,7 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
                 React.createElement("blockquote", null, cameraError.toString()))))));
 }
 export default React.memo(FormElementCamera);
-const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingImageUrl, imageUrl, loadImageUrlError, isLoading, element, onAnnotate, }) {
+const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingImageUrl, imageUrl, loadImageUrlError, isLoading, element, onAnnotate, progress, }) {
     if (uploadErrorMessage) {
         return (React.createElement("div", { className: "figure-content" },
             React.createElement("h3", { className: "title is-3" }, "Upload Failed"),
@@ -215,7 +213,7 @@ const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUp
     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(AttachmentStatus, { isLoadingImageUrl: isLoadingImageUrl, loadImageUrlError: loadImageUrlError, isUploading: isUploading, imageUrl: imageUrl, progress: progress })),
             React.createElement("img", { src: imageUrl, className: "cypress-camera-image ob-camera__img", crossOrigin: "anonymous" }),
             React.createElement("button", { type: "button", className: "button is-primary ob-camera__annotate-button cypress-annotate-button", onClick: onAnnotate, disabled: element.readOnly },
                 React.createElement("span", { className: "icon" },

package/dist/form-elements/FormElementCamera.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n checkIfContentTypeIsImage,\n prepareNewAttachment,\n correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport { Fade } from '@mui/material'\n\ntype Props = {\n id: string\n element: FormTypes.CameraElement\n value: FormElementBinaryStorageValue\n onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n}\n\nfunction FormElementCamera({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n}: Props) {\n const [{ cameraError, isLoading }, setState] = React.useState<{\n isLoading: boolean\n cameraError?: Error\n }>({\n isLoading: false,\n })\n const [isDirty, setIsDirty] = useBooleanState(false)\n const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n useBooleanState(false)\n const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n const clearImage = React.useCallback(() => {\n onChange(element, undefined)\n }, [element, onChange])\n\n const fileChange = React.useCallback(\n async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n if (!changeEvent.target \|\| !changeEvent.target.files) {\n return\n }\n\n const file = changeEvent.target.files[0]\n if (!file) {\n return\n }\n\n setState({\n isLoading: true,\n })\n\n console.log('File selected event', file)\n try {\n if (!checkIfContentTypeIsImage(file.type)) {\n throw new Error(\n `Invalid file type \"${file.type}\". Please select an image.`,\n )\n }\n const result = await correctFileOrientation(\n file,\n element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n )\n\n if (result instanceof Blob) {\n onChange(element, prepareNewAttachment(result, file.name, element))\n } else {\n const blob = await canvasToBlob(result)\n onChange(element, prepareNewAttachment(blob, file.name, element))\n }\n\n setIsDirty()\n setState({\n isLoading: false,\n })\n } catch (error) {\n setState({\n isLoading: false,\n cameraError: error as Error,\n })\n }\n },\n [element, onChange, setIsDirty],\n )\n const openCamera = React.useCallback(() => {\n if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n setState({\n isLoading: true,\n })\n navigator.camera.getPicture(\n (base64Data: string) => {\n urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n .then((blob) => {\n onChange(\n element,\n prepareNewAttachment(blob, 'photo.jpeg', element),\n )\n setState({\n isLoading: false,\n })\n })\n .catch((error) => {\n setState({\n cameraError: error,\n isLoading: false,\n })\n })\n },\n (error: Error) => {\n console.warn(\n 'An error occurred while attempting to take a photo',\n error,\n )\n setState({\n isLoading: false,\n cameraError: error,\n })\n },\n {\n quality: 100,\n destinationType: window.Camera.DestinationType.DATA_URL,\n sourceType: window.Camera.PictureSourceType.CAMERA,\n allowEdit: false,\n encodingType: window.Camera.EncodingType.JPEG,\n mediaType: window.Camera.MediaType.PICTURE,\n correctOrientation: true,\n saveToPhotoAlbum: false,\n cameraDirection: window.Camera.Direction.BACK,\n },\n )\n } else if (fileInputRef.current) {\n // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n fileInputRef.current.value = ''\n fileInputRef.current.click()\n } else {\n console.error(\n 'Could not find \"input\" element in Camera component template',\n )\n }\n }, [element, onChange])\n\n const {\n isUploading,\n uploadErrorMessage,\n isLoadingImageUrl,\n imageUrl,\n loadImageUrlError,\n canDownload,\n progress,\n } = useAttachment(\n value,\n element,\n React.useCallback(\n (id, attachment) => {\n onChange(element, attachment)\n },\n [element, onChange],\n ),\n )\n\n const handleDownload = React.useCallback(async () => {\n if (typeof value === 'string') {\n await downloadFileLegacy(value, id)\n } else if (value && value.type !== 'ERROR') {\n await downloadAttachment(value)\n }\n }, [value, id])\n\n const handleSaveAnnotation = React.useCallback(\n (annotationDataUri: string) => {\n clearIsAnnotating()\n\n if (typeof imageUrl !== 'string') {\n return\n }\n\n setState({\n isLoading: true,\n })\n\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n if (!ctx) {\n return\n }\n\n const image = new Image()\n image.onload = function () {\n canvas.width = image.width\n canvas.height = image.height\n\n ctx.drawImage(image, 0, 0)\n\n const annotationImage = new Image()\n annotationImage.onload = function () {\n ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height)\n\n try {\n canvasToBlob(canvas)\n .then((blob) => {\n const attachment = prepareNewAttachment(\n blob,\n 'photo.png',\n element,\n )\n onChange(element, attachment)\n setState({\n isLoading: false,\n })\n })\n .catch((error) => {\n setState({\n cameraError: error,\n isLoading: false,\n })\n })\n } catch (error) {\n setState({\n cameraError: error as Error,\n isLoading: false,\n })\n }\n }\n annotationImage.src = annotationDataUri\n }\n image.setAttribute('crossorigin', 'anonymous')\n image.src = imageUrl\n },\n [clearIsAnnotating, element, imageUrl, onChange],\n )\n\n return (\n <>\n <FormElementLabelContainer\n className=\"ob-camera\"\n element={element}\n id={id}\n required={element.required}\n >\n <div className=\"control\">\n {(value \|\| isLoading) && (\n <>\n <figure className=\"ob-figure\">\n <DisplayImage\n isUploading={isUploading}\n uploadErrorMessage={uploadErrorMessage}\n isLoadingImageUrl={isLoadingImageUrl}\n imageUrl={imageUrl}\n loadImageUrlError={loadImageUrlError}\n isLoading={isLoading}\n element={element}\n onAnnotate={setIsAnnotating}\n canDownload={canDownload}\n progress={progress}\n />\n {\n <Fade in={isUploading}>\n <span>\n <ProgressBar progress={progress} />\n </span>\n </Fade>\n }\n </figure>\n </>\n )}\n\n <input\n ref={fileInputRef}\n className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n id={id}\n name={element.name}\n required={element.required}\n disabled={element.readOnly}\n onChange={fileChange}\n />\n <div className=\"buttons ob-buttons\">\n {value ? (\n <>\n <button\n type=\"button\"\n className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n onClick={clearImage}\n disabled={element.readOnly \|\| isLoading}\n >\n Clear\n </button>\n {canDownload && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n onClick={handleDownload}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">cloud_download</i>\n </span>\n <span> Download</span>\n </button>\n )}\n </>\n ) : (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n onClick={openCamera}\n disabled={element.readOnly \|\| isLoading}\n >\n Open Camera\n </button>\n )}\n </div>\n </div>\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n\n {isAnnotating && imageUrl && (\n <AnnotationModal\n imageSrc={imageUrl}\n onClose={clearIsAnnotating}\n onSave={handleSaveAnnotation}\n />\n )}\n\n {cameraError && (\n <Modal\n isOpen\n title=\"Whoops...\"\n className=\"cypress-error-modal\"\n titleClassName=\"cypress-error-title\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-close-error-button\"\n onClick={() => setState({ isLoading: false })}\n >\n Okay\n </button>\n }\n >\n <p>\n An error occurred while attempting to take a photo. Please click{' '}\n <b>Okay</b> below to try again. If the problem persists, please\n contact support.\n </p>\n\n <div className=\"content has-margin-top-6\">\n <blockquote>{cameraError.toString()}</blockquote>\n </div>\n </Modal>\n )}\n </>\n )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n uploadErrorMessage,\n isUploading,\n isLoadingImageUrl,\n imageUrl,\n loadImageUrlError,\n isLoading,\n element,\n onAnnotate,\n}: ReturnType<typeof useAttachment> & {\n element: FormTypes.CameraElement\n isLoading: boolean\n onAnnotate: () => void\n}) {\n if (uploadErrorMessage) {\n return (\n <div className=\"figure-content\">\n <h3 className=\"title is-3\">Upload Failed</h3>\n <p>\n Your photo failed to upload, please press the <b>Clear</b> button and\n try again.\n </p>\n </div>\n )\n }\n\n if (loadImageUrlError) {\n return (\n <div className=\"figure-content\">\n <h3 className=\"title is-3\">Preview Failed</h3>\n <p>{loadImageUrlError.message}</p>\n </div>\n )\n }\n\n if (isLoadingImageUrl \|\| isLoading) {\n return (\n <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n <OnLoading small />\n </div>\n )\n }\n\n if (imageUrl) {\n return (\n <>\n <span className=\"ob-figure__status\">\n <AttachmentStatus\n isLoadingImageUrl={isLoadingImageUrl}\n loadImageUrlError={loadImageUrlError}\n isUploading={isUploading}\n imageUrl={imageUrl}\n />\n </span>\n <img\n src={imageUrl}\n className=\"cypress-camera-image ob-camera__img\"\n crossOrigin=\"anonymous\"\n />\n <button\n type=\"button\"\n className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n onClick={onAnnotate}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">brush</i>\n </span>\n </button>\n </>\n )\n }\n\n return (\n <div className=\"figure-content\">\n <ImagePreviewUnavailable />\n </div>\n )\n})\n"]}
1	+ {"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n checkIfContentTypeIsImage,\n prepareNewAttachment,\n correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\n\ntype Props = {\n id: string\n element: FormTypes.CameraElement\n value: FormElementBinaryStorageValue\n onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n}\n\nfunction FormElementCamera({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n}: Props) {\n const [{ cameraError, isLoading }, setState] = React.useState<{\n isLoading: boolean\n cameraError?: Error\n }>({\n isLoading: false,\n })\n const [isDirty, setIsDirty] = useBooleanState(false)\n const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n useBooleanState(false)\n const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n const clearImage = React.useCallback(() => {\n onChange(element, undefined)\n }, [element, onChange])\n\n const fileChange = React.useCallback(\n async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n if (!changeEvent.target \|\| !changeEvent.target.files) {\n return\n }\n\n const file = changeEvent.target.files[0]\n if (!file) {\n return\n }\n\n setState({\n isLoading: true,\n })\n\n console.log('File selected event', file)\n try {\n if (!checkIfContentTypeIsImage(file.type)) {\n throw new Error(\n `Invalid file type \"${file.type}\". Please select an image.`,\n )\n }\n const result = await correctFileOrientation(\n file,\n element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n )\n\n if (result instanceof Blob) {\n onChange(element, prepareNewAttachment(result, file.name, element))\n } else {\n const blob = await canvasToBlob(result)\n onChange(element, prepareNewAttachment(blob, file.name, element))\n }\n\n setIsDirty()\n setState({\n isLoading: false,\n })\n } catch (error) {\n setState({\n isLoading: false,\n cameraError: error as Error,\n })\n }\n },\n [element, onChange, setIsDirty],\n )\n const openCamera = React.useCallback(() => {\n if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n setState({\n isLoading: true,\n })\n navigator.camera.getPicture(\n (base64Data: string) => {\n urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n .then((blob) => {\n onChange(\n element,\n prepareNewAttachment(blob, 'photo.jpeg', element),\n )\n setState({\n isLoading: false,\n })\n })\n .catch((error) => {\n setState({\n cameraError: error,\n isLoading: false,\n })\n })\n },\n (error: Error) => {\n console.warn(\n 'An error occurred while attempting to take a photo',\n error,\n )\n setState({\n isLoading: false,\n cameraError: error,\n })\n },\n {\n quality: 100,\n destinationType: window.Camera.DestinationType.DATA_URL,\n sourceType: window.Camera.PictureSourceType.CAMERA,\n allowEdit: false,\n encodingType: window.Camera.EncodingType.JPEG,\n mediaType: window.Camera.MediaType.PICTURE,\n correctOrientation: true,\n saveToPhotoAlbum: false,\n cameraDirection: window.Camera.Direction.BACK,\n },\n )\n } else if (fileInputRef.current) {\n // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n fileInputRef.current.value = ''\n fileInputRef.current.click()\n } else {\n console.error(\n 'Could not find \"input\" element in Camera component template',\n )\n }\n }, [element, onChange])\n\n const {\n isUploading,\n uploadErrorMessage,\n isLoadingImageUrl,\n imageUrl,\n loadImageUrlError,\n canDownload,\n progress,\n } = useAttachment(\n value,\n element,\n React.useCallback(\n (id, attachment) => {\n onChange(element, attachment)\n },\n [element, onChange],\n ),\n )\n\n const handleDownload = React.useCallback(async () => {\n if (typeof value === 'string') {\n await downloadFileLegacy(value, id)\n } else if (value && value.type !== 'ERROR') {\n await downloadAttachment(value)\n }\n }, [value, id])\n\n const handleSaveAnnotation = React.useCallback(\n (annotationDataUri: string) => {\n clearIsAnnotating()\n\n if (typeof imageUrl !== 'string') {\n return\n }\n\n setState({\n isLoading: true,\n })\n\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n if (!ctx) {\n return\n }\n\n const image = new Image()\n image.onload = function () {\n canvas.width = image.width\n canvas.height = image.height\n\n ctx.drawImage(image, 0, 0)\n\n const annotationImage = new Image()\n annotationImage.onload = function () {\n ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height)\n\n try {\n canvasToBlob(canvas)\n .then((blob) => {\n const attachment = prepareNewAttachment(\n blob,\n 'photo.png',\n element,\n )\n onChange(element, attachment)\n setState({\n isLoading: false,\n })\n })\n .catch((error) => {\n setState({\n cameraError: error,\n isLoading: false,\n })\n })\n } catch (error) {\n setState({\n cameraError: error as Error,\n isLoading: false,\n })\n }\n }\n annotationImage.src = annotationDataUri\n }\n image.setAttribute('crossorigin', 'anonymous')\n image.src = imageUrl\n },\n [clearIsAnnotating, element, imageUrl, onChange],\n )\n\n const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n return (\n <>\n <FormElementLabelContainer\n className=\"ob-camera\"\n element={element}\n id={id}\n required={element.required}\n >\n <div className=\"control\">\n {(value \|\| isLoading) && (\n <>\n <figure className=\"ob-figure\" ref={progressTooltipRef}>\n <DisplayImage\n isUploading={isUploading}\n uploadErrorMessage={uploadErrorMessage}\n isLoadingImageUrl={isLoadingImageUrl}\n imageUrl={imageUrl}\n loadImageUrlError={loadImageUrlError}\n isLoading={isLoading}\n element={element}\n onAnnotate={setIsAnnotating}\n canDownload={canDownload}\n progress={progress}\n />\n <ProgressBar isShowing={isUploading} progress={progress} />\n </figure>\n </>\n )}\n\n <input\n ref={fileInputRef}\n className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n id={id}\n name={element.name}\n required={element.required}\n disabled={element.readOnly}\n onChange={fileChange}\n />\n <div className=\"buttons ob-buttons\">\n {value ? (\n <>\n <button\n type=\"button\"\n className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n onClick={clearImage}\n disabled={element.readOnly \|\| isLoading}\n >\n Clear\n </button>\n {canDownload && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n onClick={handleDownload}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">cloud_download</i>\n </span>\n <span> Download</span>\n </button>\n )}\n </>\n ) : (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n onClick={openCamera}\n disabled={element.readOnly \|\| isLoading}\n >\n Open Camera\n </button>\n )}\n </div>\n </div>\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n\n {isAnnotating && imageUrl && (\n <AnnotationModal\n imageSrc={imageUrl}\n onClose={clearIsAnnotating}\n onSave={handleSaveAnnotation}\n />\n )}\n\n {cameraError && (\n <Modal\n isOpen\n title=\"Whoops...\"\n className=\"cypress-error-modal\"\n titleClassName=\"cypress-error-title\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-close-error-button\"\n onClick={() => setState({ isLoading: false })}\n >\n Okay\n </button>\n }\n >\n <p>\n An error occurred while attempting to take a photo. Please click{' '}\n <b>Okay</b> below to try again. If the problem persists, please\n contact support.\n </p>\n\n <div className=\"content has-margin-top-6\">\n <blockquote>{cameraError.toString()}</blockquote>\n </div>\n </Modal>\n )}\n </>\n )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n uploadErrorMessage,\n isUploading,\n isLoadingImageUrl,\n imageUrl,\n loadImageUrlError,\n isLoading,\n element,\n onAnnotate,\n progress,\n}: ReturnType<typeof useAttachment> & {\n element: FormTypes.CameraElement\n isLoading: boolean\n onAnnotate: () => void\n progress: number \| undefined\n}) {\n if (uploadErrorMessage) {\n return (\n <div className=\"figure-content\">\n <h3 className=\"title is-3\">Upload Failed</h3>\n <p>\n Your photo failed to upload, please press the <b>Clear</b> button and\n try again.\n </p>\n </div>\n )\n }\n\n if (loadImageUrlError) {\n return (\n <div className=\"figure-content\">\n <h3 className=\"title is-3\">Preview Failed</h3>\n <p>{loadImageUrlError.message}</p>\n </div>\n )\n }\n\n if (isLoadingImageUrl \|\| isLoading) {\n return (\n <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n <OnLoading small />\n </div>\n )\n }\n\n if (imageUrl) {\n return (\n <>\n <span className=\"ob-figure__status\">\n <AttachmentStatus\n isLoadingImageUrl={isLoadingImageUrl}\n loadImageUrlError={loadImageUrlError}\n isUploading={isUploading}\n imageUrl={imageUrl}\n progress={progress}\n />\n </span>\n <img\n src={imageUrl}\n className=\"cypress-camera-image ob-camera__img\"\n crossOrigin=\"anonymous\"\n />\n <button\n type=\"button\"\n className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n onClick={onAnnotate}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">brush</i>\n </span>\n </button>\n </>\n )\n }\n\n return (\n <div className=\"figure-content\">\n <ImagePreviewUnavailable />\n </div>\n )\n})\n"]}

package/dist/form-elements/FormElementCompliance.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
 import { FormElementValueChangeHandler } from '../types/form';
-import { Attachment } from '../types/attachments';
+import { attachmentsService } from '@oneblink/apps';
 interface Props {
     id: string;
     element: FormTypes.ComplianceElement;
@@ -15,7 +15,7 @@ interface Props {
 export interface Value {
     value?: string;
     notes?: string;
-    files?: Attachment[];
+    files?: attachmentsService.Attachment[];
 }
 declare function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, isEven, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementCompliance>;

package/dist/form-elements/FormElementCompliance.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementCompliance.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCompliance.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useBooleanState from '../hooks/useBooleanState'\nimport useToggleComplianceChildren from '../hooks/useToggleComplianceChildren'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ComplianceButton from './ComplianceButton'\nimport FormElementFiles from './FormElementFiles'\nimport FormElementTextarea from './FormElementTextarea'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport { Attachment } from '../types/attachments'\n\ninterface Props {\n id: string\n element: FormTypes.ComplianceElement\n value: unknown\n onChange: FormElementValueChangeHandler<Value>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n conditionallyShownOptions: FormTypes.ChoiceElementOption[] \| undefined\n isEven?: boolean\n}\n\nexport interface Value {\n value?: string\n notes?: string\n files?: Attachment[]\n}\n\nconst baseElement = {\n conditionallyShow: false,\n isDataLookup: false,\n isElementLookup: false,\n required: false,\n requiresAllConditionallyShowPredicates: false,\n}\n\nfunction FormElementCompliance({\n id,\n element,\n value,\n onChange,\n conditionallyShownOptions,\n validationMessage,\n displayValidationMessage,\n isEven,\n}: Props) {\n const typedValue = value as Value \| undefined\n\n const notesElement = React.useMemo<FormTypes.TextareaElement>(\n () => ({\n ...baseElement,\n readOnly: element.readOnly,\n id: `${element.id}-notes`,\n label: 'Notes',\n name: `${element.name}_notes`,\n type: 'textarea',\n }),\n [element.id, element.name, element.readOnly],\n )\n const filesElement = React.useMemo<FormTypes.FilesElement>(\n () => ({\n ...baseElement,\n readOnly: element.readOnly,\n id: `${element.id}-files`,\n label: 'Media',\n name: `${element.name}_files`,\n type: 'files',\n maxEntries: undefined,\n minEntries: undefined,\n restrictFileTypes: false,\n storageType: element.storageType,\n }),\n [element.id, element.name, element.readOnly, element.storageType],\n )\n\n const handleValueChange = React.useCallback<\n FormElementValueChangeHandler<string>\n >(\n (fe, v) => {\n onChange(fe, (existingValue: Value \| undefined) => {\n let newValue = undefined\n if (typeof v === 'function') {\n newValue = v(existingValue ? existingValue.value : undefined)\n } else {\n newValue = v\n }\n if (!newValue) {\n return\n }\n return {\n ...existingValue,\n value: newValue,\n }\n })\n },\n [onChange],\n )\n const handleNotesChange = React.useCallback<\n React.ComponentProps<typeof FormElementTextarea>['onChange']\n >(\n (fe, v) => {\n onChange(element, (existingValue) => {\n if (!existingValue) {\n return\n }\n let newNotes = undefined\n if (typeof v === 'function') {\n newNotes = v(existingValue.notes)\n } else {\n newNotes = v\n }\n return {\n ...existingValue,\n notes: newNotes,\n }\n })\n },\n [element, onChange],\n )\n const handleFilesChange = React.useCallback<\n React.ComponentProps<typeof FormElementFiles>['onChange']\n >(\n (fe, v) => {\n onChange(element, (existingValue) => {\n if (!existingValue) {\n return\n }\n let newFiles = undefined\n if (typeof v === 'function') {\n newFiles = v(existingValue.files)\n } else {\n newFiles = v\n }\n return {\n ...existingValue,\n files: newFiles && newFiles.length ? newFiles : undefined,\n }\n })\n },\n [element, onChange],\n )\n\n const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(\n element,\n !!typedValue?.notes,\n handleNotesChange,\n )\n const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(\n element,\n !!typedValue?.files,\n handleFilesChange,\n )\n\n const [isDirty, setIsDirty] = useBooleanState(false)\n\n const filteredOptions = useFormElementOptions({\n element,\n value: typedValue?.value,\n onChange: handleValueChange,\n conditionallyShownOptions,\n })\n\n return (\n <div className=\"cypress-compliance-element\">\n <FormElementLabelContainer\n className={`ob-compliance ${!isEven ? 'even' : 'odd'}`}\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"ob-compliance__container\">\n <FormElementOptions options={element.options}>\n <div className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\">\n {filteredOptions.map((option) => {\n const isSelected = typedValue?.value === option.value\n return (\n <div className=\"ob-button-radio-container\" key={option.value}>\n <OptionButton\n element={element}\n option={option}\n isSelected={isSelected}\n onClick={() => {\n setIsDirty()\n handleValueChange(element, option.value)\n }}\n className={clsx(\n 'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n {\n 'is-primary': isSelected,\n 'is-light': !isSelected,\n },\n )}\n />\n </div>\n )\n })}\n </div>\n </FormElementOptions>\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n <div className=\"buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group\">\n <ComplianceButton\n isActive={isShowingNotes}\n icon=\"notes\"\n onClick={toggleIsShowingNotes}\n disabled={element.readOnly \|\| !typedValue?.value}\n >\n Notes\n </ComplianceButton>\n <ComplianceButton\n isActive={isShowingFiles}\n icon=\"perm_media\"\n onClick={toggleIsShowingFiles}\n disabled={element.readOnly \|\| !typedValue?.value}\n >\n Media\n </ComplianceButton>\n </div>\n {isShowingNotes && (\n <div className=\"ob-compliance-child-element\">\n <FormElementTextarea\n id={`${id}-notes`}\n onChange={handleNotesChange}\n displayValidationMessage={false}\n validationMessage={undefined}\n value={typedValue?.notes}\n element={notesElement}\n />\n </div>\n )}\n {isShowingFiles && (\n <div className=\"ob-compliance-child-element\">\n <FormElementFiles\n id={`${id}-files`}\n onChange={handleFilesChange}\n displayValidationMessage={false}\n validationMessage={undefined}\n value={typedValue?.files}\n element={filesElement}\n />\n </div>\n )}\n </div>\n </FormElementLabelContainer>\n </div>\n )\n}\nexport default React.memo(FormElementCompliance)\n"]}
1	+ {"version":3,"file":"FormElementCompliance.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCompliance.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useBooleanState from '../hooks/useBooleanState'\nimport useToggleComplianceChildren from '../hooks/useToggleComplianceChildren'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ComplianceButton from './ComplianceButton'\nimport FormElementFiles from './FormElementFiles'\nimport FormElementTextarea from './FormElementTextarea'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport { attachmentsService } from '@oneblink/apps'\n\ninterface Props {\n id: string\n element: FormTypes.ComplianceElement\n value: unknown\n onChange: FormElementValueChangeHandler<Value>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n conditionallyShownOptions: FormTypes.ChoiceElementOption[] \| undefined\n isEven?: boolean\n}\n\nexport interface Value {\n value?: string\n notes?: string\n files?: attachmentsService.Attachment[]\n}\n\nconst baseElement = {\n conditionallyShow: false,\n isDataLookup: false,\n isElementLookup: false,\n required: false,\n requiresAllConditionallyShowPredicates: false,\n}\n\nfunction FormElementCompliance({\n id,\n element,\n value,\n onChange,\n conditionallyShownOptions,\n validationMessage,\n displayValidationMessage,\n isEven,\n}: Props) {\n const typedValue = value as Value \| undefined\n\n const notesElement = React.useMemo<FormTypes.TextareaElement>(\n () => ({\n ...baseElement,\n readOnly: element.readOnly,\n id: `${element.id}-notes`,\n label: 'Notes',\n name: `${element.name}_notes`,\n type: 'textarea',\n }),\n [element.id, element.name, element.readOnly],\n )\n const filesElement = React.useMemo<FormTypes.FilesElement>(\n () => ({\n ...baseElement,\n readOnly: element.readOnly,\n id: `${element.id}-files`,\n label: 'Media',\n name: `${element.name}_files`,\n type: 'files',\n maxEntries: undefined,\n minEntries: undefined,\n restrictFileTypes: false,\n storageType: element.storageType,\n }),\n [element.id, element.name, element.readOnly, element.storageType],\n )\n\n const handleValueChange = React.useCallback<\n FormElementValueChangeHandler<string>\n >(\n (fe, v) => {\n onChange(fe, (existingValue: Value \| undefined) => {\n let newValue = undefined\n if (typeof v === 'function') {\n newValue = v(existingValue ? existingValue.value : undefined)\n } else {\n newValue = v\n }\n if (!newValue) {\n return\n }\n return {\n ...existingValue,\n value: newValue,\n }\n })\n },\n [onChange],\n )\n const handleNotesChange = React.useCallback<\n React.ComponentProps<typeof FormElementTextarea>['onChange']\n >(\n (fe, v) => {\n onChange(element, (existingValue) => {\n if (!existingValue) {\n return\n }\n let newNotes = undefined\n if (typeof v === 'function') {\n newNotes = v(existingValue.notes)\n } else {\n newNotes = v\n }\n return {\n ...existingValue,\n notes: newNotes,\n }\n })\n },\n [element, onChange],\n )\n const handleFilesChange = React.useCallback<\n React.ComponentProps<typeof FormElementFiles>['onChange']\n >(\n (fe, v) => {\n onChange(element, (existingValue) => {\n if (!existingValue) {\n return\n }\n let newFiles = undefined\n if (typeof v === 'function') {\n newFiles = v(existingValue.files)\n } else {\n newFiles = v\n }\n return {\n ...existingValue,\n files: newFiles && newFiles.length ? newFiles : undefined,\n }\n })\n },\n [element, onChange],\n )\n\n const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(\n element,\n !!typedValue?.notes,\n handleNotesChange,\n )\n const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(\n element,\n !!typedValue?.files,\n handleFilesChange,\n )\n\n const [isDirty, setIsDirty] = useBooleanState(false)\n\n const filteredOptions = useFormElementOptions({\n element,\n value: typedValue?.value,\n onChange: handleValueChange,\n conditionallyShownOptions,\n })\n\n return (\n <div className=\"cypress-compliance-element\">\n <FormElementLabelContainer\n className={`ob-compliance ${!isEven ? 'even' : 'odd'}`}\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"ob-compliance__container\">\n <FormElementOptions options={element.options}>\n <div className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\">\n {filteredOptions.map((option) => {\n const isSelected = typedValue?.value === option.value\n return (\n <div className=\"ob-button-radio-container\" key={option.value}>\n <OptionButton\n element={element}\n option={option}\n isSelected={isSelected}\n onClick={() => {\n setIsDirty()\n handleValueChange(element, option.value)\n }}\n className={clsx(\n 'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n {\n 'is-primary': isSelected,\n 'is-light': !isSelected,\n },\n )}\n />\n </div>\n )\n })}\n </div>\n </FormElementOptions>\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n <div className=\"buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group\">\n <ComplianceButton\n isActive={isShowingNotes}\n icon=\"notes\"\n onClick={toggleIsShowingNotes}\n disabled={element.readOnly \|\| !typedValue?.value}\n >\n Notes\n </ComplianceButton>\n <ComplianceButton\n isActive={isShowingFiles}\n icon=\"perm_media\"\n onClick={toggleIsShowingFiles}\n disabled={element.readOnly \|\| !typedValue?.value}\n >\n Media\n </ComplianceButton>\n </div>\n {isShowingNotes && (\n <div className=\"ob-compliance-child-element\">\n <FormElementTextarea\n id={`${id}-notes`}\n onChange={handleNotesChange}\n displayValidationMessage={false}\n validationMessage={undefined}\n value={typedValue?.notes}\n element={notesElement}\n />\n </div>\n )}\n {isShowingFiles && (\n <div className=\"ob-compliance-child-element\">\n <FormElementFiles\n id={`${id}-files`}\n onChange={handleFilesChange}\n displayValidationMessage={false}\n validationMessage={undefined}\n value={typedValue?.files}\n element={filesElement}\n />\n </div>\n )}\n </div>\n </FormElementLabelContainer>\n </div>\n )\n}\nexport default React.memo(FormElementCompliance)\n"]}

package/dist/form-elements/FormElementFile.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
 import { OnChange } from '../hooks/attachments/useAttachment';
-import { Attachment } from '../types/attachments';
+import { attachmentsService } from '@oneblink/apps';
 declare type Props = {
     element: FormTypes.FilesElement;
     onRemove: (id: string) => void;
-    file: Attachment;
+    file: attachmentsService.Attachment;
     disableUpload: boolean;
     onChange: OnChange;
 };

package/dist/form-elements/FormElementFile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,kBAAkB,MAAM,2BAA2B,CAAA;AAE1D,OAAO,aAA2B,MAAM,oCAAoC,CAAA;AAC5E,OAAO,QAAQ,MAAM,6CAA6C,CAAA;AAWlE,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,aAAa,GACP,EAAE,EAAE;IACV,MAAM,gBAAgB,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAA;IAE9E,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;SACzB;QACD,OAAO,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;YACtC,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE;oBACjB,IAAI,EAAE,KAAK;oBACX,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;iBAC1B,CAAC,CAAA;YACJ,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpB,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,gBAAgB,CAAC,WAAW,EACzC,cAAc,EAAE,aAAa,EAC7B,kBAAkB,EAAE,gBAAgB,CAAC,kBAAkB,EACvD,iBAAiB,EAAE,gBAAgB,CAAC,iBAAiB,EACrD,iBAAiB,EAAE,gBAAgB,CAAC,iBAAiB,EACrD,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EACrE,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,GACnC,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../hooks/attachments/useAttachment'\nimport FileCard from '../components/renderer/attachments/FileCard'\nimport { ~~Attachment~~ } from '~~../types~~/~~attachments~~'\n\ntype Props = {\n element: FormTypes.FilesElement\n onRemove: (id: string) => void\n file: Attachment\n disableUpload: boolean\n onChange: OnChange\n}\n\nconst FormElementFile = ({\n element,\n onRemove,\n file,\n onChange,\n disableUpload,\n}: Props) => {\n const attachmentResult = useAttachment(file, element, onChange, disableUpload)\n\n const handleRemove = React.useCallback(() => {\n if (!file.type) {\n return onRemove(file.id)\n }\n return onRemove(file._id)\n }, [file, onRemove])\n\n const handleDownload = React.useCallback(async () => {\n await downloadAttachment(file)\n }, [file])\n\n const handleRetry = React.useMemo(() => {\n if (file.type === 'ERROR' && file.data) {\n return () => {\n onChange(file._id, {\n type: 'NEW',\n _id: file._id,\n data: file.data,\n fileName: file.fileName,\n isPrivate: file.isPrivate,\n })\n }\n }\n }, [file, onChange])\n\n return (\n <FileCard\n element={element}\n isUploading={attachmentResult.isUploading}\n isUploadPaused={disableUpload}\n uploadErrorMessage={attachmentResult.uploadErrorMessage}\n loadImageUrlError={attachmentResult.loadImageUrlError}\n isLoadingImageUrl={attachmentResult.isLoadingImageUrl}\n imageUrl={attachmentResult.imageUrl}\n fileName={file.fileName}\n onDownload={attachmentResult.canDownload ? handleDownload : undefined}\n onRemove={handleRemove}\n onRetry={handleRetry}\n progress={attachmentResult.progress}\n />\n )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}
1	+ {"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,kBAAkB,MAAM,2BAA2B,CAAA;AAE1D,OAAO,aAA2B,MAAM,oCAAoC,CAAA;AAC5E,OAAO,QAAQ,MAAM,6CAA6C,CAAA;AAWlE,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,aAAa,GACP,EAAE,EAAE;IACV,MAAM,gBAAgB,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAA;IAE9E,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;SACzB;QACD,OAAO,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;YACtC,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE;oBACjB,IAAI,EAAE,KAAK;oBACX,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;iBAC1B,CAAC,CAAA;YACJ,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpB,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,gBAAgB,CAAC,WAAW,EACzC,cAAc,EAAE,aAAa,EAC7B,kBAAkB,EAAE,gBAAgB,CAAC,kBAAkB,EACvD,iBAAiB,EAAE,gBAAgB,CAAC,iBAAiB,EACrD,iBAAiB,EAAE,gBAAgB,CAAC,iBAAiB,EACrD,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EACrE,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,GACnC,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../hooks/attachments/useAttachment'\nimport FileCard from '../components/renderer/attachments/FileCard'\nimport { attachmentsService } from '@oneblink/apps'\n\ntype Props = {\n element: FormTypes.FilesElement\n onRemove: (id: string) => void\n file: attachmentsService.Attachment\n disableUpload: boolean\n onChange: OnChange\n}\n\nconst FormElementFile = ({\n element,\n onRemove,\n file,\n onChange,\n disableUpload,\n}: Props) => {\n const attachmentResult = useAttachment(file, element, onChange, disableUpload)\n\n const handleRemove = React.useCallback(() => {\n if (!file.type) {\n return onRemove(file.id)\n }\n return onRemove(file._id)\n }, [file, onRemove])\n\n const handleDownload = React.useCallback(async () => {\n await downloadAttachment(file)\n }, [file])\n\n const handleRetry = React.useMemo(() => {\n if (file.type === 'ERROR' && file.data) {\n return () => {\n onChange(file._id, {\n type: 'NEW',\n _id: file._id,\n data: file.data,\n fileName: file.fileName,\n isPrivate: file.isPrivate,\n })\n }\n }\n }, [file, onChange])\n\n return (\n <FileCard\n element={element}\n isUploading={attachmentResult.isUploading}\n isUploadPaused={disableUpload}\n uploadErrorMessage={attachmentResult.uploadErrorMessage}\n loadImageUrlError={attachmentResult.loadImageUrlError}\n isLoadingImageUrl={attachmentResult.isLoadingImageUrl}\n imageUrl={attachmentResult.imageUrl}\n fileName={file.fileName}\n onDownload={attachmentResult.canDownload ? handleDownload : undefined}\n onRemove={handleRemove}\n onRetry={handleRetry}\n progress={attachmentResult.progress}\n />\n )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}

package/dist/form-elements/FormElementFiles.d.ts CHANGED Viewed

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
-import { Attachment } from '../types/attachments';
+import { attachmentsService } from '@oneblink/apps';
 import { FormElementValueChangeHandler } from '../types/form';
-export declare function stringifyAttachments(value: Attachment[] | undefined): string;
+export declare function stringifyAttachments(value: attachmentsService.Attachment[] | undefined): string;
 declare function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, }: {
     id: string;
     element: FormTypes.FilesElement;
-    value?: Attachment[];
-    onChange: FormElementValueChangeHandler<Attachment[]>;
+    value?: attachmentsService.Attachment[];
+    onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
 }): JSX.Element;

package/dist/form-elements/FormElementFiles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,cAAc,MAAM,qCAAqC,CAAA;AAChE,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,6BAA6B,CAAA;AAIpC,MAAM,UAAU,oBAAoB,~~CAAC~~,~~KAA+B~~;~~IAClE~~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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../services/form-validation'\nimport { ~~Attachment~~ } from '~~../types~~/~~attachments~~'\nimport { FormElementValueChangeHandler } from '../types/form'\n\nexport function stringifyAttachments(value: Attachment[] \| undefined): string {\n if (value?.every((attachment) => !attachment.type)) {\n return JSON.stringify(value)\n }\n return ''\n}\n\nfunction FormElementFiles({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n}: {\n id: string\n element: FormTypes.FilesElement\n value?: Attachment[]\n onChange: FormElementValueChangeHandler<Attachment[]>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n}) {\n const { isDirty, addAttachments, removeAttachment, changeAttachment } =\n useAttachments(element, onChange)\n\n const inputRef = React.useRef<HTMLInputElement>(null)\n\n const handleAdd = React.useCallback(() => {\n if (!inputRef.current) return\n // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n inputRef.current.value = ''\n inputRef.current.click()\n }, [])\n\n const attachments = value \|\| []\n\n return (\n <div className=\"cypress-files-element\">\n <FormElementLabelContainer\n className=\"ob-files\"\n element={element}\n id={id}\n required={!!element.minEntries}\n >\n <input\n ref={inputRef}\n type=\"file\"\n name={element.name}\n id={id}\n className=\"file-input ob-input\"\n multiple={element.maxEntries !== 1}\n disabled={element.readOnly}\n onChange={(event) =>\n addAttachments(\n event.target.files ? Array.from(event.target.files) : [],\n )\n }\n />\n <div className=\"control cypress-files-control\">\n <div className=\"columns is-multiline\">\n {attachments.map((attachment) => {\n return (\n <FormElementFile\n key={attachment.type ? attachment._id : attachment.id}\n element={element}\n onRemove={removeAttachment}\n file={attachment}\n onChange={changeAttachment}\n disableUpload={\n (!!element.maxEntries &&\n attachments.length > element.maxEntries) \|\|\n !checkFileNameIsValid(element, attachment.fileName) \|\|\n !checkFileNameExtensionIsValid(element, attachment.fileName)\n }\n />\n )\n })}\n {!element.readOnly &&\n (!element.maxEntries \|\|\n attachments.length < element.maxEntries) && (\n <div className=\"column is-one-quarter\">\n <button\n type=\"button\"\n className=\"button ob-files__add-new-button\"\n onClick={handleAdd}\n >\n <i className=\"material-icons icon-x-large\">add</i>\n </button>\n </div>\n )}\n </div>\n </div>\n\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementFiles)\n"]}
1	+ {"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../services/form-validation'\nimport { attachmentsService } from '@oneblink/apps'\nimport { FormElementValueChangeHandler } from '../types/form'\n\nexport function stringifyAttachments(\n value: attachmentsService.Attachment[] \| undefined,\n): string {\n if (value?.every((attachment) => !attachment.type)) {\n return JSON.stringify(value)\n }\n return ''\n}\n\nfunction FormElementFiles({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n}: {\n id: string\n element: FormTypes.FilesElement\n value?: attachmentsService.Attachment[]\n onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n}) {\n const { isDirty, addAttachments, removeAttachment, changeAttachment } =\n useAttachments(element, onChange)\n\n const inputRef = React.useRef<HTMLInputElement>(null)\n\n const handleAdd = React.useCallback(() => {\n if (!inputRef.current) return\n // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n inputRef.current.value = ''\n inputRef.current.click()\n }, [])\n\n const attachments = value \|\| []\n\n return (\n <div className=\"cypress-files-element\">\n <FormElementLabelContainer\n className=\"ob-files\"\n element={element}\n id={id}\n required={!!element.minEntries}\n >\n <input\n ref={inputRef}\n type=\"file\"\n name={element.name}\n id={id}\n className=\"file-input ob-input\"\n multiple={element.maxEntries !== 1}\n disabled={element.readOnly}\n onChange={(event) =>\n addAttachments(\n event.target.files ? Array.from(event.target.files) : [],\n )\n }\n />\n <div className=\"control cypress-files-control\">\n <div className=\"columns is-multiline\">\n {attachments.map((attachment) => {\n return (\n <FormElementFile\n key={attachment.type ? attachment._id : attachment.id}\n element={element}\n onRemove={removeAttachment}\n file={attachment}\n onChange={changeAttachment}\n disableUpload={\n (!!element.maxEntries &&\n attachments.length > element.maxEntries) \|\|\n !checkFileNameIsValid(element, attachment.fileName) \|\|\n !checkFileNameExtensionIsValid(element, attachment.fileName)\n }\n />\n )\n })}\n {!element.readOnly &&\n (!element.maxEntries \|\|\n attachments.length < element.maxEntries) && (\n <div className=\"column is-one-quarter\">\n <button\n type=\"button\"\n className=\"button ob-files__add-new-button\"\n onClick={handleAdd}\n >\n <i className=\"material-icons icon-x-large\">add</i>\n </button>\n </div>\n )}\n </div>\n </div>\n\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementFiles)\n"]}

package/dist/form-elements/FormElementSignature.js CHANGED Viewed

@@ -10,7 +10,6 @@ import useBooleanState from '../hooks/useBooleanState';
 import { canvasToBlob } from '../services/blob-utils';
 import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable';
 import useIsPageVisible from '../hooks/useIsPageVisible';
-import { Fade } from '@mui/material';
 import ProgressBar from '../components/renderer/attachments/ProgressBar';
 function FormElementSignature({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
     const [isDirty, setIsDirty] = useBooleanState(false);
@@ -130,11 +129,9 @@ const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUp
     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(AttachmentStatus, { isLoadingImageUrl: isLoadingImageUrl, loadImageUrlError: loadImageUrlError, isUploading: isUploading, imageUrl: imageUrl, progress: progress })),
             React.createElement("img", { src: imageUrl, className: "cypress-signature-image ob-signature__img" }),
-            React.createElement(Fade, { in: isUploading },
-                React.createElement("span", null,
-                    React.createElement(ProgressBar, { progress: progress })))));
+            React.createElement(ProgressBar, { progress: progress, isShowing: isUploading })));
     }
     return React.createElement(ImagePreviewUnavailable, null);
 });

package/dist/form-elements/FormElementSignature.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport useBooleanState from '../hooks/useBooleanState'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport { Fade } from '@mui/material'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\n\ntype Props = {\n id: string\n element: FormTypes.DrawElement\n value: FormElementBinaryStorageValue\n onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n}\n\nfunction FormElementSignature({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n}: Props) {\n const [isDirty, setIsDirty] = useBooleanState(false)\n const isPageVisible = useIsPageVisible()\n\n const handleChange = React.useCallback(\n (formElement, newValue) => {\n setIsDirty()\n onChange(formElement, newValue)\n },\n [onChange, setIsDirty],\n )\n\n return (\n <div className=\"cypress-signature-element\">\n <FormElementLabelContainer\n className=\"ob-signature\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n {value ? (\n <SignatureDisplay\n element={element}\n value={value}\n onChange={handleChange}\n />\n ) : isPageVisible ? (\n <SignatureDrawing element={element} onChange={handleChange} />\n ) : null}\n </div>\n\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n element,\n onChange,\n}: {\n element: Props['element']\n onChange: Props['onChange']\n}) {\n const canvasRef = React.useRef<SignatureCanvas>(null)\n\n const [isEmpty, setIsEmpty] = React.useState(true)\n const [canvasDimensions, setCanvasDimensions] = React.useState({})\n\n const handleClear = React.useCallback(() => {\n if (canvasRef.current) {\n console.log('Clearing signature...')\n canvasRef.current.clear()\n }\n setIsEmpty(true)\n }, [])\n\n const handleDone = React.useCallback(async () => {\n if (!canvasRef.current) return\n const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n // Convert base64 data uri to blob and send it on its way\n const blob = await canvasToBlob(trimmedCanvas)\n onChange(element, prepareNewAttachment(blob, 'signature.png', element))\n }, [element, onChange])\n\n // HANDLING CANVAS CHANGE\n const handleEndDraw = React.useCallback(() => {\n if (window.cordova) {\n scrollingService.enableScrolling()\n }\n if (isEmpty) {\n setIsEmpty(false)\n }\n }, [isEmpty])\n\n // HANDLE RESIZE\n React.useEffect(() => {\n const signatureCanvas = canvasRef.current\n if (!signatureCanvas) return\n const resize = () => {\n const parentDiv = signatureCanvas.getCanvas().parentNode\n if (parentDiv) {\n setCanvasDimensions({\n // @ts-expect-error ???\n width: parentDiv.clientWidth,\n // @ts-expect-error ???\n height: parentDiv.clientHeight,\n })\n }\n }\n window.addEventListener('resize', resize)\n resize()\n\n return () => {\n window.removeEventListener('resize', resize)\n }\n }, [canvasRef])\n\n // REACTIVE DISABLING OF CANVAS\n React.useEffect(() => {\n if (!canvasRef.current) return\n if (element.readOnly) {\n canvasRef.current.off()\n } else {\n canvasRef.current.on()\n }\n }, [canvasRef, element.readOnly])\n\n return (\n <>\n <div>\n <SignatureCanvas\n ref={canvasRef}\n canvasProps={{\n ...canvasDimensions,\n className:\n 'input ob-signature__control cypress-signature-control signature-pad',\n // @ts-expect-error ???\n disabled: element.readOnly,\n }}\n onEnd={handleEndDraw}\n onBegin={\n window.cordova ? scrollingService.disableScrolling : undefined\n }\n />\n </div>\n\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={handleClear}\n disabled={element.readOnly \|\| isEmpty}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n onClick={handleDone}\n disabled={element.readOnly \|\| isEmpty}\n >\n Done\n </button>\n </div>\n </>\n )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n element,\n value,\n onChange,\n}: {\n element: Props['element']\n value: Props['value']\n onChange: Props['onChange']\n}) {\n const result = useAttachment(\n value,\n element,\n React.useCallback(\n (id, attachment) => {\n onChange(element, attachment)\n },\n [element, onChange],\n ),\n )\n\n return (\n <>\n <figure className=\"ob-figure\">\n <div className=\"figure-content\">\n <DisplayImage {...result} />\n </div>\n </figure>\n\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={() => onChange(element, undefined)}\n disabled={element.readOnly}\n >\n Clear\n </button>\n </div>\n </>\n )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n uploadErrorMessage,\n isUploading,\n isLoadingImageUrl,\n imageUrl,\n loadImageUrlError,\n progress,\n}: ReturnType<typeof useAttachment>) {\n if (uploadErrorMessage) {\n return (\n <>\n <h3 className=\"title is-3\">Upload Failed</h3>\n <p>\n Your signature failed to upload, please press the <b>Clear</b> button\n and try again.\n </p>\n </>\n )\n }\n\n if (loadImageUrlError) {\n return (\n <>\n <h3 className=\"title is-3\">Preview Failed</h3>\n <p>{loadImageUrlError.message}</p>\n </>\n )\n }\n\n if (isLoadingImageUrl) {\n return <OnLoading small className=\"cypress-signature-loading-image\" />\n }\n\n if (imageUrl) {\n return (\n <>\n <span className=\"ob-figure__status\">\n <AttachmentStatus\n isLoadingImageUrl={isLoadingImageUrl}\n loadImageUrlError={loadImageUrlError}\n isUploading={isUploading}\n imageUrl={imageUrl}\n />\n </span>\n <img\n src={imageUrl}\n className=\"cypress-signature-image ob-signature__img\"\n />\n {\n <Fade in={isUploading}>\n <span>\n <ProgressBar progress={progress} />\n </span>\n </Fade>\n }\n </>\n )\n }\n\n return <ImagePreviewUnavailable />\n})\n"]}
1	+ {"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,eAAe,MAAM,wBAAwB,CAAA;AAGpD,OAAO,gBAAgB,MAAM,+BAA+B,CAAA;AAC5D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,SAAS,MAAM,kCAAkC,CAAA;AACxD,OAAO,aAAa,MAAM,oCAAoC,CAAA;AAE9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,gBAAgB,MAAM,qDAAqD,CAAA;AAClF,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,uBAAuB,MAAM,4DAA4D,CAAA;AAEhG,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AACxD,OAAO,WAAW,MAAM,gDAAgD,CAAA;AAWxE,SAAS,oBAAoB,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IACpD,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IAExC,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,WAAW,EAAE,QAAQ,EAAE,EAAE;QACxB,UAAU,EAAE,CAAA;QACZ,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;IACjC,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,2BAA2B;QACxC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,SAAS,IACrB,KAAK,CAAC,CAAC,CAAC,CACP,oBAAC,gBAAgB,IACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,GACtB,CACH,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAClB,oBAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAI,CAC/D,CAAC,CAAC,CAAC,IAAI,CACJ;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;AAE/C,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,gBAAgB,CAAC,EAC5D,OAAO,EACP,QAAQ,GAIT;IACC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAA;IAErD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAClD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IAElE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;YACpC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;SAC1B;QACD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC9C,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAM;QAC9B,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAA;QAE1D,yDAAyD;QACzD,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,aAAa,CAAC,CAAA;QAC9C,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAC,IAAI,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAA;IACzE,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEvB,yBAAyB;IACzB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,gBAAgB,CAAC,eAAe,EAAE,CAAA;SACnC;QACD,IAAI,OAAO,EAAE;YACX,UAAU,CAAC,KAAK,CAAC,CAAA;SAClB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,gBAAgB;IAChB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAA;QACzC,IAAI,CAAC,eAAe;YAAE,OAAM;QAC5B,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,MAAM,SAAS,GAAG,eAAe,CAAC,SAAS,EAAE,CAAC,UAAU,CAAA;YACxD,IAAI,SAAS,EAAE;gBACb,mBAAmB,CAAC;oBAClB,uBAAuB;oBACvB,KAAK,EAAE,SAAS,CAAC,WAAW;oBAC5B,uBAAuB;oBACvB,MAAM,EAAE,SAAS,CAAC,YAAY;iBAC/B,CAAC,CAAA;aACH;QACH,CAAC,CAAA;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QACzC,MAAM,EAAE,CAAA;QAER,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAC9C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,+BAA+B;IAC/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAM;QAC9B,IAAI,OAAO,CAAC,QAAQ,EAAE;YACpB,SAAS,CAAC,OAAO,CAAC,GAAG,EAAE,CAAA;SACxB;aAAM;YACL,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,CAAA;SACvB;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEjC,OAAO,CACL;QACE;YACE,oBAAC,eAAe,IACd,GAAG,EAAE,SAAS,EACd,WAAW,EAAE;oBACX,GAAG,gBAAgB;oBACnB,SAAS,EACP,qEAAqE;oBACvE,uBAAuB;oBACvB,QAAQ,EAAE,OAAO,CAAC,QAAQ;iBAC3B,EACD,KAAK,EAAE,aAAa,EACpB,OAAO,EACL,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,GAEhE,CACE;QAEN,6BAAK,SAAS,EAAC,oBAAoB;YACjC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,oEAAoE,EAC9E,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,OAAO,YAG9B;YACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2EAA2E,EACrF,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,OAAO,WAG9B,CACL,CACL,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,gBAAgB,CAAC,EAC5D,OAAO,EACP,KAAK,EACL,QAAQ,GAKT;IACC,MAAM,MAAM,GAAG,aAAa,CAC1B,KAAK,EACL,OAAO,EACP,KAAK,CAAC,WAAW,CACf,CAAC,EAAE,EAAE,UAAU,EAAE,EAAE;QACjB,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA;IAC/B,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CACF,CAAA;IAED,OAAO,CACL;QACE,gCAAQ,SAAS,EAAC,WAAW;YAC3B,6BAAK,SAAS,EAAC,gBAAgB;gBAC7B,oBAAC,YAAY,OAAK,MAAM,GAAI,CACxB,CACC;QAET,6BAAK,SAAS,EAAC,oBAAoB;YACjC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,oEAAoE,EAC9E,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,EAC3C,QAAQ,EAAE,OAAO,CAAC,QAAQ,YAGnB,CACL,CACL,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,YAAY,CAAC,EACpD,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,QAAQ,EACR,iBAAiB,EACjB,QAAQ,GACyB;IACjC,IAAI,kBAAkB,EAAE;QACtB,OAAO,CACL;YACE,4BAAI,SAAS,EAAC,YAAY,oBAAmB;YAC7C;;gBACoD,uCAAY;yCAE5D,CACH,CACJ,CAAA;KACF;IAED,IAAI,iBAAiB,EAAE;QACrB,OAAO,CACL;YACE,4BAAI,SAAS,EAAC,YAAY,qBAAoB;YAC9C,+BAAI,iBAAiB,CAAC,OAAO,CAAK,CACjC,CACJ,CAAA;KACF;IAED,IAAI,iBAAiB,EAAE;QACrB,OAAO,oBAAC,SAAS,IAAC,KAAK,QAAC,SAAS,EAAC,iCAAiC,GAAG,CAAA;KACvE;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL;YACE,8BAAM,SAAS,EAAC,mBAAmB;gBACjC,oBAAC,gBAAgB,IACf,iBAAiB,EAAE,iBAAiB,EACpC,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACG;YACP,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,2CAA2C,GACrD;YACF,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,GAAI,CAC1D,CACJ,CAAA;KACF;IAED,OAAO,oBAAC,uBAAuB,OAAG,CAAA;AACpC,CAAC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport useBooleanState from '../hooks/useBooleanState'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\n\ntype Props = {\n id: string\n element: FormTypes.DrawElement\n value: FormElementBinaryStorageValue\n onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n}\n\nfunction FormElementSignature({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n}: Props) {\n const [isDirty, setIsDirty] = useBooleanState(false)\n const isPageVisible = useIsPageVisible()\n\n const handleChange = React.useCallback(\n (formElement, newValue) => {\n setIsDirty()\n onChange(formElement, newValue)\n },\n [onChange, setIsDirty],\n )\n\n return (\n <div className=\"cypress-signature-element\">\n <FormElementLabelContainer\n className=\"ob-signature\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n {value ? (\n <SignatureDisplay\n element={element}\n value={value}\n onChange={handleChange}\n />\n ) : isPageVisible ? (\n <SignatureDrawing element={element} onChange={handleChange} />\n ) : null}\n </div>\n\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n element,\n onChange,\n}: {\n element: Props['element']\n onChange: Props['onChange']\n}) {\n const canvasRef = React.useRef<SignatureCanvas>(null)\n\n const [isEmpty, setIsEmpty] = React.useState(true)\n const [canvasDimensions, setCanvasDimensions] = React.useState({})\n\n const handleClear = React.useCallback(() => {\n if (canvasRef.current) {\n console.log('Clearing signature...')\n canvasRef.current.clear()\n }\n setIsEmpty(true)\n }, [])\n\n const handleDone = React.useCallback(async () => {\n if (!canvasRef.current) return\n const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n // Convert base64 data uri to blob and send it on its way\n const blob = await canvasToBlob(trimmedCanvas)\n onChange(element, prepareNewAttachment(blob, 'signature.png', element))\n }, [element, onChange])\n\n // HANDLING CANVAS CHANGE\n const handleEndDraw = React.useCallback(() => {\n if (window.cordova) {\n scrollingService.enableScrolling()\n }\n if (isEmpty) {\n setIsEmpty(false)\n }\n }, [isEmpty])\n\n // HANDLE RESIZE\n React.useEffect(() => {\n const signatureCanvas = canvasRef.current\n if (!signatureCanvas) return\n const resize = () => {\n const parentDiv = signatureCanvas.getCanvas().parentNode\n if (parentDiv) {\n setCanvasDimensions({\n // @ts-expect-error ???\n width: parentDiv.clientWidth,\n // @ts-expect-error ???\n height: parentDiv.clientHeight,\n })\n }\n }\n window.addEventListener('resize', resize)\n resize()\n\n return () => {\n window.removeEventListener('resize', resize)\n }\n }, [canvasRef])\n\n // REACTIVE DISABLING OF CANVAS\n React.useEffect(() => {\n if (!canvasRef.current) return\n if (element.readOnly) {\n canvasRef.current.off()\n } else {\n canvasRef.current.on()\n }\n }, [canvasRef, element.readOnly])\n\n return (\n <>\n <div>\n <SignatureCanvas\n ref={canvasRef}\n canvasProps={{\n ...canvasDimensions,\n className:\n 'input ob-signature__control cypress-signature-control signature-pad',\n // @ts-expect-error ???\n disabled: element.readOnly,\n }}\n onEnd={handleEndDraw}\n onBegin={\n window.cordova ? scrollingService.disableScrolling : undefined\n }\n />\n </div>\n\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={handleClear}\n disabled={element.readOnly \|\| isEmpty}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n onClick={handleDone}\n disabled={element.readOnly \|\| isEmpty}\n >\n Done\n </button>\n </div>\n </>\n )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n element,\n value,\n onChange,\n}: {\n element: Props['element']\n value: Props['value']\n onChange: Props['onChange']\n}) {\n const result = useAttachment(\n value,\n element,\n React.useCallback(\n (id, attachment) => {\n onChange(element, attachment)\n },\n [element, onChange],\n ),\n )\n\n return (\n <>\n <figure className=\"ob-figure\">\n <div className=\"figure-content\">\n <DisplayImage {...result} />\n </div>\n </figure>\n\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={() => onChange(element, undefined)}\n disabled={element.readOnly}\n >\n Clear\n </button>\n </div>\n </>\n )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n uploadErrorMessage,\n isUploading,\n isLoadingImageUrl,\n imageUrl,\n loadImageUrlError,\n progress,\n}: ReturnType<typeof useAttachment>) {\n if (uploadErrorMessage) {\n return (\n <>\n <h3 className=\"title is-3\">Upload Failed</h3>\n <p>\n Your signature failed to upload, please press the <b>Clear</b> button\n and try again.\n </p>\n </>\n )\n }\n\n if (loadImageUrlError) {\n return (\n <>\n <h3 className=\"title is-3\">Preview Failed</h3>\n <p>{loadImageUrlError.message}</p>\n </>\n )\n }\n\n if (isLoadingImageUrl) {\n return <OnLoading small className=\"cypress-signature-loading-image\" />\n }\n\n if (imageUrl) {\n return (\n <>\n <span className=\"ob-figure__status\">\n <AttachmentStatus\n isLoadingImageUrl={isLoadingImageUrl}\n loadImageUrlError={loadImageUrlError}\n isUploading={isUploading}\n imageUrl={imageUrl}\n progress={progress}\n />\n </span>\n <img\n src={imageUrl}\n className=\"cypress-signature-image ob-signature__img\"\n />\n <ProgressBar progress={progress} isShowing={isUploading} />\n </>\n )\n }\n\n return <ImagePreviewUnavailable />\n})\n"]}