1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| import React, { useState, useRef, useEffect } from 'react';
| import { Card, Space, Button } from 'antd';
| import { FormattedMessage, useIntl, useModel } from '@umijs/max';
| import { createStyles } from 'antd-style';
| import * as Utils from '../utils'
| import Http from '@/utils/http';
|
| const useStyles = createStyles(({ token, css }) => {
| let dark = token.colorBgBase === '#000';
| return {
| jsonBox: {
| height: '100%',
| border: dark ? '2px solid #747d8c' : '2px solid #535c68',
| borderRadius: '5px',
| padding: '5px',
| cursor: 'text'
| },
| jsonContent: {
| height: '100%',
| overflowY: 'auto',
| width: '100%',
| border: 'none',
| backgroundColor: 'transparent',
| resize: 'none',
| fontFamily: '"Courier New", monospace',
| fontWeight: 'bold',
| fontSize: '1em',
| lineHeight: '1.5',
| color: dark ? '#eee' : '#333',
| '&:focus': {
| outline: 'none'
| }
| }
| }
| })
|
| const ShowJSON = (props) => {
| const { styles } = useStyles();
| const { data } = props;
|
| const formattedJSON = JSON.stringify(data, null, props.jsonType ?? 2);
|
| return (
| <>
| <div className={styles.jsonBox} style={{ height: props.height }}>
| <textarea
| readOnly
| className={styles.jsonContent}
| value={formattedJSON}
| />
| </div>
| </>
| )
| }
|
| export default ShowJSON;
|
|
