opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-28 09:43:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: use drawer instead of modal for sql query

Browse Source
This commit is contained in:
steven
2023-03-28 16:43:15 +08:00
parent 2fb70e11ff
commit 65f2100f50
8 changed files with 503 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
components/CodeBlock.tsx
View File

@ -1,11 +1,8 @@
import { useState } from "react";
import { createPortal } from "react-dom";
import { toast } from "react-hot-toast";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { useConnectionStore } from "@/store";
import { useConnectionStore, useQueryStore } from "@/store";
import Icon from "./Icon";
import ExecuteStatementModal from "./ExecuteStatementModal";
interface Props {
language: string;
@ -19,7 +16,7 @@ const checkStatementIsSelect = (statement: string) => {
export const CodeBlock = (props: Props) => {
const { language, value } = props;
const connectionStore = useConnectionStore();
const [showExecuteQueryModal, setShowExecuteQueryModal] = useState(false);
const queryStore = useQueryStore();
const currentConnectionCtx = connectionStore.currentConnectionCtx;
// Only show execute button in the following situations:
// * SQL code, and it is a SELECT statement;
@ -37,44 +34,44 @@ export const CodeBlock = (props: Props) => {
});
};
const handleExecuteQuery = () => {
if (!currentConnectionCtx) {
toast.error("Please select a connection first");
return;
}
queryStore.setContext({
connection: currentConnectionCtx.connection,
database: currentConnectionCtx.database,
statement: value,
});
queryStore.toggleDrawer(true);
};
return (
<>
<div className="w-full max-w-full relative font-sans text-[16px]">
<div className="flex items-center justify-between py-2 px-4">
<span className="text-xs text-white font-mono">{language}</span>
<div className="flex items-center space-x-2">
<div className="w-full max-w-full relative font-sans text-[16px]">
<div className="flex items-center justify-between py-2 px-4">
<span className="text-xs text-white font-mono">{language}</span>
<div className="flex items-center space-x-2">
<button
className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
onClick={copyToClipboard}
>
<Icon.BiClipboard className="w-full h-auto" />
</button>
{showExecuteButton && (
<button
className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
onClick={copyToClipboard}
onClick={handleExecuteQuery}
>
<Icon.BiClipboard className="w-full h-auto" />
<Icon.IoPlay className="w-full h-auto" />
</button>
{showExecuteButton && (
<button
className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
onClick={() => setShowExecuteQueryModal(true)}
>
<Icon.IoPlay className="w-full h-auto" />
</button>
)}
</div>
)}
</div>
<SyntaxHighlighter language={language.toLowerCase()} style={oneDark} customStyle={{ margin: 0 }}>
{value}
</SyntaxHighlighter>
</div>
{showExecuteQueryModal &&
showExecuteButton &&
createPortal(
<ExecuteStatementModal
connection={currentConnectionCtx.connection}
databaseName={currentConnectionCtx.database?.name || ""}
statement={value}
close={() => setShowExecuteQueryModal(false)}
/>,
document.body
)}
</>
<SyntaxHighlighter language={language.toLowerCase()} style={oneDark} customStyle={{ margin: 0 }}>
{value}
</SyntaxHighlighter>
</div>
);
};