@atlaskit/avatar
Version:
An avatar is a visual representation of a user or entity.
98 lines (96 loc) • 3.72 kB
JavaScript
/* avatar-image.tsx generated by @compiled/babel-plugin v0.36.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 PersonIconLegacy from '@atlaskit/icon/core/migration/person';
import ReleaseIconMigration from '@atlaskit/icon/core/migration/release--ship';
import PersonIcon from '@atlaskit/icon/core/person';
import ReleaseIcon from '@atlaskit/icon/core/release';
import { fg } from '@atlaskit/platform-feature-flags';
import { N0, N90 } from '@atlaskit/theme/colors';
var styles = {
image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
iconBg: "_bfhkr4aa",
iconBGVisualRefresh: "_bfhk1v33",
circle: "_2rko1q5u"
};
var borderRadiusMap = {
xsmall: "_2rkogqwt",
small: "_2rkogqwt",
medium: "_2rko1l7b",
large: "_2rko1l7b",
xlarge: "_2rkoi2wt",
xxlarge: "_2rkob7nn"
};
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;
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) {
return /*#__PURE__*/React.createElement("span", {
className: ax([styles.icon, fg('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
}, appearance === 'circle' ? fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(PersonIcon, {
label: alt,
color: "var(--ds-icon-subtle, #626F86)",
testId: testId && "".concat(testId, "--person"),
spacing: "spacious"
}) : /*#__PURE__*/React.createElement(PersonIconLegacy, {
label: alt,
color: "var(--ds-icon-inverse, ".concat(N0, ")"),
LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(N90, ")"),
testId: testId && "".concat(testId, "--person"),
spacing: "spacious"
}) : fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(ReleaseIcon, {
label: alt,
color: "var(--ds-icon-subtle, #626F86)",
testId: testId && "".concat(testId, "--ship"),
spacing: "spacious"
}) : /*#__PURE__*/React.createElement(ReleaseIconMigration, {
label: alt,
color: "var(--ds-icon-inverse, ".concat(N0, ")"),
LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(N90, ")"),
testId: testId && "".concat(testId, "--ship"),
spacing: "spacious"
}));
}
return /*#__PURE__*/React.createElement("img", {
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])
});
};
export default AvatarImage;