Fix copy to clipboard when clicking server address

closes #4187
2022-06-27 19:18:58 -04:00 · 2022-06-27 19:18:58 -04:00 · ad6e9f076b
commit ad6e9f076b
parent 72f545259f
5 changed files with 61 additions and 71 deletions
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
        "chart.js": "^3.8.0",
        "classnames": "^2.3.1",
        "codemirror": "^5.57.0",
+        "copy-to-clipboard": "^3.3.1",
        "date-fns": "^2.28.0",
        "debounce": "^1.2.0",
        "deepmerge-ts": "^4.2.1",
@ -31,7 +32,6 @@
        "qrcode.react": "^1.0.1",
        "react": "^16.14.0",
        "react-chartjs-2": "^4.2.0",
-        "react-copy-to-clipboard": "^5.0.2",
        "react-dom": "npm:@hot-loader/react-dom",
        "react-fast-compare": "^3.2.0",
        "react-hot-loader": "^4.12.21",
--- a/resources/scripts/components/elements/CopyOnClick.tsx
+++ b/resources/scripts/components/elements/CopyOnClick.tsx
@ -1,25 +1,10 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import tw from 'twin.macro';
-import styled, { keyframes } from 'styled-components/macro';
+import React, { useEffect, useState } from 'react';
 import Fade from '@/components/elements/Fade';
-import { SwitchTransition } from 'react-transition-group';
+import Portal from '@/components/elements/Portal';
+import copy from 'copy-to-clipboard';
+import classNames from 'classnames';

-const fade = keyframes`
-    from { opacity: 0 }
-    to { opacity: 1 }
-`;
-
-const Toast = styled.div`
-    ${tw`fixed z-50 bottom-0 left-0 mb-4 w-full flex justify-end pr-4`};
-    animation: ${fade} 250ms linear;
-
-    & > div {
-        ${tw`rounded px-4 py-2 text-white bg-neutral-900 border border-black opacity-75`};
-    }
-`;
-
-const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
+const CopyOnClick: React.FC<{ text: any; disabled?: boolean }> = ({ text, disabled, children }) => {
    const [copied, setCopied] = useState(false);

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

-    const onCopy = useCallback(() => {
-        setCopied(true);
-    }, []);
+    if (!React.isValidElement(children)) {
+        throw new Error('Component passed to <CopyOnClick/> must be a valid React element.');
+    }
+
+    const child = disabled
+        ? React.Children.only(children)
+        : React.cloneElement(React.Children.only(children), {
+              className: classNames(children.props.className || '', 'cursor-pointer'),
+              onClick: (e: React.MouseEvent<HTMLElement>) => {
+                  copy(text);
+                  setCopied(true);
+                  if (typeof children.props.onClick === 'function') {
+                      children.props.onClick(e);
+                  }
+              },
+          });

    return (
        <>
-            <SwitchTransition>
-                <Fade timeout={250} key={copied ? 'visible' : 'invisible'}>
-                    {copied ? (
-                        <Toast>
-                            <div>
+            {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'}>
                                <p>Copied &quot;{text}&quot; to clipboard.</p>
                            </div>
-                        </Toast>
-                    ) : (
-                        <></>
-                    )}
-                </Fade>
-            </SwitchTransition>
-            <CopyToClipboard onCopy={onCopy} text={text} options={{ debug: true }} css={tw`cursor-pointer`}>
-                {children}
-            </CopyToClipboard>
+                        </div>
+                    </Fade>
+                </Portal>
+            )}
+            {child}
        </>
    );
 };
--- a/resources/scripts/components/server/console/ServerDetailsBlock.tsx
+++ b/resources/scripts/components/server/console/ServerDetailsBlock.tsx
@ -72,7 +72,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {

    return (
        <div className={classNames('grid grid-cols-6 gap-2 md:gap-4', className)}>
-            <StatBlock icon={faWifi} title={'Address'}>
+            <StatBlock icon={faWifi} title={'Address'} copyOnClick={allocation}>
                {allocation}
            </StatBlock>
            <StatBlock
--- a/resources/scripts/components/server/console/StatBlock.tsx
+++ b/resources/scripts/components/server/console/StatBlock.tsx
@ -5,9 +5,11 @@ import classNames from 'classnames';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
 import styles from './style.module.css';
 import useFitText from 'use-fit-text';
+import CopyOnClick from '@/components/elements/CopyOnClick';

 interface StatBlockProps {
    title: string;
+    copyOnClick?: string;
    description?: string;
    color?: string | undefined;
    icon: IconDefinition;
@ -15,33 +17,35 @@ interface StatBlockProps {
    className?: string;
 }

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

    return (
        <Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
-            <div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
-                <div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
-                <div className={classNames(styles.icon, color || 'bg-gray-700')}>
-                    <Icon
-                        icon={icon}
-                        className={classNames({
-                            'text-gray-100': !color || color === 'bg-gray-700',
-                            'text-gray-50': color && color !== 'bg-gray-700',
-                        })}
-                    />
-                </div>
-                <div className={'flex flex-col justify-center overflow-hidden w-full'}>
-                    <p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
-                    <div
-                        ref={ref}
-                        className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
-                        style={{ fontSize }}
-                    >
-                        {children}
+            <CopyOnClick text={copyOnClick} disabled={!copyOnClick}>
+                <div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
+                    <div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
+                    <div className={classNames(styles.icon, color || 'bg-gray-700')}>
+                        <Icon
+                            icon={icon}
+                            className={classNames({
+                                'text-gray-100': !color || color === 'bg-gray-700',
+                                'text-gray-50': color && color !== 'bg-gray-700',
+                            })}
+                        />
+                    </div>
+                    <div className={'flex flex-col justify-center overflow-hidden w-full'}>
+                        <p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
+                        <div
+                            ref={ref}
+                            className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
+                            style={{ fontSize }}
+                        >
+                            {children}
+                        </div>
                    </div>
                </div>
-            </div>
+            </CopyOnClick>
        </Tooltip>
    );
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -3136,7 +3136,7 @@ copy-descriptor@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"

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

-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:
+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:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -7468,14 +7468,6 @@ react-chartjs-2@^4.2.0:
  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.2.0.tgz#bc5693a8b161f125301cf28ab0fe980d7dce54aa"
  integrity sha512-9Vm9Sg9XAKiR579/FnBkesofjW9goaaFLfS7XlGTzUJlWFZGSE6A/pBI6+i/bP3pobKZoFcWJdFnjShytToqXw==

-react-copy-to-clipboard@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#d82a437e081e68dfca3761fbd57dbf2abdda1316"
-  integrity sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==
-  dependencies:
-    copy-to-clipboard "^3"
-    prop-types "^15.5.8"
-
 "react-dom@npm:@hot-loader/react-dom":
  version "16.11.0"
  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:
 toggle-selection@^1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==

 toidentifier@1.0.0:
  version "1.0.0"