Network tab changes
Allows address feild to be copied to the clipboard when clicked If alias is used changes it to hostname instead of ip address ( might just make it say address as that would cover both? ) Fixed overflow for allocations with a long alias
This commit is contained in:
parent
ff64220741
commit
394cd815d2
4 changed files with 98 additions and 4 deletions
63
resources/scripts/components/elements/CopyOnClick.tsx
Normal file
63
resources/scripts/components/elements/CopyOnClick.tsx
Normal file
|
@ -0,0 +1,63 @@
|
|||
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 Fade from '@/components/elements/Fade';
|
||||
import { SwitchTransition } from 'react-transition-group';
|
||||
|
||||
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-800 border border-neutral-900`};
|
||||
}
|
||||
`;
|
||||
|
||||
const CopyOnClick: React.FC<{ text: string }> = ({ text, children }) => {
|
||||
const [ copied, setCopied ] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!copied) return;
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 2500);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}, [ copied ]);
|
||||
|
||||
const onCopy = useCallback(() => {
|
||||
setCopied(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SwitchTransition>
|
||||
<Fade timeout={250} key={copied ? 'visible' : 'invisible'}>
|
||||
{copied ?
|
||||
<Toast>
|
||||
<div>
|
||||
<p>Copied "{text}" to clipboard.</p>
|
||||
</div>
|
||||
</Toast>
|
||||
:
|
||||
<></>
|
||||
}
|
||||
</Fade>
|
||||
</SwitchTransition>
|
||||
<CopyToClipboard onCopy={onCopy} text={text} options={{ debug: true }}>
|
||||
{children}
|
||||
</CopyToClipboard>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CopyOnClick;
|
Reference in a new issue