fix(scanner): completed scanner component with children and props

opensrc0 · Mar 3, 2024 · f85b901 · f85b901
1 parent 00d6d20
commit f85b901
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 34 deletions.
diff --git a/__app/component/Scanner/Close.js b/__app/component/Scanner/Close.js
@@ -1,22 +1,32 @@
 import React from 'react';
 
-function Close({ zIndex, onClose }) {
+function Close({
+  onClose,
+  children,
+  zIndex,
+  top,
+  bottom,
+  left,
+  right,
+  color,
+}) {
   return (
     <div
       style={{
-        left: '5%',
-        bottom: '25%',
+        top,
+        bottom,
+        left,
+        right,
         zIndex,
+        color,
         position: 'absolute',
-        cursor: 'pointer',
-        color: 'white',
       }}
       onClick={onClose}
       onKeyDown={(ev) => ev.key === 'Enter' && onClose()}
       role="button"
       tabIndex={0}
     >
-      Close Button
+      {children || 'Close Button'}
     </div>
   );
 }
@@ -26,7 +36,11 @@ Close.propTypes = {
 };
 
 Close.defaultProps = {
-
+  color: 'white',
+  top: 'auto',
+  bottom: '25%',
+  left: 'auto',
+  right: '72%',
 };
 
 export default Close;
diff --git a/__app/component/Scanner/Flash.js b/__app/component/Scanner/Flash.js
@@ -1,21 +1,32 @@
 import React from 'react';
 
-function Flash({ zIndex, toggleFlash }) {
+function Flash({
+  toggleFlash,
+  children,
+  zIndex,
+  top,
+  bottom,
+  left,
+  right,
+  color,
+}) {
   return (
     <div
       style={{
-        right: '5%',
-        bottom: '25%',
+        top,
+        bottom,
+        left,
+        right,
         zIndex,
+        color,
         position: 'absolute',
-        color: 'white',
       }}
       onClick={toggleFlash}
       onKeyDown={(ev) => ev.key === 'Enter' && toggleFlash()}
       role="button"
       tabIndex={0}
     >
-      Toggle Flash
+      {children || 'Toggle Flash'}
     </div>
   );
 }
@@ -25,7 +36,11 @@ Flash.propTypes = {
 };
 
 Flash.defaultProps = {
-
+  color: 'white',
+  top: 'auto',
+  bottom: '25%',
+  left: 'auto',
+  right: '5%',
 };
 
 export default Flash;
diff --git a/__app/component/Scanner/ScanBox.js b/__app/component/Scanner/ScanBox.js
@@ -2,50 +2,49 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { browserDimensions } from '../utils/utils';
 
-function ScanBox({ zIndex }) {
+function ScanBox({ zIndex, marginTop, background, children }) {
   const [isBrowser, setIsBrowser] = useState(false);
   const [appCss, setAppCss] = useState({});
 
   useEffect(() => {
     const screen = browserDimensions();
-    const borderTop = `${((screen.height - screen.width) / 2)}px`;
-    const borderBottom = `${((screen.height - screen.width) / 2) + 50}px`;
+    const borderTop = `${((screen.height - screen.width) / 2) - 80 + marginTop}px`;
+    const borderBottom = `${((screen.height - screen.width) / 2) + 150 - marginTop}px`;
 
     setIsBrowser(true);
     setAppCss({ borderTop, borderBottom, width: screen.width, height: screen.height });
   }, []);
 
-  return isBrowser && (
+  return isBrowser && (children || (
     <div style={{
       left: '0px',
       top: '0',
       zIndex,
+      position: 'absolute',
       boxSizing: 'border-box',
+      width: appCss.width,
+      height: appCss.height,
       borderLeft: '25px',
       borderRight: '25px',
       borderTop: appCss.borderTop,
       borderBottom: appCss.borderBottom,
-      borderColor: 'rgba(0, 0, 0, 0.7)',
+      borderColor: background,
       borderStyle: 'solid',
-      boxShadow: '#e42529 0px 0px 0px 5px inset',
-      position: 'absolute',
-      width: appCss.width,
-      height: appCss.height,
     }}
-    >
-      {
-      // <AnimateCss width={appCss.width} />
-      }
-    </div>
-  );
+    />
+  ));
 }
 
 ScanBox.propTypes = {
   zIndex: PropTypes.number,
+  marginTop: PropTypes.number,
+  background: PropTypes.string,
 };
 
 ScanBox.defaultProps = {
   zIndex: 9,
+  marginTop: 0,
+  background: 'rgba(0, 0, 0, 0.7)',
 };
 
 export default ScanBox;
diff --git a/__app/component/Scanner/ToggleCamera.js b/__app/component/Scanner/ToggleCamera.js
@@ -1,19 +1,25 @@
 import React from 'react';
 
 function ToggleCamera({
-  zIndex,
   toggleCamera,
   children,
+  zIndex,
+  top,
+  bottom,
+  left,
+  right,
+  color,
 }) {
   return (
     <div
       style={{
-        left: '38%',
-        bottom: '25%',
+        top,
+        bottom,
+        left,
+        right,
         zIndex,
+        color,
         position: 'absolute',
-        cursor: 'pointer',
-        color: 'white',
       }}
       onClick={toggleCamera}
       onKeyDown={(ev) => ev.key === 'Enter' && toggleCamera()}
@@ -30,7 +36,11 @@ ToggleCamera.propTypes = {
 };
 
 ToggleCamera.defaultProps = {
-
+  color: 'white',
+  top: 'auto',
+  bottom: '25%',
+  left: 'auto',
+  right: '37%',
 };
 
 export default ToggleCamera;