Skip to content

Commit faefc3c

Browse files
phamhieu275phamhieu275
committed
Refactor structure of modal component
1 parent bf74463 commit faefc3c

26 files changed

+965
-837
lines changed

‎src/components/EditorHeader/ControlPanel.jsx

+26-167
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,8 @@ import {
2121
Toast,
2222
Popconfirm,
2323
} from "@douyinfe/semi-ui";
24-
import { toPng, toJpeg, toSvg } from "html-to-image";
24+
import { toPng, toJpeg } from "html-to-image";
2525
import { saveAs } from "file-saver";
26-
import {
27-
jsonToMySQL,
28-
jsonToPostgreSQL,
29-
jsonToSQLite,
30-
jsonToMariaDB,
31-
jsonToSQLServer,
32-
} from "../../utils/toSQL";
3326
import {
3427
ObjectType,
3528
Action,
@@ -60,8 +53,8 @@ import useSaveState from "../../hooks/useSaveState";
6053
import { IconAddArea, IconAddNote, IconAddTable } from "../../icons";
6154
import LayoutDropdown from "./LayoutDropdown";
6255
import Sidesheet from "./SideSheet/Sidesheet";
63-
import Modal from "./Modal/Modal";
6456
import { useTranslation } from "react-i18next";
57+
import ModalManager from "./ModalManager";
6558

6659
export default function ControlPanel({
6760
diagramId,
@@ -72,13 +65,7 @@ export default function ControlPanel({
7265
}) {
7366
const [modal, setModal] = useState(MODAL.NONE);
7467
const [sidesheet, setSidesheet] = useState(SIDESHEET.NONE);
75-
const [prevTitle, setPrevTitle] = useState(title);
7668
const [showEditName, setShowEditName] = useState(false);
77-
const [exportData, setExportData] = useState({
78-
data: null,
79-
filename: `${title}_${new Date().toISOString()}`,
80-
extension: "",
81-
});
8269
const { saveState, setSaveState } = useSaveState();
8370
const { layout, setLayout } = useLayout();
8471
const { settings, setSettings } = useSettings();
@@ -452,7 +439,7 @@ export default function ControlPanel({
452439
}
453440
};
454441

455-
const fileImport = () => setModal(MODAL.IMPORT);
442+
const importDiagram = () => setModal(MODAL.IMPORT_DIAGRAM);
456443
const viewGrid = () =>
457444
setSettings((prev) => ({ ...prev, showGrid: !prev.showGrid }));
458445
const zoomIn = () =>
@@ -704,7 +691,6 @@ export default function ControlPanel({
704691
rename: {
705692
function: () => {
706693
setModal(MODAL.RENAME);
707-
setPrevTitle(title);
708694
},
709695
},
710696
delete_diagram: {
@@ -730,7 +716,7 @@ export default function ControlPanel({
730716
},
731717
},
732718
import_diagram: {
733-
function: fileImport,
719+
function: importDiagram,
734720
shortcut: "Ctrl+I",
735721
},
736722
import_from_source: {
@@ -739,66 +725,8 @@ export default function ControlPanel({
739725
export_as: {
740726
children: [
741727
{
742-
PNG: () => {
743-
toPng(document.getElementById("canvas")).then(function (dataUrl) {
744-
setExportData((prev) => ({
745-
...prev,
746-
data: dataUrl,
747-
extension: "png",
748-
}));
749-
});
750-
setModal(MODAL.IMG);
751-
},
752-
},
753-
{
754-
JPEG: () => {
755-
toJpeg(document.getElementById("canvas"), { quality: 0.95 }).then(
756-
function (dataUrl) {
757-
setExportData((prev) => ({
758-
...prev,
759-
data: dataUrl,
760-
extension: "jpeg",
761-
}));
762-
},
763-
);
764-
setModal(MODAL.IMG);
765-
},
766-
},
767-
{
768-
JSON: () => {
769-
setModal(MODAL.CODE);
770-
const result = JSON.stringify(
771-
{
772-
tables: tables,
773-
relationships: relationships,
774-
notes: notes,
775-
subjectAreas: areas,
776-
types: types,
777-
title: title,
778-
},
779-
null,
780-
2,
781-
);
782-
setExportData((prev) => ({
783-
...prev,
784-
data: result,
785-
extension: "json",
786-
}));
787-
},
788-
},
789-
{
790-
SVG: () => {
791-
const filter = (node) => node.tagName !== "i";
792-
toSvg(document.getElementById("canvas"), { filter: filter }).then(
793-
function (dataUrl) {
794-
setExportData((prev) => ({
795-
...prev,
796-
data: dataUrl,
797-
extension: "svg",
798-
}));
799-
},
800-
);
801-
setModal(MODAL.IMG);
728+
IMAGE: () => {
729+
setModal(MODAL.EXPORT_IMG);
802730
},
803731
},
804732
{
@@ -817,10 +745,20 @@ export default function ControlPanel({
817745
canvas.offsetWidth,
818746
canvas.offsetHeight,
819747
);
820-
doc.save(`${exportData.filename}.pdf`);
748+
doc.save(`${title}_${new Date().toISOString()}.pdf`);
821749
});
822750
},
823751
},
752+
{
753+
SQL: () => {
754+
setModal(MODAL.EXPORT_SQL);
755+
},
756+
},
757+
{
758+
JSON: () => {
759+
setModal(MODAL.EXPORT_JSON);
760+
},
761+
},
824762
{
825763
DRAWDB: () => {
826764
const result = JSON.stringify(
@@ -840,88 +778,8 @@ export default function ControlPanel({
840778
const blob = new Blob([result], {
841779
type: "text/plain;charset=utf-8",
842780
});
843-
saveAs(blob, `${exportData.filename}.ddb`);
844-
},
845-
},
846-
],
847-
function: () => {},
848-
},
849-
export_source: {
850-
children: [
851-
{
852-
MySQL: () => {
853-
setModal(MODAL.CODE);
854-
const src = jsonToMySQL({
855-
tables: tables,
856-
references: relationships,
857-
types: types,
858-
});
859-
setExportData((prev) => ({
860-
...prev,
861-
data: src,
862-
extension: "sql",
863-
}));
864-
},
865-
},
866-
{
867-
PostgreSQL: () => {
868-
setModal(MODAL.CODE);
869-
const src = jsonToPostgreSQL({
870-
tables: tables,
871-
references: relationships,
872-
types: types,
873-
});
874-
setExportData((prev) => ({
875-
...prev,
876-
data: src,
877-
extension: "sql",
878-
}));
879-
},
880-
},
881-
{
882-
SQLite: () => {
883-
setModal(MODAL.CODE);
884-
const src = jsonToSQLite({
885-
tables: tables,
886-
references: relationships,
887-
types: types,
888-
});
889-
setExportData((prev) => ({
890-
...prev,
891-
data: src,
892-
extension: "sql",
893-
}));
894-
},
895-
},
896-
{
897-
MariaDB: () => {
898-
setModal(MODAL.CODE);
899-
const src = jsonToMariaDB({
900-
tables: tables,
901-
references: relationships,
902-
types: types,
903-
});
904-
setExportData((prev) => ({
905-
...prev,
906-
data: src,
907-
extension: "sql",
908-
}));
909-
},
910-
},
911-
{
912-
MSSQL: () => {
913-
setModal(MODAL.CODE);
914-
const src = jsonToSQLServer({
915-
tables: tables,
916-
references: relationships,
917-
types: types,
918-
});
919-
setExportData((prev) => ({
920-
...prev,
921-
data: src,
922-
extension: "sql",
923-
}));
924-
},
781+
saveAs(blob, `${title}_${new Date().toISOString()}.ddb`);
782+
}
925783
},
926784
],
927785
function: () => {},
@@ -1166,7 +1024,7 @@ export default function ControlPanel({
11661024
},
11671025
};
11681026

1169-
useHotkeys("ctrl+i, meta+i", fileImport, { preventDefault: true });
1027+
useHotkeys("ctrl+i, meta+i", importDiagram, { preventDefault: true });
11701028
useHotkeys("ctrl+z, meta+z", undo, { preventDefault: true });
11711029
useHotkeys("ctrl+y, meta+y", redo, { preventDefault: true });
11721030
useHotkeys("ctrl+s, meta+s", save, { preventDefault: true });
@@ -1196,20 +1054,21 @@ export default function ControlPanel({
11961054
});
11971055
useHotkeys("ctrl+alt+w, meta+alt+w", fitWindow, { preventDefault: true });
11981056

1057+
const hideModal = () => {
1058+
setModal(MODAL.NONE);
1059+
};
1060+
11991061
return (
12001062
<>
12011063
{layout.header && header()}
12021064
{layout.toolbar && toolbar()}
1203-
<Modal
1065+
<ModalManager
12041066
modal={modal}
1205-
exportData={exportData}
1206-
setExportData={setExportData}
1067+
hideModal={hideModal}
12071068
title={title}
12081069
setTitle={setTitle}
1209-
setPrevTitle={setPrevTitle}
12101070
setDiagramId={setDiagramId}
12111071
setModal={setModal}
1212-
prevTitle={prevTitle}
12131072
/>
12141073
<Sidesheet
12151074
type={sidesheet}

‎src/components/EditorHeader/Modal/BaseModal.jsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Modal as SemiUIModal } from "@douyinfe/semi-ui";
2+
import { useTranslation } from "react-i18next";
3+
4+
export default function Modal({
5+
children,
6+
modalTitle,
7+
okText,
8+
onOk,
9+
onCancel,
10+
okBtnDisabled,
11+
width,
12+
}) {
13+
const { t } = useTranslation();
14+
15+
return (
16+
<SemiUIModal
17+
title={modalTitle || ""}
18+
visible={true}
19+
onOk={onOk}
20+
onCancel={onCancel}
21+
centered
22+
closeOnEsc={true}
23+
okText={okText || t("confirm")}
24+
okButtonProps={{
25+
disabled: okBtnDisabled,
26+
}}
27+
cancelText={t("cancel")}
28+
width={width || 600}
29+
// bodyStyle={{ maxHeight: window.innerHeight - 280, overflow: "auto" }}
30+
>
31+
{children}
32+
</SemiUIModal>
33+
);
34+
}

0 commit comments

Comments
 (0)