@razorpay/blade/build/lib/web/production/components/Card/CardRoot.web.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import styled from 'styled-components';
import React__default from 'react';
import { CARD_SCALE_DOWN_VALUE, CARD_SCALE_UP_VALUE, CARD_LINK_OVERLAY_ID } from './constants.js';
import '../Box/BaseBox/index.js';
import '../../utils/index.js';
import '../../utils/makeAccessible/index.js';
import { useIsMobile } from '../../utils/useIsMobile.js';
import { jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';

var _excluded = ["as", "accessibilityLabel", "children"];
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 StyledCardRoot = /*#__PURE__*/styled(BaseBox).withConfig({
  displayName: "CardRootweb__StyledCardRoot",
  componentId: "sc-1nb70ck-0"
})(function (_ref) {
  var as = _ref.as,
    theme = _ref.theme,
    isSelected = _ref.isSelected,
    isFocused = _ref.isFocused,
    shouldScaleOnHover = _ref.shouldScaleOnHover,
    isPressed = _ref.isPressed,
    isMobile = _ref.isMobile;
  var selectedColor = isSelected ? theme.colors.surface.border.primary.normal : 'transparent';
  var selectedBorder = "0px 0px 0px ".concat(theme.border.width.thicker, "px ").concat(selectedColor);
  //  focused state
  var focusRing = isFocused ? ", 0px 0px 0px 4px ".concat(theme.colors.surface.border.primary.muted) : '';
  return _objectSpread(_objectSpread(_objectSpread({
    // Selected state
    boxShadow: "".concat(selectedBorder).concat(focusRing),
    cursor: as === 'label' ? 'pointer' : 'initial'
  }, isMobile && isPressed && {
    transform: "scale(".concat(CARD_SCALE_DOWN_VALUE, ")")
  }), !isMobile && shouldScaleOnHover && {
    transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),
    transitionTimingFunction: castWebType(theme.motion.easing.standard),
    transitionProperty: 'transform, box-shadow',
    '&:hover': {
      transform: "scale(".concat(CARD_SCALE_UP_VALUE, ")")
    }
  }), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& a[href]:not(a[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
    zIndex: 2,
    position: 'relative'
  }), "& button:not(button[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
    zIndex: 2,
    position: 'relative'
  }), "& label:not(a[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
    zIndex: 2,
    position: 'relative'
  }), "& label:not(button[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
    zIndex: 2,
    position: 'relative'
  }));
});
var _CardRoot = function _CardRoot(_ref2, ref) {
  var as = _ref2.as,
    accessibilityLabel = _ref2.accessibilityLabel,
    children = _ref2.children,
    props = _objectWithoutProperties(_ref2, _excluded);
  var isMobile = useIsMobile();
  var _React$useState = React__default.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isPressed = _React$useState2[0],
    setIsPressed = _React$useState2[1];
  return /*#__PURE__*/jsx(StyledCardRoot, _objectSpread(_objectSpread(_objectSpread({
    ref: ref,
    as: as
  }, props), {}, {
    isMobile: isMobile,
    isPressed: props.shouldScaleOnHover ? isPressed : false,
    onTouchStart: function onTouchStart() {
      return setIsPressed(true);
    },
    onTouchEnd: function onTouchEnd() {
      return setIsPressed(false);
    },
    onMouseDown: function onMouseDown() {
      return setIsPressed(true);
    },
    onMouseUp: function onMouseUp() {
      return setIsPressed(false);
    }
  }, makeAccessible({
    label: as === 'label' ? accessibilityLabel : undefined
  })), {}, {
    children: children
  }));
};
var CardRoot = /*#__PURE__*/React__default.forwardRef(_CardRoot);

export { CardRoot };
//# sourceMappingURL=CardRoot.web.js.map