🔧 fix(parameterComponent): remove console.log statement for newValue variable to clean up code
🔧 fix(keypairListComponent): refactor handleChangeKey and handleChangeValue functions to use useRef hook for value comparison and update
This commit is contained in:
parent
b4ea2478e8
commit
e183d8f4e4
2 changed files with 17 additions and 10 deletions
|
|
@ -88,8 +88,6 @@ export default function ParameterComponent({
|
||||||
const handleOnNewValue = (
|
const handleOnNewValue = (
|
||||||
newValue: string | string[] | boolean | Object[]
|
newValue: string | string[] | boolean | Object[]
|
||||||
): void => {
|
): void => {
|
||||||
console.log(newValue);
|
|
||||||
|
|
||||||
let newData = cloneDeep(data);
|
let newData = cloneDeep(data);
|
||||||
newData.node!.template[name].value = newValue;
|
newData.node!.template[name].value = newValue;
|
||||||
setData(newData);
|
setData(newData);
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { useEffect } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import { KeyPairListComponentType } from "../../types/components";
|
import { KeyPairListComponentType } from "../../types/components";
|
||||||
|
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
|
|
@ -19,8 +19,17 @@ export default function KeypairListComponent({
|
||||||
}
|
}
|
||||||
}, [disabled]);
|
}, [disabled]);
|
||||||
|
|
||||||
|
const ref = useRef(value.length === 0 ? [{ "": "" }] : value);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
|
||||||
|
ref.current = value;
|
||||||
|
onChange(value);
|
||||||
|
}
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
const handleChangeKey = (event, idx) => {
|
const handleChangeKey = (event, idx) => {
|
||||||
const newInputList = _.cloneDeep(value);
|
const newInputList = _.cloneDeep(ref.current);
|
||||||
const oldKey = Object.keys(newInputList[idx])[0];
|
const oldKey = Object.keys(newInputList[idx])[0];
|
||||||
const updatedObj = { [event.target.value]: newInputList[idx][oldKey] };
|
const updatedObj = { [event.target.value]: newInputList[idx][oldKey] };
|
||||||
newInputList[idx] = updatedObj;
|
newInputList[idx] = updatedObj;
|
||||||
|
|
@ -28,7 +37,7 @@ export default function KeypairListComponent({
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChangeValue = (newValue, idx) => {
|
const handleChangeValue = (newValue, idx) => {
|
||||||
const newInputList = _.cloneDeep(value);
|
const newInputList = _.cloneDeep(ref.current);
|
||||||
const key = Object.keys(newInputList[idx])[0];
|
const key = Object.keys(newInputList[idx])[0];
|
||||||
newInputList[idx][key] = newValue;
|
newInputList[idx][key] = newValue;
|
||||||
onChange(newInputList);
|
onChange(newInputList);
|
||||||
|
|
@ -37,11 +46,11 @@ export default function KeypairListComponent({
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
value?.length > 1 && editNode ? "my-1" : "",
|
ref.current?.length > 1 && editNode ? "my-1" : "",
|
||||||
"flex h-full flex-col gap-3"
|
"flex h-full flex-col gap-3"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{value?.map((obj, index) => {
|
{ref.current?.map((obj, index) => {
|
||||||
return Object.keys(obj).map((key, idx) => {
|
return Object.keys(obj).map((key, idx) => {
|
||||||
return (
|
return (
|
||||||
<div key={idx} className="flex w-full gap-3">
|
<div key={idx} className="flex w-full gap-3">
|
||||||
|
|
@ -72,10 +81,10 @@ export default function KeypairListComponent({
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{index === value.length - 1 ? (
|
{index === ref.current.length - 1 ? (
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
let newInputList = _.cloneDeep(value);
|
let newInputList = _.cloneDeep(ref.current);
|
||||||
newInputList.push({ "": "" });
|
newInputList.push({ "": "" });
|
||||||
onChange(newInputList);
|
onChange(newInputList);
|
||||||
}}
|
}}
|
||||||
|
|
@ -88,7 +97,7 @@ export default function KeypairListComponent({
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
let newInputList = _.cloneDeep(value);
|
let newInputList = _.cloneDeep(ref.current);
|
||||||
newInputList.splice(index, 1);
|
newInputList.splice(index, 1);
|
||||||
onChange(newInputList);
|
onChange(newInputList);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue