Enter key now triggers generation

tecuity · Feb 12, 2020 · 270a136 · 270a136
1 parent 1885849
commit 270a136
Showing 1 changed file with 27 additions and 24 deletions.
diff --git a/demo-site/index.js b/demo-site/index.js
@@ -1,18 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import styled from "@emotion/styled";
-import generateBarcode from '../dist/index.js'
-import Tape from './Tape'
+import generateBarcode from "../dist/index.js";
+import Tape from "./Tape";
 import "normalize.css";
 import "./index.css";
 
 const App = () => {
   const [code, setCode] = React.useState("");
-  const [svg, setSvg] = React.useState(null)
+  const [svg, setSvg] = React.useState(null);
 
   const generate = () => {
-    setSvg(generateBarcode(code))
-  }
+    setSvg(generateBarcode(code));
+  };
 
   return (
     <Wrapper>
@@ -22,7 +22,10 @@ const App = () => {
           <Input
             type="text"
             value={code}
-            onChange={e => setCode(e.target.value)}
+            onChange={e => setCode(e.target.value.replace(/ /g, ""))}
+            onKeyDown={e => {
+              if (e.keyCode === 13) generate();
+            }}
           />
           <Button onClick={generate}>GO</Button>
         </Row>
@@ -38,64 +41,64 @@ const Wrapper = styled("div")`
   width: 100%;
 `;
 
-const Column = styled('div')`
+const Column = styled("div")`
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 100px;
-`
+`;
 
-const Row = styled('div')`
+const Row = styled("div")`
   display: flex;
   align-items: center;
   padding: 10px;
-  border: 1px solid rgba(255,255,255,.3);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 5px;
   background: #efeeee;
-  box-shadow: -6px -6px 16px rgba(255,255,255,.7),
-              6px 6px 16px #d1cdc780
-`
+  box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.7), 6px 6px 16px #d1cdc780;
+`;
 
 const Title = styled("h1")`
   font-family: "Montserrat", sans-serif;
   font-weight: 300;
   margin-bottom: 50px;
 `;
 
-const Input = styled('input')`
-  border: 1px solid rgba(255,255,255,.3);
+const Input = styled("input")`
+  border: 1px solid rgba(255, 255, 255, 0.3);
   background: none;
   border-radius: 5px;
-  box-shadow: inset 0px 7px 15px -5px rgba(0,0,0,.2), inset 0px -7px 15px -5px rgba(255,255,255,1);
+  box-shadow: inset 0px 7px 15px -5px rgba(0, 0, 0, 0.2),
+    inset 0px -7px 15px -5px rgba(255, 255, 255, 1);
   font-size: 40px;
   width: 400px;
   height: 70px;
   padding: 10px;
   text-align: center;
   margin-right: 10px;
-  &:focus{
-    background: rgba(255,255,255,.2);
+  &:focus {
+    background: rgba(255, 255, 255, 0.2);
     outline: none;
   }
-`
+`;
 
-const Button = styled('button')`
+const Button = styled("button")`
   font-size: 35px;
   font-weight: 600;
   text-transform: uppercase;
   height: 70px;
   border: none;
-  background: linear-gradient(to bottom, #95C93D, #88ba33);
+  background: linear-gradient(to bottom, #95c93d, #88ba33);
   border-radius: 5px;
   padding: 12px;
   color: #fff;
   text-shadow: 0px 1px white, 0px -1px 1px #979e90;
-  &:focus{
+  &:focus {
     outline: none;
   }
-  &:hover{
+  &:hover {
     background: linear-gradient(to bottom, #a6dd4a, #99cd41);
   }
-`
+`;
 
 ReactDOM.render(<App />, document.getElementById("root"));