@razorpay/blade/build/lib/web/production/components/Counter/Counter.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 { StyledCounter } from './StyledCounter.web.js';
import { counterHeight, horizontalPadding } from './counterTokens.js';
import '../Typography/index.js';
import '../Box/BaseBox/index.js';
import '../BladeProvider/index.js';
import '../../utils/metaAttribute/index.js';
import '../Box/styledProps/index.js';
import '../../utils/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx } from 'react/jsx-runtime';
import useTheme from '../BladeProvider/useTheme.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { isReactNative } from '../../utils/platform/isReactNative.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 { makeSize } from '../../utils/makeSize/makeSize.js';
import { Text } from '../Typography/Text/Text.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';

var _excluded = ["value", "max", "color", "emphasis", "size", "testID"];
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 getColorProps = function getColorProps(_ref) {
  var _ref$color = _ref.color,
    color = _ref$color === void 0 ? 'neutral' : _ref$color,
    _ref$emphasis = _ref.emphasis,
    emphasis = _ref$emphasis === void 0 ? 'subtle' : _ref$emphasis;
  var props = {
    textColor: 'feedback.text.neutral.intense',
    backgroundColor: 'feedback.background.neutral.subtle'
  };
  if (color === 'primary') {
    // primary color badge
    props.textColor = emphasis === 'intense' ? "surface.text.staticWhite.normal" : "surface.text.primary.normal";
    props.backgroundColor = "surface.background.primary.".concat(emphasis);
  } else {
    // feedback colors badge
    props.textColor = emphasis === 'intense' ? "surface.text.staticWhite.normal" : "feedback.text.".concat(color, ".intense");
    props.backgroundColor = "feedback.background.".concat(color, ".").concat(emphasis);
  }
  return props;
};
var _Counter = function _Counter(_ref2, ref) {
  var value = _ref2.value,
    max = _ref2.max,
    _ref2$color = _ref2.color,
    color = _ref2$color === void 0 ? 'neutral' : _ref2$color,
    _ref2$emphasis = _ref2.emphasis,
    emphasis = _ref2$emphasis === void 0 ? 'subtle' : _ref2$emphasis,
    _ref2$size = _ref2.size,
    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
    testID = _ref2.testID,
    rest = _objectWithoutProperties(_ref2, _excluded);
  var content = "".concat(value);
  if (max && value > max) {
    content = "".concat(max, "+");
  }
  var _useTheme = useTheme(),
    platform = _useTheme.platform;
  var _getColorProps = getColorProps({
      color: color,
      emphasis: emphasis
    }),
    backgroundColor = _getColorProps.backgroundColor,
    textColor = _getColorProps.textColor;
  var counterTextSizes = {
    small: {
      variant: 'body',
      size: 'xsmall'
    },
    medium: {
      variant: 'body',
      size: 'small'
    },
    large: {
      variant: 'body',
      size: 'medium'
    }
  };
  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
    ref: ref,
    display: isReactNative() ? 'flex' : 'inline-flex'
  }, metaAttribute({
    name: MetaConstants.Counter,
    testID: testID
  })), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
    children: /*#__PURE__*/jsx(StyledCounter, {
      minHeight: makeSize(counterHeight[size]),
      backgroundColor: backgroundColor,
      size: size,
      platform: platform,
      children: /*#__PURE__*/jsx(BaseBox, {
        paddingX: horizontalPadding[size],
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden",
        children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, counterTextSizes[size]), {}, {
          textAlign: "center",
          weight: "medium",
          truncateAfterLines: 1,
          color: textColor,
          children: content
        }))
      })
    })
  }));
};
var Counter = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Counter), {
  displayName: 'Counter',
  componentId: 'Counter'
});

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