Refactored state management from tweaks
This commit is contained in:
Lucas Oliveira
parent
169a20ab97
commit
ada32b6a48
7 changed files with 186 additions and 122 deletions
|
|
@ -1,3 +1,4 @@
|
|||
import { cloneDeep } from "lodash";
|
||||
import { useContext, useState } from "react";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
||||
|
|
@ -54,6 +55,7 @@ export default function CodeTabsComponent({
|
|||
};
|
||||
}) {
|
||||
const [isCopied, setIsCopied] = useState<Boolean>(false);
|
||||
const [data, setData] = useState(flow["data"]["nodes"]);
|
||||
const [openAccordion, setOpenAccordion] = useState([]);
|
||||
const { dark } = useContext(darkContext);
|
||||
|
||||
|
|
@ -185,7 +187,7 @@ export default function CodeTabsComponent({
|
|||
: "overflow-hidden"
|
||||
)}
|
||||
>
|
||||
{flow["data"]["nodes"].map((t: any, index) => (
|
||||
{data.map((t: any, index) => (
|
||||
<div className="px-3" key={index}>
|
||||
{tweaks.tweaksList.current.includes(t["data"]["id"]) && (
|
||||
<AccordionComponent
|
||||
|
|
@ -255,6 +257,16 @@ export default function CodeTabsComponent({
|
|||
].value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -274,16 +286,29 @@ export default function CodeTabsComponent({
|
|||
<TextAreaComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[
|
||||
n
|
||||
].value ||
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
)}
|
||||
].value === ""
|
||||
? ""
|
||||
: t.data.node
|
||||
.template[n]
|
||||
.value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -302,13 +327,27 @@ export default function CodeTabsComponent({
|
|||
t.data.node.template[n]
|
||||
.password ?? false
|
||||
}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[
|
||||
n
|
||||
].value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -328,9 +367,16 @@ export default function CodeTabsComponent({
|
|||
.value
|
||||
}
|
||||
setEnabled={(e) => {
|
||||
t.data.node.template[
|
||||
n
|
||||
].value = e;
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = e;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
e,
|
||||
|
|
@ -345,12 +391,13 @@ export default function CodeTabsComponent({
|
|||
"file" ? (
|
||||
<ShadTooltip
|
||||
content={tweaks.buildContent(
|
||||
tweaks.getValue(
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
|
|
@ -382,13 +429,26 @@ export default function CodeTabsComponent({
|
|||
<FloatComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -410,18 +470,31 @@ export default function CodeTabsComponent({
|
|||
.options
|
||||
}
|
||||
onSelect={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node.template[n]
|
||||
);
|
||||
}}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
}
|
||||
></Dropdown>
|
||||
</div>
|
||||
) : t.data.node.template[n].type ===
|
||||
|
|
@ -430,13 +503,26 @@ export default function CodeTabsComponent({
|
|||
<IntComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -449,25 +535,40 @@ export default function CodeTabsComponent({
|
|||
"prompt" ? (
|
||||
<ShadTooltip
|
||||
content={tweaks.buildContent(
|
||||
tweaks.getValue(
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<PromptAreaComponent
|
||||
editNode={true}
|
||||
disabled={false}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[
|
||||
n
|
||||
].value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -493,13 +594,27 @@ export default function CodeTabsComponent({
|
|||
<CodeAreaComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[
|
||||
n
|
||||
].value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { FloatComponentType } from "../../types/components";
|
||||
|
||||
export default function FloatComponent({
|
||||
|
|
@ -11,12 +11,6 @@ export default function FloatComponent({
|
|||
const min = 0;
|
||||
const max = 1;
|
||||
|
||||
const [myValue, setMyValue] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
setMyValue(value);
|
||||
}, [value]);
|
||||
|
||||
// Clear component state
|
||||
useEffect(() => {
|
||||
if (disabled) {
|
||||
|
|
@ -39,7 +33,7 @@ export default function FloatComponent({
|
|||
}
|
||||
}}
|
||||
max={max}
|
||||
value={myValue ?? ""}
|
||||
value={value ?? ""}
|
||||
className={
|
||||
"nopan nodrag noundo nocopy " +
|
||||
(editNode
|
||||
|
|
@ -51,7 +45,6 @@ export default function FloatComponent({
|
|||
}
|
||||
onChange={(e) => {
|
||||
onChange(e.target.value);
|
||||
setMyValue(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,6 @@ export default function InputComponent({
|
|||
editNode = false,
|
||||
}: InputComponentType) {
|
||||
const [pwdVisible, setPwdVisible] = useState(false);
|
||||
const [myValue, setMyValue] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
setMyValue(value);
|
||||
}, [value]);
|
||||
|
||||
// Clear component state
|
||||
useEffect(() => {
|
||||
|
|
@ -26,7 +21,7 @@ export default function InputComponent({
|
|||
return (
|
||||
<div className={disabled ? "input-component-div" : "relative"}>
|
||||
<input
|
||||
value={myValue}
|
||||
value={value}
|
||||
className={classNames(
|
||||
disabled ? " input-disable " : "",
|
||||
password && !pwdVisible && value !== "" ? " text-clip password " : "",
|
||||
|
|
@ -38,7 +33,6 @@ export default function InputComponent({
|
|||
placeholder={password && editNode ? "Key" : "Type something..."}
|
||||
onChange={(e) => {
|
||||
onChange(e.target.value);
|
||||
setMyValue(e.target.value);
|
||||
}}
|
||||
/>
|
||||
{password && (
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { useContext, useEffect, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { InputListComponentType } from "../../types/components";
|
||||
|
||||
import _ from "lodash";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import IconComponent from "../genericIconComponent";
|
||||
|
||||
export default function InputListComponent({
|
||||
|
|
@ -11,21 +10,11 @@ export default function InputListComponent({
|
|||
disabled,
|
||||
editNode = false,
|
||||
}: InputListComponentType) {
|
||||
const [inputList, setInputList] = useState(value ?? [""]);
|
||||
const { closeEdit } = useContext(PopUpContext);
|
||||
|
||||
useEffect(() => {
|
||||
if (value) {
|
||||
setInputList(value);
|
||||
}
|
||||
}, [closeEdit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (disabled) {
|
||||
setInputList([""]);
|
||||
onChange([""]);
|
||||
}
|
||||
}, [disabled, onChange]);
|
||||
}, [disabled]);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -34,7 +23,7 @@ export default function InputListComponent({
|
|||
"flex flex-col gap-3"
|
||||
}
|
||||
>
|
||||
{inputList.map((i, idx) => {
|
||||
{value.map((i, idx) => {
|
||||
return (
|
||||
<div key={idx} className="flex w-full gap-3">
|
||||
<input
|
||||
|
|
@ -48,23 +37,17 @@ export default function InputListComponent({
|
|||
}
|
||||
placeholder="Type something..."
|
||||
onChange={(e) => {
|
||||
setInputList((old) => {
|
||||
let newInputList = _.cloneDeep(inputList);
|
||||
newInputList[idx] = e.target.value;
|
||||
return newInputList;
|
||||
});
|
||||
onChange(inputList);
|
||||
let newInputList = _.cloneDeep(value);
|
||||
newInputList[idx] = e.target.value;
|
||||
onChange(newInputList);
|
||||
}}
|
||||
/>
|
||||
{idx === inputList.length - 1 ? (
|
||||
{idx === value.length - 1 ? (
|
||||
<button
|
||||
onClick={() => {
|
||||
setInputList((old) => {
|
||||
let newInputList = _.cloneDeep(old);
|
||||
newInputList.push("");
|
||||
return newInputList;
|
||||
});
|
||||
onChange(inputList);
|
||||
let newInputList = _.cloneDeep(value);
|
||||
newInputList.push("");
|
||||
onChange(newInputList);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
|
|
@ -75,12 +58,9 @@ export default function InputListComponent({
|
|||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
setInputList((old) => {
|
||||
let newInputList = _.cloneDeep(old);
|
||||
newInputList.splice(idx, 1);
|
||||
return newInputList;
|
||||
});
|
||||
onChange(inputList);
|
||||
let newInputList = _.cloneDeep(value);
|
||||
newInputList.splice(idx, 1);
|
||||
onChange(newInputList);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { FloatComponentType } from "../../types/components";
|
||||
|
||||
export default function IntComponent({
|
||||
|
|
@ -9,12 +9,6 @@ export default function IntComponent({
|
|||
}: FloatComponentType) {
|
||||
const min = 0;
|
||||
|
||||
const [myValue, setMyValue] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
setMyValue(value);
|
||||
}, [value]);
|
||||
|
||||
// Clear component state
|
||||
useEffect(() => {
|
||||
if (disabled) {
|
||||
|
|
@ -56,7 +50,7 @@ export default function IntComponent({
|
|||
e.target.value = min.toString();
|
||||
}
|
||||
}}
|
||||
value={myValue ?? ""}
|
||||
value={value ?? ""}
|
||||
className={
|
||||
"nopan nodrag noundo nocopy " +
|
||||
(editNode
|
||||
|
|
@ -66,7 +60,6 @@ export default function IntComponent({
|
|||
placeholder={editNode ? "Integer number" : "Type an integer number"}
|
||||
onChange={(e) => {
|
||||
onChange(e.target.value);
|
||||
setMyValue(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { ToggleComponentType } from "../../types/components";
|
||||
import { Switch } from "../ui/switch";
|
||||
|
||||
|
|
@ -27,12 +26,6 @@ export default function ToggleShadComponent({
|
|||
scaleY = 1;
|
||||
}
|
||||
|
||||
const [myValue, setMyValue] = useState(enabled);
|
||||
|
||||
useEffect(() => {
|
||||
setMyValue(enabled);
|
||||
}, [enabled]);
|
||||
|
||||
return (
|
||||
<div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
|
||||
<Switch
|
||||
|
|
@ -41,10 +34,9 @@ export default function ToggleShadComponent({
|
|||
}}
|
||||
disabled={disabled}
|
||||
className=""
|
||||
checked={myValue}
|
||||
checked={enabled}
|
||||
onCheckedChange={(x: boolean) => {
|
||||
setEnabled(x);
|
||||
setMyValue(x);
|
||||
}}
|
||||
></Switch>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,11 +22,10 @@ import {
|
|||
TableRow,
|
||||
} from "../../components/ui/table";
|
||||
import { limitScrollFieldsModal } from "../../constants/constants";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
import { typesContext } from "../../contexts/typesContext";
|
||||
import { NodeDataType } from "../../types/flow";
|
||||
import { classNames, getRandomKeyByssmm } from "../../utils/utils";
|
||||
import { classNames } from "../../utils/utils";
|
||||
import BaseModal from "../baseModal";
|
||||
|
||||
const EditNodeModal = forwardRef(
|
||||
|
|
@ -48,7 +47,6 @@ const EditNodeModal = forwardRef(
|
|||
const [myData, setMyData] = useState(data);
|
||||
const { setTabsState, tabId } = useContext(TabsContext);
|
||||
const { reactFlowInstance } = useContext(typesContext);
|
||||
const { setCloseEdit } = useContext(PopUpContext);
|
||||
|
||||
let disabled =
|
||||
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
|
||||
|
|
@ -72,7 +70,6 @@ const EditNodeModal = forwardRef(
|
|||
|
||||
useEffect(() => {
|
||||
setMyData(data); // reset data to what it is on node when opening modal
|
||||
setCloseEdit(getRandomKeyByssmm().toString());
|
||||
}, [modalOpen]);
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue