@visactor/react-vtable/es/table-components/custom-component.js

The react version of VTable

import React, { useContext, useMemo } from "react";

import RootTableContext from "../context/table";

import { isNumber, merge } from "@visactor/vutils";

export const CustomComponent = baseProps => {
    const context = useContext(RootTableContext), {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 = merge({}, style, {
        position: "absolute",
        zIndex: 1e3,
        width: styleWidth,
        height: styleHeight,
        left: styleLeft,
        top: styleTop
    });
    return React.createElement("div", {
        className: className,
        style: componentStyle
    }, React.Children.map(children, (child => child ? React.cloneElement(child, {}) : child)));
};

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

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