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

The react version of VTable

import { measureTextSize } from "@visactor/vtable/es/vrender";

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

import React from "react";

import { Group, Text } from "../../table-components";

const defaultProps = {
    textStyle: {
        fontSize: 14,
        fontFamily: "sans-serif",
        fill: "#FFF"
    },
    panelStyle: {
        visible: !0,
        fill: "rgb(201, 205, 212)",
        lineWidth: 1,
        cornerRadius: 2
    },
    size: 40,
    shape: "circle",
    autoFixFontSize: !0
};

function AvatarComponent(baseProps, ref) {
    const props = merge({}, defaultProps, baseProps), {size: size, children: children, onClick: onClick} = props;
    let avatarRef = React.useRef(null);
    avatarRef = ref || avatarRef;
    const handleClick = React.useCallback((event => {
        onClick && onClick(event);
    }), [ onClick ]), groupAttribute = getGroupAttribute(props);
    if (isString(children)) {
        const textAttribute = getTextAttribute(props);
        return React.createElement(Group, {
            ref: avatarRef,
            attribute: groupAttribute,
            onClick: handleClick
        }, React.createElement(Text, {
            attribute: textAttribute
        }));
    }
    return "image" === children.type && (children.props.attribute.width = size, children.props.attribute.height = size), 
    React.createElement(Group, {
        ref: avatarRef,
        attribute: groupAttribute,
        onClick: handleClick
    }, children);
}

function getTextAttribute(props) {
    const {textStyle: textStyle, size: size, children: children, autoFixFontSize: autoFixFontSize} = props, attribute = Object.assign({
        text: children
    }, textStyle);
    return autoFixFontSize && getAutoFixFontSize(size, attribute), attribute;
}

function getGroupAttribute(props) {
    var _a;
    const {panelStyle: panelStyle, size: size, shape: shape} = props;
    return Object.assign(Object.assign({}, panelStyle), {
        width: size,
        height: size,
        clip: !0,
        cornerRadius: "circle" === shape ? size / 2 : null !== (_a = panelStyle.cornerRadius) && void 0 !== _a ? _a : 2,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        visibleAll: !0,
        path: void 0
    });
}

export const Avatar = React.forwardRef(AvatarComponent);

function getAutoFixFontSize(size, attribute) {
    const scale = size / (measureTextSize(attribute.text, attribute).width + 8), fontSize = Math.max(Math.floor(attribute.fontSize * scale), 6);
    attribute.fontSize = fontSize;
}

//# sourceMappingURL=avatar.js.map
Avatar.displayName = "Avatar";