eslint

Author: ccwukong

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["airbnb"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {}
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

package.json

@@ -2,16 +2,22 @@
   "name": "react-cam",
   "version": "0.1.4",
   "dependencies": {
-    "babel-cli": "^6.26.0"
+    "babel-cli": "^6.26.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
   },
   "devDependencies": {
     "enzyme": "3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.1",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.2",
     "jest": "20.0.4",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4",
-    "prop-types": "^15.6.2"
+    "prettier": "^1.18.2",
+    "react-scripts": "1.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/index.js

@@ -1,17 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Camera } from './lib';
+import React from "react";
+import ReactDOM from "react-dom";
+import { Camera } from "./lib";
 
 const App = () => (
   <div style={{ width: 640, margin: "15px auto" }}>
     <h1>Hello React</h1>
     <Camera
       showFocus={true}
       front={false}
-      capture={()=>{}}
+      capture={() => {}}
       width={1920}
       height={1440}
-      btnColor="yellow" />
+      btnColor="yellow"
+    />
   </div>
 );
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App />, document.getElementById("root"));

src/lib/reactCam.js

@@ -19,7 +19,7 @@ class Camera extends Component {
     this.state = {
       camWidth: null,
       camHeight: null,
-    }
+    };
   }
   success = stream => {
     const video = this.refs.cam;
@@ -30,18 +30,18 @@ class Camera extends Component {
   error = err => {
     console.log(err);
   };
-  
+
   capture = () => {
     const canvas = this.refs.canvas;
     const video = this.refs.cam;
-    const context = canvas.getContext("2d");
+    const context = canvas.getContext('2d');
     context.drawImage(video, 0, 0);
-    this.props.capture(canvas.toDataURL("image/jpeg"));
-  }
+    this.props.capture(canvas.toDataURL('image/jpeg'));
+  };
 
-  componentDidMount(){
+  componentDidMount() {
     const video = this.refs.cam;
-    video.addEventListener("playing", () => {
+    video.addEventListener('playing', () => {
       this.setState({
         camWidth: video.videoWidth,
         camHeight: video.videoHeight,
@@ -50,24 +50,46 @@ class Camera extends Component {
   }
 
   render() {
+    const defaultColor = '#2acef5';
     return (
       <div>
-        <video
-            id="video"
-            autoPlay
-            playsInline
-            ref="cam"
-        />
-        { this.props.showFocus ? 
-         <div className="camera-focus" style={{ borderColor: this.props.btnColor?this.props.btnColor:'#2acef5' }} />: null
-        }
+        <video id="video" autoPlay playsInline ref="cam" />
+        {this.props.showFocus ? (
+          <div
+            className="camera-focus"
+            style={{
+              borderColor: this.props.btnColor
+                ? this.props.btnColor
+                : defaultColor,
+            }}
+          />
+        ) : null}
         <div
-            className="camera-btn-outer flexbox"
-            style={{ justifyContent: 'center', alignItems: 'center', bottom: 10, background: this.props.btnColor?this.props.btnColor:'#2acef5' }}
-          >
-          <input type="button" onClick={this.capture} id="camera-btn" style={{ background: this.props.btnColor?this.props.btnColor:'#2acef5' }} />
+          className="camera-btn-outer flexbox"
+          style={{
+            background: this.props.btnColor
+              ? this.props.btnColor
+              : defaultColor,
+          }}
+        >
+          <input
+            type="button"
+            onClick={this.capture}
+            id="camera-btn"
+            style={{
+              background: this.props.btnColor
+                ? this.props.btnColor
+                : defaultColor,
+            }}
+          />
         </div>
-        <canvas id="canvas" width={this.state.camWidth} height={this.state.camHeight} ref="canvas" style={{ display: 'none' }}></canvas>
+        <canvas
+          id="canvas"
+          width={this.state.camWidth}
+          height={this.state.camHeight}
+          ref="canvas"
+          style={{ display: 'none' }}
+        />
       </div>
     );
   }
@@ -80,6 +102,6 @@ Camera.propTypes = {
   capture: PropTypes.func.isRequired,
   showFocus: PropTypes.bool,
   btnColor: PropTypes.string,
-}
+};
 
-export default Camera;
+export default Camera;

src/lib/style.css

@@ -1,7 +1,7 @@
-.flexbox{
+.flexbox {
   display: flex;
 }
-.camera-focus{
+.camera-focus {
   width: 80%;
   height: 56%;
   border: 1px solid #2acef5;
@@ -10,9 +10,9 @@
   margin-left: 50%;
   left: -40%;
   z-index: 99;
-  box-shadow: 0px 0px 1px 1000px rgba(0,0,0,0.5)
+  box-shadow: 0px 0px 1px 1000px rgba(0, 0, 0, 0.5);
 }
-#new-image{
+#new-image {
   position: fixed;
   bottom: 12px;
   left: 20px;
@@ -23,7 +23,7 @@
   background-position: center;
   background-repeat: no-repeat;
 }
-.camera-btn-outer{
+.camera-btn-outer {
   width: 60px;
   height: 60px;
   position: fixed;
@@ -33,19 +33,22 @@
   bottom: 10;
   background: #2acef5;
   z-index: 99;
+  justify-content: center;
+  align-items: center;
+  bottom: 10px;
 }
-#camera-btn{
+#camera-btn {
   width: 52px;
   height: 52px;
   border: 2px solid #fff;
   border-radius: 26px !important;
   background: #2acef5;
 }
-#video{
+#video {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: auto;
   background: #000;
-}
+}