gitscope
/
← marzneshin / app/dashboard/src/components/json-editor/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/components/json-editor/index.tsx · v0.1.0
Source
1 bf7c131 Mardin 2y ago import { Box, useColorMode } from '@chakra-ui/react';
2 bf7c131 Mardin 2y ago import JSONEditor, { JSONEditorMode, JSONEditorOptions } from 'jsoneditor';
3 bf7c131 Mardin 2y ago import 'jsoneditor/dist/jsoneditor.css';
4 bf7c131 Mardin 2y ago import { forwardRef, useEffect, useRef } from 'react';
5 bf7c131 Mardin 2y ago import './styles.css';
6 bf7c131 Mardin 2y ago import './themes.js';
7 a47eb4c Dawsh 2y ago
8 a47eb4c Dawsh 2y ago export type JSONEditorProps = {
9 a47eb4c Dawsh 2y ago onChange: (value: string) => void;
10 a47eb4c Dawsh 2y ago json: any;
11 a47eb4c Dawsh 2y ago mode?: JSONEditorMode;
12 a47eb4c Dawsh 2y ago };
13 a47eb4c Dawsh 2y ago export const JsonEditor = forwardRef<HTMLDivElement, JSONEditorProps>(
14 bf7c131 Mardin 2y ago ({ json, onChange, mode = 'code' }, ref) => {
15 a47eb4c Dawsh 2y ago const { colorMode } = useColorMode();
16 a47eb4c Dawsh 2y ago const options: JSONEditorOptions = {
17 a47eb4c Dawsh 2y ago mode,
18 a47eb4c Dawsh 2y ago onChangeText: onChange,
19 a47eb4c Dawsh 2y ago statusBar: false,
20 a47eb4c Dawsh 2y ago mainMenuBar: false,
21 bf7c131 Mardin 2y ago theme: colorMode === 'dark' ? 'ace/theme/nord_dark' : 'ace/theme/dawn',
22 a47eb4c Dawsh 2y ago };
23 a47eb4c Dawsh 2y ago
24 a47eb4c Dawsh 2y ago const jsonEditorContainer = useRef<HTMLDivElement>(null);
25 a47eb4c Dawsh 2y ago const jsonEditorRef = useRef<JSONEditor | null>(null);
26 a47eb4c Dawsh 2y ago
27 a47eb4c Dawsh 2y ago useEffect(() => {
28 a47eb4c Dawsh 2y ago jsonEditorRef.current = new JSONEditor(
29 a47eb4c Dawsh 2y ago jsonEditorContainer.current!,
30 a47eb4c Dawsh 2y ago options
31 a47eb4c Dawsh 2y ago );
32 a47eb4c Dawsh 2y ago
33 a47eb4c Dawsh 2y ago return () => {
34 a47eb4c Dawsh 2y ago if (jsonEditorRef.current) jsonEditorRef.current.destroy();
35 a47eb4c Dawsh 2y ago };
36 a47eb4c Dawsh 2y ago }, []);
37 a47eb4c Dawsh 2y ago
38 a47eb4c Dawsh 2y ago useEffect(() => {
39 a47eb4c Dawsh 2y ago if (jsonEditorRef.current) jsonEditorRef.current.update(json);
40 a47eb4c Dawsh 2y ago }, [json]);
41 a47eb4c Dawsh 2y ago
42 a47eb4c Dawsh 2y ago return (
43 a47eb4c Dawsh 2y ago <Box
44 a47eb4c Dawsh 2y ago ref={ref}
45 a47eb4c Dawsh 2y ago border="1px solid"
46 a47eb4c Dawsh 2y ago borderColor="gray.300"
47 a47eb4c Dawsh 2y ago _dark={{
48 bf7c131 Mardin 2y ago borderColor: 'gray.500',
49 a47eb4c Dawsh 2y ago }}
50 a47eb4c Dawsh 2y ago borderRadius={5}
51 a47eb4c Dawsh 2y ago h="full"
52 a47eb4c Dawsh 2y ago >
53 a47eb4c Dawsh 2y ago <Box height="full" ref={jsonEditorContainer} />
54 a47eb4c Dawsh 2y ago </Box>
55 a47eb4c Dawsh 2y ago );
56 a47eb4c Dawsh 2y ago }
57 a47eb4c Dawsh 2y ago );