@visactor/react-vtable
Version:
The react version of VTable
101 lines (94 loc) • 4.22 kB
JavaScript
import { Tag as VTag } from "../vrender-components/tag";
import { merge } from "@visactor/vutils";
import React, { useEffect } from "react";
const 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 = merge({}, defaultProps, baseProps), {disabled: disabled, href: href, onClick: onClick} = props;
let linkRef = React.useRef(null);
linkRef = ref || linkRef;
const handleClick = React.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 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));
})));
}), []), 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.createElement(VTag, {
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"
}
};
}
export const Link = React.forwardRef(LinkComponent);
Link.displayName = "Link";
//# sourceMappingURL=link.js.map