Created the new InputDialog.jsx (to use setDialog)

2026-02-09 06:58:41 -06:00 · 2023-02-18 23:32:30 +01:00
parent 3374268a3c
commit 55023a8e36
1 changed files with 113 additions and 0 deletions
--- a/client/src/common/contexts/InputDialog/InputDialog.jsx
+++ b/client/src/common/contexts/InputDialog/InputDialog.jsx
@@ -0,0 +1,113 @@
+import React, {createContext, useContext, useEffect, useState} from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faClose} from "@fortawesome/free-solid-svg-icons";
+import {t} from "i18next";
+import {DialogContext, DialogProvider} from "@/common/contexts/Dialog";
+import "./styles.sass";
+
+export const InputDialogContext = createContext({});
+
+const DialogArea = ({dialog}) => {
+    const close = useContext(DialogContext);
+    const [value, setValue] = useState(dialog.value || "");
+
+    document.onkeyup = e => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            submit();
+        }
+        if (e.key === "Escape" && !dialog.disableCloseButton) {
+            e.preventDefault();
+            closeDialog();
+        }
+    }
+
+    function updateValue(e) {
+        if (dialog.updateDescription) dialog.description = dialog.updateDescription(e.target.value);
+        setValue(e.target.value);
+    }
+
+    function closeDialog() {
+        if (dialog.onClose) dialog.onClose();
+        close();
+    }
+
+    function submit() {
+        if (!dialog.description && !value) return;
+        close();
+        if (dialog.onSuccess) dialog.onSuccess(value);
+    }
+
+    function clear() {
+        close();
+        if (dialog.onClear) dialog.onClear();
+    }
+
+    return (
+        <>
+            <div className="dialog-header">
+                <h4 className="dialog-text">{dialog.title}</h4>
+                {!dialog.disableCloseButton ?
+                    <FontAwesomeIcon icon={faClose} className="dialog-text dialog-icon" onClick={closeDialog}/> : <></>}
+            </div>
+            <div className="dialog-main">
+                {dialog.description ? <h3 className="dialog-description">{dialog.description}</h3> : ""}
+                {dialog.placeholder ? <input className="dialog-input" type={dialog.type ? dialog.type : "text"}
+                                             placeholder={dialog.placeholder} value={value}
+                                             onChange={updateValue}/> : ""}
+                {dialog.select ? <select value={value} onChange={updateValue} className="dialog-input">
+                    {Object.keys(dialog.selectOptions).map(key => <option key={key}
+                                                                          value={key}>{dialog.selectOptions[key]}</option>)}
+                </select> : ""}
+            </div>
+            <div className="dialog-buttons">
+                {dialog.unsetButton ? <button className="dialog-btn dialog-secondary"
+                                              onClick={clear}>{dialog.unsetButton || t("dialog.unset")}</button> : ""}
+                <button className="dialog-btn" onClick={submit}>{dialog.buttonText || t("dialog.update")}</button>
+            </div>
+        </>
+    )
+}
+
+export const InputDialogProvider = (props) => {
+    const [dialog, setDialog] = useState();
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [newDialog, setNewDialog] = useState();
+    const [nextDialog, setNextDialog] = useState();
+
+    const updateDialog = (newDialog) => setNewDialog(newDialog);
+
+    useEffect(() => {
+        if (!newDialog) return;
+
+        if (isDialogOpen) {
+            setNextDialog(newDialog);
+        } else {
+            setDialog(newDialog);
+            setIsDialogOpen(true);
+        }
+    }, [newDialog]);
+
+    useEffect(() => {
+        if (!isDialogOpen && nextDialog) {
+            setDialog(nextDialog);
+            setNextDialog();
+        }
+    }, [isDialogOpen]);
+
+    const handleClose = () => {
+        setIsDialogOpen(false);
+        setDialog();
+    };
+
+    return (
+        <InputDialogContext.Provider value={[updateDialog]}>
+            {dialog && (
+                <DialogProvider close={handleClose} customClass="input-dialog">
+                    <DialogArea dialog={dialog} />
+                </DialogProvider>
+            )}
+            {props.children}
+        </InputDialogContext.Provider>
+    );
+};