@atlaskit/avatar
Version:
An avatar is a visual representation of a user or entity.
83 lines (82 loc) • 5.07 kB
JavaScript
/* avatar-item.tsx generated by @compiled/babel-plugin v0.36.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 _utilities = require("./utilities");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var bgColorCssVar = '--avatar-item-bg-color';
var styles = {
root: "_2rko1l7b _12ji1r31 _1qu2glyw _12y31o36 _4bfu1r31 _1hmsglyw _ajmmnqa1 _1h6d1j28 _1dqonqa1 _189e1bk5 _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 _syaz1fxt",
truncation: "_1reo15vq _1bto1l2s _o5721q9c",
secondaryTextLegacy: "_syaz131l _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, _utilities.getCustomElement)(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: "UNSAFE_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;