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

fix: remove useSidebar to fix errors of SidebarWrapper when opening playground page (#4767)

Browse source 
* Added open to data of wrapper

* Fix PageComponent and Header to not use useSidebar anymore
This commit is contained in:
Lucas Oliveira 2024-11-21 21:43:58 -03:00 • committed by GitHub
commit 725a256285
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 7 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/frontend/src/components/ui/sidebar.tsx
View file

@ -131,6 +131,7 @@ const SidebarProvider = React.forwardRef<
"group/sidebar-wrapper flex h-full w-full text-foreground has-[[data-variant=inset]]:bg-background",
className,
)}
data-open={open}
ref={ref}
{...props}
>

10
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -6,7 +6,7 @@ import CanvasControls, {
import FlowToolbar from "@/components/flowToolbarComponent";
import ForwardedIconComponent from "@/components/genericIconComponent";
import LoadingComponent from "@/components/loadingComponent";
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
import { SidebarTrigger } from "@/components/ui/sidebar";
import {
COLOR_OPTIONS,
NOTE_NODE_MIN_HEIGHT,
@ -504,8 +504,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
reactFlowWrapper.current?.style.setProperty("--selected", accentColor);
};
const { open } = useSidebar();
useEffect(() => {
const handleGlobalMouseMove = (event) => {
if (isAddingNote) {
@ -592,9 +590,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
<Panel
className={cn(
"react-flow__controls !m-2 flex gap-1.5 rounded-md border border-secondary-hover bg-background fill-foreground stroke-foreground p-1.5 text-primary shadow transition-all duration-300 [&>button]:border-0 [&>button]:bg-background hover:[&>button]:bg-accent",
open
? "pointer-events-none -translate-x-full opacity-0"
: "pointer-events-auto opacity-100",
"pointer-events-auto opacity-100 group-data-[open=true]/sidebar-wrapper:pointer-events-none group-data-[open=true]/sidebar-wrapper:-translate-x-full group-data-[open=true]/sidebar-wrapper:opacity-0",
)}
position="top-left"
>
@ -603,7 +599,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
name="PanelRightClose"
className="h-4 w-4"
/>
Components
<span className="text-foreground">Components</span>
</SidebarTrigger>
</Panel>
<SelectionMenu

15
src/frontend/src/pages/MainPage/components/header/index.tsx
View file

@ -2,8 +2,7 @@ import ForwardedIconComponent from "@/components/genericIconComponent";
import ShadTooltip from "@/components/shadTooltipComponent";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
import { cn } from "@/utils/utils";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { debounce } from "lodash";
import { useCallback, useEffect, useState } from "react";
@ -29,7 +28,6 @@ const HeaderComponent = ({
isEmptyFolder,
}: HeaderComponentProps) => {
const [debouncedSearch, setDebouncedSearch] = useState("");
const { open } = useSidebar();
// Debounce the setSearch function from the parent
const debouncedSetSearch = useCallback(
@ -57,15 +55,8 @@ const HeaderComponent = ({
className="flex items-center pb-8 text-xl font-semibold"
data-testid="mainpage_title"
>
<div
className={cn("h-7 w-10 transition-all lg:hidden", open && "md:w-0")}
>
<div
className={cn(
"relative left-0 opacity-100 transition-all",
open ? "md:opacity-0" : "",
)}
>
<div className="h-7 w-10 transition-all group-data-[open=true]/sidebar-wrapper:md:w-0 lg:hidden">
<div className="relative left-0 opacity-100 transition-all group-data-[open=true]/sidebar-wrapper:md:opacity-0">
<SidebarTrigger>
<ForwardedIconComponent
name="PanelLeftOpen"