@razorpay/blade
Version:
The Design System that powers Razorpay
29 lines (26 loc) • 1.68 kB
JavaScript
import styled, { css } from 'styled-components';
import { switchColors, switchMotion } from './switchTokens.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../Box/BaseBox/index.js';
import '../../utils/makeMotionTime/index.web.js';
import '../../utils/makeBorderSize/index.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
var AnimatedThumb = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "AnimatedThumbweb__AnimatedThumb",
componentId: "i5qu0o-0"
})(function (_ref) {
var theme = _ref.theme,
isChecked = _ref.isChecked,
isDisabled = _ref.isDisabled,
isPressed = _ref.isPressed;
var variant = isDisabled ? 'disabled' : 'default';
var backgroundColor = getIn(theme, switchColors.thumb[variant].background);
var duration = makeMotionTime(getIn(theme, switchMotion.duration.thumb));
// offset the thumb x% left because we change the width and width changes from the center origin of thumb
var offset = isChecked ? '-39%' : '12.5%';
return css(["display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;position:relative;will-change:transform,left;width:", ";left:", ";transform:translateX(", ");transition:", ";border-radius:", ";animation-duration:", ";background-color:", ";"], isPressed ? '125%' : '100%', isPressed ? offset : '0%', isChecked ? '100%' : '0%', duration, makeBorderSize(theme.border.radius.max), duration, backgroundColor);
});
export { AnimatedThumb };
//# sourceMappingURL=AnimatedThumb.web.js.map