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

refactor[genericIconComponent]: Refactor icon to type it properly

Browse source
This commit is contained in:
Igor Carvalho 2023-07-25 19:48:13 -03:00
commit ff2eb2d13d
3 changed files with 14 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -1,3 +1,4 @@
import { ReactElement, SVGProps, createElement } from "react";
import { IconComponentProps } from "../../types/components"; import { IconComponentProps } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils"; import { nodeIconsLucide } from "../../utils/styleUtils";
@ -7,6 +8,9 @@ export default function IconComponent({
iconColor, iconColor,
}: IconComponentProps): JSX.Element { }: IconComponentProps): JSX.Element {
// MAYBE PROBLEM HERE? // MAYBE PROBLEM HERE?
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"]; const TargetIcon = createElement(nodeIconsLucide[name] ?? nodeIconsLucide["unknown"], {
return <TargetIcon className={className} style={{ color: iconColor }} />; className,
style: { color: iconColor },
});
return TargetIcon as JSX.Element
} }

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

@ -1,4 +1,4 @@
import { ReactElement, ReactNode } from "react"; import { ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes, SVGProps } from "react";
import { APIClassType } from "../api"; import { APIClassType } from "../api";
import { FlowStyleType, NodeDataType } from "../flow/index"; import { FlowStyleType, NodeDataType } from "../flow/index";
import { typesContextType } from "../typesContext"; import { typesContextType } from "../typesContext";
@ -83,7 +83,7 @@ export type DisclosureComponentType = {
openDisc: boolean; openDisc: boolean;
button: { button: {
title: string; title: string;
Icon: React.Component; Icon: React.ElementType;
buttons?: { buttons?: {
Icon: ReactElement; Icon: ReactElement;
title: string; title: string;
@ -305,3 +305,7 @@ export type SanitizedHTMLWrapperType = {
onClick: () => void; onClick: () => void;
suppressWarning: boolean; suppressWarning: boolean;
}; };
export type iconsType = {
[key: string]: React.ElementType;
};

3
src/frontend/src/utils/styleUtils.ts
View file

@ -89,6 +89,7 @@ import SvgWikipedia from "../icons/Wikipedia/Wikipedia";
import SvgWolfram from "../icons/Wolfram/Wolfram"; import SvgWolfram from "../icons/Wolfram/Wolfram";
import { HackerNewsIcon } from "../icons/hackerNews"; import { HackerNewsIcon } from "../icons/hackerNews";
import { SupabaseIcon } from "../icons/supabase"; import { SupabaseIcon } from "../icons/supabase";
import { iconsType } from "../types/components";
export const gradients = [ export const gradients = [
"bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900", "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
@ -168,7 +169,7 @@ export const nodeNames: { [char: string]: string } = {
unknown: "Unknown", unknown: "Unknown",
}; };
export const nodeIconsLucide = { export const nodeIconsLucide: iconsType = {
Chroma: ChromaIcon, Chroma: ChromaIcon,
AirbyteJSONLoader: AirbyteIcon, AirbyteJSONLoader: AirbyteIcon,
Anthropic: AnthropicIcon, Anthropic: AnthropicIcon,