Files
actual/node_modules/@docusaurus/plugin-debug/lib/theme/DebugJsonView/index.js
Rich In SQL 28d4ee94dd Init
2022-10-16 20:28:33 +01:00

50 lines
1.5 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
// Avoids "react-json-view" displaying "root"
const RootName = null;
// Seems ReactJson does not work with SSR
// https://github.com/mac-s-g/react-json-view/issues/121
function BrowserOnlyReactJson(props) {
return (
<BrowserOnly>
{() => {
const {default: ReactJson} =
// eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
require('react-json-view');
return <ReactJson {...props} />;
}}
</BrowserOnly>
);
}
export default function DebugJsonView({src, collapseDepth}) {
return (
<BrowserOnlyReactJson
src={src}
style={{
marginTop: '10px',
padding: '10px',
borderRadius: '4px',
backgroundColor: '#292a2b',
}}
name={RootName}
theme="paraiso"
shouldCollapse={(field) =>
// By default, we collapse the json for performance reasons
// See https://github.com/mac-s-g/react-json-view/issues/235
// Non-root elements that are larger than 50 fields are collapsed
field.name !== RootName && Object.keys(field.src).length > 50
}
collapsed={collapseDepth}
groupArraysAfterLength={5}
enableClipboard={false}
displayDataTypes={false}
/>
);
}