bruno/packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js
2022-01-28 23:03:10 +05:30

52 lines
1.3 KiB
JavaScript

import React, { useState, useRef, useEffect } from 'react';
import * as CodeMirror from 'codemirror';
import StyledWrapper from './StyledWrapper';
const QueryResult = ({data, isLoading, width}) => {
const [cmEditor, setCmEditor] = useState(null);
const editor = useRef();
useEffect(() => {
if (editor.current && !cmEditor) {
const _cmEditor = CodeMirror.fromTextArea(editor.current, {
value: '',
lineNumbers: true,
matchBrackets: true,
autoCloseBrackets: true,
mode: "application/ld+json",
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
lineWrapping: true
});
setCmEditor(_cmEditor);
}
if(editor.current && cmEditor && data && !isLoading) {
cmEditor.setValue(JSON.stringify(data, null, 2));
}
return () => {
if(cmEditor) {
cmEditor.toTextArea();
setCmEditor(null);
}
}
}, [editor.current, cmEditor, data]);
return (
<StyledWrapper className="mt-4 px-3 w-full" style={{maxWidth: width}}>
<div className="h-full">
<textarea
id="query-result"
ref={editor}
className="cm-editor"
>
</textarea>
</div>
</StyledWrapper>
);
};
export default QueryResult;