jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

open pop up on input click

Browse source
This commit is contained in:
anovazzi1 2023-04-13 00:52:35 -03:00
commit 040695dfa6
5 changed files with 106 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -19,9 +19,24 @@ export default function CodeAreaComponent({
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"}> <div
className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
}
>
<div className="w-full flex items-center gap-3"> <div className="w-full flex items-center gap-3">
<span <span
onClick={() => {
openPopUp(
<CodeAreaModal
value={myValue}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
/>
);
}}
className={ className={
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") (disabled ? " bg-gray-200" : "")

1
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -69,6 +69,7 @@ export default function InputFileComponent({
> >
<div className="w-full flex items-center gap-3"> <div className="w-full flex items-center gap-3">
<span <span
onClick={handleButtonClick}
className={ className={
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") (disabled ? " bg-gray-200" : "")

83
src/frontend/src/components/promptComponent/index.tsx
View file

@ -6,30 +6,61 @@ import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
import PromptAreaModal from "../../modals/promptModal"; import PromptAreaModal from "../../modals/promptModal";
export default function PromptAreaComponent({ value, onChange, disabled }:TextAreaComponentType) { export default function PromptAreaComponent({
const [myValue, setMyValue] = useState(value); value,
const { openPopUp } = useContext(PopUpContext); onChange,
useEffect(() => { disabled,
if (disabled) { }: TextAreaComponentType) {
setMyValue(""); const [myValue, setMyValue] = useState(value);
onChange(""); const { openPopUp } = useContext(PopUpContext);
} useEffect(() => {
}, [disabled, onChange]); if (disabled) {
return ( setMyValue("");
<div className={disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"}> onChange("");
<div className="w-full flex items-center gap-3"> }
<span }, [disabled, onChange]);
className={ return (
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + <div
(disabled ? " bg-gray-200" : "") className={
} disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
> }
{myValue !== "" ? myValue : 'Text empty'} >
</span> <div className="w-full flex items-center gap-3">
<button onClick={()=>{openPopUp(<PromptAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}> <span
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" /> onClick={() => {
</button> openPopUp(
</div> <PromptAreaModal
</div> value={myValue}
); setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
/>
);
}}
className={
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}
>
{myValue !== "" ? myValue : "Text empty"}
</span>
<button
onClick={() => {
openPopUp(
<PromptAreaModal
value={myValue}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
/>
);
}}
>
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
</button>
</div>
</div>
);
} }

2
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -16,7 +16,7 @@ export default function TextAreaComponent({ value, onChange, disabled }:TextArea
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<div className="w-full flex items-center gap-3"> <div className="w-full flex items-center gap-3">
<span <span onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}
className={ className={
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") (disabled ? " bg-gray-200" : "")

59
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -87,34 +87,37 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="overflow-hidden px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-gray-800 shadow"> <div className="overflow-hidden px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
<div className="flex flex-col h-full gap-5"> <div className="flex flex-col h-full gap-5">
{Object.keys(data.node.template) {
.filter((t) => t.charAt(0) !== "_") //&& data.node.template[t].advanced
.map((t: string, idx) => { Object.keys(data.node.template)
return ( .filter((t) => t.charAt(0) !== "_")
<ModalField .map((t: string, idx) => {
data={data} return (
title={ <ModalField
data.node.template[t].display_name data={data}
? data.node.template[t].display_name title={
: data.node.template[t].name data.node.template[t].display_name
? snakeToNormalCase( ? data.node.template[t].display_name
data.node.template[t].name : data.node.template[t].name
) ? snakeToNormalCase(
: snakeToNormalCase(t) data.node.template[t].name
} )
required={data.node.template[t].required} : snakeToNormalCase(t)
id={ }
data.node.template[t].type + required={data.node.template[t].required}
"|" + id={
t + data.node.template[t].type +
"|" + "|" +
data.id t +
} "|" +
name={t} data.id
type={data.node.template[t].type} }
/> name={t}
); type={data.node.template[t].type}
})} />
);
})
}
</div> </div>
</div> </div>
</div> </div>