@razorpay/blade
Version:
The Design System that powers Razorpay
192 lines (188 loc) • 7.79 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { StyledAvatar } from './StyledAvatar.js';
import { useAvatarGroupContext } from './AvatarGroupContext.js';
import { AvatarButton } from './AvatarButton.js';
import { avatarTopAddonOffsets, avatarToIndicatorSize, avatarToBottomAddonSize } from './avatarTokens.js';
import '../Box/styledProps/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/logger/index.js';
import '../Icons/index.js';
import '../Box/BaseBox/index.js';
import '../../utils/isValidAllowedChildren/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { throwBladeError } from '../../utils/logger/logger.js';
import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import UserIcon from '../Icons/UserIcon/UserIcon.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["name", "color", "size", "variant", "icon", "href", "target", "rel", "isSelected", "bottomAddon", "topAddon", "src", "alt", "srcSet", "crossOrigin", "referrerPolicy", "testID", "onBlur", "onFocus", "onClick", "onMouseLeave", "onMouseMove", "onMouseDown", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getInitials = function getInitials(name) {
// Combine first and last name initials
var names = name.trim().toUpperCase().split(' ');
if (names.length === 1) {
return names[0].substring(0, 2);
}
return names[0][0] + names[names.length - 1][0];
};
var _Avatar = function _Avatar(_ref, ref) {
var _groupProps$size;
var name = _ref.name,
_ref$color = _ref.color,
color = _ref$color === void 0 ? 'neutral' : _ref$color,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'circle' : _ref$variant,
icon = _ref.icon,
href = _ref.href,
target = _ref.target,
rel = _ref.rel,
isSelected = _ref.isSelected,
BottomAddon = _ref.bottomAddon,
topAddon = _ref.topAddon,
src = _ref.src,
alt = _ref.alt,
srcSet = _ref.srcSet,
crossOrigin = _ref.crossOrigin,
referrerPolicy = _ref.referrerPolicy,
testID = _ref.testID,
onBlur = _ref.onBlur,
onFocus = _ref.onFocus,
onClick = _ref.onClick,
onMouseLeave = _ref.onMouseLeave,
onMouseMove = _ref.onMouseMove,
onMouseDown = _ref.onMouseDown,
onPointerDown = _ref.onPointerDown,
onPointerEnter = _ref.onPointerEnter,
onTouchStart = _ref.onTouchStart,
onTouchEnd = _ref.onTouchEnd,
rest = _objectWithoutProperties(_ref, _excluded);
if (false) {
if (src && !alt && !name) {
throwBladeError({
moduleName: 'Avatar',
message: '"alt" or "name" prop is required when the "src" prop is provided.'
});
}
if (topAddon && getComponentId(topAddon) !== 'Indicator') {
throwBladeError({
moduleName: 'Avatar',
message: 'TopAddon only accepts `Indicator` component.'
});
}
}
var groupProps = useAvatarGroupContext();
var avatarSize = (_groupProps$size = groupProps === null || groupProps === void 0 ? void 0 : groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
var isInteractive = Boolean(onClick || href);
var commonButtonProps = {
variant: variant,
color: color,
size: avatarSize,
href: href,
target: target,
rel: rel,
onBlur: onBlur,
onFocus: onFocus,
isSelected: isSelected,
onClick: onClick,
onMouseLeave: onMouseLeave,
onMouseMove: onMouseMove,
onMouseDown: onMouseDown,
onPointerDown: onPointerDown,
onPointerEnter: onPointerEnter,
onTouchStart: onTouchStart,
onTouchEnd: onTouchEnd
};
var getChildrenToRender = function getChildrenToRender() {
if (src) {
return /*#__PURE__*/jsx(AvatarButton, _objectSpread(_objectSpread({}, commonButtonProps), {}, {
ref: ref,
imgProps: {
src: src,
alt: alt !== null && alt !== void 0 ? alt : name,
srcSet: srcSet,
crossOrigin: crossOrigin,
referrerPolicy: referrerPolicy
}
}));
}
if (name && !src) {
return /*#__PURE__*/jsx(AvatarButton, _objectSpread(_objectSpread({
ref: ref
}, commonButtonProps), {}, {
children: getInitials(name)
}));
}
return /*#__PURE__*/jsx(AvatarButton, _objectSpread(_objectSpread({
ref: ref
}, commonButtonProps), {}, {
icon: icon !== null && icon !== void 0 ? icon : UserIcon
}));
};
var isSquare = variant === 'square';
return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
name: MetaConstants.Avatar,
testID: testID
})), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
backgroundColor: "surface.background.gray.intense",
variant: variant,
size: avatarSize,
isInteractive: isInteractive,
children: /*#__PURE__*/jsxs(BaseBox, {
width: "100%",
height: "100%",
position: "relative",
children: [topAddon ? /*#__PURE__*/jsx(BaseBox, {
position: "absolute",
top: avatarTopAddonOffsets[variant][size].top,
right: avatarTopAddonOffsets[variant][size].right,
children: /*#__PURE__*/React__default.cloneElement(topAddon, {
size: avatarToIndicatorSize[size],
display: 'block'
})
}) : null, getChildrenToRender(), BottomAddon ? /*#__PURE__*/jsx(BaseBox, {
position: "absolute",
bottom: isSquare ? '-10%' : '0%',
right: isSquare ? '-10%' : '0%',
children: /*#__PURE__*/jsx(BottomAddon, {
display: "block",
size: avatarToBottomAddonSize[size]
})
}) : null]
})
}));
};
/**
* ### Avatar Component
*
* An avatar component is a standardized visual representation of a user or entity.
*
* ---
*
* #### Usage
*
* ```jsx
<Avatar name="Nitin Kumar" src="https://avatars.githubusercontent.com/u/46647141?v=4" />
* ```
*
* ---
*
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatar Avatar Documentation}
*
*/
var Avatar = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Avatar), {
displayName: 'Avatar',
componentId: 'Avatar'
});
export { Avatar };
//# sourceMappingURL=Avatar.web.js.map