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

Correction for merge

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-22 23:05:53 -03:00
commit 96ae8916d5
2 changed files with 69 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

70
space_flow/src/pages/FlowPage/flowManager/index.tsx
View file

@ -4,39 +4,47 @@ import { ReactFlowProvider } from "reactflow";
import FlowPage from "..";
import { TabsContext } from "../../../contexts/tabsContext";
import TabComponent from "./tabComponent";
import { PlusIcon } from '@heroicons/react/24/outline';
import { PlusIcon } from "@heroicons/react/24/outline";
var _ = require("lodash");
export function TabsManager() {
const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
const [inputMode,setInputMode] = useState(false)
useEffect(() => {
if (flows.length === 0) {
const id = _.uniqueId()
addFlow({ name: "flow "+id, data: null, id });
}
}, []);
const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
useEffect(() => {
if (flows.length === 0) {
const id = _.uniqueId();
addFlow({ name: "flow " + id, data: null, id });
}
}, []);
return (
<div className="h-full w-full flex flex-col">
<div className="w-full flex pr-2 flex-row text-center items-center">
{flows.map((flow, index) => {
console.log(tabIndex)
return (
<TabComponent onClick={() => setTabIndex(index)} selected={index === tabIndex} key={index} id={flow.id}>
<div onClick={()=>setInputMode(true)}>{flow.name}</div>
</TabComponent>
);
})}
<div onClick={()=>{
const id = _.uniqueId()
addFlow({ name: "flow"+id, data: null, id})}} className="cursor-pointer"><PlusIcon color="black" width={24}></PlusIcon></div>
</div>
<div className="w-full h-full">
<ReactFlowProvider>
<FlowPage flow={flows[tabIndex]}></FlowPage>
</ReactFlowProvider>
</div>
</div>
);
return (
<div className="h-full w-full flex flex-col">
<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100">
{flows.map((flow, index) => {
console.log(tabIndex);
return (
<TabComponent
onClick={() => setTabIndex(index)}
selected={index === tabIndex}
key={index}
flow={flow}
/>
);
})}
<TabComponent
onClick={() => {
const id = _.uniqueId();
addFlow({ name: "flow" + id, data: null, id });
}}
selected={false}
key={0}
flow={null}
/>
</div>
<div className="w-full h-full">
<ReactFlowProvider>
<FlowPage flow={flows[tabIndex]}></FlowPage>
</ReactFlowProvider>
</div>
</div>
);
}

42
space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
View file

@ -1,31 +1,49 @@
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { useContext } from "react";
import { TabsContext } from "../../../../contexts/tabsContext";
import { classNames } from "../../../../utils";
export default function TabComponent({ selected, flow, id, onClick}) {
const { removeFlow, flows } = useContext(TabsContext);
return (
<>
export default function TabComponent({ selected, flow, onClick }) {
const { removeFlow } = useContext(TabsContext);
return (
<>
{flow ? (
selected ? (
<button
className="px-4 my-2 mt-3 border-l border-gray-300 -ml-px"
!selected ? (
<div
className="flex justify-between select-none w-36 items-center px-4 my-2 mt-3 border-x border-gray-300 -ml-px"
onClick={onClick}
>
{flow.name}
</button>
<button
onClick={(e) => {
e.stopPropagation();
removeFlow(flow.id);
}}
>
<XMarkIcon className="h-4" />
</button>
</div>
) : (
<div className="bg-white pt-3 pointer-events-none border border-b-0 border-gray-300 px-4 py-2 rounded-t-xl">
<div className="bg-white flex select-none justify-between w-36 items-center pt-3 border border-b-0 border-gray-300 px-4 py-2 rounded-t-xl -ml-px">
{flow.name}
<button
onClick={() => {
removeFlow(flow.id);
}}
>
<XMarkIcon className="h-4" />
</button>
</div>
)
) : (
<div className="h-full py-2 pt-3 flex justify-center items-center">
<button className="px-3 h-full border-l border-gray-300 -ml-px">
<button
className="px-3 h-full border-gray-300 -ml-px"
onClick={onClick}
>
<PlusIcon className="h-5" />
</button>
</div>
)}
</>
)}
);
}