@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
54 lines • 3.12 kB
JavaScript
import { removeFpsSpService } from '@mikezimm/fps-core-v7/lib/components/molecules/source-props/createSources/cloneSourceProps';
import * as React from 'react';
const MicroLinkCDNJSDeliver = `https://cdn.jsdelivr.net/npm/@microlink/react-json-view@1.21.0/dist/main.min.js`;
/**
* Builds ReactJson object with FPS Defaults
*/
export class FPSReactJSON2Class extends React.Component {
constructor() {
super(...arguments);
this.scriptLoaded = false;
}
componentDidMount() {
// Dynamically load the library
if (!this.scriptLoaded) {
const script = document.createElement('script');
script.src = MicroLinkCDNJSDeliver;
script.onload = () => {
this.scriptLoaded = true;
this.forceUpdate(); // Re-render once the script is loaded
};
document.body.appendChild(script);
}
}
componentWillUnmount() {
// Cleanup if necessary
const scripts = document.querySelectorAll(`script[src="${MicroLinkCDNJSDeliver}"]`);
scripts.forEach((script) => script.remove());
}
render() {
const { name, maxStrLength, arrayGroupSize, quotesOnKeys, } = this.props;
// Automatically remove service any time it's found at this point.
let jsonObject = typeof this.props.jsonObject === 'object' ? this.props.jsonObject : { empty: 'jsonObject is empty or does not exist :)' };
jsonObject = removeFpsSpService(jsonObject);
const collapsed = this.props.collapsed || false;
const displayDataTypes = this.props.displayDataTypes !== false; // Default to true
const displayObjectSize = this.props.displayObjectSize !== false; // Default to true
const enableClipboard = this.props.enableClipboard !== false; // Default to true
const style = this.props.style || { padding: '20px 0px' };
const themeJSON = this.props.theme || 'rjv-default';
const indentWidth = this.props.indentWidth || 2;
if (!this.scriptLoaded) {
return React.createElement("div", null, "Loading JSON Viewer...");
}
// @ts-ignore - ReactJsonView will be dynamically loaded
const ReactJsonView = window['ReactJsonView'];
if (!ReactJsonView) {
return React.createElement("div", null, "JSON Viewer is not available.");
}
// Render the JSON viewer component
return (React.createElement(ReactJsonView, { src: jsonObject || null, name: name, collapsed: collapsed || false, displayDataTypes: displayDataTypes !== false, displayObjectSize: displayObjectSize !== false, enableClipboard: enableClipboard !== false, style: style || { padding: '20px 0px' }, theme: themeJSON, indentWidth: indentWidth || 2, collapseStringsAfterLength: maxStrLength, groupArraysAfterLength: arrayGroupSize, quotesOnKeys: quotesOnKeys, onAdd: this.props.onAdd, onDelete: this.props.onDelete, onEdit: this.props.onEdit }));
}
}
export default FPSReactJSON2Class;
//# sourceMappingURL=ReactJSON2Class.js.map