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, 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 { nodesConnectable, width, height, isValid, inProgress } = useStore(selector, shallow);
const renderConnection = !!(width && nodesConnectable && inProgress); const renderConnection = !!(width && nodesConnectable && inProgress);
@@ -45,7 +50,7 @@ export function ConnectionLineWrapper<NodeType extends Node = Node>({ containerS
className="react-flow__connectionline react-flow__container" className="react-flow__connectionline react-flow__container"
> >
<g className={cc(['react-flow__connection', getConnectionStatus(isValid)])}> <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> </g>
</svg> </svg>
); );
@@ -58,8 +63,14 @@ type ConnectionLineProps<NodeType extends Node = Node> = {
isValid: boolean | null; isValid: boolean | null;
}; };
const ConnectionLine = <NodeType extends Node = Node> ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps<NodeType>) => { const ConnectionLine = <NodeType extends Node = Node>({
const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection<NodeType>(); style,
type = ConnectionLineType.Bezier,
CustomComponent,
isValid,
}: ConnectionLineProps<NodeType>) => {
const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } =
useConnection<NodeType>();
if (!inProgress) { if (!inProgress) {
return; return;
@@ -170,7 +170,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
disableKeyboardA11y={disableKeyboardA11y} disableKeyboardA11y={disableKeyboardA11y}
rfId={rfId} rfId={rfId}
/> />
<ConnectionLineWrapper <ConnectionLineWrapper<NodeType>
style={connectionLineStyle} style={connectionLineStyle}
type={connectionLineType} type={connectionLineType}
component={connectionLineComponent} component={connectionLineComponent}