@razorpay/blade/build/lib/web/production/components/Avatar/AvatarButton.js

The Design System that powers Razorpay

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { StyledAvatarButton } from './StyledAvatarButton.js';
import { avatarIconSizeTokens, avatarTextSizeMapping } from './avatarTokens.js';
import '../Box/BaseBox/index.js';
import '../../utils/makeAccessible/index.js';
import '../Typography/index.js';
import { getTextColorToken } from '../Button/BaseButton/BaseButton.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { Heading } from '../Typography/Heading/Heading.js';
import { Text } from '../Typography/Text/Text.js';

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 _AvatarButton = function _AvatarButton(_ref, ref) {
  var href = _ref.href,
    target = _ref.target,
    rel = _ref.rel,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'circle' : _ref$variant,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? 'neutral' : _ref$color,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    Icon = _ref.icon,
    imgProps = _ref.imgProps,
    children = _ref.children,
    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,
    isSelected = _ref.isSelected;
  var isLink = Boolean(href);
  var isInteractive = Boolean(onClick || isLink);
  var as = isInteractive ? href ? 'a' : 'button' : 'div';
  var defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;
  var iconColor = getTextColorToken({
    property: 'icon',
    variant: 'secondary',
    color: color,
    state: 'default'
  });
  var textColor = getTextColorToken({
    property: 'text',
    variant: 'secondary',
    color: color,
    state: 'default'
  });
  return /*#__PURE__*/jsx(StyledAvatarButton, {
    ref: ref,
    as: as,
    isInteractive: isInteractive,
    isSelected: isSelected,
    size: size,
    color: color,
    href: href,
    variant: variant,
    target: target,
    rel: rel !== null && rel !== void 0 ? rel : defaultRel,
    accessibilityProps: _objectSpread({}, makeAccessible({
      role: isInteractive ? isLink ? 'link' : 'button' : 'presentation'
    })),
    onBlur: onBlur,
    onFocus: onFocus,
    onClick: onClick,
    onMouseLeave: onMouseLeave,
    onMouseMove: onMouseMove,
    onMouseDown: onMouseDown,
    onPointerDown: onPointerDown,
    onPointerEnter: onPointerEnter,
    onTouchStart: onTouchStart,
    onTouchEnd: onTouchEnd,
    children: /*#__PURE__*/jsxs(BaseBox, {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      zIndex: 1,
      height: "100%",
      children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        children: /*#__PURE__*/jsx(Icon, {
          size: avatarIconSizeTokens[size],
          color: iconColor
        })
      }) : null, imgProps !== null && imgProps !== void 0 && imgProps.src ? /*#__PURE__*/jsx("img", _objectSpread({}, imgProps)) : null, size === 'xlarge' ? /*#__PURE__*/jsx(Heading, {
        size: avatarTextSizeMapping[size],
        weight: "semibold",
        color: textColor,
        children: children
      }) : /*#__PURE__*/jsx(Text, {
        size: avatarTextSizeMapping[size],
        weight: "semibold",
        color: textColor,
        children: children
      })]
    })
  });
};
var AvatarButton = /*#__PURE__*/React__default.forwardRef(_AvatarButton);

export { AvatarButton };
//# sourceMappingURL=AvatarButton.js.map