opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-24 16:46:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update modal kit component

Browse Source
This commit is contained in:
steven
2023-04-13 15:15:03 +08:00
parent 68d2d8e7d1
commit e14b69cf4c
9 changed files with 64 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -13,7 +13,6 @@
"@emotion/styled": "^11.10.6",
"@mui/material": "^5.11.14",
"@mui/styled-engine-sc": "^5.11.11",
"@radix-ui/react-dialog": "^1.0.3",
"@radix-ui/react-popover": "^1.0.5",
"@radix-ui/react-select": "^1.2.1",
"@radix-ui/react-tooltip": "^1.0.5",

30
pnpm-lock.yaml generated
View File

@ -13,9 +13,6 @@ dependencies:
'@mui/styled-engine-sc':
specifier: ^5.11.11
version: 5.11.11(styled-components@5.3.9)
'@radix-ui/react-dialog':
specifier: ^1.0.3
version: 1.0.3(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-popover':
specifier: ^1.0.5
version: 1.0.5(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)
@ -882,33 +879,6 @@ packages:
react: 18.2.0
dev: false
/@radix-ui/react-dialog@1.0.3(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-owNhq36kNPqC2/a+zJRioPg6HHnTn5B/sh/NjTY8r4W9g1L5VJlrzZIVcBr7R9Mg8iLjVmh6MGgMlfoVf/WO/A==}
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.21.0
'@radix-ui/primitive': 1.0.0
'@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
'@radix-ui/react-context': 1.0.0(react@18.2.0)
'@radix-ui/react-dismissable-layer': 1.0.3(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-focus-guards': 1.0.0(react@18.2.0)
'@radix-ui/react-focus-scope': 1.0.2(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-id': 1.0.0(react@18.2.0)
'@radix-ui/react-portal': 1.0.2(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-presence': 1.0.0(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-primitive': 1.0.2(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-slot': 1.0.1(react@18.2.0)
'@radix-ui/react-use-controllable-state': 1.0.0(react@18.2.0)
aria-hidden: 1.2.3
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
react-remove-scroll: 2.5.5(@types/react@18.0.28)(react@18.2.0)
transitivePeerDependencies:
- '@types/react'
dev: false
/@radix-ui/react-direction@1.0.0(react@18.2.0):
resolution: {integrity: sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==}
peerDependencies:

6
src/components/ActionConfirmModal.tsx
View File

@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next";
import Dialog from "./kit/Dialog";
import Modal from "./kit/Modal";
export interface ActionConfirmModalProps {
title: string;
@ -15,7 +15,7 @@ const ActionConfirmModal = (props: ActionConfirmModalProps) => {
const { t } = useTranslation();
return (
<Dialog title={title} open={open} onClose={close}>
<Modal title={title} open={open} onClose={close}>
<div className="w-full flex flex-col justify-start items-start mt-2">
<p className="text-gray-500">{content}</p>
</div>
@ -33,7 +33,7 @@ const ActionConfirmModal = (props: ActionConfirmModalProps) => {
{t("common.confirm")}
</button>
</div>
</Dialog>
</Modal>
);
};

28
src/components/ClearDataConfirmModal.tsx
View File

@ -1,6 +1,6 @@
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import Dialog from "./kit/Dialog";
import Modal from "./kit/Modal";
interface Props {
open: boolean;
@ -21,19 +21,21 @@ const ClearDataConfirmModal = (props: Props) => {
};
return (
<Dialog title="Clear all data" open={open} onClose={close}>
<div className="w-full flex flex-col justify-start items-start mt-2">
<p className="text-gray-500">SQL Chat saves all your data in your local browser. Are you sure to clear all of them?</p>
<Modal title="Clear all data" className="!w-96" open={open} onClose={close}>
<div>
<div className="w-full flex flex-col justify-start items-start mt-2">
<p className="text-gray-500">SQL Chat saves all your data in your local browser. Are you sure to clear all of them?</p>
</div>
<div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
<button className="btn btn-outline" onClick={close}>
{t("common.close")}
</button>
<button className="btn btn-error" onClick={handleClearData}>
{t("common.clear")}
</button>
</div>
</div>
<div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
<button className="btn btn-outline" onClick={close}>
{t("common.close")}
</button>
<button className="btn btn-error" onClick={handleClearData}>
{t("common.clear")}
</button>
</div>
</Dialog>
</Modal>
);
};

6
src/components/CreateConnectionModal.tsx
View File

@ -6,7 +6,7 @@ import { useConnectionStore } from "@/store";
import { Connection, Engine, ResponseObject } from "@/types";
import Select from "./kit/Select";
import TextField from "./kit/TextField";
import Dialog from "./kit/Dialog";
import Modal from "./kit/Modal";
import Icon from "./Icon";
import DataStorageBanner from "./DataStorageBanner";
import ActionConfirmModal from "./ActionConfirmModal";
@ -207,7 +207,7 @@ const CreateConnectionModal = (props: Props) => {
return (
<>
<Dialog title={isEditing ? "Edit Connection" : "Create Connection"} open={open} onClose={close}>
<Modal title={isEditing ? "Edit Connection" : "Create Connection"} open={open} onClose={close}>
<div className="w-full flex flex-col justify-start items-start space-y-3 mt-2">
<DataStorageBanner className="rounded-lg bg-white border dark:border-zinc-700 py-2 !justify-start" alwaysShow={true} />
<div className="w-full flex flex-col">
@ -346,7 +346,7 @@ const CreateConnectionModal = (props: Props) => {
</button>
</div>
</div>
</Dialog>
</Modal>
<ActionConfirmModal
title="Delete Connection"

6
src/components/EditConversationTitleModal.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
import { useConversationStore } from "@/store";
import { Conversation } from "@/types";
import TextField from "./kit/TextField";
import Dialog from "./kit/Dialog";
import Modal from "./kit/Modal";
interface Props {
conversation: Conversation;
@ -33,7 +33,7 @@ const EditConversationTitleModal = (props: Props) => {
};
return (
<Dialog title={t("conversation.edit-title")} open={open} onClose={close}>
<Modal title={t("conversation.edit-title")} open={open} onClose={close}>
<div className="w-full flex flex-col justify-start items-start mt-2">
<TextField placeholder={t("conversation.conversation-title") || ""} value={title} onChange={(value) => setTitle(value)} />
</div>
@ -45,7 +45,7 @@ const EditConversationTitleModal = (props: Props) => {
{t("common.save")}
</button>
</div>
</Dialog>
</Modal>
);
};

6
src/components/SettingModal.tsx
View File

@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next";
import Dialog from "./kit/Dialog";
import Modal from "./kit/Modal";
import Icon from "./Icon";
import WeChatQRCodeView from "./WeChatQRCodeView";
import ClearDataButton from "./ClearDataButton";
@ -17,7 +17,7 @@ const SettingModal = (props: Props) => {
const { t } = useTranslation();
return (
<Dialog title={t("setting.self")} open={open} onClose={close}>
<Modal title={t("setting.self")} open={open} onClose={close}>
<div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
<div className="w-full flex flex-row justify-start items-start flex-wrap gap-2">
<a
@ -53,7 +53,7 @@ const SettingModal = (props: Props) => {
</div>
</div>
</div>
</Dialog>
</Modal>
);
};

40
src/components/kit/Dialog.tsx
View File

@ -1,40 +0,0 @@
import * as DialogUI from "@radix-ui/react-dialog";
import React, { ReactNode } from "react";
import Icon from "../Icon";
interface Props {
title: string;
open: boolean;
children: ReactNode;
onClose: () => void;
}
const Dialog = (props: Props) => {
const { children, title, open, onClose } = props;
return (
<DialogUI.Root
open={open}
onOpenChange={() => {
onClose();
}}
>
<DialogUI.Portal>
<DialogUI.Overlay className="fixed inset-0 bg-black bg-opacity-60 z-100" />
<DialogUI.Content className="flex flex-col bg-white dark:bg-zinc-800 rounded-xl p-4 fixed top-[50%] left-[50%] h-auto max-h-[85vh] w-[90vw] max-w-lg translate-x-[-50%] translate-y-[-50%] z-100">
<DialogUI.Title className="text-lg pl-1 text-black dark:text-gray-300 font-medium mb-2">{title}</DialogUI.Title>
<DialogUI.Close
className="absolute top-3 right-3 outline-none w-8 h-8 p-1 bg-zinc-600 rounded-full text-gray-300 hover:opacity-80"
aria-label="Close"
onClick={onClose}
>
<Icon.IoClose className="w-full h-auto" />
</DialogUI.Close>
<div className="w-full px-1 h-[calc(100%-36px)] flex flex-col justify-start items-start overflow-y-auto">{children}</div>
</DialogUI.Content>
</DialogUI.Portal>
</DialogUI.Root>
);
};
export default Dialog;

37
src/components/kit/Modal.tsx Normal file
View File

@ -0,0 +1,37 @@
import { Modal as ModalUI } from "@mui/material";
import { ReactNode } from "react";
import Icon from "../Icon";
interface Props {
title: string;
open: boolean;
children: ReactNode;
onClose: () => void;
className?: string;
}
const Modal = (props: Props) => {
const { children, open, title, onClose, className } = props;
return (
<ModalUI className="!z-100" open={open} onClose={onClose}>
<div
className={`${
className || ""
} flex flex-col bg-white dark:bg-zinc-800 rounded-xl p-4 fixed top-[50%] left-[50%] h-auto max-h-[85vh] w-[90vw] max-w-lg translate-x-[-50%] translate-y-[-50%] z-100`}
>
<p className="text-lg pl-1 text-black dark:text-gray-300 font-medium mb-2">{title}</p>
<button
className="absolute top-3 right-3 outline-none w-8 h-8 p-1 bg-zinc-600 rounded-full text-gray-300 hover:opacity-80"
aria-label="Close"
onClick={onClose}
>
<Icon.IoClose className="w-full h-auto" />
</button>
<div className="w-full px-1 h-[calc(100%-36px)] flex flex-col justify-start items-start overflow-y-auto">{children}</div>
</div>
</ModalUI>
);
};
export default Modal;