From e14b69cf4c445fa680c508cce58dc2e0845a2b9a Mon Sep 17 00:00:00 2001 From: steven Date: Thu, 13 Apr 2023 15:15:03 +0800 Subject: [PATCH] chore: update modal kit component --- package.json | 1 - pnpm-lock.yaml | 30 -------------- src/components/ActionConfirmModal.tsx | 6 +-- src/components/ClearDataConfirmModal.tsx | 28 +++++++------ src/components/CreateConnectionModal.tsx | 6 +-- src/components/EditConversationTitleModal.tsx | 6 +-- src/components/SettingModal.tsx | 6 +-- src/components/kit/Dialog.tsx | 40 ------------------- src/components/kit/Modal.tsx | 37 +++++++++++++++++ 9 files changed, 64 insertions(+), 96 deletions(-) delete mode 100644 src/components/kit/Dialog.tsx create mode 100644 src/components/kit/Modal.tsx diff --git a/package.json b/package.json index 0ebd5a7..4b18169 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c99ca3..0bd7301 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: diff --git a/src/components/ActionConfirmModal.tsx b/src/components/ActionConfirmModal.tsx index d3a1e5a..e1f811a 100644 --- a/src/components/ActionConfirmModal.tsx +++ b/src/components/ActionConfirmModal.tsx @@ -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 ( - +

{content}

@@ -33,7 +33,7 @@ const ActionConfirmModal = (props: ActionConfirmModalProps) => { {t("common.confirm")} - + ); }; diff --git a/src/components/ClearDataConfirmModal.tsx b/src/components/ClearDataConfirmModal.tsx index 08759b5..2c10ec0 100644 --- a/src/components/ClearDataConfirmModal.tsx +++ b/src/components/ClearDataConfirmModal.tsx @@ -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 ( - -
-

SQL Chat saves all your data in your local browser. Are you sure to clear all of them?

+ +
+
+

SQL Chat saves all your data in your local browser. Are you sure to clear all of them?

+
+
+ + +
-
- - -
-
+ ); }; diff --git a/src/components/CreateConnectionModal.tsx b/src/components/CreateConnectionModal.tsx index a00c4c0..0dac509 100644 --- a/src/components/CreateConnectionModal.tsx +++ b/src/components/CreateConnectionModal.tsx @@ -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 ( <> - +
@@ -346,7 +346,7 @@ const CreateConnectionModal = (props: Props) => {
- + { }; return ( - +
setTitle(value)} />
@@ -45,7 +45,7 @@ const EditConversationTitleModal = (props: Props) => { {t("common.save")} - + ); }; diff --git a/src/components/SettingModal.tsx b/src/components/SettingModal.tsx index ffe43be..4a958f9 100644 --- a/src/components/SettingModal.tsx +++ b/src/components/SettingModal.tsx @@ -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 ( - +
- + ); }; diff --git a/src/components/kit/Dialog.tsx b/src/components/kit/Dialog.tsx deleted file mode 100644 index 86b8064..0000000 --- a/src/components/kit/Dialog.tsx +++ /dev/null @@ -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 ( - { - onClose(); - }} - > - - - - {title} - - - -
{children}
- - - - ); -}; - -export default Dialog; diff --git a/src/components/kit/Modal.tsx b/src/components/kit/Modal.tsx new file mode 100644 index 0000000..9aa5f8d --- /dev/null +++ b/src/components/kit/Modal.tsx @@ -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 ( + +
+

{title}

+ +
{children}
+
+ + ); +}; + +export default Modal;