Text area placeholder at the parameters component done
This commit is contained in:
parent
31784f6045
commit
a97b4614d8
3 changed files with 49 additions and 8 deletions
|
|
@ -9,6 +9,7 @@ import { useEffect, useRef, useState } from "react";
|
||||||
import InputComponent from "../../../../components/inputComponent";
|
import InputComponent from "../../../../components/inputComponent";
|
||||||
import ToggleComponent from "../../../../components/toggleComponent";
|
import ToggleComponent from "../../../../components/toggleComponent";
|
||||||
import InputListComponent from "../../../../components/inputListComponent";
|
import InputListComponent from "../../../../components/inputListComponent";
|
||||||
|
import TextAreaComponent from "../../../../components/textAreaComponent";
|
||||||
|
|
||||||
export default function ParameterComponent({
|
export default function ParameterComponent({
|
||||||
left,
|
left,
|
||||||
|
|
@ -72,6 +73,15 @@ export default function ParameterComponent({
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
:
|
:
|
||||||
|
!data.node.template[name].multiline ? (
|
||||||
|
<TextAreaComponent
|
||||||
|
disabled={disabled}
|
||||||
|
value={data.node.template[name].value ?? ""}
|
||||||
|
onChange={(t) => {
|
||||||
|
data.node.template[name].value = t;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) :
|
||||||
<InputComponent
|
<InputComponent
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
value={data.node.template[name].value ?? ""}
|
value={data.node.template[name].value ?? ""}
|
||||||
|
|
|
||||||
|
|
@ -10,9 +10,10 @@ import { Handle, Position } from "reactflow";
|
||||||
import { useContext, useEffect } from "react";
|
import { useContext, useEffect } from "react";
|
||||||
import Tooltip from "../../components/TooltipComponent";
|
import Tooltip from "../../components/TooltipComponent";
|
||||||
import { typesContext } from "../../contexts/typesContext";
|
import { typesContext } from "../../contexts/typesContext";
|
||||||
|
import TextAreaComponent from "../../components/textAreaComponent";
|
||||||
|
|
||||||
export default function InputNode({ data }) {
|
export default function InputNode({ data }) {
|
||||||
const {types} = useContext(typesContext);
|
const { types } = useContext(typesContext);
|
||||||
return (
|
return (
|
||||||
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
|
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
|
||||||
<Tooltip title="Prefix: str">
|
<Tooltip title="Prefix: str">
|
||||||
|
|
@ -45,13 +46,14 @@ export default function InputNode({ data }) {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full p-5 h-full">
|
<div className="w-full p-5 h-full">
|
||||||
<InputComponent
|
|
||||||
disabled={false}
|
<InputComponent
|
||||||
value=""
|
disabled={false}
|
||||||
onChange={(e) => {
|
value=""
|
||||||
data.value = e;
|
onChange={(e) => {
|
||||||
}}
|
data.value = e;
|
||||||
/>
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Handle
|
<Handle
|
||||||
type="target"
|
type="target"
|
||||||
|
|
|
||||||
29
space_flow/src/components/textAreaComponent/index.tsx
Normal file
29
space_flow/src/components/textAreaComponent/index.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
export default function TextAreaComponent({ value, onChange, disabled }) {
|
||||||
|
const [myValue, setMyValue] = useState(value);
|
||||||
|
useEffect(() => {
|
||||||
|
if (disabled) {
|
||||||
|
setMyValue([""]);
|
||||||
|
onChange([""]);
|
||||||
|
}
|
||||||
|
}, [disabled, onChange]);
|
||||||
|
return (
|
||||||
|
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
|
||||||
|
<div className="w-full flex items-center gap-3">
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
|
||||||
|
(disabled ? " bg-gray-200" : "")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{myValue !== "" ? myValue : 'Text empty'}
|
||||||
|
</span>
|
||||||
|
<button onClick={()=>{}}>
|
||||||
|
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue