@razorpay/blade/build/lib/native/components/Switch/AnimatedThumb.native.js

The Design System that powers Razorpay

import styled from 'styled-components/native';
import React__default from 'react';
import Animated, { useSharedValue, withTiming, useAnimatedStyle, interpolate } from 'react-native-reanimated';
import { switchColors, switchMotion, switchSizes } from './switchTokens.js';
import isNumber from '../../utils/lodashButBetter/isNumber.js';
import getIn from '../../utils/lodashButBetter/get.js';
import 'react-native';
import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
import '@babel/runtime/helpers/slicedToArray';
import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
import useTheme from '../BladeProvider/useTheme.js';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import '../BottomSheet/BottomSheetStack.js';
import { jsx } from 'react/jsx-runtime';

var StyledAnimatedThumb=styled(Animated.View)(function(_ref){var theme=_ref.theme,isDisabled=_ref.isDisabled;var variant=isDisabled?'disabled':'default';var backgroundColor=getIn(theme,switchColors.thumb[variant].background);return {display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,width:'100%',height:'100%',borderRadius:makeBorderSize(theme.border.radius.max),backgroundColor:backgroundColor,position:'absolute'};});var AnimatedThumb=function AnimatedThumb(_ref2){var isChecked=_ref2.isChecked,isDisabled=_ref2.isDisabled,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,children=_ref2.children,isPressed=_ref2.isPressed;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var sharedLeft=useSharedValue(isChecked?1:0);var sharedWidth=useSharedValue(isPressed?1:0);var sharedShouldShiftOffset=useSharedValue(Boolean(isChecked&&isPressed));var easing=getIn(theme,switchMotion.easing.thumb);var duration=getIn(theme,switchMotion.duration.thumb);var thumbWidth=switchSizes.thumb[matchedDeviceType][size].width;var finalWidth=isNumber(thumbWidth)?thumbWidth:getIn(theme,thumbWidth);React__default.useEffect(function(){sharedLeft.value=withTiming(isChecked?1:0,{duration:duration,easing:easing});},[isChecked]);React__default.useEffect(function(){sharedWidth.value=withTiming(isPressed?1:0,{duration:duration,easing:easing});},[isPressed]);React__default.useEffect(function(){sharedShouldShiftOffset.value=Boolean(isChecked&&isPressed);},[isChecked,isPressed]);var thumbAnimation=useAnimatedStyle(function(){return {width:interpolate(sharedWidth.value,[0,1],[finalWidth,finalWidth*1.25]),left:withTiming(sharedShouldShiftOffset.value?finalWidth*-0.25:0,{easing:easing,duration:duration}),transform:[{translateX:interpolate(sharedLeft.value,[0,1],[0,finalWidth])}]};},[]);return jsx(StyledAnimatedThumb,{style:thumbAnimation,isDisabled:isDisabled,children:children});};

export { AnimatedThumb };
//# sourceMappingURL=AnimatedThumb.native.js.map