@oneblink/apps-react 5.4.0-beta.1 → 5.4.0-beta.3

package/dist/OneBlinkAutoSaveForm.js

@@ -20,9 +20,14 @@ function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSa
             React.createElement(OnLoading, { className: "has-text-centered" })));
     }
     if (isAutoSaveSubmissionAvailable) {
-        return (React.createElement(Modal, { isOpen: true, title: "Continue?", cardClassName: "cypress-continue-auto-save", actions: React.createElement(React.Fragment, null,
-                React.createElement("button", { type: "button", className: "button ob-button is-light cypress-continue-auto-save-start-again-button", onClick: startNewSubmission }, "Start Again"),
-                React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-continue-auto-save-continue-button", onClick: continueAutoSaveSubmission }, "Continue")) }, "We found an in progress submission, would you like to pick up where you left off or start again?"));
+        if (form.continueWithAutosave) {
+            continueAutoSaveSubmission();
+        }
+        else {
+            return (React.createElement(Modal, { isOpen: true, title: "Continue?", cardClassName: "cypress-continue-auto-save", actions: React.createElement(React.Fragment, null,
+                    React.createElement("button", { type: "button", className: "button ob-button is-light cypress-continue-auto-save-start-again-button", onClick: startNewSubmission }, "Start Again"),
+                    React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-continue-auto-save-continue-button", onClick: continueAutoSaveSubmission }, "Continue")) }, "We found an in progress submission, would you like to pick up where you left off or start again?"));
+        }
     }
     return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, submission: submission, definition: definition, onCancel: handleCancel, onSubmit: handleSubmit, onSaveDraft: handleSaveDraft, setFormSubmission: setFormSubmission, handleNavigateAway: handleNavigateAway, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups }));
 }

package/dist/OneBlinkAutoSaveForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;AAGnF,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EAgBT;IACC,MAAM,EACJ,UAAU,EACV,UAAU,EACV,2BAA2B,EAC3B,6BAA6B,EAC7B,kBAAkB,EAClB,0BAA0B,EAC1B,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,GAChB,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;KACZ,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE;QAC/B,OAAO,CACL,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,CACjD,CACP,CAAA;KACF;IAED,IAAI,6BAA6B,EAAE;QACjC,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,aAAa,EAAC,4BAA4B,EAC1C,OAAO,EACL;gBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yEAAyE,EACnF,OAAO,EAAE,kBAAkB,kBAGpB;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,eAG5B,CACR,uGAKC,CACT,CAAA;KACF;IAED,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,GAChC,CACH,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport OnLoading from './components/renderer/OnLoading'\nimport Modal from './components/renderer/Modal'\nimport OneBlinkFormBase from './OneBlinkFormBase'\nimport useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState'\nimport { OneBlinkFormUncontrolled } from './OneBlinkForm'\n\nfunction OneBlinkAutoSaveForm({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  autoSaveKey,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\n  onCancel,\n  onSubmit,\n  onSaveDraft,\n  ...props\n}: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {\n  /** Pass a unique key for this submission e.g. the `externalId` the parameter */\n  autoSaveKey: string\n  /**\n   * By default, auto save data is removed when the user clicks Submit. If you\n   * would like auto save data to persist and clean up the auto save data later,\n   * pass `false`.\n   */\n  removeAutoSaveDataBeforeSubmit?: boolean\n  /**\n   * By default, auto save data is removed when the user clicks Save Draft. If\n   * you would like auto save data to persist and clean up the auto save data\n   * later, pass `false`.\n   */\n  removeAutoSaveDataBeforeSaveDraft?: boolean\n}) {\n  const {\n    definition,\n    submission,\n    isLoadingAutoSaveSubmission,\n    isAutoSaveSubmissionAvailable,\n    startNewSubmission,\n    continueAutoSaveSubmission,\n    handleSubmit,\n    handleCancel,\n    handleSaveDraft,\n    setFormSubmission,\n    handleNavigateAway,\n    lastElementUpdated,\n    executedLookups,\n  } = useFormSubmissionAutoSaveState({\n    form,\n    initialSubmission,\n    resumeAtElement,\n    autoSaveKey,\n    removeAutoSaveDataBeforeSubmit,\n    removeAutoSaveDataBeforeSaveDraft,\n    onCancel,\n    onSubmit,\n    onSaveDraft,\n  })\n\n  if (isLoadingAutoSaveSubmission) {\n    return (\n      <div className=\"cypress-loading has-text-centered\">\n        <OnLoading className=\"has-text-centered\"></OnLoading>\n      </div>\n    )\n  }\n\n  if (isAutoSaveSubmissionAvailable) {\n    return (\n      <Modal\n        isOpen\n        title=\"Continue?\"\n        cardClassName=\"cypress-continue-auto-save\"\n        actions={\n          <>\n            <button\n              type=\"button\"\n              className=\"button ob-button is-light cypress-continue-auto-save-start-again-button\"\n              onClick={startNewSubmission}\n            >\n              Start Again\n            </button>\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-continue-auto-save-continue-button\"\n              onClick={continueAutoSaveSubmission}\n            >\n              Continue\n            </button>\n          </>\n        }\n      >\n        We found an in progress submission, would you like to pick up where you\n        left off or start again?\n      </Modal>\n    )\n  }\n\n  return (\n    <OneBlinkFormBase\n      {...props}\n      isReadOnly={false}\n      submission={submission}\n      definition={definition}\n      onCancel={handleCancel}\n      onSubmit={handleSubmit}\n      onSaveDraft={handleSaveDraft}\n      setFormSubmission={setFormSubmission}\n      handleNavigateAway={handleNavigateAway}\n      lastElementUpdated={lastElementUpdated}\n      executedLookups={executedLookups}\n    />\n  )\n}\n\n/**\n * This component is a drop in replacement for {@link OneBlinkForm} with the\n * addition of auto save happening periodically to prevent users from losing\n * submission data.\n *\n * If you need auto saving with a controlled form, see the\n * {@link OneBlinkFormControlled} component for a full example.\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkAutoSaveForm)\n"]}
+{"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;AAGnF,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EAgBT;IACC,MAAM,EACJ,UAAU,EACV,UAAU,EACV,2BAA2B,EAC3B,6BAA6B,EAC7B,kBAAkB,EAClB,0BAA0B,EAC1B,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,GAChB,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;KACZ,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE;QAC/B,OAAO,CACL,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,CACjD,CACP,CAAA;KACF;IAED,IAAI,6BAA6B,EAAE;QACjC,IAAG,IAAI,CAAC,oBAAoB,EAAE;YAC5B,0BAA0B,EAAE,CAAA;SAC7B;aAAM;YACL,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,aAAa,EAAC,4BAA4B,EAC1C,OAAO,EACL;oBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yEAAyE,EACnF,OAAO,EAAE,kBAAkB,kBAGpB;oBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,eAG5B,CACR,uGAKC,CACT,CAAA;SACF;KACF;IAED,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,GAChC,CACH,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport OnLoading from './components/renderer/OnLoading'\nimport Modal from './components/renderer/Modal'\nimport OneBlinkFormBase from './OneBlinkFormBase'\nimport useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState'\nimport { OneBlinkFormUncontrolled } from './OneBlinkForm'\n\nfunction OneBlinkAutoSaveForm({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  autoSaveKey,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\n  onCancel,\n  onSubmit,\n  onSaveDraft,\n  ...props\n}: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {\n  /** Pass a unique key for this submission e.g. the `externalId` the parameter */\n  autoSaveKey: string\n  /**\n   * By default, auto save data is removed when the user clicks Submit. If you\n   * would like auto save data to persist and clean up the auto save data later,\n   * pass `false`.\n   */\n  removeAutoSaveDataBeforeSubmit?: boolean\n  /**\n   * By default, auto save data is removed when the user clicks Save Draft. If\n   * you would like auto save data to persist and clean up the auto save data\n   * later, pass `false`.\n   */\n  removeAutoSaveDataBeforeSaveDraft?: boolean\n}) {\n  const {\n    definition,\n    submission,\n    isLoadingAutoSaveSubmission,\n    isAutoSaveSubmissionAvailable,\n    startNewSubmission,\n    continueAutoSaveSubmission,\n    handleSubmit,\n    handleCancel,\n    handleSaveDraft,\n    setFormSubmission,\n    handleNavigateAway,\n    lastElementUpdated,\n    executedLookups,\n  } = useFormSubmissionAutoSaveState({\n    form,\n    initialSubmission,\n    resumeAtElement,\n    autoSaveKey,\n    removeAutoSaveDataBeforeSubmit,\n    removeAutoSaveDataBeforeSaveDraft,\n    onCancel,\n    onSubmit,\n    onSaveDraft,\n  })\n\n  if (isLoadingAutoSaveSubmission) {\n    return (\n      <div className=\"cypress-loading has-text-centered\">\n        <OnLoading className=\"has-text-centered\"></OnLoading>\n      </div>\n    )\n  }\n\n  if (isAutoSaveSubmissionAvailable) {\n    if(form.continueWithAutosave) {\n      continueAutoSaveSubmission()\n    } else {\n      return (\n        <Modal\n          isOpen\n          title=\"Continue?\"\n          cardClassName=\"cypress-continue-auto-save\"\n          actions={\n            <>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-light cypress-continue-auto-save-start-again-button\"\n                onClick={startNewSubmission}\n              >\n                Start Again\n              </button>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-primary cypress-continue-auto-save-continue-button\"\n                onClick={continueAutoSaveSubmission}\n              >\n                Continue\n              </button>\n            </>\n          }\n        >\n          We found an in progress submission, would you like to pick up where you\n          left off or start again?\n        </Modal>\n      )\n    }\n  }\n\n  return (\n    <OneBlinkFormBase\n      {...props}\n      isReadOnly={false}\n      submission={submission}\n      definition={definition}\n      onCancel={handleCancel}\n      onSubmit={handleSubmit}\n      onSaveDraft={handleSaveDraft}\n      setFormSubmission={setFormSubmission}\n      handleNavigateAway={handleNavigateAway}\n      lastElementUpdated={lastElementUpdated}\n      executedLookups={executedLookups}\n    />\n  )\n}\n\n/**\n * This component is a drop in replacement for {@link OneBlinkForm} with the\n * addition of auto save happening periodically to prevent users from losing\n * submission data.\n *\n * If you need auto saving with a controlled form, see the\n * {@link OneBlinkFormControlled} component for a full example.\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkAutoSaveForm)\n"]}

package/dist/form-elements/FormElementBarcodeScanner.js

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { Html5QrcodeScanner } from 'html5-qrcode';
+import { Html5Qrcode, Html5QrcodeSupportedFormats, } from 'html5-qrcode';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
 import useBooleanState from '../hooks/useBooleanState';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import useLookupNotification, { LookupNotificationContext, } from '../hooks/useLookupNotification';
+import useLoadDataState from '../hooks/useLoadDataState';
+import OnLoading from '../components/renderer/OnLoading';
 function FormElementBarcodeScanner({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] = useBooleanState(false);
     const [error, setError] = React.useState(null);
@@ -50,7 +52,9 @@ function FormElementBarcodeScanner({ id, element, value, onChange, validationMes
                     React.createElement("div", null,
                         React.createElement("h4", { className: "title is-4" }, "Whoops..."),
                         React.createElement("p", null, error.message))))),
-            isCameraOpen ? (React.createElement(BarcodeScanner, { id: `${id}==BARCODE_SCANNER`, onScan: handleScan, onClose: stopBarcodeScanner })) : (React.createElement("div", null,
+            isCameraOpen ? (React.createElement(BarcodeScannerSupported, { id: `${id}==BARCODE_SCANNER`, restrictedBarcodeTypes: element.restrictBarcodeTypes
+                    ? element.restrictedBarcodeTypes
+                    : undefined, onScan: handleScan, onClose: stopBarcodeScanner })) : (React.createElement("div", null,
                 React.createElement("div", { className: "field has-addons" },
                     React.createElement("div", { className: "control is-expanded has-icons-right" },
                         React.createElement("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-barcode-scanner-control has-margin-bottom-8", value: text, onChange: (e) => onChange(element, {
@@ -66,34 +70,103 @@ function FormElementBarcodeScanner({ id, element, value, onChange, validationMes
                 React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
 }
 export default React.memo(FormElementBarcodeScanner);
-function BarcodeScanner({ id, onScan, onClose }) {
-    const [html5QrcodeScanner, setHtml5QrcodeScanner] = React.useState(null);
+function BarcodeScannerSupported(props) {
+    var _a;
+    const { onClose } = props;
+    if (!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia)) {
+        return (React.createElement(BarcodeScannerFigure, { onClose: onClose },
+            React.createElement(BarcodeScannerError, { title: "Unsupported Device", message: "Your device does not support accessing your camera." })));
+    }
+    return React.createElement(BarcodeScannerCameraLoader, { ...props });
+}
+function BarcodeScannerCameraLoader(props) {
+    const { onClose } = props;
+    const [state] = useLoadDataState(Html5Qrcode.getCameras);
+    switch (state.status) {
+        case 'LOADING': {
+            return (React.createElement(BarcodeScannerFigure, { onClose: onClose },
+                React.createElement("div", { className: "figure-content has-text-centered" },
+                    React.createElement(OnLoading, { small: true }))));
+        }
+        case 'ERROR': {
+            return (React.createElement(BarcodeScannerFigure, { onClose: onClose },
+                React.createElement(BarcodeScannerError, { title: "Whoops...", message: state.error.name === 'NotAllowedError'
+                        ? 'Cannot scan for barcodes without granting the application access to the camera.'
+                        : state.error.message })));
+        }
+    }
+    if (!state.result.length) {
+        return (React.createElement(BarcodeScannerFigure, { onClose: onClose },
+            React.createElement(BarcodeScannerError, { title: "No Cameras Available", message: "Your device does not have an accessible camera." })));
+    }
+    return React.createElement(BarcodeScanner, { ...props, cameraDevices: state.result });
+}
+function BarcodeScanner({ id, restrictedBarcodeTypes, onScan, onClose, cameraDevices, }) {
+    const [html5Qrcode, setHtml5Qrcode] = React.useState(null);
+    const [selectedCameraDeviceId, setSelectedCameraDeviceId] = React.useState(cameraDevices[0].id);
+    const handleSwitchCamera = React.useCallback(() => {
+        // We will just be rotating between the available cameras.
+        setSelectedCameraDeviceId((currentCameraDeviceId) => {
+            const nextDeviceIndex = cameraDevices.findIndex((cameraDevice) => cameraDevice.id === currentCameraDeviceId) + 1;
+            const nextDevice = cameraDevices[nextDeviceIndex] || cameraDevices[0];
+            return nextDevice.id;
+        });
+    }, [cameraDevices]);
+    React.useEffect(() => {
+        const formatsToSupport = restrictedBarcodeTypes === null || restrictedBarcodeTypes === void 0 ? void 0 : restrictedBarcodeTypes.reduce((memo, barcodeType) => {
+            const format = Html5QrcodeSupportedFormats[barcodeType];
+            if (format !== undefined) {
+                memo.push(format);
+            }
+            return memo;
+        }, []);
+        const newHtml5Qrcode = new Html5Qrcode(id, {
+            verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),
+            formatsToSupport: (formatsToSupport === null || formatsToSupport === void 0 ? void 0 : formatsToSupport.length) ? formatsToSupport : undefined,
+        });
+        setHtml5Qrcode(newHtml5Qrcode);
+        return () => {
+            newHtml5Qrcode.stop().catch((error) => {
+                console.warn('Failed to stop barcode scanner', error);
+            });
+        };
+    }, [id, restrictedBarcodeTypes]);
     React.useEffect(() => {
-        const verbose = true;
-        const newHtml5QrcodeScanner = new Html5QrcodeScanner(id, {
+        html5Qrcode === null || html5Qrcode === void 0 ? void 0 : html5Qrcode.start(selectedCameraDeviceId, {
             fps: 20,
             qrbox: {
                 width: 400,
                 height: 400,
             },
-        }, verbose);
-        setHtml5QrcodeScanner(newHtml5QrcodeScanner);
-        return () => {
-            newHtml5QrcodeScanner.clear();
-        };
-    }, [id]);
-    React.useEffect(() => {
-        html5QrcodeScanner === null || html5QrcodeScanner === void 0 ? void 0 : html5QrcodeScanner.render(function onScanSuccess(decodedText, decodedResult) {
-            console.log(`Code matched = ${decodedText}`, decodedResult);
+        }, function onScanSuccess(decodedText, decodedResult) {
+            console.log('Barcode scanner decoded result:', decodedResult);
             onScan(decodedText);
         }, function onScanFailure() {
             // do nothing and keep scanning
+        }).catch((error) => {
+            console.warn('Failed to start scanning', error);
         });
-    }, [html5QrcodeScanner, onScan]);
+    }, [html5Qrcode, onScan, selectedCameraDeviceId]);
+    return (React.createElement(BarcodeScannerFigure, { onClose: onClose, onSwitchCamera: cameraDevices.length > 1 ? handleSwitchCamera : undefined },
+        React.createElement("div", { className: "figure-content-absolute-center" },
+            React.createElement(OnLoading, { small: true })),
+        React.createElement("div", { id: id, className: "ob-figure__barcode-scanner" })));
+}
+function BarcodeScannerFigure({ onClose, onSwitchCamera, children, }) {
     return (React.createElement("div", null,
-        React.createElement("figure", { className: "ob-figure" },
-            React.createElement("div", { id: id })),
+        React.createElement("figure", { className: "ob-figure" }, children),
         React.createElement("div", { className: "buttons ob-buttons" },
-            React.createElement("button", { type: "button", className: "button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button", onClick: onClose }, "Cancel"))));
+            React.createElement("button", { type: "button", className: "button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button", onClick: onClose }, "Cancel"),
+            onSwitchCamera && (React.createElement("button", { type: "button", className: "button ob-button ob-button__switch-camera is-primary cypress-switch-camera-button", onClick: onSwitchCamera }, "Switch Camera")))));
+}
+function BarcodeScannerError({ title, message, }) {
+    return (React.createElement("div", { className: "figure-content has-text-centered" },
+        React.createElement("div", null,
+            React.createElement("h4", { className: "title is-4" }, title),
+            React.createElement("p", { className: "has-margin-bottom-6" }, message),
+            React.createElement("p", null,
+                "Please click ",
+                React.createElement("b", null, "Cancel"),
+                " below and type in the barcode value manually."))));
 }
 //# sourceMappingURL=FormElementBarcodeScanner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { Html5QrcodeScanner } from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n  LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.BarcodeScannerElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n    useBooleanState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const { onLookup } = useLookupNotification(value)\n  const handleScan = React.useCallback(\n    (newValue: string | undefined) => {\n      setIsDirty()\n      onChange(element, {\n        value: newValue,\n      })\n      stopBarcodeScanner()\n      onLookup()\n    },\n    [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n  )\n\n  const openBarcodeScanner = React.useCallback(() => {\n    if (window.cordova) {\n      setError(null)\n      // @ts-expect-error ???\n      window.cordova.plugins.barcodeScanner.scan(\n        // @ts-expect-error ???\n        (result) => {\n          if (!result.cancelled) {\n            handleScan(result.text)\n          }\n        },\n        // @ts-expect-error ???\n        (error) => {\n          setError(\n            new Error(\n              `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n            ),\n          )\n        },\n        {\n          showFlipCameraButton: true,\n          showTorchButton: true,\n        },\n      )\n    } else {\n      startBarcodeScanner()\n    }\n  }, [handleScan, startBarcodeScanner])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-barcode-scanner-element\">\n      <FormElementLabelContainer\n        className=\"ob-barcode-scanner\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        {error && (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <div>\n                <h4 className=\"title is-4\">Whoops...</h4>\n                <p>{error.message}</p>\n              </div>\n            </div>\n          </figure>\n        )}\n\n        {isCameraOpen ? (\n          <BarcodeScanner\n            id={`${id}==BARCODE_SCANNER`}\n            onScan={handleScan}\n            onClose={stopBarcodeScanner}\n          />\n        ) : (\n          <div>\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded has-icons-right\">\n                <input\n                  type=\"text\"\n                  placeholder={element.placeholderValue}\n                  id={id}\n                  name={element.name}\n                  className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n                  value={text}\n                  onChange={(e) =>\n                    onChange(element, {\n                      value: e.target.value || undefined,\n                    })\n                  }\n                  required={element.required}\n                  disabled={element.readOnly}\n                  onBlur={setIsDirty}\n                />\n                <span className=\"ob-input-icon icon is-small is-right\">\n                  <i className=\"material-icons is-size-5\">document_scanner</i>\n                </span>\n              </div>\n              {!!element.readOnly && !!value && (\n                <div className=\"control\">\n                  <CopyToClipboardButton\n                    className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                    text={text}\n                  />\n                </div>\n              )}\n              <LookupButton\n                isInputButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            </div>\n\n            <button\n              type=\"button\"\n              className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n              disabled={element.readOnly}\n              onClick={openBarcodeScanner}\n            >\n              Scan Barcode\n            </button>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\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(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n  id: string\n  onScan: (barcode: string | undefined) => void\n  onClose: () => void\n}\n\nfunction BarcodeScanner({ id, onScan, onClose }: BarcodeScannerProps) {\n  const [html5QrcodeScanner, setHtml5QrcodeScanner] =\n    React.useState<Html5QrcodeScanner | null>(null)\n\n  React.useEffect(() => {\n    const verbose = true\n    const newHtml5QrcodeScanner = new Html5QrcodeScanner(\n      id,\n      {\n        fps: 20,\n        qrbox: {\n          width: 400,\n          height: 400,\n        },\n      },\n      verbose,\n    )\n    setHtml5QrcodeScanner(newHtml5QrcodeScanner)\n    return () => {\n      newHtml5QrcodeScanner.clear()\n    }\n  }, [id])\n\n  React.useEffect(() => {\n    html5QrcodeScanner?.render(\n      function onScanSuccess(decodedText, decodedResult) {\n        console.log(`Code matched = ${decodedText}`, decodedResult)\n        onScan(decodedText)\n      },\n      function onScanFailure() {\n        // do nothing and keep scanning\n      },\n    )\n  }, [html5QrcodeScanner, onScan])\n\n  return (\n    <div>\n      <figure className=\"ob-figure\">\n        <div id={id} />\n      </figure>\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n          onClick={onClose}\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  Html5Qrcode,\n  CameraDevice,\n  Html5QrcodeSupportedFormats,\n} from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n  LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useLoadDataState from '../hooks/useLoadDataState'\nimport OnLoading from '../components/renderer/OnLoading'\n\ntype Props = {\n  id: string\n  element: FormTypes.BarcodeScannerElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n    useBooleanState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const { onLookup } = useLookupNotification(value)\n  const handleScan = React.useCallback(\n    (newValue: string | undefined) => {\n      setIsDirty()\n      onChange(element, {\n        value: newValue,\n      })\n      stopBarcodeScanner()\n      onLookup()\n    },\n    [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n  )\n\n  const openBarcodeScanner = React.useCallback(() => {\n    if (window.cordova) {\n      setError(null)\n      // @ts-expect-error ???\n      window.cordova.plugins.barcodeScanner.scan(\n        // @ts-expect-error ???\n        (result) => {\n          if (!result.cancelled) {\n            handleScan(result.text)\n          }\n        },\n        // @ts-expect-error ???\n        (error) => {\n          setError(\n            new Error(\n              `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n            ),\n          )\n        },\n        {\n          showFlipCameraButton: true,\n          showTorchButton: true,\n        },\n      )\n    } else {\n      startBarcodeScanner()\n    }\n  }, [handleScan, startBarcodeScanner])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-barcode-scanner-element\">\n      <FormElementLabelContainer\n        className=\"ob-barcode-scanner\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        {error && (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <div>\n                <h4 className=\"title is-4\">Whoops...</h4>\n                <p>{error.message}</p>\n              </div>\n            </div>\n          </figure>\n        )}\n\n        {isCameraOpen ? (\n          <BarcodeScannerSupported\n            id={`${id}==BARCODE_SCANNER`}\n            restrictedBarcodeTypes={\n              element.restrictBarcodeTypes\n                ? element.restrictedBarcodeTypes\n                : undefined\n            }\n            onScan={handleScan}\n            onClose={stopBarcodeScanner}\n          />\n        ) : (\n          <div>\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded has-icons-right\">\n                <input\n                  type=\"text\"\n                  placeholder={element.placeholderValue}\n                  id={id}\n                  name={element.name}\n                  className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n                  value={text}\n                  onChange={(e) =>\n                    onChange(element, {\n                      value: e.target.value || undefined,\n                    })\n                  }\n                  required={element.required}\n                  disabled={element.readOnly}\n                  onBlur={setIsDirty}\n                />\n                <span className=\"ob-input-icon icon is-small is-right\">\n                  <i className=\"material-icons is-size-5\">document_scanner</i>\n                </span>\n              </div>\n              {!!element.readOnly && !!value && (\n                <div className=\"control\">\n                  <CopyToClipboardButton\n                    className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                    text={text}\n                  />\n                </div>\n              )}\n              <LookupButton\n                isInputButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            </div>\n\n            <button\n              type=\"button\"\n              className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n              disabled={element.readOnly}\n              onClick={openBarcodeScanner}\n            >\n              Scan Barcode\n            </button>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\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(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n  id: string\n  restrictedBarcodeTypes: FormTypes.BarcodeScannerElement['restrictedBarcodeTypes']\n  onScan: (barcode: string | undefined) => void\n  onClose: () => void\n}\n\nfunction BarcodeScannerSupported(props: BarcodeScannerProps) {\n  const { onClose } = props\n  if (!navigator.mediaDevices?.getUserMedia) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"Unsupported Device\"\n          message=\"Your device does not support accessing your camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScannerCameraLoader {...props} />\n}\n\nfunction BarcodeScannerCameraLoader(props: BarcodeScannerProps) {\n  const { onClose } = props\n  const [state] = useLoadDataState(Html5Qrcode.getCameras)\n  switch (state.status) {\n    case 'LOADING': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <div className=\"figure-content has-text-centered\">\n            <OnLoading small />\n          </div>\n        </BarcodeScannerFigure>\n      )\n    }\n    case 'ERROR': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <BarcodeScannerError\n            title=\"Whoops...\"\n            message={\n              state.error.name === 'NotAllowedError'\n                ? 'Cannot scan for barcodes without granting the application access to the camera.'\n                : state.error.message\n            }\n          />\n        </BarcodeScannerFigure>\n      )\n    }\n  }\n\n  if (!state.result.length) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"No Cameras Available\"\n          message=\"Your device does not have an accessible camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScanner {...props} cameraDevices={state.result} />\n}\n\nfunction BarcodeScanner({\n  id,\n  restrictedBarcodeTypes,\n  onScan,\n  onClose,\n  cameraDevices,\n}: BarcodeScannerProps & {\n  cameraDevices: CameraDevice[]\n}) {\n  const [html5Qrcode, setHtml5Qrcode] = React.useState<Html5Qrcode | null>(null)\n  const [selectedCameraDeviceId, setSelectedCameraDeviceId] = React.useState(\n    cameraDevices[0].id,\n  )\n\n  const handleSwitchCamera = React.useCallback(() => {\n    // We will just be rotating between the available cameras.\n    setSelectedCameraDeviceId((currentCameraDeviceId) => {\n      const nextDeviceIndex =\n        cameraDevices.findIndex(\n          (cameraDevice) => cameraDevice.id === currentCameraDeviceId,\n        ) + 1\n      const nextDevice = cameraDevices[nextDeviceIndex] || cameraDevices[0]\n      return nextDevice.id\n    })\n  }, [cameraDevices])\n\n  React.useEffect(() => {\n    const formatsToSupport = restrictedBarcodeTypes?.reduce<\n      Html5QrcodeSupportedFormats[]\n    >((memo, barcodeType) => {\n      const format =\n        Html5QrcodeSupportedFormats[\n          barcodeType as keyof typeof Html5QrcodeSupportedFormats\n        ]\n      if (format !== undefined) {\n        memo.push(format)\n      }\n      return memo\n    }, [])\n\n    const newHtml5Qrcode = new Html5Qrcode(id, {\n      verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),\n      formatsToSupport: formatsToSupport?.length ? formatsToSupport : undefined,\n    })\n    setHtml5Qrcode(newHtml5Qrcode)\n\n    return () => {\n      newHtml5Qrcode.stop().catch((error) => {\n        console.warn('Failed to stop barcode scanner', error)\n      })\n    }\n  }, [id, restrictedBarcodeTypes])\n\n  React.useEffect(() => {\n    html5Qrcode\n      ?.start(\n        selectedCameraDeviceId,\n        {\n          fps: 20,\n          qrbox: {\n            width: 400,\n            height: 400,\n          },\n        },\n        function onScanSuccess(decodedText, decodedResult) {\n          console.log('Barcode scanner decoded result:', decodedResult)\n          onScan(decodedText)\n        },\n        function onScanFailure() {\n          // do nothing and keep scanning\n        },\n      )\n      .catch((error) => {\n        console.warn('Failed to start scanning', error)\n      })\n  }, [html5Qrcode, onScan, selectedCameraDeviceId])\n\n  return (\n    <BarcodeScannerFigure\n      onClose={onClose}\n      onSwitchCamera={cameraDevices.length > 1 ? handleSwitchCamera : undefined}\n    >\n      <div className=\"figure-content-absolute-center\">\n        <OnLoading small />\n      </div>\n      <div id={id} className=\"ob-figure__barcode-scanner\" />\n    </BarcodeScannerFigure>\n  )\n}\n\nfunction BarcodeScannerFigure({\n  onClose,\n  onSwitchCamera,\n  children,\n}: {\n  onClose: () => void\n  onSwitchCamera?: () => void\n  children: React.ReactNode\n}) {\n  return (\n    <div>\n      <figure className=\"ob-figure\">{children}</figure>\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n          onClick={onClose}\n        >\n          Cancel\n        </button>\n        {onSwitchCamera && (\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button__switch-camera is-primary cypress-switch-camera-button\"\n            onClick={onSwitchCamera}\n          >\n            Switch Camera\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction BarcodeScannerError({\n  title,\n  message,\n}: {\n  title: string\n  message: string\n}) {\n  return (\n    <div className=\"figure-content has-text-centered\">\n      <div>\n        <h4 className=\"title is-4\">{title}</h4>\n        <p className=\"has-margin-bottom-6\">{message}</p>\n        <p>\n          Please click <b>Cancel</b> below and type in the barcode value\n          manually.\n        </p>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/styles/figure.scss

@@ -13,10 +13,23 @@
     max-height: 300px;
   }
 
+  .ob-figure__barcode-scanner,
   video {
+    min-height: 300px;
     max-height: 450px;
   }
 
+  .figure-content-absolute-center {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .figure-content {
     height: 300px;
     width: 100%;

package/dist/styles.css

@@ -8053,21 +8053,6 @@ button on-loading {
   margin-right: 0.5rem;
 }
 
-.ob-barcode-scanner__square {
-  border-color: rgba(0, 0, 0, 0.5);
-  border-style: solid;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.ob-barcode-scanner__line {
-  background-color: rgba(255, 0, 0, 0.5);
-  position: absolute;
-}
-
 .ob-camera__annotate-button {
   position: absolute;
   top: 0.5rem;
@@ -9221,9 +9206,21 @@ textarea:disabled {
   margin: 0;
   max-height: 300px;
 }
+.ob-figure .ob-figure__barcode-scanner,
 .ob-figure video {
+  min-height: 300px;
   max-height: 450px;
 }
+.ob-figure .figure-content-absolute-center {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .ob-figure .figure-content {
   height: 300px;
   width: 100%;

package/dist/styles.scss

@@ -84,7 +84,6 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 @import './styles/animations.scss';
 @import './styles/signature.scss';
 @import './styles/checkbox.scss';
-@import './styles/barcode-scanner.scss';
 @import './styles/camera.scss';
 @import './styles/ob-html.scss';
 @import './styles/radio.scss';

package/package.json

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

package/dist/services/barcode-readers/quagger.d.ts

@@ -1 +0,0 @@
-export default function (imgData: string, barcodeTypes?: string[]): Promise<string | undefined>;

package/dist/services/barcode-readers/quagger.js

@@ -1,35 +0,0 @@
-import Quagga from 'quagga';
-const BARCODE_TYPES = [
-    'code_128_reader',
-    'ean_reader',
-    'ean_8_reader',
-    'code_39_reader',
-    'code_39_vin_reader',
-    'codabar_reader',
-    'upc_reader',
-    'upc_e_reader',
-    'i2of5_reader',
-    '2of5_reader',
-    'code_93_reader',
-];
-export default function (imgData, barcodeTypes) {
-    return new Promise((resolve) => {
-        Quagga.decodeSingle({
-            decoder: {
-                readers: (barcodeTypes && barcodeTypes.length
-                    ? barcodeTypes
-                    : BARCODE_TYPES).filter((type) => type !== 'qr_reader'),
-            },
-            locate: true,
-            src: imgData,
-        }, function (result) {
-            if (result && result.codeResult) {
-                resolve(result.codeResult.code);
-            }
-            else {
-                resolve(undefined);
-            }
-        });
-    });
-}
-//# sourceMappingURL=quagger.js.map

package/dist/services/barcode-readers/quagger.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"quagger.js","sourceRoot":"","sources":["../../../src/services/barcode-readers/quagger.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAA;AAE3B,MAAM,aAAa,GAAG;IACpB,iBAAiB;IACjB,YAAY;IACZ,cAAc;IACd,gBAAgB;IAChB,oBAAoB;IACpB,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,aAAa;IACb,gBAAgB;CACjB,CAAA;AAED,MAAM,CAAC,OAAO,WACZ,OAAe,EACf,YAAuB;IAEvB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,CAAC,YAAY,CACjB;YACE,OAAO,EAAE;gBACP,OAAO,EAAE,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM;oBAC3C,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,aAAa,CAChB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,WAAW,CAAC;aACzC;YACD,MAAM,EAAE,IAAI;YACZ,GAAG,EAAE,OAAO;SACb,EACD,UAAU,MAIT;YACC,IAAI,MAAM,IAAI,MAAM,CAAC,UAAU,EAAE;gBAC/B,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;aAChC;iBAAM;gBACL,OAAO,CAAC,SAAS,CAAC,CAAA;aACnB;QACH,CAAC,CACF,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import Quagga from 'quagga'\n\nconst BARCODE_TYPES = [\n  'code_128_reader',\n  'ean_reader',\n  'ean_8_reader',\n  'code_39_reader',\n  'code_39_vin_reader',\n  'codabar_reader',\n  'upc_reader',\n  'upc_e_reader',\n  'i2of5_reader',\n  '2of5_reader',\n  'code_93_reader',\n]\n\nexport default function (\n  imgData: string,\n  barcodeTypes?: string[],\n): Promise<string | undefined> {\n  return new Promise((resolve) => {\n    Quagga.decodeSingle(\n      {\n        decoder: {\n          readers: (barcodeTypes && barcodeTypes.length\n            ? barcodeTypes\n            : BARCODE_TYPES\n          ).filter((type) => type !== 'qr_reader'),\n        },\n        locate: true, // try to locate the barcode in the image\n        src: imgData,\n      },\n      function (result: {\n        codeResult: {\n          code: string | PromiseLike<string | undefined> | undefined\n        }\n      }) {\n        if (result && result.codeResult) {\n          resolve(result.codeResult.code)\n        } else {\n          resolve(undefined)\n        }\n      },\n    )\n  })\n}\n"]}

package/dist/styles/barcode-scanner.scss

@@ -1,14 +0,0 @@
-.ob-barcode-scanner__square {
-  border-color: rgba(0, 0, 0, 0.5);
-  border-style: solid;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.ob-barcode-scanner__line {
-  background-color: rgba(255, 0, 0, 0.5);
-  position: absolute;
-}