Skip to content

Commit ad6e9f0

Browse files
DaneEverittDaneEveritt
committed
Fix copy to clipboard when clicking server address
closes pterodactyl#4187
1 parent 72f5452 commit ad6e9f0

File tree

5 files changed

+61
-71
lines changed

5 files changed

+61
-71
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"chart.js": "^3.8.0",
1919
"classnames": "^2.3.1",
2020
"codemirror": "^5.57.0",
21+
"copy-to-clipboard": "^3.3.1",
2122
"date-fns": "^2.28.0",
2223
"debounce": "^1.2.0",
2324
"deepmerge-ts": "^4.2.1",
@@ -31,7 +32,6 @@
3132
"qrcode.react": "^1.0.1",
3233
"react": "^16.14.0",
3334
"react-chartjs-2": "^4.2.0",
34-
"react-copy-to-clipboard": "^5.0.2",
3535
"react-dom": "npm:@hot-loader/react-dom",
3636
"react-fast-compare": "^3.2.0",
3737
"react-hot-loader": "^4.12.21",

‎resources/scripts/components/elements/CopyOnClick.tsx‎

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
1-
import React, { useCallback, useEffect, useState } from 'react';
2-
import CopyToClipboard from 'react-copy-to-clipboard';
3-
import tw from 'twin.macro';
4-
import styled, { keyframes } from 'styled-components/macro';
1+
import React, { useEffect, useState } from 'react';
52
import Fade from '@/components/elements/Fade';
6-
import { SwitchTransition } from 'react-transition-group';
3+
import Portal from '@/components/elements/Portal';
4+
import copy from 'copy-to-clipboard';
5+
import classNames from 'classnames';
76

8-
const fade = keyframes`
9-
from { opacity: 0 }
10-
to { opacity: 1 }
11-
`;
12-
13-
const Toast = styled.div`
14-
${tw`fixed z-50 bottom-0 left-0 mb-4 w-full flex justify-end pr-4`};
15-
animation: ${fade} 250ms linear;
16-
17-
& > div {
18-
${tw`rounded px-4 py-2 text-white bg-neutral-900 border border-black opacity-75`};
19-
}
20-
`;
21-
22-
const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
7+
const CopyOnClick: React.FC<{ text: any; disabled?: boolean }> = ({ text, disabled, children }) => {
238
const [copied, setCopied] = useState(false);
249

2510
useEffect(() => {
@@ -34,28 +19,37 @@ const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
3419
};
3520
}, [copied]);
3621

37-
const onCopy = useCallback(() => {
38-
setCopied(true);
39-
}, []);
22+
if (!React.isValidElement(children)) {
23+
throw new Error('Component passed to <CopyOnClick/> must be a valid React element.');
24+
}
25+
26+
const child = disabled
27+
? React.Children.only(children)
28+
: React.cloneElement(React.Children.only(children), {
29+
className: classNames(children.props.className || '', 'cursor-pointer'),
30+
onClick: (e: React.MouseEvent<HTMLElement>) => {
31+
copy(text);
32+
setCopied(true);
33+
if (typeof children.props.onClick === 'function') {
34+
children.props.onClick(e);
35+
}
36+
},
37+
});
4038

4139
return (
4240
<>
43-
<SwitchTransition>
44-
<Fade timeout={250} key={copied ? 'visible' : 'invisible'}>
45-
{copied ? (
46-
<Toast>
47-
<div>
41+
{copied && (
42+
<Portal>
43+
<Fade in appear timeout={250} key={copied ? 'visible' : 'invisible'}>
44+
<div className={'fixed z-50 bottom-0 right-0 m-4'}>
45+
<div className={'rounded-md py-3 px-4 text-gray-200 bg-neutral-600/95 shadow'}>
4846
<p>Copied &quot;{text}&quot; to clipboard.</p>
4947
</div>
50-
</Toast>
51-
) : (
52-
<></>
53-
)}
54-
</Fade>
55-
</SwitchTransition>
56-
<CopyToClipboard onCopy={onCopy} text={text} options={{ debug: true }} css={tw`cursor-pointer`}>
57-
{children}
58-
</CopyToClipboard>
48+
</div>
49+
</Fade>
50+
</Portal>
51+
)}
52+
{child}
5953
</>
6054
);
6155
};

‎resources/scripts/components/server/console/ServerDetailsBlock.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
7272

7373
return (
7474
<div className={classNames('grid grid-cols-6 gap-2 md:gap-4', className)}>
75-
<StatBlock icon={faWifi} title={'Address'}>
75+
<StatBlock icon={faWifi} title={'Address'} copyOnClick={allocation}>
7676
{allocation}
7777
</StatBlock>
7878
<StatBlock

‎resources/scripts/components/server/console/StatBlock.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,47 @@ import classNames from 'classnames';
55
import Tooltip from '@/components/elements/tooltip/Tooltip';
66
import styles from './style.module.css';
77
import useFitText from 'use-fit-text';
8+
import CopyOnClick from '@/components/elements/CopyOnClick';
89

910
interface StatBlockProps {
1011
title: string;
12+
copyOnClick?: string;
1113
description?: string;
1214
color?: string | undefined;
1315
icon: IconDefinition;
1416
children: React.ReactNode;
1517
className?: string;
1618
}
1719

18-
export default ({ title, icon, color, description, className, children }: StatBlockProps) => {
20+
export default ({ title, copyOnClick, icon, color, description, className, children }: StatBlockProps) => {
1921
const { fontSize, ref } = useFitText({ minFontSize: 8, maxFontSize: 500 });
2022

2123
return (
2224
<Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
23-
<div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
24-
<div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
25-
<div className={classNames(styles.icon, color || 'bg-gray-700')}>
26-
<Icon
27-
icon={icon}
28-
className={classNames({
29-
'text-gray-100': !color || color === 'bg-gray-700',
30-
'text-gray-50': color && color !== 'bg-gray-700',
31-
})}
32-
/>
33-
</div>
34-
<div className={'flex flex-col justify-center overflow-hidden w-full'}>
35-
<p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
36-
<div
37-
ref={ref}
38-
className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
39-
style={{ fontSize }}
40-
>
41-
{children}
25+
<CopyOnClick text={copyOnClick} disabled={!copyOnClick}>
26+
<div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
27+
<div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
28+
<div className={classNames(styles.icon, color || 'bg-gray-700')}>
29+
<Icon
30+
icon={icon}
31+
className={classNames({
32+
'text-gray-100': !color || color === 'bg-gray-700',
33+
'text-gray-50': color && color !== 'bg-gray-700',
34+
})}
35+
/>
36+
</div>
37+
<div className={'flex flex-col justify-center overflow-hidden w-full'}>
38+
<p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
39+
<div
40+
ref={ref}
41+
className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
42+
style={{ fontSize }}
43+
>
44+
{children}
45+
</div>
4246
</div>
4347
</div>
44-
</div>
48+
</CopyOnClick>
4549
</Tooltip>
4650
);
4751
};

‎yarn.lock‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3136,7 +3136,7 @@ copy-descriptor@^0.1.0:
31363136
version "0.1.1"
31373137
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
31383138

3139-
copy-to-clipboard@^3:
3139+
copy-to-clipboard@^3.3.1:
31403140
version "3.3.1"
31413141
resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
31423142
integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
@@ -7308,7 +7308,7 @@ prompts@^2.0.1:
73087308
kleur "^3.0.3"
73097309
sisteransi "^1.0.5"
73107310

7311-
prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
7311+
prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
73127312
version "15.8.1"
73137313
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
73147314
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7468,14 +7468,6 @@ react-chartjs-2@^4.2.0:
74687468
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.2.0.tgz#bc5693a8b161f125301cf28ab0fe980d7dce54aa"
74697469
integrity sha512-9Vm9Sg9XAKiR579/FnBkesofjW9goaaFLfS7XlGTzUJlWFZGSE6A/pBI6+i/bP3pobKZoFcWJdFnjShytToqXw==
74707470

7471-
react-copy-to-clipboard@^5.0.2:
7472-
version "5.0.2"
7473-
resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#d82a437e081e68dfca3761fbd57dbf2abdda1316"
7474-
integrity sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==
7475-
dependencies:
7476-
copy-to-clipboard "^3"
7477-
prop-types "^15.5.8"
7478-
74797471
"react-dom@npm:@hot-loader/react-dom":
74807472
version "16.11.0"
74817473
resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-16.11.0.tgz#c0b483923b289db5431516f56ee2a69448ebf9bd"
@@ -8836,7 +8828,7 @@ to-regex@^3.0.1, to-regex@^3.0.2:
88368828
toggle-selection@^1.0.6:
88378829
version "1.0.6"
88388830
resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
8839-
integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
8831+
integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
88408832

88418833
toidentifier@1.0.0:
88428834
version "1.0.0"

0 commit comments

Comments
 (0)