40798c5b5a* refactor to improve readability * refactor to improve readability * refactor to improve readability * refactor to improve readability * refactor to improve readability * refactor to improve readability * refactor to improve readability * refactor to improve readability * ✅ (Simple Agent.spec.ts): update expected count of python words to 2 for accurate test results 📝 (auto-login-off.spec.ts): add a 1-second timeout before checking visibility of a text element to ensure proper rendering and improve test reliability * 📝 (cardComponent/index.tsx): Extract handlePlaygroundClick function to improve code readability and maintainability 📝 (codeAreaComponent/index.tsx): Refactor code to use consistent naming conventions and improve code structure 📝 (rename-label.tsx): Refactor code to use consistent naming conventions and improve code structure 📝 (dictAreaModal/index.tsx): Refactor code to use consistent naming conventions and improve code structure * 🔧 (rename-label.tsx): Refactor RenameLabel component to improve readability and maintainability by restructuring the component logic into separate functions for handling blur, change, and double click events. Split the component rendering logic into separate functions for input and span elements. * update type * [autofix.ci] apply automated fixes --------- Co-authored-by: anovazzi1 <otavio2204@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
87 lines
2.1 KiB
TypeScript
87 lines
2.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import CodeAreaModal from "../../modals/codeAreaModal";
|
|
import { CodeAreaComponentType } from "../../types/components";
|
|
import { cn } from "../../utils/utils";
|
|
|
|
import IconComponent from "../genericIconComponent";
|
|
|
|
export default function CodeAreaComponent({
|
|
value,
|
|
onChange,
|
|
disabled,
|
|
editNode = false,
|
|
nodeClass,
|
|
dynamic,
|
|
setNodeClass,
|
|
id = "",
|
|
readonly = false,
|
|
open,
|
|
setOpen,
|
|
}: CodeAreaComponentType) {
|
|
const [componentValue, setComponentValue] = useState(
|
|
typeof value == "string" ? value : JSON.stringify(value),
|
|
);
|
|
useEffect(() => {
|
|
if (disabled && componentValue !== "") {
|
|
setComponentValue("");
|
|
onChange("", undefined, true);
|
|
}
|
|
}, [disabled]);
|
|
|
|
useEffect(() => {
|
|
setComponentValue(typeof value == "string" ? value : JSON.stringify(value));
|
|
}, [value]);
|
|
|
|
const handleValueChange = (newValue) => {
|
|
onChange(newValue);
|
|
};
|
|
|
|
const renderInputText = () => (
|
|
<span
|
|
id={id}
|
|
data-testid={id}
|
|
className={cn(
|
|
editNode
|
|
? "input-edit-node input-dialog"
|
|
: "primary-input text-muted-foreground",
|
|
disabled && !editNode && "input-disable input-ring",
|
|
)}
|
|
>
|
|
{value !== "" ? value : "Type something..."}
|
|
</span>
|
|
);
|
|
|
|
const renderExternalLinkIcon = () => {
|
|
if (editNode) return null;
|
|
|
|
return (
|
|
<IconComponent
|
|
name="ExternalLink"
|
|
className={cn(
|
|
"icons-parameters-comp shrink-0",
|
|
disabled ? "text-ring" : "hover:text-accent-foreground",
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className={cn("w-full", disabled && "pointer-events-none")}>
|
|
<CodeAreaModal
|
|
open={open}
|
|
setOpen={setOpen}
|
|
readonly={readonly}
|
|
dynamic={dynamic}
|
|
value={value}
|
|
nodeClass={nodeClass}
|
|
setNodeClass={setNodeClass!}
|
|
setValue={handleValueChange}
|
|
>
|
|
<div className="flex w-full items-center gap-3">
|
|
{renderInputText()}
|
|
{renderExternalLinkIcon()}
|
|
</div>
|
|
</CodeAreaModal>
|
|
</div>
|
|
);
|
|
}
|