@navinc/base-react-components/cjs/avatar.js

Nav's Pattern Library

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Avatar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const copy_1 = require("./copy");
const icon_1 = require("./icon");
const sizeMap = {
    medium: '32px',
    large: '50px',
};
const getSize = (size) => {
    if (!size)
        return sizeMap.medium;
    return sizeMap[size];
};
const getDefaultText = (text = '') => {
    var _a;
    const initials = (_a = text.match(/\b\w/g)) === null || _a === void 0 ? void 0 : _a.join('').toUpperCase();
    if (!initials)
        return '';
    if (initials.length > 1)
        return initials[0] + initials.slice(-1);
    return text.substring(0, 2).toUpperCase();
};
const ImgContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-ImgContainer", componentId: "brc-sc-17a3fc6" })(({ size, src, label, theme }) => `{
    border-radius: 10px;
    background-color: ${src ? 'transparent' : theme.navNeutral100};
    height: ${getSize(size)};
    width: ${getSize(size)};
    min-width: ${getSize(size)};
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: ${label ? '16px' : 0};
    overflow: hidden;
  }`);
const Img = styled_components_1.default.img.withConfig({ displayName: "brc-sc-Img", componentId: "brc-sc-1lhbb2j" }) `
  width: 100%;
`;
const AvatarImage = ({ alt, src, size, label, defaultIcon = 'people/profile' }) => ((0, jsx_runtime_1.jsxs)(ImgContainer, { size: size, src: src, label: label, children: [src && (0, jsx_runtime_1.jsx)(Img, { alt: alt || 'avatar image', src: src, "data-testid": "avatar:image" }), !src && label && (0, jsx_runtime_1.jsx)(copy_1.Copy, { "data-testid": "avatar:abbr", children: getDefaultText(label) }), !src && !label && (0, jsx_runtime_1.jsx)(icon_1.Icon, { "data-testid": `avatar:icon ${defaultIcon}`, name: defaultIcon })] }));
const AvatarContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-AvatarContainer", componentId: "brc-sc-1rfs3e2" }) `
  display: flex;
  align-items: center;

  ${copy_1.Copy} {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;
const Avatar = (_a) => {
    var { className, label, size, alt, src, defaultIcon, labelSize = 'md' } = _a, rest = __rest(_a, ["className", "label", "size", "alt", "src", "defaultIcon", "labelSize"]);
    return ((0, jsx_runtime_1.jsxs)(AvatarContainer, Object.assign({ className: className, "data-testid": "avatar" }, rest, { children: [(0, jsx_runtime_1.jsx)(AvatarImage, { size: size, alt: alt, src: src, label: label, defaultIcon: defaultIcon }), label && ((0, jsx_runtime_1.jsx)(copy_1.Copy, { "data-testid": "avatar:label", size: labelSize, children: label }))] })));
};
exports.Avatar = Avatar;
//# sourceMappingURL=avatar.js.map