@dfnivo/sankey/dist/ejs/SankeyLinksItem.js

<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { createElement, useCallback } from "react";
import { useSpring, animated } from "@react-spring/web";
import { useAnimatedPath, useMotionConfig } from "@dfnivo/core";
import { useTooltip } from "@dfnivo/tooltip";
import { SankeyLinkGradient } from "./SankeyLinkGradient";
export var SankeyLinksItem = function(param) {
    var link = param.link, layout = param.layout, path = param.path, color = param.color, opacity = param.opacity, blendMode = param.blendMode, enableGradient = param.enableGradient, setCurrent = param.setCurrent, tooltip = param.tooltip, isInteractive = param.isInteractive, onClick = param.onClick;
    var linkId = "".concat(link.source.id, ".").concat(link.target.id);
    var _useMotionConfig = useMotionConfig(), animate = _useMotionConfig.animate, springConfig = _useMotionConfig.config;
    var animatedPath = useAnimatedPath(path);
    var animatedProps = useSpring({
        color: color,
        opacity: opacity,
        config: springConfig,
        immediate: !animate
    });
    var _useTooltip = useTooltip(), showTooltipFromEvent = _useTooltip.showTooltipFromEvent, hideTooltip = _useTooltip.hideTooltip;
    var handleMouseEnter = useCallback(function(event) {
        setCurrent(link);
        showTooltipFromEvent(/*#__PURE__*/ createElement(tooltip, {
            link: link
        }), event, "left");
    }, [
        setCurrent,
        link,
        showTooltipFromEvent,
        tooltip
    ]);
    var handleMouseMove = useCallback(function(event) {
        showTooltipFromEvent(/*#__PURE__*/ createElement(tooltip, {
            link: link
        }), event, "left");
    }, [
        showTooltipFromEvent,
        link,
        tooltip
    ]);
    var handleMouseLeave = useCallback(function() {
        setCurrent(null);
        hideTooltip();
    }, [
        setCurrent,
        hideTooltip
    ]);
    var handleClick = useCallback(function(event) {
        onClick === null || onClick === void 0 ? void 0 : onClick(link, event);
    }, [
        onClick,
        link
    ]);
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            enableGradient && /*#__PURE__*/ _jsx(SankeyLinkGradient, {
                id: linkId,
                layout: layout,
                startColor: link.startColor || link.source.color || "",
                endColor: link.endColor || link.target.color || ""
            }),
            /*#__PURE__*/ _jsx(animated.path, {
                fill: enableGradient ? 'url("#'.concat(encodeURI(linkId), '")') : animatedProps.color,
                d: animatedPath,
                fillOpacity: animatedProps.opacity,
                onMouseEnter: isInteractive ? handleMouseEnter : undefined,
                onMouseMove: isInteractive ? handleMouseMove : undefined,
                onMouseLeave: isInteractive ? handleMouseLeave : undefined,
                onClick: isInteractive ? handleClick : undefined,
                style: {
                    mixBlendMode: blendMode
                }
            })
        ]
    });
};

//# sourceMappingURL=SankeyLinksItem.js.map