@razorpay/blade
Version:
The Design System that powers Razorpay
20 lines (17 loc) • 2.04 kB
JavaScript
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