Compare commits
2 Commits
cfaafc1ee0
...
c1f72a1b60
Author | SHA1 | Date | |
---|---|---|---|
Sambo Chea | c1f72a1b60 | ||
Sambo Chea | 4544c365bb |
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@cubetiq/muui",
|
||||
"version": "0.0.1-alpha.4",
|
||||
"version": "0.0.1-alpha.6",
|
||||
"author": {
|
||||
"name": "Sambo Chea",
|
||||
"email": "sombochea@cubetiqs.com"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { useState } from "react";
|
||||
import "./App.css";
|
||||
import { Button } from "./lib";
|
||||
import Button from "./lib/button";
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState<number>(0);
|
||||
|
|
|
@ -1,5 +0,0 @@
|
|||
import Button from "./button";
|
||||
import Box from "./box";
|
||||
import Skeleton from "./skeleton";
|
||||
|
||||
export { Skeleton, Box, Button };
|
|
@ -1,86 +0,0 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { QrReader } from "react-qr-reader";
|
||||
import { useSnackbar, useTimeout } from "../../hooks";
|
||||
import Button from "../button";
|
||||
import Snackbar from "../snackbar";
|
||||
|
||||
export const Scanner = (props: any) => {
|
||||
const [data, setData] = useState("No data");
|
||||
const { handleClose, open, setOpen, message, setMessage } = useSnackbar();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const timeout = useTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 1000);
|
||||
|
||||
useEffect(() => {
|
||||
timeout;
|
||||
}, []);
|
||||
|
||||
const _onChangeFacingMode = () => {
|
||||
let mode = getFacingMode() === "environment" ? "user" : "environment";
|
||||
localStorage.setItem("facingMode", mode);
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
const getFacingMode = () => {
|
||||
return localStorage.getItem("facingMode") || "environment";
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Snackbar message={message} open={open} onClose={handleClose} />
|
||||
<Button onClick={() => _onChangeFacingMode()}>
|
||||
{getFacingMode() !== "environment" ? "Back Camera" : "Front Camera"}
|
||||
</Button>
|
||||
<QrReader
|
||||
ViewFinder={(props: any) => {
|
||||
return (
|
||||
<>
|
||||
{loading ? (
|
||||
<>Loading...</>
|
||||
) : (
|
||||
<video id="qr-video" width={"250px"} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
onResult={(result: any, error: any) => {
|
||||
if (!!result) {
|
||||
setData(result?.text);
|
||||
}
|
||||
|
||||
if (!!error) {
|
||||
let _error = error?.toString() || "";
|
||||
let message = "Something error!";
|
||||
if (
|
||||
_error.includes("DOMException") ||
|
||||
_error.includes("NotAllowedError")
|
||||
) {
|
||||
message = "Camera access denied!";
|
||||
} else if (_error.includes("e2")) {
|
||||
message = "QR code not found!";
|
||||
}
|
||||
|
||||
setMessage(message);
|
||||
setOpen(true);
|
||||
console.info("QR Code Error", error, _error);
|
||||
}
|
||||
}}
|
||||
constraints={{
|
||||
facingMode: getFacingMode(),
|
||||
}}
|
||||
scanDelay={1000}
|
||||
// videoId={"video"}
|
||||
// videoContainerStyle={{
|
||||
// width: "100%",
|
||||
// height: "100%",
|
||||
// }}
|
||||
// videoStyle={{
|
||||
// width: "100%",
|
||||
// height: "100%",
|
||||
// }}
|
||||
/>
|
||||
<p>{data}</p>
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -1 +1,3 @@
|
|||
export * from "./components";
|
||||
export { default as Button } from "./button";
|
||||
export { default as Box } from "./box";
|
||||
export { default as Skeleton } from "./skeleton";
|
||||
|
|
|
@ -16,6 +16,6 @@
|
|||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["example", "src/vite-env.d.ts", "src/App.tsx", "src/main.tsx"],
|
||||
"include": ["./src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
|
@ -19,6 +19,7 @@ export default defineConfig({
|
|||
// Provide global variables to use in the UMD build for externalized deps
|
||||
globals: {
|
||||
react: "React",
|
||||
"react-dom": "ReactDOM",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue
Block a user