nezumi/onedrive-vercel-index
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/onedrive-vercel-index.git synced 2026-09-22 05:32:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

add copy to clipboard and custom toolbar

Browse Source
This commit is contained in:
spencerwooo
2021-06-25 18:47:57 +01:00
parent 8a8ca4fbea
commit 1cbb33644f
4 changed files with 143 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/FileListing.tsx
+18 -7
View File
@@ -1,5 +1,6 @@
import axios from 'axios'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import toast, { Toaster } from 'react-hot-toast'
import { ParsedUrlQuery } from 'querystring'
import { FunctionComponent, useState } from 'react'
@@ -142,6 +143,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
<div className="hidden md:block font-bold col-span-2">Last Modified</div>
<div className="hidden md:block font-bold">Size</div>
</div>
<Toaster />
{imagesInFolder.length !== 0 && (
<ReactViewer
@@ -151,11 +153,25 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
drag={false}
rotatable={false}
noClose={true}
scalable={false}
zoomSpeed={0.5}
downloadable={true}
downloadInNewWindow={true}
onMaskClick={() => {
setImageViewerVisibility(false)
}}
customToolbar={toolbars => {
return toolbars.concat([
{
key: 'copy',
render: <FontAwesomeIcon icon={['far', 'copy']} />,
onClick: i => {
navigator.clipboard.writeText(i.downloadUrl ? i.downloadUrl : '')
toast.success('Copied to clipboard.')
},
},
])
}}
/>
)}
@@ -187,13 +203,8 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
if (hasKey(extensions, fileExtension)) {
switch (extensions[fileExtension]) {
case preview.image:
return (
<div className="bg-white shadow rounded">
<div className="p-3 text-center">
<div>{downloadUrl}</div>
</div>
</div>
)
router.push(downloadUrl)
return <></>
case preview.text:
return <TextPreview file={resp} />
package-lock.json
Generated
+119
View File
@@ -17,7 +17,9 @@
"next": "11.0.0",
"prismjs": "^1.23.0",
"react": "17.0.2",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "17.0.2",
"react-hot-toast": "^2.0.0",
"react-markdown": "^6.0.2",
"react-pdf": "^5.3.0",
"react-player": "^2.9.0",
@@ -30,6 +32,7 @@
"devDependencies": {
"@types/prismjs": "^1.16.5",
"@types/react": "17.0.11",
"@types/react-copy-to-clipboard": "^5.0.0",
"@types/react-dom": "^17.0.8",
"@types/react-pdf": "^5.0.4",
"@types/react-syntax-highlighter": "^13.5.1",
@@ -505,6 +508,15 @@
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-copy-to-clipboard": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.0.tgz",
"integrity": "sha512-faUg6Kx3Dfv0MBIcs+xzIptlRtjEVSaNjqyC14YAp4UwSiTHghnKtBOt9ERRTZZJfoJgnw10tomVaqG86GzdAw==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-dom": {
"version": "17.0.8",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.8.tgz",
@@ -1613,6 +1625,14 @@
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
},
"node_modules/copy-to-clipboard": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
"integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
"dependencies": {
"toggle-selection": "^1.0.6"
}
},
"node_modules/core-js-pure": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.0.tgz",
@@ -5694,6 +5714,18 @@
"node": ">=0.10.0"
}
},
"node_modules/react-copy-to-clipboard": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz",
"integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==",
"dependencies": {
"copy-to-clipboard": "^3",
"prop-types": "^15.5.8"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0.0 || ^17.0.0"
}
},
"node_modules/react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -5712,6 +5744,35 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"node_modules/react-hot-toast": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.0.0.tgz",
"integrity": "sha512-J0J2rcSvKetlziVquwESgk85pV9JB0Dz3RJIZcAEv7CWU2y2z8BQqxmZHZUxjPKIBGPqXAocZch4Kj4oUdX4+w==",
"dependencies": {
"goober": "^2.0.35"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": ">=16",
"react-dom": ">=16"
}
},
"node_modules/react-hot-toast/node_modules/csstype": {
"version": "2.6.17",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
"integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==",
"peer": true
},
"node_modules/react-hot-toast/node_modules/goober": {
"version": "2.0.38",
"resolved": "https://registry.npmjs.org/goober/-/goober-2.0.38.tgz",
"integrity": "sha512-oGrP8xMB3k6EEcEAuKstd05r0JRFs8L9ouPCTKxupu85PdDJ443LTCXvxRVMeYN6pVhV6htVb7FaKTk5JlFzCQ==",
"peerDependencies": {
"csstype": "^2.6.2"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -7030,6 +7091,11 @@
"node": ">=8.0"
}
},
"node_modules/toggle-selection": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
},
"node_modules/toidentifier": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -8025,6 +8091,15 @@
"csstype": "^3.0.2"
}
},
"@types/react-copy-to-clipboard": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.0.tgz",
"integrity": "sha512-faUg6Kx3Dfv0MBIcs+xzIptlRtjEVSaNjqyC14YAp4UwSiTHghnKtBOt9ERRTZZJfoJgnw10tomVaqG86GzdAw==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/react-dom": {
"version": "17.0.8",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.8.tgz",
@@ -8903,6 +8978,14 @@
}
}
},
"copy-to-clipboard": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
"integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
"requires": {
"toggle-selection": "^1.0.6"
}
},
"core-js-pure": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.0.tgz",
@@ -11969,6 +12052,15 @@
"object-assign": "^4.1.1"
}
},
"react-copy-to-clipboard": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz",
"integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==",
"requires": {
"copy-to-clipboard": "^3",
"prop-types": "^15.5.8"
}
},
"react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -11984,6 +12076,28 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"react-hot-toast": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.0.0.tgz",
"integrity": "sha512-J0J2rcSvKetlziVquwESgk85pV9JB0Dz3RJIZcAEv7CWU2y2z8BQqxmZHZUxjPKIBGPqXAocZch4Kj4oUdX4+w==",
"requires": {
"goober": "^2.0.35"
},
"dependencies": {
"csstype": {
"version": "2.6.17",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
"integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==",
"peer": true
},
"goober": {
"version": "2.0.38",
"resolved": "https://registry.npmjs.org/goober/-/goober-2.0.38.tgz",
"integrity": "sha512-oGrP8xMB3k6EEcEAuKstd05r0JRFs8L9ouPCTKxupu85PdDJ443LTCXvxRVMeYN6pVhV6htVb7FaKTk5JlFzCQ==",
"requires": {}
}
}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -12997,6 +13111,11 @@
"is-number": "^7.0.0"
}
},
"toggle-selection": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
},
"toidentifier": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
package.json
+3
View File
@@ -19,7 +19,9 @@
"next": "11.0.0",
"prismjs": "^1.23.0",
"react": "17.0.2",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "17.0.2",
"react-hot-toast": "^2.0.0",
"react-markdown": "^6.0.2",
"react-pdf": "^5.3.0",
"react-player": "^2.9.0",
@@ -32,6 +34,7 @@
"devDependencies": {
"@types/prismjs": "^1.16.5",
"@types/react": "17.0.11",
"@types/react-copy-to-clipboard": "^5.0.0",
"@types/react-dom": "^17.0.8",
"@types/react-pdf": "^5.0.4",
"@types/react-syntax-highlighter": "^13.5.1",
pages/_app.tsx
+3 -1
View File
@@ -14,6 +14,7 @@ import {
faFileAlt,
faFile,
faFolder,
faCopy
} from '@fortawesome/free-regular-svg-icons'
import { faMusic, faArrowLeft, faArrowRight, faFileDownload } from '@fortawesome/free-solid-svg-icons'
import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
@@ -38,7 +39,8 @@ library.add(
faMusic,
faArrowLeft,
faArrowRight,
faFileDownload
faFileDownload,
faCopy
)
function MyApp({ Component, pageProps }: AppProps) {