From 0dc8ca868285dcfc761713da7f7915bcfc0670a0 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 12 Jun 2023 13:57:56 -0300 Subject: [PATCH] bugfixes: darkmode and not saving file/text --- .../GenericNode/components/parameterComponent/index.tsx | 4 ++++ src/frontend/src/CustomNodes/GenericNode/index.tsx | 3 +++ src/frontend/src/components/inputFileComponent/index.tsx | 6 +++++- src/frontend/src/components/toggleShadComponent/index.tsx | 1 + src/frontend/src/modals/EditNodeModal/index.tsx | 6 ++++-- src/frontend/src/modals/genericModal/index.tsx | 2 +- 6 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 55256951b..09c80d309 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -24,6 +24,7 @@ import { nodeNames, nodeIcons } from "../../../../utils"; import React from "react"; import { nodeColors } from "../../../../utils"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; +import { PopUpContext } from "../../../../contexts/popUpContext"; export default function ParameterComponent({ left, @@ -40,6 +41,7 @@ export default function ParameterComponent({ const refHtml = useRef(null); const updateNodeInternals = useUpdateNodeInternals(); const [position, setPosition] = useState(0); + const { closePopUp } = useContext(PopUpContext); useEffect(() => { if (ref.current && ref.current.offsetTop && ref.current.clientHeight) { @@ -56,6 +58,8 @@ export default function ParameterComponent({ data.node.template[name]?.value ?? false ); + useEffect(() => {}, [closePopUp, data.node.template]); + const { reactFlowInstance } = useContext(typesContext); let disabled = reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false; diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 86eaf299d..9569bda63 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -44,6 +44,7 @@ export default function GenericNode({ const showError = useRef(true); const { types, deleteNode } = useContext(typesContext); const { openPopUp } = useContext(PopUpContext); + const { closePopUp } = useContext(PopUpContext); const Icon = nodeIcons[data.type] || nodeIcons[types[data.type]]; const [validationStatus, setValidationStatus] = useState(null); @@ -59,6 +60,8 @@ export default function GenericNode({ } }, [save]); + useEffect(() => {}, [closePopUp]); + const validateNode = useCallback( debounce(async () => { try { diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index 4dd32b1da..de6e0f683 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -37,6 +37,10 @@ export default function InputFileComponent({ return false; } + useEffect(() => { + setMyValue(value); + }, [value]); + const handleButtonClick = () => { const input = document.createElement("input"); input.type = "file"; @@ -73,7 +77,7 @@ export default function InputFileComponent({ onClick={handleButtonClick} className={ editNode - ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" + ? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "") } diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx index 188ddccf9..632ee1bad 100644 --- a/src/frontend/src/components/toggleShadComponent/index.tsx +++ b/src/frontend/src/components/toggleShadComponent/index.tsx @@ -19,6 +19,7 @@ export default function ToggleShadComponent({ style={{ transform: "scaleX(0.6) scaleY(0.6)", }} + className="data-[state=unchecked]:bg-slate-500" checked={enabled} onCheckedChange={(x: boolean) => { setEnabled(x); diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index fca5f83dc..ba12f6432 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -77,6 +77,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { } } + useEffect(() => {}, [closePopUp, data.node.template]); + function changeAdvanced(node): void { Object.keys(data.node.template).filter((n, i) => { if (n === node.name) { @@ -102,10 +104,10 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { {EDIT_DIALOG_SUBTITLE}
- +   - + Parameters
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index 868a61913..2b1b4c7d6 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -18,7 +18,7 @@ import { Button } from "../../components/ui/button"; import { Textarea } from "../../components/ui/textarea"; import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants"; -export default function PromptAreaModal({ +export default function GenericModal({ value, setValue, buttonText,