maintenance

src/components/pre-formatted-code/pre-formatted-code.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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;