@atlaskit/avatar
Version:
An avatar is a visual representation of a user or entity.
102 lines (100 loc) • 3.38 kB
JavaScript
/* avatar-image.tsx generated by @compiled/babel-plugin v0.39.1 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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';
var styles = {
image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
icon: "_1e0c1txw _1bsb1osq _4t3i1osq _bfhk7qp0",
circle: "_2rko1rr0",
hexagon: "_mkrz1k6g"
};
var borderRadiusMap = {
xsmall: "_2rkolb4i",
small: "_2rkolb4i",
medium: "_2rko12b0",
large: "_2rko12b0",
xlarge: "_2rko1qi0",
xxlarge: "_2rkopb1k"
};
var 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.
*/
var AvatarImage = function AvatarImage(_ref) {
var _ref$alt = _ref.alt,
alt = _ref$alt === void 0 ? '' : _ref$alt,
src = _ref.src,
appearance = _ref.appearance,
size = _ref.size,
testId = _ref.testId,
imgLoading = _ref.imgLoading;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
hasImageErrored = _useState2[0],
setHasImageErrored = _useState2[1];
// If src changes, reset state
useEffect(function () {
setHasImageErrored(false);
}, [src]);
if (!src || hasImageErrored) {
var renderedIcon;
switch (appearance) {
case 'circle':
renderedIcon = /*#__PURE__*/React.createElement(PersonIcon, {
label: alt,
color: "var(--ds-icon-subtle, #505258)",
testId: testId && "".concat(testId, "--person"),
spacing: "spacious"
});
break;
case 'hexagon':
renderedIcon = /*#__PURE__*/React.createElement(AiAgentIcon, {
label: alt,
color: "var(--ds-icon-subtle, #505258)",
testId: testId && "".concat(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 && "".concat(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 && "".concat(testId, "--image"),
onError: function onError() {
return setHasImageErrored(true);
},
"aria-hidden": !alt ? true : undefined,
"data-vc": testId ? "".concat(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;