chore(connection-line): pass generic
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user