From ca66999634301bebe954a8fdd274f3654f7f59d8 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 2 Dec 2024 13:37:17 +0100 Subject: [PATCH] simplified prop drilling & improved changeset --- .changeset/selfish-tables-tie.md | 2 +- .../react/src/components/Edges/BaseEdge.tsx | 23 +++++++-- .../react/src/components/Edges/BezierEdge.tsx | 30 +----------- .../src/components/Edges/SimpleBezierEdge.tsx | 30 +----------- .../src/components/Edges/SmoothStepEdge.tsx | 30 +----------- .../src/components/Edges/StraightEdge.tsx | 48 ++----------------- packages/react/src/types/edges.ts | 48 ++++++++++--------- 7 files changed, 53 insertions(+), 158 deletions(-) diff --git a/.changeset/selfish-tables-tie.md b/.changeset/selfish-tables-tie.md index 6d4eb598..94d9db0b 100644 --- a/.changeset/selfish-tables-tie.md +++ b/.changeset/selfish-tables-tie.md @@ -2,4 +2,4 @@ '@xyflow/react': minor --- -Support all `path` element attributes in React edge components. +Support passing `path` element attributes to BaseEdge component. diff --git a/packages/react/src/components/Edges/BaseEdge.tsx b/packages/react/src/components/Edges/BaseEdge.tsx index d3d6999d..ca7116a5 100644 --- a/packages/react/src/components/Edges/BaseEdge.tsx +++ b/packages/react/src/components/Edges/BaseEdge.tsx @@ -2,7 +2,7 @@ import { isNumeric } from '@xyflow/system'; import cc from 'classcat'; import { EdgeText } from './EdgeText'; -import type { BaseEdgeProps } from '../../types'; +import type { BaseEdgeProps, EdgeComponentWithPathOptions, EdgeProps } from '../../types'; export function BaseEdge({ id, @@ -15,19 +15,34 @@ export function BaseEdge({ labelBgStyle, labelBgPadding, labelBgBorderRadius, - style, markerEnd, markerStart, className, interactionWidth = 20, ...props }: BaseEdgeProps) { + // We are not allowed to pass these props to the path element otherwise we get a bunch of warnings + const { + animated, + selectable, + deletable, + data, + selected, + source, + target, + targetHandleId, + sourceHandleId, + targetPosition, + sourcePosition, + pathOptions, + ...restProps + } = props as EdgeComponentWithPathOptions & EdgeProps; + return ( <> { const [path, labelX, labelY] = getBezierPath({ @@ -40,25 +30,7 @@ function createBezierEdge(params: { isInternal: boolean }) { const _id = params.isInternal ? undefined : id; - return ( - - ); + return ; } ); } diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx index 85a2aa3a..6aff362a 100644 --- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx @@ -82,16 +82,6 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) { targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, - label, - labelStyle, - labelShowBg, - labelBgStyle, - labelBgPadding, - labelBgBorderRadius, - style, - markerEnd, - markerStart, - interactionWidth, ...props }: SimpleBezierEdgeProps) => { const [path, labelX, labelY] = getSimpleBezierPath({ @@ -105,25 +95,7 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) { const _id = params.isInternal ? undefined : id; - return ( - - ); + return ; } ); } diff --git a/packages/react/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx index 01e97499..8d362427 100644 --- a/packages/react/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx @@ -13,19 +13,9 @@ function createSmoothStepEdge(params: { isInternal: boolean }) { sourceY, targetX, targetY, - label, - labelStyle, - labelShowBg, - labelBgStyle, - labelBgPadding, - labelBgBorderRadius, - style, sourcePosition = Position.Bottom, targetPosition = Position.Top, - markerEnd, - markerStart, pathOptions, - interactionWidth, ...props }: SmoothStepEdgeProps) => { const [path, labelX, labelY] = getSmoothStepPath({ @@ -41,25 +31,7 @@ function createSmoothStepEdge(params: { isInternal: boolean }) { const _id = params.isInternal ? undefined : id; - return ( - - ); + return ; } ); } diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx index 102aa484..5b767638 100644 --- a/packages/react/src/components/Edges/StraightEdge.tsx +++ b/packages/react/src/components/Edges/StraightEdge.tsx @@ -6,51 +6,13 @@ import type { StraightEdgeProps } from '../../types'; function createStraightEdge(params: { isInternal: boolean }) { // eslint-disable-next-line react/display-name - return memo( - ({ - id, - sourceX, - sourceY, - targetX, - targetY, - label, - labelStyle, - labelShowBg, - labelBgStyle, - labelBgPadding, - labelBgBorderRadius, - style, - markerEnd, - markerStart, - interactionWidth, - ...props - }: StraightEdgeProps) => { - const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY }); + return memo(({ id, sourceX, sourceY, targetX, targetY, ...props }: StraightEdgeProps) => { + const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY }); - const _id = params.isInternal ? undefined : id; + const _id = params.isInternal ? undefined : id; - return ( - - ); - } - ); + return ; + }); } const StraightEdge = createStraightEdge({ isInternal: false }); diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index 8ca672dc..7de41f42 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -14,7 +14,6 @@ import type { EdgePosition, StepPathOptions, OnError, - ConnectionState, FinalConnectionState, } from '@xyflow/system'; @@ -92,8 +91,6 @@ export type EdgeWrapperProps = { disableKeyboardA11y?: boolean; }; -type BasePathAttributes = Omit, "d">; - export type DefaultEdgeOptions = DefaultEdgeOptionsBase; export type EdgeTextProps = HTMLAttributes & @@ -121,34 +118,38 @@ export type EdgeProps = Pick< interactionWidth?: number; }; +type BasePathAttributes = Omit, 'd'>; + /** * BaseEdge component props * @public */ -export type BaseEdgeProps = BasePathAttributes & EdgeLabelOptions & { - /** Additional padding where interacting with an edge is still possible */ - interactionWidth?: number; - /** The x position of edge label */ - labelX?: number; - /** The y position of edge label */ - labelY?: number; - /** Marker at start of edge - * @example 'url(#arrow)' - */ - markerStart?: string; - /** Marker at end of edge - * @example 'url(#arrow)' - */ - markerEnd?: string; - /** SVG path of the edge */ - path: string; -}; +export type BaseEdgeProps = BasePathAttributes & + EdgeLabelOptions & { + /** Additional padding where interacting with an edge is still possible */ + interactionWidth?: number; + /** The x position of edge label */ + labelX?: number; + /** The y position of edge label */ + labelY?: number; + /** Marker at start of edge + * @example 'url(#arrow)' + */ + markerStart?: string; + /** Marker at end of edge + * @example 'url(#arrow)' + */ + markerEnd?: string; + /** SVG path of the edge */ + path: string; + }; /** * Helper type for edge components that get exported by the library * @public */ -export type EdgeComponentProps = BasePathAttributes & EdgePosition & +export type EdgeComponentProps = BasePathAttributes & + EdgePosition & EdgeLabelOptions & { id?: EdgeProps['id']; markerStart?: EdgeProps['markerStart']; @@ -185,7 +186,8 @@ export type StepEdgeProps = EdgeComponentWithPathOptions; * StraightEdge component props * @public */ -export type StraightEdgeProps = HTMLAttributes & Omit; +export type StraightEdgeProps = HTMLAttributes & + Omit; /** * SimpleBezier component props