2021-04-19 16:49:57 +00:00
|
|
|
import React from 'react';
|
|
|
|
|
import CodeMirror from '@uiw/react-codemirror';
|
|
|
|
|
import 'codemirror/theme/duotone-light.css';
|
2021-06-03 06:59:27 +00:00
|
|
|
import { changeOption } from './utils';
|
2021-04-19 16:49:57 +00:00
|
|
|
|
|
|
|
|
class Redis extends React.Component {
|
2021-04-30 06:31:32 +00:00
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
2021-04-19 16:49:57 +00:00
|
|
|
|
2021-04-30 06:31:32 +00:00
|
|
|
this.state = {
|
2021-04-30 08:10:57 +00:00
|
|
|
options: this.props.options
|
2021-04-30 06:31:32 +00:00
|
|
|
};
|
|
|
|
|
}
|
2021-04-19 16:49:57 +00:00
|
|
|
|
2021-04-30 06:31:32 +00:00
|
|
|
componentDidMount() {
|
|
|
|
|
this.setState({
|
2021-04-30 08:10:57 +00:00
|
|
|
options: this.props.options
|
2021-04-30 06:31:32 +00:00
|
|
|
});
|
|
|
|
|
}
|
2021-04-19 16:49:57 +00:00
|
|
|
|
2021-04-30 06:31:32 +00:00
|
|
|
render() {
|
|
|
|
|
const { options } = this.state;
|
2021-04-19 16:49:57 +00:00
|
|
|
|
2021-04-30 06:31:32 +00:00
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
{options && (
|
|
|
|
|
<div>
|
2021-04-30 08:10:57 +00:00
|
|
|
<div className="mb-3 mt-2">
|
2021-04-30 06:31:32 +00:00
|
|
|
<CodeMirror
|
2021-05-02 06:17:22 +00:00
|
|
|
height="auto"
|
2021-04-30 06:31:32 +00:00
|
|
|
fontSize="2"
|
|
|
|
|
value={options.query}
|
2021-06-03 06:59:27 +00:00
|
|
|
onChange={(instance) => changeOption(this, 'query', instance.getValue())}
|
2021-04-30 06:31:32 +00:00
|
|
|
placeholder="PING"
|
|
|
|
|
options={{
|
|
|
|
|
theme: 'duotone-light',
|
|
|
|
|
mode: 'sql',
|
|
|
|
|
lineWrapping: true,
|
2021-04-30 08:10:57 +00:00
|
|
|
scrollbarStyle: null
|
2021-04-30 06:31:32 +00:00
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2021-04-19 16:49:57 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export { Redis };
|