added via props in Scanner Image Upload

opensrc0 · May 18, 2024 · 1f568de · 1f568de
1 parent 388e3df
commit 1f568de
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 43 deletions.
diff --git a/__app/component/Scanner/Scanner.js b/__app/component/Scanner/Scanner.js
@@ -173,7 +173,6 @@ function Scanner({
 
   return isBrowserSupport() && (
     <div id="fe-pilot-scanner">
-
       {
         React.Children.map(children, (child) => React.cloneElement(child, {
           zIndex,

diff --git a/__app/component/Scanner/ScannerClose.js b/__app/component/Scanner/ScannerClose.js
@@ -1,16 +1,17 @@
 import React from 'react';
 
 function ScannerClose({
-  onClose,
-  children,
   zIndex,
   allClear,
-  top,
-  bottom,
-  left,
-  right,
-  color,
-  position,
+  color = 'white',
+  top = 'auto',
+  bottom = '25%',
+  left = 'auto',
+  right = '72%',
+  position = 'absolute',
+
+  onClose = () => {},
+  children,
 }) {
   const setClose = () => {
     onClose();
@@ -39,20 +40,6 @@ function ScannerClose({
   );
 }
 
-ScannerClose.propTypes = {
-
-};
-
-ScannerClose.defaultProps = {
-  color: 'white',
-  top: 'auto',
-  bottom: '25%',
-  left: 'auto',
-  right: '72%',
-  position: 'absolute',
-  onClose: () => {},
-};
-
 export { ScannerClose };
 
 export default ScannerClose;
diff --git a/__app/component/Scanner/ScannerFlash.js b/__app/component/Scanner/ScannerFlash.js
@@ -1,15 +1,15 @@
 import React from 'react';
 
 function ScannerFlash({
+  zIndex,
   toggleFlash,
+  color = 'white',
+  top = 'auto',
+  bottom = '25%',
+  left = 'auto',
+  right = '5%',
+  position = 'absolute',
   children,
-  zIndex,
-  top,
-  bottom,
-  left,
-  right,
-  color,
-  position,
 }) {
   return (
     <div
@@ -33,19 +33,6 @@ function ScannerFlash({
   );
 }
 
-ScannerFlash.propTypes = {
-
-};
-
-ScannerFlash.defaultProps = {
-  color: 'white',
-  top: 'auto',
-  bottom: '25%',
-  left: 'auto',
-  right: '5%',
-  position: 'absolute',
-};
-
 export { ScannerFlash };
 
 export default ScannerFlash;
diff --git a/__app/component/Scanner/ScannerImageUpload.js b/__app/component/Scanner/ScannerImageUpload.js
@@ -0,0 +1,130 @@
+import React from 'react';
+import { handleSuccess, handleError } from '../services/handlerService';
+
+function ScannerImageUpload({
+  successCb,
+  successMsg,
+  failureCb,
+  failureMsg,
+  children,
+  via,
+  zIndex,
+  top,
+  bottom,
+  left,
+  right,
+  color,
+  position,
+}) {
+  const onSelectGalleryImage = async (event) => {
+    const file = event.target.files[0];
+
+    if ('BarcodeDetector' in globalThis) {
+      const WindowBarcodeDetector = globalThis.BarcodeDetector;
+      const barcodeDetector = new WindowBarcodeDetector();
+
+      createImageBitmap(file)
+        .then((image) => barcodeDetector.detect(image))
+        .then((results) => {
+          const barcode = results[0];
+          if (barcode) {
+            handleSuccess({
+              msgType: 'SUCCESSFUL',
+              msg: successMsg,
+              successCb,
+              data: { barCodeValue: barcode.rawValue, barCodeType: barcode.format },
+            });
+          } else {
+            return handleError({ msgType: 'INVALID_IMAGE', msg: failureMsg.invalidImage, failureCb });
+          }
+          return true;
+        })
+        .catch((error) => handleError({ msgType: 'UNABLE_TO_SCAN', msg: failureMsg.unableToScan || JSON.stringify(error), failureCb }));
+    }
+  };
+
+  const processBy = () => {
+    const attr = {};
+    if (via === 'gallery') {
+      attr.accept = 'image/*';
+    }
+
+    if (via === 'camera') {
+      attr.accept = '*';
+      attr.capture = 'filesystem';
+    }
+
+    if (via === 'phone') {
+      attr.accept = 'image/png,image/jpeg';
+      attr.capture = 'filesystem';
+    }
+
+    return attr;
+  };
+
+  return (
+    <label
+      htmlFor={`fe-pilot-scanner-imgp-${via}`}
+      style={{
+        top,
+        bottom,
+        left,
+        right,
+        zIndex,
+        color,
+        position,
+      }}
+    >
+      {children || 'Gallery'}
+      <input
+        id={`fe-pilot-scanner-imgp-${via}`}
+        type="file"
+        {...processBy()}
+        onChange={onSelectGalleryImage}
+        onSelect={onSelectGalleryImage}
+        style={{ display: 'none' }}
+      />
+    </label>
+  );
+}
+
+ScannerImageUpload.defaultProps = {
+  successCb: () => {},
+  failureCb: () => {},
+  successMsg: '',
+  failureMsg: {
+    unSupported: '',
+    streaming: '',
+    barCodeDetection: '',
+    invalidImage: '',
+    flash: '',
+    unableToScan: '',
+  },
+  via: 'gallery',
+  zIndex: 9,
+  color: 'white',
+  top: 'auto',
+  bottom: '18%',
+  left: 'auto',
+  right: '64%',
+  position: 'absolute',
+};
+
+export { ScannerImageUpload };
+
+export default ScannerImageUpload;
+
+// <input type="file" id="id" name="id" accept="image/png,image/jpeg" capture="filesystem" />
+// <input type="file" accept="image/*" capture="filesystem" />
+
+// const generateImage = async () => {
+//   const resp = await fetch('https://i.postimg.cc/br85dpb4/Untitled-1.png');
+//   if (!resp.ok) {
+//     return console.error('Network error', resp.status);
+//   }
+//   const blob = await resp.blob();
+//   console.log(blob);
+
+//   const bmp = await createImageBitmap(blob);
+//   return bmp;
+// };
diff --git a/__app/component/Scanner/index.js b/__app/component/Scanner/index.js
@@ -5,5 +5,6 @@ export * from './ScannerFacing';
 export * from './ScannerGallery';
 export * from './ScannerCamera';
 export * from './ScannerClose';
+export * from './ScannerImageUpload';
 
 export { default } from './Scanner';