nice-ui
Version:
React design system, components, and utilities
220 lines (219 loc) • 7.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Avatar = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const iconista_1 = require("iconista");
const use_t_1 = require("use-t");
const LogoStatic_1 = require("../LogoStatic");
const Link_1 = require("../Link");
const context_1 = require("../../styles/context");
const { useState } = React;
const defaultWidth = 32;
const sizes = [10, 16, 20, 24, 32, 40, 48, 64, 128, 256, 512];
const defaultSize = 4;
const fontSizeFactor = 0.5;
const blockClass = (0, nano_theme_1.rule)({
...nano_theme_1.lightTheme.font.ui1.mid,
pos: 'relative',
d: 'flex',
flex: '0 0',
alignItems: 'center',
justifyContent: 'center',
ov: 'hidden',
w: defaultWidth + 'px',
h: defaultWidth + 'px',
lh: defaultWidth + 'px',
bdrad: '50%',
bg: nano_theme_1.lightTheme.color.color[0],
col: '#fff',
ta: 'center',
fz: 32 * fontSizeFactor + 'px',
mar: 0,
pad: 0,
bd: 0,
cur: 'pointer',
userSelect: 'none',
'&:hover': {
col: '#fff',
},
});
const hoverableClass = (0, nano_theme_1.rule)({
'&:hover': {
mar: '-2px',
// bd: `2px solid ${theme.color.sem.warning[0]}`,
},
});
const squareClass = (0, nano_theme_1.rule)({
bdrad: '8%',
});
const imgClass = (0, nano_theme_1.rule)({
d: 'block',
objectFit: 'cover',
w: defaultWidth + 'px',
h: defaultWidth + 'px',
});
const emojiClass = (0, nano_theme_1.rule)({
bg: 'transparent',
fz: defaultWidth + 'px',
lh: defaultWidth + 'px',
});
const postClass = (0, nano_theme_1.rule)({
bg: 'transparent',
bd: `1px solid ${nano_theme_1.lightTheme.g(0.5)}`,
col: nano_theme_1.lightTheme.g(0.3),
'&:hover': {
bd: `1px solid ${nano_theme_1.lightTheme.g(0.4)}`,
col: nano_theme_1.lightTheme.g(0.1),
},
});
const renderImg = (width, src, onError) => {
const props = {
className: imgClass,
src,
onError,
};
if (width) {
props.style = {
width,
height: width,
};
}
return React.createElement("img", { ...props });
};
const Avatar = (allProps) => {
const { id, href, name, emoji: emojiImmutable, size, src, width, post, grey, lightGrey, transparent, className, square, rounded, isPrivate, isOP, badge, hover, color, icon, del, bottomRight, noHover, bold, letters, ...rest } = allProps;
let emoji = emojiImmutable;
if (del)
emoji = '␡';
const theme = (0, nano_theme_1.useTheme)();
const [t] = (0, use_t_1.useT)();
const [error, setError] = useState(false);
const styles = (0, context_1.useStyles)();
const showText = error || !src;
const props = rest;
props.className =
(className || '') +
blockClass +
(hover ? hoverableClass : '') +
(square || emoji ? squareClass : '') +
(emoji ? emojiClass : '') +
(post ? postClass : '');
props.style = { ...props.style };
if (bold) {
props.style.fontWeight = 600;
}
if (noHover) {
props.style.cursor = 'default';
}
props.style.flex = `0 0 ${width || 32}px`;
if (transparent) {
props.style.background = 'transparent';
}
else if (lightGrey) {
props.style.background = theme.g(0.1, 0.08);
props.style.color = theme.g(0.2, 0.4);
props.style.fill = theme.g(0.2, 0.4);
}
else if (grey || del) {
props.style.background = theme.g(0.4);
props.style.color = theme.g(0.9);
props.style.fill = theme.g(0.9);
}
else if (color) {
props.style.background = color;
}
const computedWidth = width || (size ? sizes[defaultSize + (size || 0)] : 0);
const realWidth = computedWidth || defaultWidth;
if (computedWidth) {
props.style.width = computedWidth;
props.style.height = computedWidth;
props.style.lineHeight = emoji ? `${computedWidth * 1.07}px` : `${computedWidth}px`;
props.style.fontSize = emoji ? `${computedWidth * 0.85}px` : `${computedWidth * fontSizeFactor}px`;
if (computedWidth < 24) {
props.style.fontWeight = 'bold';
props.style.lineHeight = computedWidth + 1 + 'px';
}
}
if (showText && name && !emoji && !post && !(grey || del) && !lightGrey && !transparent && !color) {
props.style.background = styles.col.hash(id || name) + '';
}
else if (post) {
props.style.background = theme.g(0.1, 0.08);
props.style.border = 0;
props.style.borderRadius = '15%';
}
if (rounded) {
props.style.borderRadius = '25%';
}
if ((grey || del || lightGrey) && !name) {
props.style.opacity = 0.3;
}
let element = icon ? (icon) : post ? (React.createElement(LogoStatic_1.LogoStatic, { variant: 'round', size: realWidth * 0.8 })) : showText ? (emoji ? (emoji) : typeof name === 'string' && name.length > 0 ? (name.slice(0, letters || 2).trim()) : ('')) : (renderImg(computedWidth, src, () => setError(true)));
if (href) {
element = (React.createElement(Link_1.Link, { a: true, ...props, to: href }, element));
}
else {
element = React.createElement("span", { ...props }, element);
}
if (isPrivate || badge || isOP || !!bottomRight) {
const size = computedWidth || 32;
let lock;
let badgeElement;
let subAvatarElement;
if (isPrivate) {
const lockSize = size * 0.5;
const iconSize = lockSize * 0.75;
const lockStyle = {
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
top: size * -0.1,
left: size * -0.1,
background: props.style.background || styles.col.hash(id || name || '') + '' || theme.color.sem.negative[0],
width: lockSize + 'px',
height: lockSize + 'px',
borderRadius: '50%',
fill: '#fff',
color: '#fff',
};
lock = (React.createElement("span", { style: lockStyle, title: t('Private') },
React.createElement(iconista_1.default, { set: "atlaskit", icon: "lock-filled", width: iconSize, height: iconSize, style: { margin: `${size <= 40 ? -1 : 0}px 0 0` } })));
}
if (badge || isOP) {
const badgeSize = size * 0.25;
badgeElement = (React.createElement("span", { style: {
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
top: size * -0.035,
right: size * -0.035,
background: styles.col.get('warning', 'el-2'),
border: `1px solid ${theme.bg}`,
width: badgeSize + 'px',
height: badgeSize + 'px',
borderRadius: '50%',
fill: theme.bg,
color: theme.bg,
} }));
}
if (bottomRight) {
const subAvatarSize = size * 0.6;
subAvatarElement = (React.createElement("span", { style: {
display: 'inline-block',
position: 'absolute',
bottom: -0.2 * subAvatarSize,
right: -0.3 * subAvatarSize,
} }, bottomRight));
}
element = (React.createElement("span", { style: { display: 'inline-block', position: 'relative' } },
element,
lock,
badgeElement,
subAvatarElement));
}
return element;
};
exports.Avatar = Avatar;