thedevs-network/kutt-extension
1
0
Fork 0
mirror of https://github.com/thedevs-network/kutt-extension.git synced 2026-02-03 13:53:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add qrcode functionality on Popup menu

Browse Source
This commit is contained in:
abhijithvijayan
2020-02-11 12:00:53 +05:30
parent d4d5db467e
commit 11c9915045
5 changed files with 59 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -44,6 +44,7 @@
"axios": "^0.19.2",
"formik": "^2.1.3",
"lodash.isequal": "^4.5.0",
"qrcode.react": "^1.0.0",
"react": "^16.12.0",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^16.12.0",
@@ -56,6 +57,7 @@
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@types/lodash.isequal": "^4.5.5",
"@types/qrcode.react": "^1.0.0",
"@types/react": "^16.9.19",
"@types/react-copy-to-clipboard": "^4.3.0",
"@types/react-dom": "^16.9.5",
@@ -95,4 +97,4 @@
"wext-manifest": "^2.1.0",
"write-webpack-plugin": "^1.1.0"
}
}
}

16
src/Popup/PopupBody.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import QRCode from 'qrcode.react';
import Icon from '../components/Icon';
import { ProcessRequestProperties } from './Popup';
@@ -16,6 +17,7 @@ type PopupBodyProperties = {
const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message, error }, setRequestProcessed }) => {
const [copied, setCopied] = useState<boolean>(false);
const [QRView, setQRView] = useState<boolean>(false);
// reset copy message
useEffect(() => {
@@ -37,8 +39,9 @@ const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message,
<Icon name="arrowleft" />
</button>
)}
<p>{message}</p>
{/* // ToDo: show only on successful url shortening */}
{!error && (
<div>
<CopyToClipboard
@@ -55,6 +58,17 @@ const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message,
<Icon name="tick" />
)}
</CopyToClipboard>
<button
type="button"
onClick={(): void => {
return setQRView(!QRView);
}}
>
<Icon name="qrcode" />
</button>
<div>{QRView && <QRCode size={128} value={message} />}</div>
</div>
)}
</div>

2
src/components/Icon/Icon.tsx
View File

@@ -3,6 +3,7 @@ import React from 'react';
import Copy from './Copy';
import Tick from './Tick';
import Cross from './Cross';
import QRCode from './QRCode';
import Spinner from './Spinner';
import Refresh from './Refresh';
import Settings from './Settings';
@@ -12,6 +13,7 @@ const icons = {
arrowleft: ArrowLeft,
copy: Copy,
cross: Cross,
qrcode: QRCode,
refresh: Refresh,
settings: Settings,
spinner: Spinner,

17
src/components/Icon/QRCode.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
const QRCode: React.FC = () => {
return (
<svg
viewBox="-2 -2 24 24"
width={24}
height={24}
preserveAspectRatio="xMinYMin"
className="qr-code_svg__jam qr-code_svg__jam-qr-code"
>
<path d="M13 18h3a2 2 0 002-2v-3a1 1 0 012 0v3a4 4 0 01-4 4H4a4 4 0 01-4-4v-3a1 1 0 012 0v3a2 2 0 002 2h3a1 1 0 010 2h6a1 1 0 010-2zM2 7a1 1 0 11-2 0V4a4 4 0 014-4h3a1 1 0 110 2H4a2 2 0 00-2 2v3zm16 0V4a2 2 0 00-2-2h-3a1 1 0 010-2h3a4 4 0 014 4v3a1 1 0 01-2 0z" />
</svg>
);
};
export default React.memo(QRCode);

23
yarn.lock
View File

@@ -806,6 +806,13 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
"@types/qrcode.react@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/qrcode.react/-/qrcode.react-1.0.0.tgz#9eff4d4a93eb32fcd65e26ea046f2efc52764431"
integrity sha512-CyH8QizAyp/G2RTz+2W0qIp/qbJMNC6a8aossG+zN42Rmx3loQlgBCWFatjKJ3NeJaX99e22SJ75yU2EVHlu3g==
dependencies:
"@types/react" "*"
"@types/react-copy-to-clipboard@^4.3.0":
version "4.3.0"
resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.3.0.tgz#8e07becb4f11cfced4bd36038cb5bdf5c2658be5"
@@ -5526,7 +5533,7 @@ promise-inflight@^1.0.1:
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5602,6 +5609,20 @@ punycode@^2.1.0:
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
qr.js@0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
qrcode.react@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.0.tgz#7e8889db3b769e555e8eb463d4c6de221c36d5de"
integrity sha512-jBXleohRTwvGBe1ngV+62QvEZ/9IZqQivdwzo9pJM4LQMoCM2VnvNBnKdjvGnKyDZ/l0nCDgsPod19RzlPvm/Q==
dependencies:
loose-envify "^1.4.0"
prop-types "^15.6.0"
qr.js "0.0.0"
qs@~6.5.2:
version "6.5.2"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"