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

Feat: Create ToolbarSelectItem to avoid duplicated code

Browse source
This commit is contained in:
igorrCarvalho 2024-03-12 16:30:05 -03:00
commit 1ce4193a99
3 changed files with 104 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

158
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -30,6 +30,7 @@ import {
updateFlowPosition, updateFlowPosition,
} from "../../../../utils/reactflowUtils"; } from "../../../../utils/reactflowUtils";
import { classNames, cn } from "../../../../utils/utils"; import { classNames, cn } from "../../../../utils/utils";
import ToolbarSelectItem from "./toolbarSelectItem";
export default function NodeToolbarComponent({ export default function NodeToolbarComponent({
data, data,
@ -445,86 +446,42 @@ export default function NodeToolbarComponent({
<SelectContent> <SelectContent>
{nodeLength > 0 && ( {nodeLength > 0 && (
<SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}> <SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
<div className="flex"> <ToolbarSelectItem
<IconComponent keyboardKey="E"
name="Settings2" isMac={navigator.userAgent.toUpperCase().includes("MAC")}
className="relative top-0.5 mr-2 h-4 w-4 " shift={false}
/>{" "} value={"Edit"}
<span className="">Edit</span>{" "} icon={"Settings2"}
{navigator.userAgent.toUpperCase().includes("MAC") ? ( />
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
Ctrl +{" "}
</span>
)}
<span className="absolute right-2 top-[0.46em]">E</span>
</div>
</SelectItem> </SelectItem>
)} )}
<SelectItem value={"duplicate"}> <SelectItem value={"duplicate"}>
<div className="flex" data-testid="save-button-modal"> <ToolbarSelectItem
<IconComponent keyboardKey="D"
name="Copy" isMac={navigator.userAgent.toUpperCase().includes("MAC")}
className="relative top-0.5 mr-2 h-4 w-4" shift={false}
value={"Duplicate"}
icon={"Copy"}
/> />
Duplicate
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.20rem] top-[0.40em] stroke-2">
Ctrl +{" "}
</span>
)}
<span className="absolute right-2 top-[0.4em]">D</span>
</div>{" "}
</SelectItem> </SelectItem>
<SelectItem value={"copy"}> <SelectItem value={"copy"}>
<div className="flex"> <ToolbarSelectItem
<IconComponent keyboardKey="C"
name="Clipboard" isMac={navigator.userAgent.toUpperCase().includes("MAC")}
className="relative top-0.5 mr-2 h-4 w-4 " shift={false}
/>{" "} value={"Copy"}
<span className="">Copy</span>{" "} icon={"Clipboard"}
{navigator.userAgent.toUpperCase().includes("MAC") ? ( />
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
Ctrl +{" "}
</span>
)}
<span className="absolute right-2 top-[0.4em]">C</span>
</div>
</SelectItem> </SelectItem>
{isOutdated && ( {isOutdated && (
<SelectItem value={"update"}> <SelectItem value={"update"}>
<div className="flex"> <ToolbarSelectItem
<IconComponent keyboardKey="U"
name="Code" isMac={navigator.userAgent.toUpperCase().includes("MAC")}
className="relative top-0.5 mr-2 h-4 w-4 " shift={false}
/>{" "} value={"Update"}
<span className="">Update</span>{" "} icon={"Code"}
{navigator.userAgent.toUpperCase().includes("MAC") ? ( />
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
Ctrl +{" "}
</span>
)}
<span className="absolute right-2 top-[0.4em]">U</span>
</div>
</SelectItem> </SelectItem>
)} )}
{hasStore && ( {hasStore && (
@ -532,28 +489,14 @@ export default function NodeToolbarComponent({
value={"Share"} value={"Share"}
disabled={!hasApiKey || !validApiKey} disabled={!hasApiKey || !validApiKey}
> >
<div className="flex" data-testid="share-button-modal"> <ToolbarSelectItem
<IconComponent keyboardKey="S"
name="Share3" isMac={navigator.userAgent.toUpperCase().includes("MAC")}
className="relative top-0.5 -m-1 mr-1 h-6 w-6" shift={true}
/>{" "} value={"Share"}
Share{" "} icon={"Share3"}
{navigator.userAgent.toUpperCase().includes("MAC") ? ( styleObj={{iconClasses: "relative top-0.5 -m-1 mr-1 h-6 w-6"}}
<IconComponent />
name="Command"
className="absolute right-[2rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[2.10rem] top-[0.43em] stroke-2">
Ctrl
</span>
)}
<IconComponent
name="ArrowBigUp"
className="absolute right-[1.09rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
<span className="absolute right-2 top-[0.45em]">S</span>
</div>{" "}
</SelectItem> </SelectItem>
)} )}
{!hasStore && ( {!hasStore && (
@ -571,28 +514,13 @@ export default function NodeToolbarComponent({
value={"documentation"} value={"documentation"}
disabled={data.node?.documentation === ""} disabled={data.node?.documentation === ""}
> >
<div className="flex"> <ToolbarSelectItem
<IconComponent keyboardKey="D"
name="FileText" isMac={navigator.userAgent.toUpperCase().includes("MAC")}
className="relative top-0.5 mr-2 h-4 w-4 " shift={true}
/>{" "} value={"Docs"}
<span className="">Docs</span>{" "} icon={"FileText"}
{navigator.userAgent.toUpperCase().includes("MAC") ? ( />
<IconComponent
name="Command"
className="absolute right-[2rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[2.10rem] top-[0.43em] stroke-2">
Ctrl
</span>
)}
<IconComponent
name="ArrowBigUp"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
<span className="absolute right-2 top-[0.43em]">D</span>
</div>
</SelectItem> </SelectItem>
{isMinimal && ( {isMinimal && (
<SelectItem value={"show"}> <SelectItem value={"show"}>

44
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx Normal file
View file

@ -0,0 +1,44 @@
import { useEffect } from "react";
import ForwardedIconComponent from "../../../../../components/genericIconComponent";
import { toolbarSelectItemProps } from "../../../../../types/components";
export default function ToolbarSelectItem({
shift,
isMac,
keyboardKey,
value,
icon,
styleObj,
}: toolbarSelectItemProps) {
return (
<div className="flex">
<ForwardedIconComponent
name={icon}
className={`relative top-0.5 mr-2 h-4 w-4 ${styleObj?.iconClasses}`}
/>{" "}
<span className={styleObj?.valueClasses}>{value}</span>{" "}
{isMac ? (
<ForwardedIconComponent
name="Command"
className={`absolute right-[${shift ? "2rem" : "1.15rem"}] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
></ForwardedIconComponent>
) : (
<span className={`absolute right-[${shift ? "2.10rem" : "1.15rem"}] top-[0.43em] stroke-2 ${styleObj?.ctrlClasses}`}>
{shift ? (
"Ctrl"
) : (
"Ctrl +"
)}
</span>
)}
{shift && (
<ForwardedIconComponent
name="ArrowBigUp"
className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`}
/>
)}
<span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>{keyboardKey}</span>
</div>
);
}

16
src/frontend/src/types/components/index.ts
View file

@ -688,3 +688,19 @@ export type IOFileInputProps = {
field: TemplateVariableType; field: TemplateVariableType;
updateValue: (e: any, type: string) => void; updateValue: (e: any, type: string) => void;
}; };
export type toolbarSelectItemProps = {
isMac: boolean;
shift: boolean;
keyboardKey: string;
value: string;
icon: string;
styleObj?: {
iconClasses?: string;
commandClasses?: string;
shiftClasses?: string;
ctrlClasses?: string;
keyClasses?: string;
valueClasses?: string;
}
};