@razorpay/blade
Version:
The Design System that powers Razorpay
65 lines (62 loc) • 2.59 kB
JavaScript
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);
return /*#__PURE__*/jsx(AnimatedThumbIcon, {
isChecked: Boolean(isChecked),
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