@visactor/react-vtable/es/components/button/button.js

The react version of VTable

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: "#FFF"
    },
    panelStyle: {
        visible: !0,
        fill: "#165dff",
        lineWidth: 1,
        cornerRadius: 2
    },
    padding: 10,
    state: {
        panelStyle: {
            hover: {
                fill: "#4080ff"
            },
            disabled: {
                fill: "#94bfff"
            }
        }
    }
};

function ButtonComponent(baseProps, ref) {
    const props = merge({}, defaultProps, baseProps), {disabled: disabled, onClick: onClick} = props;
    let buttonRef = React.useRef(null);
    buttonRef = ref || buttonRef;
    const handleClick = React.useCallback((event => {
        disabled ? "function" == typeof (null == event ? void 0 : event.preventDefault) && event.preventDefault() : onClick && onClick(event);
    }), [ disabled, onClick ]), attribute = getTagAttribute(props);
    return useEffect((() => {
        const inst = buttonRef.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 = buttonRef.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: buttonRef,
        attribute: attribute,
        onClick: handleClick
    });
}

function getTagAttribute(props) {
    var _a, _b, _c, _d;
    const {textStyle: textStyle, padding: padding, panelStyle: panelStyle, minWidth: minWidth, maxWidth: maxWidth, visible: visible, cursor: cursor, disabled: disabled, 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
            }
        }
    };
}

export const Button = React.forwardRef(ButtonComponent);

Button.displayName = "Button";
//# sourceMappingURL=button.js.map