@razorpay/blade/build/lib/web/development/components/Switch/ThumbIcon.js

The Design System that powers Razorpay

import { AnimatedThumbIcon } from './AnimatedThumbIcon.web.js';
import { switchColors } from './switchTokens.js';
import getIn from '../../utils/lodashButBetter/get.js';
import isNumber from '../../utils/lodashButBetter/isNumber.js';
import '../BladeProvider/index.js';
import '../../utils/index.js';
import '../Icons/_Svg/index.js';
import '../../tokens/global/index.js';
import '../../utils/makeSize/index.js';
import '../../utils/makeSpace/index.js';
import { jsx } from 'react/jsx-runtime';
import { size } from '../../tokens/global/size.js';
import useTheme from '../BladeProvider/useTheme.js';
import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import Path from '../Icons/_Svg/Path/Path.web.js';

var switchIconSize = {
  desktop: {
    small: size[6],
    medium: 'spacing.3'
  },
  mobile: {
    small: 'spacing.3',
    medium: size[10]
  }
};
var ThumbIcon = function ThumbIcon(_ref) {
  var isChecked = _ref.isChecked,
    isDisabled = _ref.isDisabled,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size;
  var _useTheme = useTheme(),
    theme = _useTheme.theme;
  var _useBreakpoint = useBreakpoint({
      breakpoints: theme.breakpoints
    }),
    matchedDeviceType = _useBreakpoint.matchedDeviceType;
  var width = switchIconSize[matchedDeviceType][size];
  var height = switchIconSize[matchedDeviceType][size];
  var finalWidth = isNumber(width) ? makeSize(width) : makeSpace(getIn(theme, width));
  var finalHeight = isNumber(height) ? makeSize(height) : makeSpace(getIn(theme, height));
  var variant = isDisabled ? 'disabled' : 'default';
  var fillColor = getIn(theme, switchColors.thumbIcon[variant].fill);
  // If the switch is checked and not disabled, then only it is effectively checked. and we should the icon then only.
  var isEffectivelyChecked = Boolean(isChecked) && !isDisabled;
  return /*#__PURE__*/jsx(AnimatedThumbIcon, {
    isChecked: isEffectivelyChecked,
    width: finalWidth,
    height: finalHeight
    // Switch uses a custom svg, this viewbox is copied from design
    ,
    viewBox: "0 0 11 8",
    fill: "none",
    children: /*#__PURE__*/jsx(Path, {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z",
      fill: fillColor
    })
  });
};

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