bruno/packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js

73 lines
2.1 KiB
JavaScript
Raw Normal View History

import React, { useState, useRef, useEffect } from 'react';
import { IconRefresh } from '@tabler/icons';
2022-01-01 18:02:27 +01:00
import StopWatch from '../../StopWatch';
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/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" style={{position: 'relative'}}>
{isLoading && (
<div className="overlay">
<div style={{marginBottom: 15, fontSize: 26}}>
<div style={{display: 'inline-block', fontSize: 24, marginLeft: 5, marginRight: 5}}>
<StopWatch/>
</div>
</div>
<IconRefresh size={24} className="animate-spin"/>
<button
className="mt-4 uppercase bg-gray-200 active:bg-blueGray-600 text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
>
Cancel Request
</button>
</div>
)}
<div>
<textarea
id="operation"
style={{
width: `${width}px`,
height: '400px'
}}
ref={editor}
className="cm-editor"
>
</textarea>
</div>
</StyledWrapper>
);
};
export default QueryResult;