Merge pull request #41 from maslick/beep-toggle

beep toggle button
maslick · Jan 12, 2022 · bb701dc · bb701dc
2 parents 614328d + cd9681f
commit bb701dc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "koder-react",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "homepage": "./",
   "private": true,
   "devDependencies": {

diff --git a/src/components/scan.js b/src/components/scan.js
@@ -49,11 +49,11 @@ class Scan extends React.Component {
       worker: this.props.worker,
       transformToggle: true,
       rawCode: "",
-      codeType: CODE_TYPE.RAW
+      codeType: CODE_TYPE.RAW,
+      beep: this.props.beep
     };
 
     this.decodeQR = this.props.decode;
-    this.allowBeep = this.props.beep;
     this.scanRate = this.props.scanRate;
     this.upnqr = this.props.upnqr;
     this.covid19 = this.props.covid19;
@@ -94,7 +94,7 @@ class Scan extends React.Component {
         }
 
         this.setState({barcode: res, resultOpen: true, rawCode, codeType});
-        if (this.allowBeep) beep();
+        if (this.state.beep) beep();
       }
     };
   };
@@ -218,6 +218,11 @@ class Scan extends React.Component {
     this.setState({bw: !this.state.bw});
   };
 
+  onBeepClickHandler = (e) => {
+    e.preventDefault();
+    this.setState({beep: !this.state.beep});
+  };
+
   startStyle = () => {
     const style = {width: 64, textAlign: "center"};
     if (this.state.scanning) return { backgroundColor: "red", ...style };
@@ -239,6 +244,11 @@ class Scan extends React.Component {
     else return { backgroundColor: "" };
   };
 
+  beepStyle = () => {
+    if (this.state.beep) return { backgroundColor: "green" };
+    else return { backgroundColor: "" };
+  };
+
   transformToggleStyle = () => {
     if (this.state.transformToggle) return { backgroundColor: "green", padding: 12 };
     else return {backgroundColor: "", padding: 12};
@@ -314,6 +324,7 @@ class Scan extends React.Component {
       <a href="!#" className="myHref" onClick={this.onCrossHairClickHandler} style={this.xHairStyle()}>X-hair</a>
       <a href="!#" className="myHref" onClick={this.onFPSClickHandler} style={this.fpsStyle()}>FPS</a>
       <a href="!#" className="myHref" onClick={this.onBWClickHandler} style={this.bwStyle()}>B/W</a>
+      <a href="!#" className="myHref" onClick={this.onBeepClickHandler} style={this.beepStyle()}>Beep</a>
     </div>;
   };