From 6488750bc285925cc6554b6d9f13b253fa261678 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 13 Jul 2023 17:20:18 -0300 Subject: [PATCH] Started transition to Radix modal logic --- .../components/codeAreaComponent/index.tsx | 67 ++++++----------- .../src/components/promptComponent/index.tsx | 73 +++++++------------ .../components/textAreaComponent/index.tsx | 52 ++++++------- src/frontend/src/modals/baseModal/index.tsx | 31 ++++---- .../src/modals/codeAreaModal/index.tsx | 20 ++--- src/frontend/src/modals/formModal/index.tsx | 6 +- .../src/modals/genericModal/index.tsx | 41 ++++++----- 7 files changed, 119 insertions(+), 171 deletions(-) diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 966d8f26d..edd24c333 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/src/frontend/src/components/codeAreaComponent/index.tsx @@ -1,5 +1,4 @@ -import { useContext, useEffect, useState } from "react"; -import { PopUpContext } from "../../contexts/popUpContext"; +import { useEffect, useState } from "react"; import CodeAreaModal from "../../modals/codeAreaModal"; import { TextAreaComponentType } from "../../types/components"; @@ -16,7 +15,6 @@ export default function CodeAreaComponent({ const [myValue, setMyValue] = useState( typeof value == "string" ? value : JSON.stringify(value) ); - const { openPopUp } = useContext(PopUpContext); useEffect(() => { if (disabled) { setMyValue(""); @@ -30,45 +28,26 @@ export default function CodeAreaComponent({ return (
-
- { - openPopUp( - { - setMyValue(t); - onChange(t); - }} - /> - ); - }} - className={ - editNode - ? "input-edit-node input-dialog" - : (disabled ? " input-disable input-ring " : "") + - " input-primary text-muted-foreground " - } - > - {myValue !== "" ? myValue : "Type something..."} - - -
+
+ ); } diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx index 22384c299..82635fb5f 100644 --- a/src/frontend/src/components/promptComponent/index.tsx +++ b/src/frontend/src/components/promptComponent/index.tsx @@ -59,52 +59,29 @@ export default function PromptAreaComponent({ return (
-
- { - openPopUp( - { - setMyValue(t); - onChange(t); - }} - nodeClass={nodeClass} - setNodeClass={setNodeClass} - /> - ); - }} - className={ - editNode - ? "input-edit-node input-dialog" - : (disabled ? " input-disable text-ring " : "") + - " input-primary text-muted-foreground " - } - > - {myValue !== "" ? myValue : "Type your prompt here"} - - -
+
+ ); } diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx index 8083b4eb7..72dc6982e 100644 --- a/src/frontend/src/components/textAreaComponent/index.tsx +++ b/src/frontend/src/components/textAreaComponent/index.tsx @@ -40,9 +40,10 @@ export default function TextAreaComponent({ setDisableCopyPaste(false); }} className={ - editNode + (editNode ? " input-edit-node " - : " input-primary " + (disabled ? " input-disable" : "") + : " input-primary " + (disabled ? " input-disable" : "")) + + " w-full" } placeholder={"Type something..."} onChange={(e) => { @@ -50,33 +51,28 @@ export default function TextAreaComponent({ onChange(e.target.value); }} /> - - + )} + + ); diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index f603dceae..9c4ce35be 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useContext } from "react"; +import { ReactNode } from "react"; import React from "react"; import { @@ -9,15 +9,18 @@ import { DialogTitle, DialogTrigger, } from "../../components/ui/dialog"; -import { PopUpContext } from "../../contexts/popUpContext"; type ContentProps = { children: ReactNode }; type HeaderProps = { children: ReactNode; description: string }; type FooterProps = { children: ReactNode }; +type TriggerProps = { children: ReactNode }; const Content: React.FC = ({ children }) => { return
{children}
; }; +const Trigger: React.FC = ({ children }) => { + return <>{children}; +}; const Header: React.FC<{ children: ReactNode; description: string }> = ({ children, @@ -38,10 +41,11 @@ interface BaseModalProps { children: [ React.ReactElement, React.ReactElement, + React.ReactElement, React.ReactElement? ]; - open: boolean; - setOpen: (open: boolean) => void; + open?: boolean; + setOpen?: (open: boolean) => void; size?: "smaller" | "small" | "medium" | "large" | "large-h-full"; } function BaseModal({ @@ -50,20 +54,12 @@ function BaseModal({ children, size = "large", }: BaseModalProps) { - const { closePopUp, setCloseEdit } = useContext(PopUpContext); - - function setModalOpen(x: boolean) { - setOpen(x); - if (x === false) { - setTimeout(() => { - setCloseEdit("editcode"); - closePopUp(); - }, 300); - } - } const headerChild = React.Children.toArray(children).find( (child) => (child as React.ReactElement).type === Header ); + const triggerChild = React.Children.toArray(children).find( + (child) => (child as React.ReactElement).type === Trigger + ); const ContentChild = React.Children.toArray(children).find( (child) => (child as React.ReactElement).type === Content ); @@ -102,8 +98,8 @@ function BaseModal({ //UPDATE COLORS AND STYLE CLASSSES return ( - - + + {triggerChild} {headerChild}
{ContentChild}
@@ -116,5 +112,6 @@ function BaseModal({ BaseModal.Content = Content; BaseModal.Header = Header; +BaseModal.Trigger = Trigger; BaseModal.Footer = Footer; export default BaseModal; diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index cc0495977..44208ebd4 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -5,13 +5,12 @@ import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; import { TerminalSquare } from "lucide-react"; -import { useContext, useState } from "react"; +import { ReactNode, useContext, useState } from "react"; import AceEditor from "react-ace"; import { Button } from "../../components/ui/button"; import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants"; import { alertContext } from "../../contexts/alertContext"; import { darkContext } from "../../contexts/darkContext"; -import { PopUpContext } from "../../contexts/popUpContext"; import { postValidateCode } from "../../controllers/API"; import { APIClassType } from "../../types/api"; import BaseModal from "../baseModal"; @@ -21,24 +20,18 @@ export default function CodeAreaModal({ setValue, nodeClass, setNodeClass, + children, }: { setValue: (value: string) => void; value: string; nodeClass: APIClassType; + children: ReactNode; setNodeClass: (Class: APIClassType) => void; }) { const [code, setCode] = useState(value); const { dark } = useContext(darkContext); - const { closePopUp, setCloseEdit } = useContext(PopUpContext); const { setErrorData, setSuccessData } = useContext(alertContext); - function setModalOpen(x: boolean) { - if (x === false) { - setCloseEdit("codearea"); - closePopUp(); - } - } - function handleClick() { postValidateCode(code) .then((apiReturn) => { @@ -50,7 +43,7 @@ export default function CodeAreaModal({ title: "Code is ready to run", }); setValue(code); - setModalOpen(false); + setOpen(false); } else { if (funcErrors.length !== 0) { setErrorData({ @@ -78,8 +71,11 @@ export default function CodeAreaModal({ }); } + const [open, setOpen] = useState(false); + return ( - + + {children} Edit Code diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index 12f7683b3..3f2b21551 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/src/frontend/src/modals/formModal/index.tsx @@ -36,7 +36,7 @@ export default function FormModal({ setOpen, }: { open: boolean; - setOpen: Function; + setOpen: (open: boolean) => void; flow: FlowType; }) { const { tabsState, setTabsState } = useContext(TabsContext); @@ -389,8 +389,8 @@ export default function FormModal({ } } return ( - - + + {tabsState[flow.id].formKeysData && ( diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index b9cdfddc8..ebe63cf3e 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -1,15 +1,17 @@ import { FileText, Variable } from "lucide-react"; -import { useContext, useEffect, useRef, useState } from "react"; +import { ReactNode, useContext, useEffect, useRef, useState } from "react"; import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper"; import ShadTooltip from "../../components/ShadTooltipComponent"; import { Badge } from "../../components/ui/badge"; import { Button } from "../../components/ui/button"; import { DialogTitle } from "../../components/ui/dialog"; import { Textarea } from "../../components/ui/textarea"; -import { MAX_WORDS_HIGHLIGHT, PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants"; +import { + MAX_WORDS_HIGHLIGHT, + PROMPT_DIALOG_SUBTITLE, + TEXT_DIALOG_SUBTITLE, +} from "../../constants"; import { alertContext } from "../../contexts/alertContext"; -import { darkContext } from "../../contexts/darkContext"; -import { PopUpContext } from "../../contexts/popUpContext"; import { postValidatePrompt } from "../../controllers/API"; import { APIClassType } from "../../types/api"; import { @@ -31,6 +33,7 @@ export default function GenericModal({ type, nodeClass, setNodeClass, + children, }: { field_name?: string; setValue: (value: string) => void; @@ -38,6 +41,7 @@ export default function GenericModal({ buttonText: string; modalTitle: string; type: number; + children: ReactNode; nodeClass?: APIClassType; setNodeClass?: (Class: APIClassType) => void; }) { @@ -47,17 +51,9 @@ export default function GenericModal({ const [inputValue, setInputValue] = useState(value); const [isEdit, setIsEdit] = useState(true); const [wordsHighlight, setWordsHighlight] = useState([]); - const { dark } = useContext(darkContext); const { setErrorData, setSuccessData, setNoticeData } = useContext(alertContext); - const { closePopUp, setCloseEdit } = useContext(PopUpContext); const ref = useRef(); - function setModalOpen(x: boolean) { - if (x === false) { - setCloseEdit("generic"); - closePopUp(); - } - } const divRef = useRef(null); const divRefPrompt = useRef(null); @@ -120,15 +116,16 @@ export default function GenericModal({ ); }; - function getClassByNumberLength(){ + function getClassByNumberLength() { let sumOfCaracteres: number = 0; - wordsHighlight.forEach(element => { - sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length + wordsHighlight.forEach((element) => { + sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length; }); - return sumOfCaracteres > MAX_WORDS_HIGHLIGHT ? "code-highlight" : "code-nohighlight" + return sumOfCaracteres > MAX_WORDS_HIGHLIGHT + ? "code-highlight" + : "code-nohighlight"; } - function validatePrompt(closeModal: boolean) { postValidatePrompt(field_name, inputValue, nodeClass) .then((apiReturn) => { @@ -165,8 +162,11 @@ export default function GenericModal({ }); } + const [modalOpen, setModalOpen] = useState(false); + return ( - + + {children} { switch (myModalTitle) { @@ -234,7 +234,10 @@ export default function GenericModal({
{type === TypeModal.PROMPT && (
-
+