59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
/**
|
|
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
|
|
*/
|
|
import React, {Fragment, useState} from 'react';
|
|
import {faCopy, faCheck} from '@fortawesome/free-solid-svg-icons';
|
|
|
|
import IconButton from 'components/buttons/icon-button';
|
|
|
|
import {CodeContainer} from './styles';
|
|
|
|
interface IPreFormattedCode {
|
|
data: Record<string, any> | Array<any>; // eslint-disable-line
|
|
prefixCharacter?: string;
|
|
color?: string;
|
|
showCopyIcon?: boolean;
|
|
}
|
|
|
|
const iconChangeTimeout = 2000;
|
|
const PreFormattedCode = ({data, prefixCharacter, color, showCopyIcon = true}: IPreFormattedCode): React.JSX.Element => {
|
|
const [copied, setCopied] = useState(false);
|
|
const json = JSON.stringify(data, null, 2);
|
|
const lines = json.split('\n');
|
|
const text = lines.map(line => line.replace(/^< /, '')).join('\n');
|
|
const copyJsonToClipboard = (text: string): void => {
|
|
navigator.clipboard.writeText(text);
|
|
setCopied(true);
|
|
|
|
setTimeout(() => setCopied(false), iconChangeTimeout);
|
|
};
|
|
|
|
const handleCopy = event => {
|
|
const originalString = event.target.textContent;
|
|
const modifiedString = originalString.replace(/[<>]/g, '');
|
|
|
|
event.clipboardData.setData('text/plain', modifiedString);
|
|
event.preventDefault();
|
|
};
|
|
|
|
const handleCopyIconClick = () => copyJsonToClipboard(text);
|
|
|
|
return (
|
|
<CodeContainer color={color}>
|
|
<pre>
|
|
<code onCopy={handleCopy}>
|
|
{lines.map((line, index) => (
|
|
<Fragment key={index}>
|
|
{prefixCharacter} {line} <br />
|
|
{index === lines.length - 1 && prefixCharacter}
|
|
</Fragment>
|
|
))}
|
|
</code>
|
|
</pre>
|
|
{showCopyIcon && <IconButton onClick={handleCopyIconClick} tooltipText="Copy" icon={copied ? faCheck : faCopy} />}
|
|
</CodeContainer>
|
|
);
|
|
};
|
|
|
|
export default PreFormattedCode;
|