Files
xyflow/src/components/Handle/index.tsx
T

44 lines
1.2 KiB
TypeScript

import React, { memo, useContext } from 'react';
import { useStoreActions, useStoreState } from '../../store/hooks';
import BaseHandle from './BaseHandle';
import NodeIdContext from '../../contexts/NodeIdContext';
import { HandleProps, ElementId, Position, Connection } from '../../types';
const Handle = memo(
({
type = 'source',
position = Position.Top,
onConnect = () => {},
isValidConnection = () => true,
...rest
}: HandleProps) => {
const nodeId = useContext(NodeIdContext) as ElementId;
const setPosition = useStoreActions((a) => a.setConnectionPosition);
const setSourceId = useStoreActions((a) => a.setConnectionSourceId);
const onConnectAction = useStoreState((s) => s.onConnect);
const onConnectExtended = (params: Connection) => {
onConnectAction(params);
onConnect(params);
};
return (
<BaseHandle
nodeId={nodeId}
setPosition={setPosition}
setSourceId={setSourceId}
onConnect={onConnectExtended}
type={type}
position={position}
isValidConnection={isValidConnection}
{...rest}
/>
);
}
);
Handle.displayName = 'Handle';
export default Handle;