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

fixed outside click on alert popup

Browse source
This commit is contained in:
anovazzi1 2023-05-02 19:54:05 -03:00
commit 7f993ea908
1 changed files with 93 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

181
src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
View file

@ -5,11 +5,11 @@ import { TabsContext } from "../../../../contexts/tabsContext";
import FlowPage from "../.."; import FlowPage from "../..";
import { darkContext } from "../../../../contexts/darkContext"; import { darkContext } from "../../../../contexts/darkContext";
import { import {
ArrowDownTrayIcon, ArrowDownTrayIcon,
ArrowUpTrayIcon, ArrowUpTrayIcon,
BellIcon, BellIcon,
MoonIcon, MoonIcon,
SunIcon, SunIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { PopUpContext } from "../../../../contexts/popUpContext"; import { PopUpContext } from "../../../../contexts/popUpContext";
import AlertDropdown from "../../../../alerts/alertDropDown"; import AlertDropdown from "../../../../alerts/alertDropDown";
@ -22,96 +22,101 @@ export default function TabsManagerComponent() {
const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
useContext(TabsContext); useContext(TabsContext);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
const {templates} = useContext(typesContext) const { templates } = useContext(typesContext);
const AlertWidth = 256; const AlertWidth = 256;
const { dark, setDark } = useContext(darkContext); const { dark, setDark } = useContext(darkContext);
const { notificationCenter, setNotificationCenter } = const { notificationCenter, setNotificationCenter } =
useContext(alertContext); useContext(alertContext);
useEffect(() => { useEffect(() => {
//create the first flow //create the first flow
if (flows.length === 0&& Object.keys(templates).length>0) { if (flows.length === 0 && Object.keys(templates).length > 0) {
addFlow(); addFlow();
} }
}, [addFlow, flows.length,templates]); }, [addFlow, flows.length, templates]);
return ( return (
<div className="h-full w-full flex flex-col"> <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 dark:bg-gray-800 px-2"> <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
{flows.map((flow, index) => { {flows.map((flow, index) => {
return ( return (
<TabComponent <TabComponent
onClick={() => setTabIndex(index)} onClick={() => setTabIndex(index)}
selected={index === tabIndex} selected={index === tabIndex}
key={index} key={index}
flow={flow} flow={flow}
/> />
); );
})} })}
<TabComponent <TabComponent
onClick={() => { onClick={() => {
addFlow(); addFlow();
}} }}
selected={false} selected={false}
flow={null} flow={null}
/> />
<div className="ml-auto mr-2 flex gap-3"> <div className="ml-auto mr-2 flex gap-3">
<button <button
onClick={() => openPopUp(<ImportModal />)} onClick={() => openPopUp(<ImportModal />)}
className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500" className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500"
> >
Import <ArrowUpTrayIcon className="w-5 h-5" /> Import <ArrowUpTrayIcon className="w-5 h-5" />
</button> </button>
<button <button
onClick={() => openPopUp(<ExportModal />)} onClick={() => openPopUp(<ExportModal />)}
className="flex items-center gap-1 mr-2 text-sm text-gray-600 hover:text-gray-500" className="flex items-center gap-1 mr-2 text-sm text-gray-600 hover:text-gray-500"
> >
Export <ArrowDownTrayIcon className="h-5 w-5" /> Export <ArrowDownTrayIcon className="h-5 w-5" />
</button> </button>
<button <button
className="text-gray-600 hover:text-gray-500 " className="text-gray-600 hover:text-gray-500 "
onClick={() => { onClick={() => {
setDark(!dark); setDark(!dark);
}} }}
> >
{dark ? ( {dark ? (
<SunIcon className="h-5 w-5" /> <SunIcon className="h-5 w-5" />
) : ( ) : (
<MoonIcon className="h-5 w-5" /> <MoonIcon className="h-5 w-5" />
)} )}
</button> </button>
<button <button
className="text-gray-600 hover:text-gray-500 relative" className="text-gray-600 hover:text-gray-500 relative"
onClick={(event: React.MouseEvent<HTMLElement>) => { onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false); setNotificationCenter(false);
const top = (event.target as Element).getBoundingClientRect().top; const top = (event.target as Element).getBoundingClientRect().top;
const left = (event.target as Element).getBoundingClientRect() const left = (event.target as Element).getBoundingClientRect()
.left; .left;
openPopUp( openPopUp(
<div <>
className="z-10 absolute" <div
style={{ top: top + 20, left: left - AlertWidth }} className="z-10 absolute"
> style={{ top: top + 20, left: left - AlertWidth }}
<AlertDropdown /> >
</div> <AlertDropdown />
); </div>
}} <div className="h-screen w-screen fixed top-0 left-0">
>
{notificationCenter && ( </div>
<div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div> </>
)} );
<BellIcon className="h-5 w-5" aria-hidden="true" /> }}
</button> >
</div> {notificationCenter && (
</div> <div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
<div className="w-full h-full"> )}
<ReactFlowProvider> <BellIcon className="h-5 w-5" aria-hidden="true" />
{flows[tabIndex] ? ( </button>
<FlowPage flow={flows[tabIndex]}></FlowPage> </div>
) : ( </div>
<></> <div className="w-full h-full">
)} <ReactFlowProvider>
</ReactFlowProvider> {flows[tabIndex] ? (
</div> <FlowPage flow={flows[tabIndex]}></FlowPage>
</div> ) : (
); <></>
)}
</ReactFlowProvider>
</div>
</div>
);
} }