UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

20 lines (17 loc) 2.04 kB
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties'; import styled from 'styled-components/native'; import Animated, { useSharedValue, withTiming, useAnimatedStyle, interpolateColor } from 'react-native-reanimated'; import React__default from 'react'; import { getTrackStyles } from './getTrackStyles.js'; import { switchMotion, switchColors } from './switchTokens.js'; import getIn from '../../utils/lodashButBetter/get.js'; import '@gorhom/portal'; import 'react-native-gesture-handler'; import useTheme from '../BladeProvider/useTheme.js'; import 'react-native'; import '@babel/runtime/helpers/slicedToArray'; import '../BottomSheet/BottomSheetStack.js'; import { jsx } from 'react/jsx-runtime'; var _excluded=["children","isChecked"];var StyledSwitchTrack=styled(Animated.View)(function(_ref){var theme=_ref.theme,size=_ref.size,deviceType=_ref.deviceType,isDisabled=_ref.isDisabled,isChecked=_ref.isChecked;return Object.assign({},getTrackStyles({theme:theme,size:size,deviceType:deviceType,isDisabled:isDisabled,isChecked:isChecked}));});var SwitchTrack=function SwitchTrack(_ref2){var children=_ref2.children,isChecked=_ref2.isChecked,props=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var sharedColor=useSharedValue(isChecked?1:0);var easing=getIn(theme,switchMotion.easing.track);var duration=getIn(theme,switchMotion.duration.track);var checkedColor=getIn(theme,switchColors.track.default.background.checked);var uncheckedColor=getIn(theme,switchColors.track.default.background.unchecked);React__default.useEffect(function(){sharedColor.value=withTiming(isChecked?1:0,{duration:duration,easing:easing});},[isChecked]);var colorStyle=useAnimatedStyle(function(){return {backgroundColor:interpolateColor(sharedColor.value,[0,1],[uncheckedColor,checkedColor])};},[]);return jsx(StyledSwitchTrack,Object.assign({isChecked:isChecked},props,{style:colorStyle,children:children}));}; export { SwitchTrack }; //# sourceMappingURL=SwitchTrack.native.js.map