@atlaskit/avatar
Version:
An avatar is a visual representation of a user or entity.
96 lines (94 loc) • 2.97 kB
JavaScript
/* avatar-image.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./avatar-image.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useEffect, useState } from 'react';
import AiAgentIcon from '@atlaskit/icon/core/ai-agent';
import PersonIcon from '@atlaskit/icon/core/person';
import ReleaseIcon from '@atlaskit/icon/core/release';
const styles = {
image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
icon: "_1e0c1txw _1bsb1osq _4t3i1osq _bfhk7qp0",
circle: "_2rko1rr0",
hexagon: "_mkrz1k6g"
};
const borderRadiusMap = {
xsmall: "_2rkolb4i",
small: "_2rkolb4i",
medium: "_2rko12b0",
large: "_2rko12b0",
xlarge: "_2rko1qi0",
xxlarge: "_2rkopb1k"
};
const nestedSvgStylesMap = {
xsmall: "_w8l57vkz _17527vkz",
small: "_w8l51tcg _17521tcg",
medium: "_w8l5zwfg _1752zwfg",
large: "_w8l51ylp _17521ylp",
xlarge: "_w8l516xz _175216xz",
xxlarge: "_w8l51qr7 _17521qr7"
};
/**
* __Avatar image__
*
* An avatar image is an internal component used to control the rendering phases of an image.
*/
const AvatarImage = ({
alt = '',
src,
appearance,
size,
testId,
imgLoading
}) => {
const [hasImageErrored, setHasImageErrored] = useState(false);
// If src changes, reset state
useEffect(() => {
setHasImageErrored(false);
}, [src]);
if (!src || hasImageErrored) {
let renderedIcon;
switch (appearance) {
case 'circle':
renderedIcon = /*#__PURE__*/React.createElement(PersonIcon, {
label: alt,
color: "var(--ds-icon-subtle, #505258)",
testId: testId && `${testId}--person`,
spacing: "spacious"
});
break;
case 'hexagon':
renderedIcon = /*#__PURE__*/React.createElement(AiAgentIcon, {
label: alt,
color: "var(--ds-icon-subtle, #505258)",
testId: testId && `${testId}--agent`,
spacing: "spacious"
});
break;
default: // historical default for safety
case 'square':
renderedIcon = /*#__PURE__*/React.createElement(ReleaseIcon, {
label: alt,
color: "var(--ds-icon-subtle, #505258)",
testId: testId && `${testId}--ship`,
spacing: "spacious"
});
break;
}
return /*#__PURE__*/React.createElement("span", {
className: ax([styles.icon, nestedSvgStylesMap[size]])
}, renderedIcon);
}
return /*#__PURE__*/React.createElement("img", {
loading: imgLoading,
src: src,
alt: alt,
"data-testid": testId && `${testId}--image`,
onError: () => setHasImageErrored(true),
"aria-hidden": !alt ? true : undefined,
"data-vc": testId ? `${testId}--image` : 'avatar-image',
"data-ssr-placeholder-ignored": true,
className: ax([styles.image, borderRadiusMap[size], appearance === 'circle' && styles.circle, appearance === 'hexagon' && styles.hexagon])
});
};
export default AvatarImage;