UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

24 lines (21 loc) 2.02 kB
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties'; import 'react'; import { Pressable } from 'react-native'; import styled from 'styled-components/native'; import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'; import { getIndicatorButtonStyles } from './getIndicatorButtonStyles.js'; import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js'; import '@babel/runtime/helpers/slicedToArray'; import { castNativeType } from '../../../utils/platform/castUtils.js'; import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.native.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'; import '../../../tokens/global/typography.js'; import '../../../tokens/global/motion.js'; import { size } from '../../../tokens/global/size.js'; var _excluded=["onClick","accessibilityLabel"];var PressableIndicatorButton=styled(BaseBox)(function(_ref){var theme=_ref.theme,isActive=_ref.isActive,variant=_ref.variant;return getIndicatorButtonStyles({theme:theme,isActive:isActive,variant:variant});});var StyledIndicatorButton=function StyledIndicatorButton(_ref2){var onClick=_ref2.onClick,accessibilityLabel=_ref2.accessibilityLabel,props=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var easing=castNativeType(theme.motion.easing.standard);var duration=castNativeType(makeMotionTime(theme.motion.duration.gentle));var style=useAnimatedStyle(function(){return {width:withTiming(props.isActive?size[18]:size[6],{duration:duration,easing:easing})};},[props.isActive]);return jsx(Pressable,{onPress:onClick,accessibilityLabel:accessibilityLabel,children:jsx(PressableIndicatorButton,Object.assign({},props,{children:jsx(Animated.View,{style:style})}))});}; export { StyledIndicatorButton }; //# sourceMappingURL=StyledIndicatorButton.native.js.map