Add modal api

2 files changed, 35 insertions, 0 deletions

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 1e13d7f..89159c4 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -7,6 +7,7 @@ import { Button, ButtonProps, Flex, Switch, Forms, React } from "../webpack/comm
 import ErrorBoundary from "./ErrorBoundary";
 import { startPlugin } from "../plugins";
 import { stopPlugin } from '../plugins/index';
+import { openModal, closeModal } from '../utils/modal';
 
 export default ErrorBoundary.wrap(function Settings(props) {
     const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
diff --git a/src/utils/modal.tsx b/src/utils/modal.tsx
new file mode 100644
index 0000000..5628ebe
--- /dev/null
+++ b/src/utils/modal.tsx
@@ -0,0 +1,34 @@
+import Components from "discord-types/components";
+import { waitFor } from "../webpack";
+
+let Modal: Components.Modal;
+let modals: any;
+
+waitFor("openModalLazy", m => modals = m);
+waitFor("ModalRoot", m => Modal = m);
+
+let modalId = 1337;
+
+/**
+ * Open a modal
+ * @param Component The component to render in the modal
+ * @returns The key of this modal. This can be used to close the modal later with closeModal
+ */
+export function openModal(Component: React.ComponentType) {
+    let key = `Vencord${modalId++}`;
+    modals.openModal(props =>
+        <Modal.ModalRoot {...props}>
+            <Component />
+        </Modal.ModalRoot>
+        , { modalKey: key });
+
+    return key;
+};
+
+/**
+ * Close a modal by key. The id you need for this is returned by openModal.
+ * @param key The key of the modal to close
+ */
+export function closeModal(key: string) {
+    modals.closeModal(key);
+}
\ No newline at end of file