@razorpay/blade/build/lib/web/development/components/Link/BaseLink/BaseLink.js

The Design System that powers Razorpay

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import StyledLink from './StyledBaseLink.web.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import useInteraction from '../../../utils/useInteraction.js';
import '../../BladeProvider/index.js';
import '../../Box/BaseBox/index.js';
import '../../Typography/BaseText/index.js';
import '../../../utils/metaAttribute/index.js';
import '../../../utils/index.js';
import '../../../utils/getStringChildren/index.js';
import '../../Box/styledProps/index.js';
import '../../../utils/makeAccessible/index.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import '../../../utils/logger/index.js';
import '../../../utils/makeAnalyticsAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { getStringFromReactText } from '../../../utils/getStringChildren/getStringChildren.js';
import useTheme from '../../BladeProvider/useTheme.js';
import { throwBladeError } from '../../../utils/logger/logger.js';
import { isReactNative } from '../../../utils/platform/isReactNative.js';
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { BaseText } from '../../Typography/BaseText/BaseText.web.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';

var _excluded = ["children", "icon", "iconPosition", "isDisabled", "onClick", "onKeyDown", "variant", "href", "target", "rel", "color", "opacity", "accessibilityProps", "className", "style", "size", "testID", "hitSlop", "htmlTitle", "onBlur", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd", "onMouseDown", "onMouseUp"],
  _excluded2 = ["currentInteraction", "setCurrentInteraction"];
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 getColorToken = function getColorToken(_ref) {
  var variant = _ref.variant,
    color = _ref.color,
    currentInteraction = _ref.currentInteraction,
    isDisabled = _ref.isDisabled,
    element = _ref.element;
  var state = currentInteraction;
  var map = {
    "default": 'normal',
    hover: 'subtle',
    focus: 'normal',
    disabled: 'disabled'
  };
  if (isDisabled && variant == 'button') {
    state = 'disabled';
  }
  if (color && color !== 'primary') {
    if (color !== 'white') {
      return "interactive.".concat(element, ".").concat(color, ".").concat(map[state]);
    }
    return "interactive.".concat(element, ".staticWhite.").concat(map[state]);
  }
  return "interactive.".concat(element, ".primary.").concat(map[state]);
};
var getProps = function getProps(_ref2) {
  var theme = _ref2.theme,
    variant = _ref2.variant,
    currentInteraction = _ref2.currentInteraction,
    children = _ref2.children,
    isDisabled = _ref2.isDisabled,
    color = _ref2.color,
    target = _ref2.target,
    size = _ref2.size;
  var isButton = variant === 'button';
  var textSizes = {
    fontSize: {
      xsmall: 25,
      small: 75,
      medium: 100,
      large: 200
    },
    lineHeight: {
      xsmall: 25,
      small: 75,
      medium: 100,
      large: 200
    }
  };
  var props = {
    as: isButton ? 'button' : 'a',
    textDecorationLine: !isButton && currentInteraction !== 'default' ? 'underline' : 'none',
    iconColor: getColorToken({
      variant: variant,
      color: color,
      element: 'icon',
      currentInteraction: currentInteraction,
      isDisabled: isDisabled
    }),
    fontSize: textSizes.fontSize[size],
    lineHeight: textSizes.lineHeight[size],
    iconSize: size,
    iconPadding: children !== null && children !== void 0 && children.trim() ? 'spacing.2' : 'spacing.0',
    textColor: getColorToken({
      variant: variant,
      color: color,
      element: 'text',
      currentInteraction: currentInteraction,
      isDisabled: isDisabled
    }),
    focusRingColor: getIn(theme.colors, 'interactive.background.primary.faded'),
    motionDuration: 'duration.2xquick',
    motionEasing: 'easing.standard',
    cursor: isButton && isDisabled ? 'not-allowed' : 'pointer',
    disabled: isButton && isDisabled,
    role: isButton ? 'button' : 'link',
    defaultRel: target && target === '_blank' ? 'noreferrer noopener' : undefined,
    type: isButton ? 'button' : undefined
  };
  return props;
};
var _BaseLink = function _BaseLink(_ref3, ref) {
  var children = _ref3.children,
    Icon = _ref3.icon,
    _ref3$iconPosition = _ref3.iconPosition,
    iconPosition = _ref3$iconPosition === void 0 ? 'left' : _ref3$iconPosition,
    _ref3$isDisabled = _ref3.isDisabled,
    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
    onClick = _ref3.onClick,
    onKeyDown = _ref3.onKeyDown,
    _ref3$variant = _ref3.variant,
    variant = _ref3$variant === void 0 ? 'anchor' : _ref3$variant,
    href = _ref3.href,
    target = _ref3.target,
    rel = _ref3.rel,
    _ref3$color = _ref3.color,
    color = _ref3$color === void 0 ? 'primary' : _ref3$color,
    opacity = _ref3.opacity,
    accessibilityProps = _ref3.accessibilityProps,
    className = _ref3.className,
    style = _ref3.style,
    _ref3$size = _ref3.size,
    size = _ref3$size === void 0 ? 'medium' : _ref3$size,
    testID = _ref3.testID,
    hitSlop = _ref3.hitSlop,
    htmlTitle = _ref3.htmlTitle,
    _onBlur = _ref3.onBlur,
    _onFocus = _ref3.onFocus,
    _onMouseLeave = _ref3.onMouseLeave,
    onMouseMove = _ref3.onMouseMove,
    onPointerDown = _ref3.onPointerDown,
    onPointerEnter = _ref3.onPointerEnter,
    onTouchStart = _ref3.onTouchStart,
    onTouchEnd = _ref3.onTouchEnd,
    onMouseDown = _ref3.onMouseDown,
    onMouseUp = _ref3.onMouseUp,
    rest = _objectWithoutProperties(_ref3, _excluded);
  var childrenString = getStringFromReactText(children);
  var _useInteraction = useInteraction(),
    currentInteraction = _useInteraction.currentInteraction,
    setCurrentInteraction = _useInteraction.setCurrentInteraction,
    syntheticEvents = _objectWithoutProperties(_useInteraction, _excluded2);
  var _useTheme = useTheme(),
    theme = _useTheme.theme;
  if (true) {
    if (!Icon && !(childrenString !== null && childrenString !== void 0 && childrenString.trim())) {
      throwBladeError({
        message: "At least one of icon or text is required to render a link.",
        moduleName: 'BaseLink'
      });
    }
  }
  var _getProps = getProps({
      theme: theme,
      variant: variant,
      currentInteraction: currentInteraction,
      children: childrenString,
      isDisabled: isDisabled,
      color: color,
      target: target,
      size: size
    }),
    as = _getProps.as,
    textDecorationLine = _getProps.textDecorationLine,
    iconColor = _getProps.iconColor,
    iconPadding = _getProps.iconPadding,
    iconSize = _getProps.iconSize,
    fontSize = _getProps.fontSize,
    textColor = _getProps.textColor,
    focusRingColor = _getProps.focusRingColor,
    motionDuration = _getProps.motionDuration,
    motionEasing = _getProps.motionEasing,
    cursor = _getProps.cursor,
    disabled = _getProps.disabled,
    role = _getProps.role,
    defaultRel = _getProps.defaultRel,
    type = _getProps.type,
    lineHeight = _getProps.lineHeight;
  var handleOnClick = function handleOnClick(event) {
    if (onClick) {
      onClick(event);
    }
  };
  var asProp = isReactNative() ? undefined : 'span';
  return /*#__PURE__*/jsx(StyledLink, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
    ref: ref
  }, metaAttribute({
    name: MetaConstants.Link,
    testID: testID
  })), {}, {
    accessibilityProps: _objectSpread({}, makeAccessible(_objectSpread({
      role: role,
      disabled: disabled
    }, accessibilityProps))),
    variant: variant,
    as: as,
    href: href,
    target: target,
    rel: rel !== null && rel !== void 0 ? rel : defaultRel,
    onClick: handleOnClick
  }, syntheticEvents), {}, {
    onBlur: function onBlur(event) {
      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(event);
      syntheticEvents.onBlur();
    },
    onFocus: function onFocus(event) {
      _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
      syntheticEvents.onFocus();
    },
    onMouseLeave: function onMouseLeave(event) {
      if (_onMouseLeave) {
        _onMouseLeave(event);
      }
      syntheticEvents.onMouseLeave();
    },
    onMouseMove: onMouseMove,
    onPointerDown: onPointerDown,
    onPointerEnter: onPointerEnter,
    onTouchStart: onTouchStart,
    onTouchEnd: onTouchEnd,
    onKeyDown: onKeyDown,
    onMouseDown: onMouseDown,
    onMouseUp: onMouseUp,
    disabled: disabled,
    type: type,
    cursor: cursor,
    focusRingColor: focusRingColor,
    motionDuration: motionDuration,
    motionEasing: motionEasing,
    setCurrentInteraction: setCurrentInteraction
  }, getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
    // @ts-ignore Because we avoided exposing className to public
    className: className,
    style: style,
    hitSlop: hitSlop,
    title: htmlTitle,
    children: /*#__PURE__*/jsxs(BaseBox, {
      as: asProp,
      display: "flex",
      flexDirection: "row",
      className: "content-container",
      alignItems: "center",
      opacity: opacity,
      children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(BaseBox, {
        as: asProp,
        paddingRight: iconPadding,
        display: "flex",
        alignItems: "center",
        children: /*#__PURE__*/jsx(Icon, {
          color: iconColor,
          size: iconSize
        })
      }) : null, /*#__PURE__*/jsx(BaseText, {
        as: asProp,
        textDecorationLine: textDecorationLine,
        color: textColor,
        fontSize: fontSize,
        lineHeight: lineHeight,
        textAlign: "center",
        fontWeight: "medium",
        children: children
      }), Icon && iconPosition == 'right' ? /*#__PURE__*/jsx(BaseBox, {
        as: asProp,
        paddingLeft: iconPadding,
        display: "flex",
        alignItems: "center",
        children: /*#__PURE__*/jsx(Icon, {
          color: iconColor,
          size: iconSize
        })
      }) : null]
    })
  }));
};
var BaseLink = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_BaseLink), {
  displayName: 'BaseLink',
  componentId: 'BaseLink'
});

export { BaseLink as default };
//# sourceMappingURL=BaseLink.js.map