mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-21 02:35:23 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Move content into to frontend directory

Browse source 
Doing this BEFORE the merge prevents a lot of merge conflicts.

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-11-11 11:16:18 +01:00
parent 4e18ce38f3
commit 762a0a850e
No known key found for this signature in database
GPG key ID: B97799103358209B
1051 changed files with 0 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/components/common/copyable/hooks/use-copy-overlay.tsx
View file

@ -1,88 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { ReactElement, RefObject } from 'react'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Overlay, Tooltip } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { v4 as uuid } from 'uuid'
import { ShowIf } from '../../show-if/show-if'
import { Logger } from '../../../../utils/logger'
import { isClientSideRendering } from '../../../../utils/is-client-side-rendering'
import { useTimeoutFn } from 'react-use'
const log = new Logger('useCopyOverlay')
enum SHOW_STATE {
SUCCESS,
ERROR,
HIDDEN
}
/**
* Provides a function that writes the given text into the browser clipboard and an {@link Overlay overlay} that is shown when the copy action was successful.
*
* @param clickComponent The component to which the overlay should be attached
* @param content The content that should be copied
* @return the copy function and the overlay
*/
export const useCopyOverlay = (
clickComponent: RefObject<HTMLElement>,
content: string
): [copyToCliphoard: () => void, overlayElement: ReactElement] => {
useTranslation()
const [showState, setShowState] = useState<SHOW_STATE>(SHOW_STATE.HIDDEN)
const [tooltipId] = useState<string>(() => uuid())
const [, , reset] = useTimeoutFn(() => setShowState(SHOW_STATE.HIDDEN), 2000)
useEffect(() => {
if (showState !== SHOW_STATE.HIDDEN) {
reset()
}
}, [reset, showState])
const copyToClipboard = useCallback(() => {
if (!isClientSideRendering()) {
setShowState(SHOW_STATE.ERROR)
log.error('Clipboard not available in server side rendering')
return
}
if (typeof navigator.clipboard === 'undefined') {
setShowState(SHOW_STATE.ERROR)
return
}
navigator.clipboard
.writeText(content)
.then(() => {
setShowState(SHOW_STATE.SUCCESS)
})
.catch((error: Error) => {
setShowState(SHOW_STATE.ERROR)
log.error('Copy failed', error)
})
}, [content])
const overlayElement = useMemo(
() => (
<Overlay target={clickComponent} show={showState !== SHOW_STATE.HIDDEN} placement='top'>
{(props) => (
<Tooltip id={`copied_${tooltipId}`} {...props}>
<ShowIf condition={showState === SHOW_STATE.ERROR}>
<Trans i18nKey={'copyOverlay.error'} />
</ShowIf>
<ShowIf condition={showState === SHOW_STATE.SUCCESS}>
<Trans i18nKey={'copyOverlay.success'} />
</ShowIf>
</Tooltip>
)}
</Overlay>
),
[clickComponent, showState, tooltipId]
)
return [copyToClipboard, overlayElement]
}