alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pass through NodeType to connectionLineComponent ReactFlow prop

Browse Source
This commit is contained in:
Solomon Astley
2024-12-15 11:45:04 -08:00
parent 0f21ec21eb
commit cde899c5be
3 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/happy-hats-lay.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@xyflow/react': minor
---
Pass `NodeType` type argument from `ReactFlowProps` to `connectionLineComponent` property.

16
packages/react/src/components/ConnectionLine/index.tsx
View File

@@ -11,12 +11,12 @@ import {
import { useStore } from '../../hooks/useStore';
import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
import type { ConnectionLineComponent, ReactFlowState } from '../../types';
import type { ConnectionLineComponent, Node, ReactFlowState } from '../../types';
import { useConnection } from '../../hooks/useConnection';
type ConnectionLineWrapperProps = {
type ConnectionLineWrapperProps<NodeType extends Node = Node> = {
type: ConnectionLineType;
component?: ConnectionLineComponent;
component?: ConnectionLineComponent<NodeType>;
containerStyle?: CSSProperties;
style?: CSSProperties;
};
@@ -29,7 +29,7 @@ const selector = (s: ReactFlowState) => ({
height: s.height,
});
export function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) {
export function ConnectionLineWrapper<NodeType extends Node = Node>({ containerStyle, style, type, component }: ConnectionLineWrapperProps<NodeType>) {
const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector, shallow);
const renderConnection = !!(width && nodesConnectable && inProgress);
@@ -51,15 +51,15 @@ export function ConnectionLineWrapper({ containerStyle, style, type, component }
);
}
type ConnectionLineProps = {
type ConnectionLineProps<NodeType extends Node = Node> = {
type: ConnectionLineType;
style?: CSSProperties;
CustomComponent?: ConnectionLineComponent;
CustomComponent?: ConnectionLineComponent<NodeType>;
isValid: boolean | null;
};
const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps) => {
const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
const ConnectionLine = <NodeType extends Node = Node> ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps<NodeType>) => {
const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection<NodeType>();
if (!inProgress) {
return;

2
packages/react/src/types/component-props.ts
View File

@@ -259,7 +259,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
/** Styles to be applied to the connection line */
connectionLineStyle?: CSSProperties;
/** React Component to be used as a connection line */
connectionLineComponent?: ConnectionLineComponent;
connectionLineComponent?: ConnectionLineComponent<NodeType>;
/** Styles to be applied to the container of the connection line */
connectionLineContainerStyle?: CSSProperties;
/** 'strict' connection mode will only allow you to connect source handles to target handles.