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

refactor(extraSidebarComponent): extract SidebarDraggableComponent to a separate file for reusability and better organization

Browse source 
The `ExtraSidebar` component in `extraSidebarComponent/index.tsx` has been refactored to extract the `SidebarDraggableComponent` into a separate file. This was done to improve code organization and reusability. The extracted component takes props such as `display_name`, `itemName`, `error`, `color`, and `onDragStart` to render the draggable sidebar component.
This commit is contained in:
anovazzi1 2023-10-02 18:19:43 -03:00
commit d950b6e252
2 changed files with 60 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -17,6 +17,7 @@ import {
} from "../../../../utils/styleUtils"; } from "../../../../utils/styleUtils";
import { classNames, removeCountFromString } from "../../../../utils/utils"; import { classNames, removeCountFromString } from "../../../../utils/utils";
import DisclosureComponent from "../DisclosureComponent"; import DisclosureComponent from "../DisclosureComponent";
import SidebarDraggableComponent from "./sideBarDraggableComponent";
export default function ExtraSidebar(): JSX.Element { export default function ExtraSidebar(): JSX.Element {
const { data, templates, getFilterEdge, setFilterEdge } = const { data, templates, getFilterEdge, setFilterEdge } =
@ -242,45 +243,23 @@ export default function ExtraSidebar(): JSX.Element {
side="right" side="right"
key={index} key={index}
> >
<div key={SBItemName} data-tooltip-id={SBItemName}> <SidebarDraggableComponent
<div key={SBItemName}
draggable={!data[SBSectionName][SBItemName].error} onDragStart={(event) =>
className={ onDragStart(event, {
"side-bar-components-border bg-background" + //split type to remove type in nodes saved with same name removing it's
(data[SBSectionName][SBItemName].error type: removeCountFromString(SBItemName),
? " cursor-not-allowed select-none" node: data[SBSectionName][SBItemName],
: "") })
} }
style={{ color={nodeColors[SBSectionName]}
borderLeftColor: itemName={SBItemName}
nodeColors[SBSectionName] ?? nodeColors.unknown, //convert error to boolean
}} error={!!data[SBSectionName][SBItemName].error}
onDragStart={(event) => display_name={
onDragStart(event, { data[SBSectionName][SBItemName].display_name
//split type to remove type in nodes saved with same name removing it's }
type: removeCountFromString(SBItemName), />
node: data[SBSectionName][SBItemName],
})
}
onDragEnd={() => {
document.body.removeChild(
document.getElementsByClassName(
"cursor-grabbing"
)[0]
);
}}
>
<div className="side-bar-components-div-form">
<span className="side-bar-components-text">
{data[SBSectionName][SBItemName].display_name}
</span>
<IconComponent
name="Menu"
className="side-bar-components-icon "
/>
</div>
</div>
</div>
</ShadTooltip> </ShadTooltip>
))} ))}
</div> </div>

42
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx Normal file
View file

@ -0,0 +1,42 @@
import { DragEventHandler } from "react";
import IconComponent from "../../../../../components/genericIconComponent";
export default function SidebarDraggableComponent({
display_name,
itemName,
error,
color,
onDragStart,
}: {
display_name: string;
itemName: string;
error: boolean;
color: string;
onDragStart: DragEventHandler<HTMLDivElement>;
}) {
return (
<div key={itemName} data-tooltip-id={itemName}>
<div
draggable={!error}
className={
"side-bar-components-border bg-background" +
(error ? " cursor-not-allowed select-none" : "")
}
style={{
borderLeftColor: color,
}}
onDragStart={onDragStart}
onDragEnd={() => {
document.body.removeChild(
document.getElementsByClassName("cursor-grabbing")[0]
);
}}
>
<div className="side-bar-components-div-form">
<span className="side-bar-components-text">{display_name}</span>
<IconComponent name="Menu" className="side-bar-components-icon " />
</div>
</div>
</div>
);
}