#

luxiaotao1123

2024-10-22 640b68436ecd7876041cc6931cb916bbe368ccc3

 zy-acs-flow/src/map/JsonShow.jsx

@@ -1,5 +1,10 @@
import React, { useState, useRef, useEffect } from 'react';
import { Box, Typography, Paper, useTheme } from '@mui/material';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import jsonLang from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
import { xcode, atomOneDark, a11yLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';

// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/

const parseJson = (jsonStr) => {
    let json = '';
@@ -10,6 +15,59 @@
        json = 'Invalid JSON';
    }
    return json;
}

SyntaxHighlighter.registerLanguage('json', jsonLang);

const JsonShow = ({ data, height = 500 }) => {
    const theme = useTheme();
    const themeMode = theme.palette.mode;

    const [json, setJson] = useState(null);

    useEffect(() => {
        if (data) {
            setJson(parseJson(data));
        }
    }, [data]);

    return (
        <Paper
            elevation={3}
            sx={{
                padding: 2,
                maxHeight: height,
                overflow: 'auto',
                backgroundColor: theme.palette.background.paper,
                borderRadius: 2,
            }}
        >
            <pre style={{ margin: 0, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
                {json === 'Invalid JSON' ? (
                    <Typography color="error">Invalid JSON</Typography>
                ) : (

                    <SyntaxHighlighter
                        language="json"
                        style={themeMode === 'dark' ? atomOneDark : xcode}
                        customStyle={{
                            backgroundColor: 'transparent',
                            padding: 0,
                            fontSize: '0.875rem', // 14px
                            fontFamily: 'monospace',
                            whiteSpace: 'pre-wrap',
                            wordBreak: 'break-word',
                            // fontWeight: 'bold',
                        }}
                        showLineNumbers
                    >
                        {json}
                    </SyntaxHighlighter>
                    // renderFormattedJson(json)
                )}
            </pre>
        </Paper>
    );
}

const renderFormattedJson = (json) => {
@@ -43,33 +101,5 @@

};

const JsonShow = ({ data, height = 500 }) => {
    const theme = useTheme();
    const themeMode = theme.palette.mode;

    let json = parseJson(data);

    return (
        <Paper
            elevation={3}
            sx={{
                padding: 2,
                maxHeight: height,
                overflow: 'auto',
                backgroundColor: theme.palette.background.paper,
                borderRadius: 2,
            }}
        >
            <pre style={{ margin: 0, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
                {json === 'Invalid JSON' ? (
                    <Typography color="error">Invalid JSON</Typography>
                ) : (
                    renderFormattedJson(json)
                )}
            </pre>
        </Paper>
    );

}

export default JsonShow;