reza added qr Modal

src/views/QR/index.js

@@ -69,6 +69,7 @@ class QR extends Component {
         },
       },
     };
+
     return (
       <>
         {window.innerWidth > 1000 ? (

src/views/QRScan/Modal/index.js

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+
+import "./index.scss";
+
+const maxMobileSize = 550;
+
+const fontSize = {
+  mobile: {
+    span: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 17,
+    a: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20,
+  },
+};
+export default class QRModal extends Component {
+  render() {
+    return (
+      <>
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-qr-modal d-flex flex-column justify-content-center align-items-center">
+            <span style={{ fontSize: fontSize.mobile.span }}>
+              اسکن کد QR موفقیت آمیز بود.
+            </span>
+            <Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}>
+              {this.props.tail}
+            </Link>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+}

src/views/QRScan/Modal/index.scss

@@ -0,0 +1,38 @@
+.mobile-qr-modal {
+  position: fixed;
+  left: 0px;
+  background-color: rgba(0, 0, 0, 0.856);
+  top: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 500;
+  animation-name: qrModal;
+  animation-duration: 0.4s;
+  span {
+    font-family: numeralLight;
+    color: white;
+  }
+  a {
+    text-decoration: none;
+    width: 50%;
+    margin: 25px auto;
+    background-color: #00cc69;
+    border: 2px solid white;
+    padding: 20px 0px;
+    text-align: center;
+    color: white;
+    font-family: numeralLight;
+    border-radius: 25px;
+  }
+}
+
+@keyframes qrModal {
+  0% {
+    left: -100vw;
+    top: 0px;
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+  }
+}

src/views/QRScan/Scanner/index.js

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import QrReader from "react-qr-reader";
 
+const facingMode = ["environment", "user"];
+
 export default class Scanner extends Component {
   constructor(props) {
     super(props);
@@ -29,7 +31,7 @@ export default class Scanner extends Component {
             onError={this.handleError}
             onScan={this.handleScan}
             style={{ width: "100%" }}
-            facingMode={this.props.parent.state.facingMode}
+            facingMode={facingMode[this.props.parent.state.facingMode]}
           />
         ) : null}
         {window.innerWidth > 1000 ? (

src/views/QRScan/index.js

@@ -5,7 +5,9 @@ import { Link } from "react-router-dom";
 import history from "./History/index";
 import Scanner from "./Scanner/index";
 import LastQr from "./LastQr/index";
+import Modal from "./Modal/index";
 import ReplayIcon from "@material-ui/icons/Replay";
+import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos";
 
 import { connect } from "react-redux";
 import { qr } from "~/Redux/actions";
@@ -26,13 +28,16 @@ const fontSize = {
 class QRScan extends Component {
   state = {
     value: null,
-    facingMode: "environment",
+    facingMode: 0,
     tail: null,
   };
 
   async componentDidUpdate() {
     if (this.state.value) {
-      let tail = this.state.value.slice(15, this.state.value.length);
+      let tail = this.state.value.slice(
+        this.state.value.lastIndexOf("/") + 1,
+        this.state.value.length
+      );
       this.props.info(tail);
       console.log(this.props.list, tail);
       this.setState({ value: null, tail: tail });
@@ -103,30 +108,22 @@ class QRScan extends Component {
               <div className="mobile-qr-scan__back d-flex">
                 <Link to="/">بازگشت</Link>
               </div>
-              <header className="mobile-qr-scan__header d-flex flex-column">
-                <h1>اسکن بارکد</h1>
-                <p>
-                  لطفا دوربین گوشی خود را روی کدی که در اختیار شما قرار گرفته
-                  قرار دهید تا اسکن دوربین انجام شود
-                </p>
-              </header>
-              <div className="mobile-qr-scan__select d-flex">
-                <select
-                  onChange={(e) =>
-                    this.setState({ facingMode: e.target.value })
-                  }
-                >
-                  <option value="environment">دوربین عقب</option>
-                  <option value="user">دوربین جلو</option>
-                </select>
-              </div>
+              <header className="mobile-qr-scan__header d-flex flex-column"></header>
 
               <section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">
-                {/* <div className="mobile-qr-scan__camera--shapeTop mobile-qr-scan__camera--shape d-flex"></div>
-                <div className="mobile-qr-scan__camera--shapeBottom mobile-qr-scan__camera--shape d-flex"></div>
-                <div className="mobile-qr-scan__camera--shapeLeft mobile-qr-scan__camera--shape d-flex"></div>
-                <div className="mobile-qr-scan__camera--shapeRight mobile-qr-scan__camera--shape d-flex"></div>
-                <div className="mobile-qr-scan__camera--shapeCenter d-flex"></div> */}
+                <FlipCameraIosIcon
+                  style={{
+                    fontSize: 35,
+                    position: "absolute",
+                    left: 10,
+                    top: 10,
+                    zIndex: 100,
+                    color: "white",
+                  }}
+                  onClick={() =>
+                    this.setState({ facingMode: this.state.facingMode ? 0 : 1 })
+                  }
+                />
                 {this.state.value !== null ? (
                   <div
                     style={{ zIndex: 1000 }}
@@ -139,14 +136,8 @@ class QRScan extends Component {
                 )}
               </section>
               {this.state.tail === null ? null : (
-                <Link to={"/qr"}>{this.state.tail}</Link>
+                <Modal tail={this.state.tail} />
               )}
-              <p className="mobile-qr-scan__text d-flex">
-                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-                استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
-                در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
-                نیاز و کاربردهای
-              </p>
               <section className="mobile-qr-scan__lasts d-flex flex-column">
                 <h2>آخرین مشاهدات</h2>
                 {data.map((item, i) => (