🔨 refactor(codeTabsComponent): remove unused import of ShadTooltip component to improve code cleanliness and reduce bundle size
🔨 refactor(codeTabsComponent): remove unnecessary wrapping of TextAreaComponent and InputFileComponent components with ShadTooltip component to simplify code structure and improve performance 🔨 refactor(codeTabsComponent): remove unused onChange handlers in TextAreaComponent and InputFileComponent components to remove unnecessary code and improve code readability 🔨 refactor(codeTabsComponent): remove unnecessary className attribute in InputFileComponent component to remove redundant styling 🔨 refactor(codeTabsComponent): remove unused useEffect and useState imports to remove unnecessary code and improve code readability 🐛 fix(codeTabsComponent): fix JSX syntax error and improve code readability ✨ feat(codeTabsComponent): refactor codeTabsComponent to use separate components for different template types
This commit is contained in:
Cristhian Zanforlin Lousa
parent
921af848b7
commit
76e0c6546a
1 changed files with 216 additions and 285 deletions
|
|
@ -3,7 +3,6 @@ import { useContext, useEffect, useState } from "react";
|
||||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||||
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
||||||
import AccordionComponent from "../../components/AccordionComponent";
|
import AccordionComponent from "../../components/AccordionComponent";
|
||||||
import ShadTooltip from "../../components/ShadTooltipComponent";
|
|
||||||
import CodeAreaComponent from "../../components/codeAreaComponent";
|
import CodeAreaComponent from "../../components/codeAreaComponent";
|
||||||
import Dropdown from "../../components/dropdownComponent";
|
import Dropdown from "../../components/dropdownComponent";
|
||||||
import FloatComponent from "../../components/floatComponent";
|
import FloatComponent from "../../components/floatComponent";
|
||||||
|
|
@ -322,55 +321,46 @@ export default function CodeTabsComponent({
|
||||||
) : node.data.node.template[
|
) : node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].multiline ? (
|
].multiline ? (
|
||||||
<ShadTooltip
|
<div>
|
||||||
content={tweaks.buildContent!(
|
<TextAreaComponent
|
||||||
node.data.node.template[
|
disabled={false}
|
||||||
templateField
|
editNode={true}
|
||||||
].value
|
value={
|
||||||
)}
|
!node.data.node
|
||||||
>
|
.template[
|
||||||
<div>
|
templateField
|
||||||
<TextAreaComponent
|
].value ||
|
||||||
disabled={false}
|
node.data.node.template[
|
||||||
editNode={true}
|
templateField
|
||||||
value={
|
].value === ""
|
||||||
!node.data.node
|
? ""
|
||||||
.template[
|
: node.data.node
|
||||||
|
.template[
|
||||||
|
templateField
|
||||||
|
].value
|
||||||
|
}
|
||||||
|
onChange={(target) => {
|
||||||
|
setData((old) => {
|
||||||
|
let newInputList =
|
||||||
|
cloneDeep(old);
|
||||||
|
newInputList![
|
||||||
|
i
|
||||||
|
].data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].value ||
|
].value = target;
|
||||||
|
return newInputList;
|
||||||
|
});
|
||||||
|
tweaks.buildTweakObject!(
|
||||||
|
node["data"]["id"],
|
||||||
|
target,
|
||||||
node.data.node
|
node.data.node
|
||||||
.template[
|
.template[
|
||||||
templateField
|
templateField
|
||||||
].value === ""
|
]
|
||||||
? ""
|
);
|
||||||
: node.data.node
|
}}
|
||||||
.template[
|
/>
|
||||||
templateField
|
</div>
|
||||||
].value
|
|
||||||
}
|
|
||||||
onChange={(target) => {
|
|
||||||
setData((old) => {
|
|
||||||
let newInputList =
|
|
||||||
cloneDeep(old);
|
|
||||||
newInputList![
|
|
||||||
i
|
|
||||||
].data.node.template[
|
|
||||||
templateField
|
|
||||||
].value = target;
|
|
||||||
return newInputList;
|
|
||||||
});
|
|
||||||
tweaks.buildTweakObject!(
|
|
||||||
node["data"]["id"],
|
|
||||||
target,
|
|
||||||
node.data.node
|
|
||||||
.template[
|
|
||||||
templateField
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
) : (
|
) : (
|
||||||
<InputComponent
|
<InputComponent
|
||||||
editNode={true}
|
editNode={true}
|
||||||
|
|
@ -452,52 +442,35 @@ export default function CodeTabsComponent({
|
||||||
) : node.data.node.template[
|
) : node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].type === "file" ? (
|
].type === "file" ? (
|
||||||
<ShadTooltip
|
<div className="mx-auto">
|
||||||
content={tweaks.buildContent!(
|
<InputFileComponent
|
||||||
!node.data.node.template[
|
editNode={true}
|
||||||
templateField
|
disabled={false}
|
||||||
].value ||
|
value={
|
||||||
node.data.node.template[
|
node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].value === ""
|
].value ?? ""
|
||||||
? ""
|
}
|
||||||
: node.data.node.template[
|
onChange={(target: any) => {}}
|
||||||
templateField
|
fileTypes={
|
||||||
].value
|
node.data.node.template[
|
||||||
)}
|
templateField
|
||||||
>
|
].fileTypes
|
||||||
<div className="mx-auto">
|
}
|
||||||
<InputFileComponent
|
suffixes={
|
||||||
editNode={true}
|
node.data.node.template[
|
||||||
disabled={false}
|
templateField
|
||||||
value={
|
].suffixes
|
||||||
node.data.node.template[
|
}
|
||||||
templateField
|
onFileChange={(
|
||||||
].value ?? ""
|
value: any
|
||||||
}
|
) => {
|
||||||
onChange={(
|
node.data.node.template[
|
||||||
target: any
|
templateField
|
||||||
) => {}}
|
].file_path = value;
|
||||||
fileTypes={
|
}}
|
||||||
node.data.node.template[
|
></InputFileComponent>
|
||||||
templateField
|
</div>
|
||||||
].fileTypes
|
|
||||||
}
|
|
||||||
suffixes={
|
|
||||||
node.data.node.template[
|
|
||||||
templateField
|
|
||||||
].suffixes
|
|
||||||
}
|
|
||||||
onFileChange={(
|
|
||||||
value: any
|
|
||||||
) => {
|
|
||||||
node.data.node.template[
|
|
||||||
templateField
|
|
||||||
].file_path = value;
|
|
||||||
}}
|
|
||||||
></InputFileComponent>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
) : node.data.node.template[
|
) : node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].type === "float" ? (
|
].type === "float" ? (
|
||||||
|
|
@ -629,223 +602,181 @@ export default function CodeTabsComponent({
|
||||||
) : node.data.node.template[
|
) : node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].type === "prompt" ? (
|
].type === "prompt" ? (
|
||||||
<ShadTooltip
|
<div className="mx-auto">
|
||||||
content={tweaks.buildContent!(
|
<PromptAreaComponent
|
||||||
!node.data.node.template[
|
editNode={true}
|
||||||
templateField
|
disabled={false}
|
||||||
].value ||
|
value={
|
||||||
|
!node.data.node.template[
|
||||||
|
templateField
|
||||||
|
].value ||
|
||||||
node.data.node.template[
|
node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].value === ""
|
].value === ""
|
||||||
? ""
|
? ""
|
||||||
: node.data.node.template[
|
: node.data.node.template[
|
||||||
|
templateField
|
||||||
|
].value
|
||||||
|
}
|
||||||
|
onChange={(target) => {
|
||||||
|
setData((old) => {
|
||||||
|
let newInputList =
|
||||||
|
cloneDeep(old);
|
||||||
|
newInputList![
|
||||||
|
i
|
||||||
|
].data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].value
|
].value = target;
|
||||||
)}
|
return newInputList;
|
||||||
>
|
});
|
||||||
<div className="mx-auto">
|
tweaks.buildTweakObject!(
|
||||||
<PromptAreaComponent
|
node["data"]["id"],
|
||||||
editNode={true}
|
target,
|
||||||
disabled={false}
|
|
||||||
value={
|
|
||||||
!node.data.node.template[
|
|
||||||
templateField
|
|
||||||
].value ||
|
|
||||||
node.data.node.template[
|
node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].value === ""
|
]
|
||||||
? ""
|
);
|
||||||
: node.data.node
|
}}
|
||||||
.template[
|
/>
|
||||||
templateField
|
</div>
|
||||||
].value
|
|
||||||
}
|
|
||||||
onChange={(target) => {
|
|
||||||
setData((old) => {
|
|
||||||
let newInputList =
|
|
||||||
cloneDeep(old);
|
|
||||||
newInputList![
|
|
||||||
i
|
|
||||||
].data.node.template[
|
|
||||||
templateField
|
|
||||||
].value = target;
|
|
||||||
return newInputList;
|
|
||||||
});
|
|
||||||
tweaks.buildTweakObject!(
|
|
||||||
node["data"]["id"],
|
|
||||||
target,
|
|
||||||
node.data.node.template[
|
|
||||||
templateField
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
) : node.data.node.template[
|
) : node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].type === "code" ? (
|
].type === "code" ? (
|
||||||
<ShadTooltip
|
<div className="mx-auto">
|
||||||
content={tweaks.buildContent!(
|
<CodeAreaComponent
|
||||||
tweaks.getValue!(
|
disabled={false}
|
||||||
|
editNode={true}
|
||||||
|
value={
|
||||||
|
!node.data.node.template[
|
||||||
|
templateField
|
||||||
|
].value ||
|
||||||
node.data.node.template[
|
node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].value,
|
].value === ""
|
||||||
node.data,
|
? ""
|
||||||
node.data.node.template[
|
: node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
]
|
].value
|
||||||
)
|
}
|
||||||
)}
|
onChange={(target) => {
|
||||||
>
|
setData((old) => {
|
||||||
<div className="mx-auto">
|
let newInputList =
|
||||||
<CodeAreaComponent
|
cloneDeep(old);
|
||||||
disabled={false}
|
newInputList![
|
||||||
editNode={true}
|
i
|
||||||
value={
|
].data.node.template[
|
||||||
!node.data.node.template[
|
|
||||||
templateField
|
templateField
|
||||||
].value ||
|
].value = target;
|
||||||
|
return newInputList;
|
||||||
|
});
|
||||||
|
tweaks.buildTweakObject!(
|
||||||
|
node["data"]["id"],
|
||||||
|
target,
|
||||||
node.data.node.template[
|
node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].value === ""
|
]
|
||||||
? ""
|
);
|
||||||
: node.data.node
|
}}
|
||||||
.template[
|
/>
|
||||||
templateField
|
</div>
|
||||||
].value
|
|
||||||
}
|
|
||||||
onChange={(target) => {
|
|
||||||
setData((old) => {
|
|
||||||
let newInputList =
|
|
||||||
cloneDeep(old);
|
|
||||||
newInputList![
|
|
||||||
i
|
|
||||||
].data.node.template[
|
|
||||||
templateField
|
|
||||||
].value = target;
|
|
||||||
return newInputList;
|
|
||||||
});
|
|
||||||
tweaks.buildTweakObject!(
|
|
||||||
node["data"]["id"],
|
|
||||||
target,
|
|
||||||
node.data.node.template[
|
|
||||||
templateField
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
) : node.data.node.template[
|
) : node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].type === "dict" ? (
|
].type === "dict" ? (
|
||||||
<ShadTooltip
|
<div className="mx-auto max-h-48 overflow-auto custom-scroll">
|
||||||
content={tweaks.buildContent!(
|
<KeypairListComponent
|
||||||
tweaks.getValue!(
|
disabled={false}
|
||||||
node.data.node.template[
|
editNode={true}
|
||||||
|
value={
|
||||||
|
node.data.node!.template[
|
||||||
templateField
|
templateField
|
||||||
].value,
|
].value?.length === 0 ||
|
||||||
node.data,
|
!node.data.node!.template[
|
||||||
node.data.node.template[
|
|
||||||
templateField
|
templateField
|
||||||
]
|
].value
|
||||||
)
|
? [{ "": "" }]
|
||||||
)}
|
: convertObjToArray(
|
||||||
>
|
node.data.node!
|
||||||
<div className="mx-auto max-h-48 overflow-auto custom-scroll">
|
|
||||||
<KeypairListComponent
|
|
||||||
disabled={false}
|
|
||||||
editNode={true}
|
|
||||||
value={
|
|
||||||
node.data.node!.template[
|
|
||||||
templateField
|
|
||||||
].value?.length === 0 ||
|
|
||||||
!node.data.node!.template[
|
|
||||||
templateField
|
|
||||||
].value
|
|
||||||
? [{ "": "" }]
|
|
||||||
: convertObjToArray(
|
|
||||||
node.data.node!
|
|
||||||
.template[
|
|
||||||
templateField
|
|
||||||
].value
|
|
||||||
)
|
|
||||||
}
|
|
||||||
duplicateKey={
|
|
||||||
errorDuplicateKey
|
|
||||||
}
|
|
||||||
onChange={(target) => {
|
|
||||||
const valueToNumbers =
|
|
||||||
convertValuesToNumbers(
|
|
||||||
target
|
|
||||||
);
|
|
||||||
node.data.node!.template[
|
|
||||||
templateField
|
|
||||||
].value = valueToNumbers;
|
|
||||||
setErrorDuplicateKey(
|
|
||||||
hasDuplicateKeys(
|
|
||||||
valueToNumbers
|
|
||||||
)
|
|
||||||
);
|
|
||||||
setData((old) => {
|
|
||||||
let newInputList =
|
|
||||||
cloneDeep(old);
|
|
||||||
newInputList![
|
|
||||||
i
|
|
||||||
].data.node.template[
|
|
||||||
templateField
|
|
||||||
].value = target;
|
|
||||||
return newInputList;
|
|
||||||
});
|
|
||||||
tweaks.buildTweakObject!(
|
|
||||||
node["data"]["id"],
|
|
||||||
target,
|
|
||||||
node.data.node.template[
|
|
||||||
templateField
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
) : node.data.node.template[
|
|
||||||
templateField
|
|
||||||
].type === "NestedDict" ? (
|
|
||||||
<ShadTooltip
|
|
||||||
content={tweaks.buildContent!(
|
|
||||||
tweaks.getValue!(
|
|
||||||
node.data.node.template[
|
|
||||||
templateField
|
|
||||||
].value,
|
|
||||||
node.data,
|
|
||||||
node.data.node.template[
|
|
||||||
templateField
|
|
||||||
]
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="mx-auto">
|
|
||||||
<DictComponent
|
|
||||||
disabled={false}
|
|
||||||
editNode={true}
|
|
||||||
value={
|
|
||||||
node.data.node!.template[
|
|
||||||
templateField
|
|
||||||
].value.toString() ===
|
|
||||||
"{}"
|
|
||||||
? {
|
|
||||||
yourkey: "value",
|
|
||||||
}
|
|
||||||
: node.data.node!
|
|
||||||
.template[
|
.template[
|
||||||
templateField
|
templateField
|
||||||
].value
|
].value
|
||||||
}
|
)
|
||||||
onChange={(target) => {}}
|
}
|
||||||
/>
|
duplicateKey={
|
||||||
</div>
|
errorDuplicateKey
|
||||||
</ShadTooltip>
|
}
|
||||||
|
onChange={(target) => {
|
||||||
|
const valueToNumbers =
|
||||||
|
convertValuesToNumbers(
|
||||||
|
target
|
||||||
|
);
|
||||||
|
node.data.node!.template[
|
||||||
|
templateField
|
||||||
|
].value = valueToNumbers;
|
||||||
|
setErrorDuplicateKey(
|
||||||
|
hasDuplicateKeys(
|
||||||
|
valueToNumbers
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setData((old) => {
|
||||||
|
let newInputList =
|
||||||
|
cloneDeep(old);
|
||||||
|
newInputList![
|
||||||
|
i
|
||||||
|
].data.node.template[
|
||||||
|
templateField
|
||||||
|
].value = target;
|
||||||
|
return newInputList;
|
||||||
|
});
|
||||||
|
tweaks.buildTweakObject!(
|
||||||
|
node["data"]["id"],
|
||||||
|
target,
|
||||||
|
node.data.node.template[
|
||||||
|
templateField
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : node.data.node.template[
|
||||||
|
templateField
|
||||||
|
].type === "NestedDict" ? (
|
||||||
|
<div className="mx-auto">
|
||||||
|
<DictComponent
|
||||||
|
disabled={false}
|
||||||
|
editNode={true}
|
||||||
|
value={
|
||||||
|
node.data.node!.template[
|
||||||
|
templateField
|
||||||
|
].value.toString() === "{}"
|
||||||
|
? {
|
||||||
|
yourkey: "value",
|
||||||
|
}
|
||||||
|
: node.data.node!
|
||||||
|
.template[
|
||||||
|
templateField
|
||||||
|
].value
|
||||||
|
}
|
||||||
|
onChange={(target) => {
|
||||||
|
setData((old) => {
|
||||||
|
let newInputList =
|
||||||
|
cloneDeep(old);
|
||||||
|
newInputList![
|
||||||
|
i
|
||||||
|
].data.node.template[
|
||||||
|
templateField
|
||||||
|
].value = target;
|
||||||
|
return newInputList;
|
||||||
|
});
|
||||||
|
tweaks.buildTweakObject!(
|
||||||
|
node["data"]["id"],
|
||||||
|
target,
|
||||||
|
node.data.node.template[
|
||||||
|
templateField
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
) : node.data.node.template[
|
) : node.data.node.template[
|
||||||
templateField
|
templateField
|
||||||
].type === "Any" ? (
|
].type === "Any" ? (
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue