2021-12-04 12:30:03 +01:00
|
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
|
|
import { IconRefresh } from '@tabler/icons';
|
2022-01-01 18:02:27 +01:00
|
|
|
import StopWatch from '../../StopWatch';
|
2021-12-04 12:30:03 +01:00
|
|
|
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: '',
|
2021-12-05 16:45:20 +01:00
|
|
|
lineNumbers: true,
|
|
|
|
matchBrackets: true,
|
|
|
|
autoCloseBrackets: true,
|
|
|
|
mode: "application/json",
|
|
|
|
foldGutter: true,
|
|
|
|
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
|
|
|
|
lineWrapping: true
|
2021-12-04 12:30:03 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
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;
|