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

Refactor: Add ResetColumns component to improve table functionality

Browse source
This commit is contained in:
anovazzi1 2024-06-04 14:38:40 -03:00
commit 254a2c423c
3 changed files with 36 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/frontend/src/components/tableComponent/components/ResetColumns/index.tsx Normal file
View file

@ -0,0 +1,31 @@
import { cn } from "../../../../utils/utils";
import ShadTooltip from "../../../shadTooltipComponent";
import { Toggle } from "../../../ui/toggle";
export default function ResetColumns({
resetGrid,
}: {
resetGrid: () => void;
}): JSX.Element {
return (
/*<div className="absolute left-2 bottom-1 cursor-pointer">
<div
className="flex h-10 items-center justify-center px-2 pl-3 rounded-md border border-ring/60 text-sm text-[#bccadc] ring-offset-background placeholder:text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
onClick={() => setShow(!show)}
>
<ForwardedIconComponent name="Settings"></ForwardedIconComponent>
<ForwardedIconComponent name={show ? "ChevronLeft" : "ChevronRight"} className="transition-all"></ForwardedIconComponent>
</div>
</div>*/
<div className={cn("absolute bottom-4 left-6")}>
<span
className="cursor-pointer underline"
onClick={() => {
resetGrid();
}}
>
Reset Columns
</span>
</div>
);
}

3
src/frontend/src/components/tableComponent/components/tableToolbar.tsx/index.tsx
View file

@ -1,3 +0,0 @@
export default function TableToolbar({ children }): JSX.Element {
return <div className="align-center flex transition-all">{children}</div>;
}

35
src/frontend/src/components/tableComponent/index.tsx
View file

@ -14,6 +14,7 @@ import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
import { Toggle } from "../ui/toggle";
import ShadTooltip from "../shadTooltipComponent";
import resetGrid from "./utils/reset-grid-columns";
import ResetColumns from "./components/ResetColumns";
interface TableComponentProps extends AgGridReactProps {
columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
@ -36,6 +37,7 @@ const TableComponent = forwardRef<
ref,
) => {
const gridRef = useRef(null);
// @ts-ignore
const realRef = ref?.current ? ref : gridRef;
const dark = useDarkStore((state) => state.dark);
@ -47,6 +49,7 @@ const TableComponent = forwardRef<
};
const onGridReady = (params) => {
// @ts-ignore
realRef.current = params;
const updatedColumnDefs = makeLastColumnNonResizable([
...props.columnDefs,
@ -70,7 +73,7 @@ const TableComponent = forwardRef<
};
if (index === props.columnDefs.length - 1) {
newCol = {
...col,
...newCol,
resizable: false,
};
}
@ -131,35 +134,7 @@ const TableComponent = forwardRef<
onGridReady={onGridReady}
onColumnMoved={onColumnMoved}
/>
{/*<div className="absolute left-2 bottom-1 cursor-pointer">
<div
className="flex h-10 items-center justify-center px-2 pl-3 rounded-md border border-ring/60 text-sm text-[#bccadc] ring-offset-background placeholder:text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
onClick={() => setShow(!show)}
>
<ForwardedIconComponent name="Settings"></ForwardedIconComponent>
<ForwardedIconComponent name={show ? "ChevronLeft" : "ChevronRight"} className="transition-all"></ForwardedIconComponent>
</div>
</div>*/}
<div
className={cn(
"absolute bottom-1 left-2 rounded-md border border-border transition-all",
)}
>
<ShadTooltip content={"Reset Columns"} styleClasses="z-50">
<Toggle
className="h-10 w-10"
onClick={() => {
resetGrid(realRef);
}}
>
<ForwardedIconComponent
name="RotateCcw"
strokeWidth={2}
className="h-8 w-8 text-[#bccadc]"
></ForwardedIconComponent>
</Toggle>
</ShadTooltip>
</div>
<ResetColumns resetGrid={() => resetGrid(realRef)} />
</div>
);
},