@visactor/react-vtable/cjs/components/link/link.js

The react version of VTable

"use strict";

var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
    void 0 === k2 && (k2 = k);
    var desc = Object.getOwnPropertyDescriptor(m, k);
    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
        enumerable: !0,
        get: function() {
            return m[k];
        }
    }), Object.defineProperty(o, k2, desc);
} : function(o, m, k, k2) {
    void 0 === k2 && (k2 = k), o[k2] = m[k];
}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
    Object.defineProperty(o, "default", {
        enumerable: !0,
        value: v
    });
} : function(o, v) {
    o.default = v;
}), __importStar = this && this.__importStar || function(mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
    return __setModuleDefault(result, mod), result;
};

Object.defineProperty(exports, "__esModule", {
    value: !0
}), exports.Link = void 0;

const tag_1 = require("../vrender-components/tag"), vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("react")), defaultProps = {
    textStyle: {
        fontSize: 14,
        fontFamily: "sans-serif",
        fill: "rgb(64, 128, 255)"
    },
    panelStyle: {
        visible: !0,
        opacity: 0,
        fill: "rgba(242, 243, 245, 0.5)",
        lineWidth: 1,
        cornerRadius: 2
    },
    padding: 4,
    space: 6,
    state: {
        textStyle: {
            disabled: {
                fill: "rgb(148, 191, 255)"
            }
        },
        panelStyle: {
            hover: {
                opacity: 1
            }
        }
    }
};

function LinkComponent(baseProps, ref) {
    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {disabled: disabled, href: href, onClick: onClick} = props;
    let linkRef = react_1.default.useRef(null);
    linkRef = ref || linkRef;
    const handleClick = react_1.default.useCallback((event => {
        disabled ? "function" == typeof (null == event ? void 0 : event.preventDefault) && event.preventDefault() : (onClick && onClick(event), 
        href && window.open(href));
    }), [ disabled, href, onClick ]), attribute = getTagAttribute(props);
    return (0, react_1.useEffect)((() => {
        const inst = linkRef.current;
        inst && (inst.addEventListener("mouseenter", (() => {
            var _a, _b;
            disabled || (inst.addState("hover", !0, !1), null === (_b = null === (_a = inst.stage) || void 0 === _a ? void 0 : _a.renderNextFrame) || void 0 === _b || _b.call(_a));
        })), inst.addEventListener("mouseleave", (() => {
            var _a, _b;
            disabled || (inst.removeState("hover", !1), null === (_b = null === (_a = inst.stage) || void 0 === _a ? void 0 : _a.renderNextFrame) || void 0 === _b || _b.call(_a));
        })));
    }), []), (0, react_1.useEffect)((() => {
        var _a, _b;
        const inst = linkRef.current;
        inst && (disabled ? (inst.removeState("disabled", !1), inst.addState("disabled", !0, !1)) : inst.removeState("disabled", !1), 
        null === (_b = null === (_a = inst.stage) || void 0 === _a ? void 0 : _a.renderNextFrame) || void 0 === _b || _b.call(_a));
    })), react_1.default.createElement(tag_1.Tag, {
        ref: linkRef,
        attribute: attribute,
        onClick: handleClick
    });
}

function getTagAttribute(props) {
    var _a, _b, _c, _d;
    const {textStyle: textStyle, padding: padding, space: space, panelStyle: panelStyle, minWidth: minWidth, maxWidth: maxWidth, visible: visible, cursor: cursor, disabled: disabled, icon: icon, state: state, children: children} = props;
    return {
        text: children,
        textStyle: textStyle,
        padding: padding,
        panel: panelStyle,
        minWidth: minWidth,
        maxWidth: maxWidth,
        visible: visible,
        cursor: (null != cursor ? cursor : disabled) ? "not-allowed" : "pointer",
        childrenPickable: !1,
        state: {
            text: {
                hover: null === (_a = null == state ? void 0 : state.textStyle) || void 0 === _a ? void 0 : _a.hover,
                disabled: null === (_b = null == state ? void 0 : state.textStyle) || void 0 === _b ? void 0 : _b.disabled
            },
            panel: {
                hover: null === (_c = null == state ? void 0 : state.panelStyle) || void 0 === _c ? void 0 : _c.hover,
                disabled: null === (_d = null == state ? void 0 : state.panelStyle) || void 0 === _d ? void 0 : _d.disabled
            }
        },
        space: space,
        shape: {
            visible: !!icon,
            fill: !1,
            stroke: textStyle.fill,
            symbolType: "M -0.2927 -15.4348 L -15.142 -0.5855 C -18.6567 2.9292 -18.6567 8.6277 -15.142 12.1424 V 12.1424 C -11.6273 15.6571 -5.9288 15.6571 -2.4141 12.1424 L 15.2636 -5.5353 C 17.6067 -7.8784 17.6067 -11.6774 15.2636 -14.0206 V -14.0206 C 12.9205 -16.3637 9.1215 -16.3637 6.7783 -14.0206 L -10.8993 3.6571 C -12.0709 4.8287 -12.0709 6.7282 -10.8993 7.8997 V 7.8997 C -9.7278 9.0713 -7.8283 9.0713 -6.6567 7.8997 L 8.1925 -6.9495"
        }
    };
}

exports.Link = react_1.default.forwardRef(LinkComponent), exports.Link.displayName = "Link";
//# sourceMappingURL=link.js.map