@visactor/react-vtable/cjs/table-components/custom-component.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;
}, __importDefault = this && this.__importDefault || function(mod) {
    return mod && mod.__esModule ? mod : {
        default: mod
    };
};

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

const react_1 = __importStar(require("react")), table_1 = __importDefault(require("../context/table")), vutils_1 = require("@visactor/vutils"), CustomComponent = baseProps => {
    const context = (0, react_1.useContext)(table_1.default), {table: table} = context, props = useMergeProps(baseProps, {
        style: {
            left: 0,
            top: 0
        },
        className: "vtable-custom-component",
        displayMode: "position",
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        row: 0,
        col: 0,
        anchor: "top-left",
        dx: 0,
        dy: 0
    }), {displayMode: displayMode, x: x, y: y, width: width, height: height, row: row, col: col, anchor: anchor, dx: dx, dy: dy, className: className, children: children, style: style} = props;
    let styleLeft, styleTop, styleWidth, styleHeight;
    if ("position" === displayMode) styleLeft = x + dx + "px", styleTop = y + dy + "px", 
    styleWidth = width + "px", styleHeight = height + "px"; else if ("cell" === displayMode) {
        const cellRect = table && col >= 0 && row >= 0 ? null == table ? void 0 : table.getCellRelativeRect(col, row) : {
            width: 0,
            height: 0,
            left: -9999,
            top: -9999
        };
        styleWidth = dealWidthNumber(width, cellRect.width) + "px", styleHeight = dealWidthNumber(height, cellRect.height) + "px", 
        "top-left" === anchor ? (styleLeft = cellRect.left + dealWidthNumber(dx, cellRect.width) + "px", 
        styleTop = cellRect.top + dealWidthNumber(dy, cellRect.height) + "px") : "top-right" === anchor ? (styleLeft = cellRect.left + dealWidthNumber(dx, cellRect.width) + cellRect.width + "px", 
        styleTop = cellRect.top + dealWidthNumber(dy, cellRect.height) + "px") : "bottom-left" === anchor ? (styleLeft = cellRect.left + dealWidthNumber(dx, cellRect.width) + "px", 
        styleTop = cellRect.top + dealWidthNumber(dy, cellRect.height) + cellRect.height + "px") : "bottom-right" === anchor && (styleLeft = cellRect.left + dealWidthNumber(dx, cellRect.width) + cellRect.width + "px", 
        styleTop = cellRect.top + dealWidthNumber(dy, cellRect.height) + cellRect.height + "px");
    }
    const componentStyle = (0, vutils_1.merge)({}, style, {
        position: "absolute",
        zIndex: 1e3,
        width: styleWidth,
        height: styleHeight,
        left: styleLeft,
        top: styleTop
    });
    return react_1.default.createElement("div", {
        className: className,
        style: componentStyle
    }, react_1.default.Children.map(children, (child => child ? react_1.default.cloneElement(child, {}) : child)));
};

function useMergeProps(componentProps, defaultProps) {
    const _defaultProps = (0, react_1.useMemo)((() => Object.assign({}, defaultProps)), [ defaultProps ]);
    return (0, react_1.useMemo)((() => {
        const mProps = (0, vutils_1.merge)({}, componentProps);
        for (const propName in _defaultProps) void 0 === mProps[propName] && (mProps[propName] = _defaultProps[propName]);
        return mProps;
    }), [ componentProps, _defaultProps ]);
}

function dealWidthNumber(value, refenceValue) {
    return (0, vutils_1.isNumber)(value) ? value : "string" == typeof value && value.endsWith("%") ? Number(value.slice(0, -1)) / 100 * refenceValue : 0;
}

//# sourceMappingURL=custom-component.js.map
exports.CustomComponent = CustomComponent, exports.default = useMergeProps;