chore(connection-line): pass generic

This commit is contained in:
moklick
2025-02-12 14:18:14 +01:00
parent cde899c5be
commit 1344ccad39
2 changed files with 16 additions and 5 deletions
@@ -29,7 +29,12 @@ const selector = (s: ReactFlowState) => ({
height: s.height,
});
export function ConnectionLineWrapper<NodeType extends Node = Node>({ containerStyle, style, type, component }: ConnectionLineWrapperProps<NodeType>) {
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);
@@ -45,7 +50,7 @@ export function ConnectionLineWrapper<NodeType extends Node = Node>({ containerS
className="react-flow__connectionline react-flow__container"
>
<g className={cc(['react-flow__connection', getConnectionStatus(isValid)])}>
<ConnectionLine style={style} type={type} CustomComponent={component} isValid={isValid} />
<ConnectionLine<NodeType> style={style} type={type} CustomComponent={component} isValid={isValid} />
</g>
</svg>
);
@@ -58,8 +63,14 @@ type ConnectionLineProps<NodeType extends Node = Node> = {
isValid: boolean | null;
};
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>();
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;
@@ -170,7 +170,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
disableKeyboardA11y={disableKeyboardA11y}
rfId={rfId}
/>
<ConnectionLineWrapper
<ConnectionLineWrapper<NodeType>
style={connectionLineStyle}
type={connectionLineType}
component={connectionLineComponent}