Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

29
resources/scripts/components/elements/CopyOnClick.tsx
View file

@ -1,13 +1,15 @@
import React, { useEffect, useState } from 'react';
import Fade from '@/components/elements/Fade';
import Portal from '@/components/elements/Portal';
import copy from 'copy-to-clipboard';
import classNames from 'classnames';
import copy from 'copy-to-clipboard';
import type { MouseEvent, ReactNode } from 'react';
import { Children, cloneElement, isValidElement, useEffect, useState } from 'react';
import Portal from '@/components/elements/Portal';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
interface CopyOnClickProps {
text: string | number | null | undefined;
showInNotification?: boolean;
children: React.ReactNode;
children: ReactNode;
}
const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickProps) => {
@ -25,15 +27,16 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
};
}, [copied]);
if (!React.isValidElement(children)) {
if (!isValidElement(children)) {
throw new Error('Component passed to <CopyOnClick/> must be a valid React element.');
}
const child = !text
? React.Children.only(children)
: React.cloneElement(React.Children.only(children), {
? Children.only(children)
: cloneElement(Children.only(children), {
// @ts-expect-error I don't know
className: classNames(children.props.className || '', 'cursor-pointer'),
onClick: (e: React.MouseEvent<HTMLElement>) => {
onClick: (e: MouseEvent<HTMLElement>) => {
copy(String(text));
setCopied(true);
if (typeof children.props.onClick === 'function') {
@ -46,9 +49,9 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
<>
{copied && (
<Portal>
<Fade in appear timeout={250} key={copied ? 'visible' : 'invisible'}>
<div className={'fixed z-50 bottom-0 right-0 m-4'}>
<div className={'rounded-md py-3 px-4 text-gray-200 bg-neutral-600/95 shadow'}>
<FadeTransition show duration="duration-250" key={copied ? 'visible' : 'invisible'}>
<div className="fixed z-50 bottom-0 right-0 m-4">
<div className="rounded-md py-3 px-4 text-gray-200 bg-neutral-600/95 shadow">
<p>
{showInNotification
? `Copied "${String(text)}" to clipboard.`
@ -56,7 +59,7 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
</p>
</div>
</div>
</Fade>
</FadeTransition>
</Portal>
)}
{child}