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

package/dist/components/renderer/attachments/DropdownMenu.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+interface Props {
+    element: FormTypes.FilesElement;
+    onRemove: () => void;
+    onDownload?: () => void;
+    onRetry?: () => void;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/renderer/attachments/DropdownMenu.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import useBooleanState from '../../../hooks/useBooleanState';
+import useClickOutsideElement from '../../../hooks/useClickOutsideElement';
+const DropdownMenu = ({ element, onRemove, onDownload, onRetry }) => {
+    const dropDownRef = React.useRef(null);
+    const [isShowingMore, showMore, hideMore] = useBooleanState(false);
+    useClickOutsideElement(dropDownRef, React.useCallback(() => {
+        if (isShowingMore) {
+            hideMore();
+        }
+    }, [hideMore, isShowingMore]));
+    return (React.createElement("div", { className: clsx('dropdown is-right ob-files__menu', {
+            'is-active': isShowingMore,
+        }), ref: dropDownRef },
+        React.createElement("div", { className: "dropdown-trigger" },
+            React.createElement("button", { type: "button", className: "button ob-files__menu-button cypress-file-menu-button", "aria-haspopup": "true", "aria-controls": "dropdown-menu", onClick: isShowingMore ? hideMore : showMore },
+                React.createElement("i", { className: "material-icons ob-files__menu-icon" }, "more_vert"))),
+        React.createElement("div", { className: "dropdown-menu", role: "menu" },
+            React.createElement("div", { className: "dropdown-content" },
+                onRetry && (React.createElement("a", { className: "dropdown-item cypress-file-retry-button", onClick: () => {
+                        hideMore();
+                        onRetry();
+                    } }, "Retry")),
+                onDownload && (React.createElement("a", { className: "dropdown-item cypress-file-download-button", onClick: () => {
+                        hideMore();
+                        onDownload();
+                    } }, "Download")),
+                React.createElement("a", { className: clsx('dropdown-item cypress-file-remove-button', {
+                        'ob-files__menu-remove-hidden': element.readOnly,
+                    }), onClick: () => {
+                        hideMore();
+                        onRemove();
+                    } }, "Remove")))));
+};
+export default React.memo(DropdownMenu);
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/components/renderer/attachments/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,eAAe,MAAM,gCAAgC,CAAA;AAC5D,OAAO,sBAAsB,MAAM,uCAAuC,CAAA;AAU1E,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAS,EAAE,EAAE;IACzE,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IACtC,MAAM,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAElE,sBAAsB,CACpB,WAAW,EACX,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrB,IAAI,aAAa,EAAE;YACjB,QAAQ,EAAE,CAAA;SACX;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAC9B,CAAA;IAED,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE;YAClD,WAAW,EAAE,aAAa;SAC3B,CAAC,EACF,GAAG,EAAE,WAAW;QAEhB,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,uDAAuD,mBACnD,MAAM,mBACN,eAAe,EAC7B,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;gBAE5C,2BAAG,SAAS,EAAC,oCAAoC,gBAAc,CACxD,CACL;QACN,6BAAK,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM;YACxC,6BAAK,SAAS,EAAC,kBAAkB;gBAC9B,OAAO,IAAI,CACV,2BACE,SAAS,EAAC,yCAAyC,EACnD,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,EAAE,CAAA;wBACV,OAAO,EAAE,CAAA;oBACX,CAAC,YAGC,CACL;gBACA,UAAU,IAAI,CACb,2BACE,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,EAAE,CAAA;wBACV,UAAU,EAAE,CAAA;oBACd,CAAC,eAGC,CACL;gBACD,2BACE,SAAS,EAAE,IAAI,CAAC,0CAA0C,EAAE;wBAC1D,8BAA8B,EAAE,OAAO,CAAC,QAAQ;qBACjD,CAAC,EACF,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,EAAE,CAAA;wBACV,QAAQ,EAAE,CAAA;oBACZ,CAAC,aAGC,CACA,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,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'\n\ninterface Props {\n  element: FormTypes.FilesElement\n  onRemove: () => void\n  onDownload?: () => void\n  onRetry?: () => void\n}\n\nconst DropdownMenu = ({ element, onRemove, onDownload, onRetry }: Props) => {\n  const dropDownRef = React.useRef(null)\n  const [isShowingMore, showMore, hideMore] = useBooleanState(false)\n\n  useClickOutsideElement(\n    dropDownRef,\n    React.useCallback(() => {\n      if (isShowingMore) {\n        hideMore()\n      }\n    }, [hideMore, isShowingMore]),\n  )\n\n  return (\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}\n\nexport default React.memo<Props>(DropdownMenu)\n"]}

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

@@ -1,14 +1,10 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import useBooleanState from '../../../hooks/useBooleanState';
-import useClickOutsideElement from '../../../hooks/useClickOutsideElement';
 import FileCardContent from './FileCardContent';
 import AttachmentStatus from './AttachmentStatus';
 import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../../../services/form-validation';
 import ProgressBar from './ProgressBar';
+import DropdownMenu from './DropdownMenu';
 function FileCard({ element, isUploading, isUploadPaused, uploadErrorMessage, loadImageUrlError, isLoadingImageUrl, imageUrl, fileName, onDownload, onRemove, onRetry, progress, }) {
-    const dropDownRef = React.useRef(null);
-    const [isShowingMore, showMore, hideMore] = useBooleanState(false);
     const uploadError = React.useMemo(() => {
         if (!checkFileNameIsValid(element, fileName)) {
             return new Error(`${fileName.split('.').pop()} files are not allowed`);
@@ -20,37 +16,11 @@ function FileCard({ element, isUploading, isUploadPaused, uploadErrorMessage, lo
             return new Error(uploadErrorMessage);
         }
     }, [element, fileName, uploadErrorMessage]);
-    useClickOutsideElement(dropDownRef, React.useCallback(() => {
-        if (isShowingMore) {
-            hideMore();
-        }
-    }, [hideMore, isShowingMore]));
     return (React.createElement("div", { className: "column is-one-quarter" },
         React.createElement("div", { className: "ob-files__box" },
             React.createElement("div", { className: "ob-files__content" },
                 React.createElement(FileCardContent, { imageUrl: imageUrl })),
-            React.createElement("div", { className: clsx('dropdown is-right ob-files__menu', {
-                    'is-active': isShowingMore,
-                }), ref: dropDownRef },
-                React.createElement("div", { className: "dropdown-trigger" },
-                    React.createElement("button", { type: "button", className: "button ob-files__menu-button cypress-file-menu-button", "aria-haspopup": "true", "aria-controls": "dropdown-menu", onClick: isShowingMore ? hideMore : showMore },
-                        React.createElement("i", { className: "material-icons ob-files__menu-icon" }, "more_vert"))),
-                React.createElement("div", { className: "dropdown-menu", role: "menu" },
-                    React.createElement("div", { className: "dropdown-content" },
-                        onRetry && (React.createElement("a", { className: "dropdown-item cypress-file-retry-button", onClick: () => {
-                                hideMore();
-                                onRetry();
-                            } }, "Retry")),
-                        onDownload && (React.createElement("a", { className: "dropdown-item cypress-file-download-button", onClick: () => {
-                                hideMore();
-                                onDownload();
-                            } }, "Download")),
-                        React.createElement("a", { className: clsx('dropdown-item cypress-file-remove-button', {
-                                'ob-files__menu-remove-hidden': element.readOnly,
-                            }), onClick: () => {
-                                hideMore();
-                                onRemove();
-                            } }, "Remove")))),
+            React.createElement(DropdownMenu, { element: element, onDownload: onDownload, onRetry: onRetry, onRemove: onRemove }),
             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, progress: progress }),

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

@@ -1 +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"]}
+{"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/FileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,mCAAmC,CAAA;AAC1C,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAiBzC,SAAS,QAAQ,CAAC,EAChB,OAAO,EACP,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,GACF;IACN,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE;YAC5C,OAAO,IAAI,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,wBAAwB,CAAC,CAAA;SACvE;QACD,IAAI,CAAC,6BAA6B,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE;YACrD,OAAO,IAAI,KAAK,CAAC,GAAG,QAAQ,yBAAyB,CAAC,CAAA;SACvD;QACD,IAAI,kBAAkB,EAAE;YACtB,OAAO,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAA;SACrC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAE3C,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,oBAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,GAAI,CACnC;YACN,oBAAC,YAAY,IACX,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB;YAEF,6BAAK,SAAS,EAAC,+BAA+B;gBAC5C,8BAAM,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAQ;gBAC7D,oBAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB;gBACF,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,GAAI,CACzD,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA","sourcesContent":["import * as React from 'react'\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'\nimport DropdownMenu from './DropdownMenu'\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 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  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        <DropdownMenu\n          element={element}\n          onDownload={onDownload}\n          onRetry={onRetry}\n          onRemove={onRemove}\n        />\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/form-elements/FormElementCamera.js

@@ -107,6 +107,21 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
     const { isUploading, uploadErrorMessage, isLoadingImageUrl, imageUrl, loadImageUrlError, canDownload, progress, } = useAttachment(value, element, React.useCallback((id, attachment) => {
         onChange(element, attachment);
     }, [element, onChange]));
+    const handleRetry = React.useMemo(() => {
+        if (!value || typeof value !== 'object')
+            return;
+        if (value.type === 'ERROR' && value.data) {
+            return () => {
+                onChange(element, {
+                    type: 'NEW',
+                    _id: value._id,
+                    data: value.data,
+                    fileName: value.fileName,
+                    isPrivate: value.isPrivate,
+                });
+            };
+        }
+    }, [element, onChange, value]);
     const handleDownload = React.useCallback(async () => {
         if (typeof value === 'string') {
             await downloadFileLegacy(value, id);
@@ -174,6 +189,7 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
                         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,
+                    uploadErrorMessage && handleRetry && (React.createElement("button", { type: "button", className: "button ob-button ob-button__retry is-light cypress-retry-file-button", onClick: handleRetry }, "Retry")),
                     React.createElement("button", { type: "button", className: "button ob-button ob-button__clear is-light cypress-clear-camera", onClick: clearImage, disabled: element.readOnly || isLoading }, "Clear"),
                     canDownload && (React.createElement("button", { type: "button", className: "button ob-button ob-button__download is-primary cypress-download-file-button", onClick: handleDownload },
                         React.createElement("span", { className: "icon" },
@@ -197,9 +213,12 @@ const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUp
         return (React.createElement("div", { className: "figure-content" },
             React.createElement("h3", { className: "title is-3" }, "Upload Failed"),
             React.createElement("p", null,
-                "Your photo failed to upload, please press the ",
+                "Your photo failed to upload, please use the ",
+                React.createElement("b", null, "Retry"),
+                " or",
+                ' ',
                 React.createElement("b", null, "Clear"),
-                " button and try again.")));
+                " buttons below.")));
     }
     if (loadImageUrlError) {
         return (React.createElement("div", { className: "figure-content" },

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

@@ -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'\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>&nbsp;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"]}
+{"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 handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          type: 'NEW',\n          _id: value._id,\n          data: value.data,\n          fileName: value.fileName,\n          isPrivate: value.isPrivate,\n        })\n      }\n    }\n  }, [element, onChange, value])\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                {uploadErrorMessage && handleRetry && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n                    onClick={handleRetry}\n                  >\n                    Retry\n                  </button>\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>&nbsp;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 use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\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/FormElementSignature.js

@@ -102,11 +102,27 @@ const SignatureDisplay = React.memo(function SignatureDisplay({ element, value,
     const result = useAttachment(value, element, React.useCallback((id, attachment) => {
         onChange(element, attachment);
     }, [element, onChange]));
+    const handleRetry = React.useMemo(() => {
+        if (!value || typeof value !== 'object')
+            return;
+        if (value.type === 'ERROR' && value.data) {
+            return () => {
+                onChange(element, {
+                    type: 'NEW',
+                    _id: value._id,
+                    data: value.data,
+                    fileName: value.fileName,
+                    isPrivate: value.isPrivate,
+                });
+            };
+        }
+    }, [element, onChange, value]);
     return (React.createElement(React.Fragment, null,
         React.createElement("figure", { className: "ob-figure" },
             React.createElement("div", { className: "figure-content" },
                 React.createElement(DisplayImage, { ...result }))),
         React.createElement("div", { className: "buttons ob-buttons" },
+            result.uploadErrorMessage && handleRetry && (React.createElement("button", { type: "button", className: "button ob-button ob-button__retry is-light cypress-retry-file-button", onClick: handleRetry }, "Retry")),
             React.createElement("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: () => onChange(element, undefined), disabled: element.readOnly }, "Clear"))));
 });
 const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingImageUrl, imageUrl, loadImageUrlError, progress, }) {
@@ -114,9 +130,12 @@ const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUp
         return (React.createElement(React.Fragment, null,
             React.createElement("h3", { className: "title is-3" }, "Upload Failed"),
             React.createElement("p", null,
-                "Your signature failed to upload, please press the ",
+                "Your signature failed to upload, please use the ",
+                React.createElement("b", null, "Retry"),
+                " or",
+                ' ',
                 React.createElement("b", null, "Clear"),
-                " button and try again.")));
+                " buttons below.")));
     }
     if (loadImageUrlError) {
         return (React.createElement(React.Fragment, null,

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

@@ -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 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"]}
+{"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 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  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          type: 'NEW',\n          _id: value._id,\n          data: value.data,\n          fileName: value.fileName,\n          isPrivate: value.isPrivate,\n        })\n      }\n    }\n  }, [element, onChange, value])\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        {result.uploadErrorMessage && handleRetry && (\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n            onClick={handleRetry}\n          >\n            Retry\n          </button>\n        )}\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 use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\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"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "2.3.0-beta.11",
+  "version": "2.3.0-beta.12",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"