clipboard implemented with react hooks, fix #58
This commit is contained in:
parent
778666b7b4
commit
96e9dbb2b2
5 changed files with 56 additions and 8 deletions
|
@ -2,11 +2,13 @@ import { FunctionComponent } from 'react'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import toast, { Toaster } from 'react-hot-toast'
|
import toast, { Toaster } from 'react-hot-toast'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
|
import { useClipboard } from 'use-clipboard-copy'
|
||||||
|
|
||||||
import { getBaseUrl } from '../utils/tools'
|
import { getBaseUrl } from '../utils/tools'
|
||||||
|
|
||||||
const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
|
const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
|
||||||
const { asPath } = useRouter()
|
const { asPath } = useRouter()
|
||||||
|
const clipboard = useClipboard()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-wrap space-x-2 justify-center">
|
<div className="flex flex-wrap space-x-2 justify-center">
|
||||||
|
@ -23,7 +25,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
|
||||||
<button
|
<button
|
||||||
className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
|
className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigator.clipboard.writeText(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
|
clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
|
||||||
toast.success('Copied direct link to clipboard.')
|
toast.success('Copied direct link to clipboard.')
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
|
@ -2,6 +2,7 @@ import axios from 'axios'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import toast, { Toaster } from 'react-hot-toast'
|
import toast, { Toaster } from 'react-hot-toast'
|
||||||
import emojiRegex from 'emoji-regex'
|
import emojiRegex from 'emoji-regex'
|
||||||
|
import { useClipboard } from 'use-clipboard-copy'
|
||||||
|
|
||||||
import { ParsedUrlQuery } from 'querystring'
|
import { ParsedUrlQuery } from 'querystring'
|
||||||
import { FunctionComponent, useState } from 'react'
|
import { FunctionComponent, useState } from 'react'
|
||||||
|
@ -105,6 +106,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
||||||
const [activeImageIdx, setActiveImageIdx] = useState(0)
|
const [activeImageIdx, setActiveImageIdx] = useState(0)
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const clipboard = useClipboard()
|
||||||
|
|
||||||
const path = queryToPath(query)
|
const path = queryToPath(query)
|
||||||
|
|
||||||
|
@ -204,9 +206,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
||||||
key: 'copy',
|
key: 'copy',
|
||||||
render: <FontAwesomeIcon icon="copy" />,
|
render: <FontAwesomeIcon icon="copy" />,
|
||||||
onClick: i => {
|
onClick: i => {
|
||||||
navigator.clipboard.writeText(
|
clipboard.copy(i.alt ? `${getBaseUrl()}/api?path=${path + '/' + i.alt}&raw=true` : '')
|
||||||
i.alt ? `${getBaseUrl()}/api?path=${path + '/' + i.alt}&raw=true` : ''
|
|
||||||
)
|
|
||||||
toast.success('Copied image permanent link to clipboard.')
|
toast.success('Copied image permanent link to clipboard.')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -225,7 +225,6 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
||||||
setActiveImageIdx(imageIndexDict[c.id])
|
setActiveImageIdx(imageIndexDict[c.id])
|
||||||
setImageViewerVisibility(true)
|
setImageViewerVisibility(true)
|
||||||
} else {
|
} else {
|
||||||
console.log(path)
|
|
||||||
router.push(`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
|
router.push(`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { FunctionComponent } from 'react'
|
||||||
import ReactPlayer from 'react-player'
|
import ReactPlayer from 'react-player'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
|
import { useClipboard } from 'use-clipboard-copy'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import toast, { Toaster } from 'react-hot-toast'
|
import toast, { Toaster } from 'react-hot-toast'
|
||||||
|
|
||||||
|
@ -9,6 +10,7 @@ import { getBaseUrl } from '../../utils/tools'
|
||||||
|
|
||||||
export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
||||||
const { asPath } = useRouter()
|
const { asPath } = useRouter()
|
||||||
|
const clipboard = useClipboard()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -40,7 +42,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
||||||
<button
|
<button
|
||||||
className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
|
className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigator.clipboard.writeText(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
|
clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
|
||||||
toast.success('Copied direct link to clipboard.')
|
toast.success('Copied direct link to clipboard.')
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
46
package-lock.json
generated
46
package-lock.json
generated
|
@ -30,7 +30,8 @@
|
||||||
"rehype-raw": "^6.0.0",
|
"rehype-raw": "^6.0.0",
|
||||||
"remark-gfm": "^1.0.0",
|
"remark-gfm": "^1.0.0",
|
||||||
"remark-math": "^4.0.0",
|
"remark-math": "^4.0.0",
|
||||||
"swr": "^0.5.6"
|
"swr": "^0.5.6",
|
||||||
|
"use-clipboard-copy": "^0.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/prismjs": "^1.16.5",
|
"@types/prismjs": "^1.16.5",
|
||||||
|
@ -1636,6 +1637,25 @@
|
||||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
||||||
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
||||||
},
|
},
|
||||||
|
"node_modules/clipboard-copy": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/feross"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "patreon",
|
||||||
|
"url": "https://www.patreon.com/feross"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "consulting",
|
||||||
|
"url": "https://feross.org/support"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
"node_modules/color": {
|
"node_modules/color": {
|
||||||
"version": "3.2.1",
|
"version": "3.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
|
||||||
|
@ -7508,6 +7528,17 @@
|
||||||
"node": ">=0.4.x"
|
"node": ">=0.4.x"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/use-clipboard-copy": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/use-clipboard-copy/-/use-clipboard-copy-0.2.0.tgz",
|
||||||
|
"integrity": "sha512-f0PMMwZ2/Hh9/54L12capx4s6ASdd6edNJxg2OcqWVNM8BPvtOSmNFIN1Dg/q//fPp8MpUZceHfr7cnWOS0RxA==",
|
||||||
|
"dependencies": {
|
||||||
|
"clipboard-copy": "^3.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/use-subscription": {
|
"node_modules/use-subscription": {
|
||||||
"version": "1.5.1",
|
"version": "1.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
|
||||||
|
@ -8949,6 +8980,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
||||||
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
||||||
},
|
},
|
||||||
|
"clipboard-copy": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ=="
|
||||||
|
},
|
||||||
"color": {
|
"color": {
|
||||||
"version": "3.2.1",
|
"version": "3.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
|
||||||
|
@ -13364,6 +13400,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"use-clipboard-copy": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/use-clipboard-copy/-/use-clipboard-copy-0.2.0.tgz",
|
||||||
|
"integrity": "sha512-f0PMMwZ2/Hh9/54L12capx4s6ASdd6edNJxg2OcqWVNM8BPvtOSmNFIN1Dg/q//fPp8MpUZceHfr7cnWOS0RxA==",
|
||||||
|
"requires": {
|
||||||
|
"clipboard-copy": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"use-subscription": {
|
"use-subscription": {
|
||||||
"version": "1.5.1",
|
"version": "1.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
|
||||||
|
|
|
@ -32,7 +32,8 @@
|
||||||
"rehype-raw": "^6.0.0",
|
"rehype-raw": "^6.0.0",
|
||||||
"remark-gfm": "^1.0.0",
|
"remark-gfm": "^1.0.0",
|
||||||
"remark-math": "^4.0.0",
|
"remark-math": "^4.0.0",
|
||||||
"swr": "^0.5.6"
|
"swr": "^0.5.6",
|
||||||
|
"use-clipboard-copy": "^0.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/prismjs": "^1.16.5",
|
"@types/prismjs": "^1.16.5",
|
||||||
|
|
Loading…
Reference in a new issue