@visactor/react-vtable/cjs/components/button/button.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.Button = 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: "#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 = (0, vutils_1.merge)({}, defaultProps, baseProps), {disabled: disabled, onClick: onClick} = props;
    let buttonRef = react_1.default.useRef(null);
    buttonRef = ref || buttonRef;
    const handleClick = react_1.default.useCallback((event => {
        disabled ? "function" == typeof (null == event ? void 0 : event.preventDefault) && event.preventDefault() : onClick && onClick(event);
    }), [ disabled, onClick ]), attribute = getTagAttribute(props);
    return (0, react_1.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));
        })));
    })), (0, react_1.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_1.default.createElement(tag_1.Tag, {
        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
            }
        }
    };
}

exports.Button = react_1.default.forwardRef(ButtonComponent), exports.Button.displayName = "Button";
//# sourceMappingURL=button.js.map