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

first styling in nodeModal

Browse source
This commit is contained in:
anovazzi1 2023-04-12 19:57:52 -03:00
commit efbb5ff763
2 changed files with 66 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -122,7 +122,7 @@ export default function GenericNode({
))} ))}
<div <div
className={classNames( className={classNames(
Object.keys(data.node.template).length < 4 ? "hidden" : "", Object.keys(data.node.template).length < 1 ? "hidden" : "",
"w-full flex justify-center" "w-full flex justify-center"
)} )}
> >
@ -135,7 +135,7 @@ export default function GenericNode({
className="hover:text-blue-500" className="hover:text-blue-500"
> >
{" "} {" "}
see all{" "} show advanced{" "}
</button> </button>
</div> </div>
<div className="px-5 py-2 mt-2 dark:text-white text-center"> <div className="px-5 py-2 mt-2 dark:text-white text-center">

100
src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
View file

@ -8,6 +8,8 @@ import ToggleComponent from "../../../../components/toggleComponent";
import FloatComponent from "../../../../components/floatComponent"; import FloatComponent from "../../../../components/floatComponent";
import IntComponent from "../../../../components/intComponent"; import IntComponent from "../../../../components/intComponent";
import InputFileComponent from "../../../../components/inputFileComponent"; import InputFileComponent from "../../../../components/inputFileComponent";
import PromptAreaComponent from "../../../../components/promptComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent";
export default function ModalField({ data, title, required, id, name, type }) { export default function ModalField({ data, title, required, id, name, type }) {
const { save } = useContext(TabsContext); const { save } = useContext(TabsContext);
@ -16,9 +18,10 @@ export default function ModalField({ data, title, required, id, name, type }) {
); );
return ( return (
<div> <div className="flex my-3 flex-row w-full whitespace-nowrap items-center">
<span className="mx-2">{title}</span>
{type === "str" && !data.node.template[name].options ? ( {type === "str" && !data.node.template[name].options ? (
<div> <div className="w-full">
{data.node.template[name].list ? ( {data.node.template[name].list ? (
<InputListComponent <InputListComponent
disabled={false} disabled={false}
@ -34,15 +37,14 @@ export default function ModalField({ data, title, required, id, name, type }) {
}} }}
/> />
) : data.node.template[name].multiline ? ( ) : data.node.template[name].multiline ? (
// <TextAreaComponent <TextAreaComponent
// disabled={false} disabled={false}
// value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
// onChange={(t: string) => { onChange={(t: string) => {
// data.node.template[name].value = t; data.node.template[name].value = t;
// save(); save();
// }} }}
// /> />
<div>text area component</div>
) : ( ) : (
<InputComponent <InputComponent
disabled={false} disabled={false}
@ -56,7 +58,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
)} )}
</div> </div>
) : type === "bool" ? ( ) : type === "bool" ? (
<div> <div className="ml-auto">
{" "} {" "}
<ToggleComponent <ToggleComponent
disabled={false} disabled={false}
@ -69,30 +71,37 @@ export default function ModalField({ data, title, required, id, name, type }) {
/> />
</div> </div>
) : type === "float" ? ( ) : type === "float" ? (
<FloatComponent <div className="w-full">
disabled={false} <FloatComponent
value={data.node.template[name].value ?? ""} disabled={false}
onChange={(t) => { value={data.node.template[name].value ?? ""}
data.node.template[name].value = t; onChange={(t) => {
save(); data.node.template[name].value = t;
}} save();
/> }}
/>
</div>
) : type === "str" && data.node.template[name].options ? ( ) : type === "str" && data.node.template[name].options ? (
<Dropdown <div className="w-full">
options={data.node.template[name].options} <Dropdown
onSelect={(newValue) => (data.node.template[name].value = newValue)} options={data.node.template[name].options}
value={data.node.template[name].value ?? "Choose an option"} onSelect={(newValue) => (data.node.template[name].value = newValue)}
></Dropdown> value={data.node.template[name].value ?? "Choose an option"}
></Dropdown>
</div>
) : type === "int" ? ( ) : type === "int" ? (
<IntComponent <div className="w-full">
disabled={false} <IntComponent
value={data.node.template[name].value ?? ""} disabled={false}
onChange={(t) => { value={data.node.template[name].value ?? ""}
data.node.template[name].value = t; onChange={(t) => {
save(); data.node.template[name].value = t;
}} save();
/> }}
/>
</div>
) : type === "file" ? ( ) : type === "file" ? (
<div className="w-full">
<InputFileComponent <InputFileComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
@ -106,12 +115,31 @@ export default function ModalField({ data, title, required, id, name, type }) {
save(); save();
}} }}
></InputFileComponent> ></InputFileComponent>
</div>
) : type === "prompt" ? ( ) : type === "prompt" ? (
<div>code</div> <div className="w-full">
<PromptAreaComponent
disabled={false}
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
save();
}}
/>
</div>
) : type === "code" ? ( ) : type === "code" ? (
<div>code</div> <div className="w-full">
<CodeAreaComponent
disabled={false}
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
save();
}}
/>
</div>
) : ( ) : (
<div>{name}</div> <div>{type}</div>
)} )}
</div> </div>
); );