@atlaskit/avatar
Version:
An avatar is a visual representation of a user or entity.
82 lines (81 loc) • 4.94 kB
JavaScript
/* avatar-item.tsx generated by @compiled/babel-plugin v0.39.1 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./avatar-item.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _getCustomElement = _interopRequireDefault(require("./internal/get-custom-element"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var bgColorCssVar = '--avatar-item-bg-color';
var styles = {
root: "_2rkofajl _12ji1r31 _1qu2glyw _12y31o36 _4bfu1r31 _1hmsglyw _ajmmnqa1 _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1txw _vchhusvi _1bsb1osq _4cvr1h6o _bfhk1g13 _syaz1kw7 _1wyb1kw7 _zg8l4jg8 _k48pi7a9 _vwz4kb7n _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i51b66 _1q511b66 _y4ti1b66 _bozg1b66 _y3gn1e5h",
rootDisabled: "_80om13gf _tzy41e4z _lcxvglyw",
rootInteractive: "_nt751r31 _49pcglyw _1hvw1o36 _858u194a _9oik1r31 _1bnxglyw _jf4cnqa1 _irr314ae _d0altlke _1di61l7b",
avatarItem: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _vwz419ii _bozgu2gc",
baseText: "_1e0c1ule _syazi7uo",
truncation: "_1reo15vq _1bto1l2s _o5721q9c",
secondaryTextLegacy: "_syaz1rpy _1wyb181o"
};
/**
* __Avatar item__
*
* An avatar item is a wrapper that goes around an avatar when it's displayed alongside text, such as a name or status.
*
* - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
* - [Code](https://atlassian.design/components/avatar/avatar-item/code)
*/
var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var avatar = _ref.avatar,
_ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor,
isTruncationDisabled = _ref.isTruncationDisabled,
href = _ref.href,
isDisabled = _ref.isDisabled,
onClick = _ref.onClick,
primaryText = _ref.primaryText,
secondaryText = _ref.secondaryText,
target = _ref.target,
testId = _ref.testId,
label = _ref.label;
var Container = (0, _getCustomElement.default)(isDisabled, href, onClick);
var isInteractive = Boolean(onClick || href);
return /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
style: (0, _defineProperty2.default)({}, bgColorCssVar, backgroundColor),
ref: ref,
"aria-label": isInteractive ? label : undefined,
onClick: onClick,
disabled: isDisabled,
"data-testid": testId ? "".concat(testId, "--itemInner") : undefined,
type: Container === 'button' ? 'button' : undefined
}, href && {
href: href,
target: target,
rel: target === '_blank' ? 'noopener noreferrer' : undefined
}, {
className: (0, _runtime.ax)([styles.root, isInteractive && styles.rootInteractive, isDisabled && styles.rootDisabled])
}), avatar, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)([styles.avatarItem])
}, (0, _platformFeatureFlags.fg)('platform.design-system-team.avatar-item-font-size_830x6') ? /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_compiled.Text, {
maxLines: isTruncationDisabled ? undefined : 1
}, primaryText), /*#__PURE__*/React.createElement(_compiled.Text, {
color: "color.text.subtlest",
maxLines: isTruncationDisabled ? undefined : 1,
size: "small"
}, secondaryText)) : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("span", {
className: (0, _runtime.ax)([styles.baseText, !isTruncationDisabled && styles.truncation])
}, primaryText), /*#__PURE__*/React.createElement("span", {
className: (0, _runtime.ax)([styles.baseText, styles.secondaryTextLegacy, !isTruncationDisabled && styles.truncation])
}, secondaryText))));
});
AvatarItem.displayName = 'AvatarItem';
var _default = exports.default = AvatarItem;