titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remodel the copy link modal

Browse Source
This commit is contained in:
1ilit 2024-08-30 11:09:50 +04:00
parent 3f24ceaf93
commit 65a86ee4f5
3 changed files with 53 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/EditorHeader/ControlPanel.jsx
View File

@ -71,6 +71,7 @@ import { exportSQL } from "../../utils/exportSQL";
import { databases } from "../../data/databases"; import { databases } from "../../data/databases";
import { jsonToMermaid } from "../../utils/exportAs/mermaid"; import { jsonToMermaid } from "../../utils/exportAs/mermaid";
import { isRtl } from "../../i18n/utils/rtl"; import { isRtl } from "../../i18n/utils/rtl";
import Share from "./Modal/Share";
export default function ControlPanel({ export default function ControlPanel({
diagramId, diagramId,
@ -1376,6 +1377,7 @@ export default function ControlPanel({
)} )}
{layout.toolbar && toolbar()} {layout.toolbar && toolbar()}
</div> </div>
<Share modal={modal} setModal={setModal}/>
<Modal <Modal
modal={modal} modal={modal}
exportData={exportData} exportData={exportData}

8
src/components/EditorHeader/Modal/Modal.jsx
View File

@ -42,7 +42,6 @@ import { useTranslation } from "react-i18next";
import { importSQL } from "../../../utils/importSQL"; import { importSQL } from "../../../utils/importSQL";
import { databases } from "../../../data/databases"; import { databases } from "../../../data/databases";
import { isRtl } from "../../../i18n/utils/rtl"; import { isRtl } from "../../../i18n/utils/rtl";
import Share from "./Share";
import GithubToken from "./GithubToken"; import GithubToken from "./GithubToken";
const languageExtension = { const languageExtension = {
@ -257,6 +256,7 @@ export default function Modal({
}; };
const getModalBody = () => { const getModalBody = () => {
if (modal === MODAL.SHARE) return;
switch (modal) { switch (modal) {
case MODAL.IMPORT: case MODAL.IMPORT:
return ( return (
@ -341,8 +341,8 @@ export default function Modal({
return <SetTableWidth />; return <SetTableWidth />;
case MODAL.LANGUAGE: case MODAL.LANGUAGE:
return <Language />; return <Language />;
case MODAL.SHARE: // case MODAL.SHARE:
return <Share setModal={setModal} />; // return <Share setModal={setModal} />;
case MODAL.GITHUB_TOKEN: case MODAL.GITHUB_TOKEN:
return <GithubToken token={token} setToken={setToken} />; return <GithubToken token={token} setToken={setToken} />;
default: default:
@ -354,7 +354,7 @@ export default function Modal({
<SemiUIModal <SemiUIModal
style={isRtl(i18n.language) ? { direction: "rtl" } : {}} style={isRtl(i18n.language) ? { direction: "rtl" } : {}}
title={getModalTitle(modal)} title={getModalTitle(modal)}
visible={modal !== MODAL.NONE} visible={modal !== MODAL.NONE && modal !== MODAL.SHARE}
onOk={getModalOnOk} onOk={getModalOnOk}
afterClose={() => { afterClose={() => {
setExportData(() => ({ setExportData(() => ({

47
src/components/EditorHeader/Modal/Share.jsx
View File

@ -1,13 +1,14 @@
import { Button, Input, Spin, Toast } from "@douyinfe/semi-ui"; import { Button, Input, Modal, Spin, Toast } from "@douyinfe/semi-ui";
import { MODAL } from "../../../data/constants"; import { MODAL } from "../../../data/constants";
import { useCallback, useContext, useEffect, useState, useMemo } from "react"; import { useCallback, useContext, useEffect, useState, useMemo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Octokit } from "octokit"; import { Octokit } from "octokit";
import { IdContext } from "../../Workspace"; import { IdContext } from "../../Workspace";
import { IconLink } from "@douyinfe/semi-icons"; import { IconLink } from "@douyinfe/semi-icons";
import { isRtl } from "../../../i18n/utils/rtl";
export default function Share({ setModal }) { export default function Share({ modal, setModal }) {
const { t } = useTranslation(); const { t, i18n } = useTranslation();
const { gistId, setGistId } = useContext(IdContext); const { gistId, setGistId } = useContext(IdContext);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -78,7 +79,7 @@ export default function Share({ setModal }) {
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} finally { } finally {
setModal(MODAL.SHARE); setLoading(false);
} }
}; };
updateOrGenerateLink(); updateOrGenerateLink();
@ -95,20 +96,48 @@ export default function Share({ setModal }) {
}); });
}; };
if (loading)
return ( return (
<Modal
visible={modal === MODAL.SHARE}
style={isRtl(i18n.language) ? { direction: "rtl" } : {}}
title={t("share")}
footer={<></>}
onCancel={() => setModal(MODAL.NONE)}
centered
closeOnEsc={true}
cancelText={t("cancel")}
width={600}
bodyStyle={{
maxHeight: window.innerHeight - 280,
overflow: "auto",
direction: "ltr",
}}
>
{loading ? (
<div className="text-blue-500 text-center"> <div className="text-blue-500 text-center">
<Spin size="middle" /> <Spin size="middle" />
<div>{t("loading")}</div> <div>{t("loading")}</div>
</div> </div>
); ) : (
<div>
return (
<div className="flex gap-3"> <div className="flex gap-3">
<Input value={url} size="large" /> <Input value={url} size="large" />
<Button size="large" theme="solid" icon={<IconLink />} onClick={copyLink}> <Button
size="large"
theme="solid"
icon={<IconLink />}
onClick={copyLink}
>
{t("copy_link")} {t("copy_link")}
</Button> </Button>
</div> </div>
<hr className="opacity-20 mt-3 mb-1" />
<div className="text-xs">
* Sharing this link will not create a live real-time collaboration
session
</div>
</div>
)}
</Modal>
); );
} }