@navinc/base-react-components
Version:
Nav's Pattern Library
64 lines (63 loc) • 3 kB
JavaScript
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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { Copy } from './copy';
import { Icon } from './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.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.img.withConfig({ displayName: "brc-sc-Img", componentId: "brc-sc-1lhbb2j" }) `
width: 100%;
`;
const AvatarImage = ({ alt, src, size, label, defaultIcon = 'people/profile' }) => (_jsxs(ImgContainer, { size: size, src: src, label: label, children: [src && _jsx(Img, { alt: alt || 'avatar image', src: src, "data-testid": "avatar:image" }), !src && label && _jsx(Copy, { "data-testid": "avatar:abbr", children: getDefaultText(label) }), !src && !label && _jsx(Icon, { "data-testid": `avatar:icon ${defaultIcon}`, name: defaultIcon })] }));
const AvatarContainer = styled.div.withConfig({ displayName: "brc-sc-AvatarContainer", componentId: "brc-sc-1rfs3e2" }) `
display: flex;
align-items: center;
${Copy} {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
export const Avatar = (_a) => {
var { className, label, size, alt, src, defaultIcon, labelSize = 'md' } = _a, rest = __rest(_a, ["className", "label", "size", "alt", "src", "defaultIcon", "labelSize"]);
return (_jsxs(AvatarContainer, Object.assign({ className: className, "data-testid": "avatar" }, rest, { children: [_jsx(AvatarImage, { size: size, alt: alt, src: src, label: label, defaultIcon: defaultIcon }), label && (_jsx(Copy, { "data-testid": "avatar:label", size: labelSize, children: label }))] })));
};
//# sourceMappingURL=avatar.js.map