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

chore(IOInputField): rename onChange prop to updateValue for better semantics

Browse source 
chore(IOInputField): remove styleClasses and placeholder props as they are not used
chore(IOView): remove TODO comment for extending and improving view mode and adding other types of views
chore(IOView): remove unused onChange prop from IOInputProps type
This commit is contained in:
anovazzi1 2024-01-26 14:23:39 -03:00
commit 4af5aa56c2
3 changed files with 29 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/frontend/src/components/IOInputField/index.tsx
View file

@ -1,23 +1,20 @@
import { Textarea } from "../ui/textarea";
import InputFileComponent from "../inputFileComponent";
import { IOInputProps } from "../../types/components"; import { IOInputProps } from "../../types/components";
import { Textarea } from "../ui/textarea";
export default function IOInputField({ export default function IOInputField({
inputType, inputType,
value, value,
onChange, updateValue,
styleClasses,
placeholder,
}: IOInputProps): JSX.Element | undefined { }: IOInputProps): JSX.Element | undefined {
switch (inputType) { switch (inputType) {
case "TextInput": case "TextInput":
return ( return (
<Textarea <Textarea
className={styleClasses} className="custom-scroll"
placeholder={placeholder} placeholder={"Enter text..."}
value={value} value={value}
onChange={onChange} onChange={updateValue}
/> />
); );
} }
} }

28
src/frontend/src/components/IOview/index.tsx
View file

@ -4,11 +4,10 @@ import useFlowStore from "../../stores/flowStore";
import { NodeType } from "../../types/flow"; import { NodeType } from "../../types/flow";
import { extractTypeFromLongId } from "../../utils/utils"; import { extractTypeFromLongId } from "../../utils/utils";
import AccordionComponent from "../AccordionComponent"; import AccordionComponent from "../AccordionComponent";
import IOInputField from "../IOInputField";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
import NewChatView from "../newChatView"; import NewChatView from "../newChatView";
import { Badge } from "../ui/badge"; import { Badge } from "../ui/badge";
import { Textarea } from "../ui/textarea";
import IOInputField from "../IOInputField";
export default function IOView(): JSX.Element { export default function IOView(): JSX.Element {
const inputs = useFlowStore((state) => state.inputs); const inputs = useFlowStore((state) => state.inputs);
@ -18,6 +17,7 @@ export default function IOView(): JSX.Element {
const nodes = useFlowStore((state) => state.nodes); const nodes = useFlowStore((state) => state.nodes);
const setNode = useFlowStore((state) => state.setNode); const setNode = useFlowStore((state) => state.setNode);
const options = inputIds.concat(outputIds); const options = inputIds.concat(outputIds);
//TODO: show output options for view
const [selectedView, setSelectedView] = useState<ReactNode>( const [selectedView, setSelectedView] = useState<ReactNode>(
handleSelectChange(options[0]) handleSelectChange(options[0])
); );
@ -33,7 +33,7 @@ export default function IOView(): JSX.Element {
break; break;
} }
} }
console.log(inputs) console.log(inputs);
return ( return (
<div className="form-modal-iv-box"> <div className="form-modal-iv-box">
<div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide"> <div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
@ -64,22 +64,24 @@ export default function IOView(): JSX.Element {
key={index} key={index}
keyValue={inputId} keyValue={inputId}
> >
{/* TODO: EXTEND AND IMPROVE VIEW MODE AND ADD OTHER TYPES OF VIEWS */}
<div className="file-component-tab-column"> <div className="file-component-tab-column">
<IOInputField <IOInputField
value={nodes.find((node) => node.id === inputId)?.data.node.template.value.value} value={
styleClasses="custom-scroll" nodes.find((node) => node.id === inputId)?.data.node
placeholder="Enter text..." .template.value.value
inputType={inputs.find((input) => input.id === inputId)?.type!} }
onChange={(e) => { inputType={
inputs.find((input) => input.id === inputId)?.type!
}
updateValue={(e) => {
e.target.value; e.target.value;
if (node) { if (node) {
let newNode = cloneDeep(node); let newNode = cloneDeep(node);
newNode.data.node!.template["value"].value = newNode.data.node!.template["value"].value =
e.target.value; e.target.value;
setNode(node.id, newNode); setNode(node.id, newNode);
} }
}} }}
/> />
</div> </div>
</AccordionComponent> </AccordionComponent>

8
src/frontend/src/types/components/index.ts
View file

@ -1,4 +1,4 @@
import { ChangeEvent, ReactElement, ReactNode } from "react"; import { ReactElement, ReactNode } from "react";
import { ReactFlowJsonObject, XYPosition } from "reactflow"; import { ReactFlowJsonObject, XYPosition } from "reactflow";
import { APIClassType, APITemplateType, TemplateVariableType } from "../api"; import { APIClassType, APITemplateType, TemplateVariableType } from "../api";
import { ChatMessageType } from "../chat"; import { ChatMessageType } from "../chat";
@ -649,7 +649,5 @@ export type dropdownButtonPropsType = {
export type IOInputProps = { export type IOInputProps = {
inputType: string; inputType: string;
value: string; value: string;
onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void; updateValue: (e: any) => void;
styleClasses: string; };
placeholder: string;
}