@razorpay/blade/build/lib/native/components/Input/BaseInput/AnimatedBaseInputWrapper.native.js

The Design System that powers Razorpay

import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import Animated, { useSharedValue, withTiming, runOnJS, useAnimatedStyle } from 'react-native-reanimated';
import styled from 'styled-components/native';
import { getInputBackgroundAndBorderStyles, getAnimatedBaseInputWrapperMaxHeight, getBaseInputState } from './baseInputStyles.js';
import { baseInputHeight, baseInputWrapperMaxHeight, baseInputBorderColor, baseInputBackgroundColor, baseInputBorderBackgroundMotion } from './baseInputTokens.js';
import 'react-native';
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 getIn from '../../../utils/lodashButBetter/get.js';

var _excluded=["showAllTags","isTextArea","numberOfLines","setShowAllTagsWithAnimation","children","maxTagRows","isDropdownTrigger"];var StyledBaseInputWrapper=styled(Animated.View)(function(props){return Object.assign({},getInputBackgroundAndBorderStyles({theme:props.theme,isFocused:props.currentInteraction==='focus',isDisabled:props.isDisabled,validationState:props.validationState,isTextArea:props.isTextArea,isDropdownTrigger:props.isDropdownTrigger,isTableInputCell:props.isTableInputCell}));});var _AnimatedBaseInputWrapper=function _AnimatedBaseInputWrapper(_ref,ref){var showAllTags=_ref.showAllTags,isTextArea=_ref.isTextArea,numberOfLines=_ref.numberOfLines,setShowAllTagsWithAnimation=_ref.setShowAllTagsWithAnimation,children=_ref.children,maxTagRows=_ref.maxTagRows,isDropdownTrigger=_ref.isDropdownTrigger,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var sharedHeight=useSharedValue(baseInputHeight[rest.size]);React__default.useEffect(function(){if(!isDropdownTrigger){return;}sharedHeight.value=withTiming(showAllTags?baseInputWrapperMaxHeight[rest.size]:baseInputHeight[rest.size],{duration:theme.motion.duration.xquick,easing:castNativeType(theme.motion.easing.exit)},function(isComplete){if(isComplete&&!showAllTags){runOnJS(setShowAllTagsWithAnimation)(false);}});},[showAllTags]);var animatedStyle=useAnimatedStyle(function(){return {maxHeight:sharedHeight.value};});var animatedStyleObject=maxTagRows==='expandable'?animatedStyle:{};var maxHeightStyleObject={maxHeight:getAnimatedBaseInputWrapperMaxHeight({maxTagRows:maxTagRows,showAllTags:showAllTags,size:rest.size})};var baseInputState=getBaseInputState({isFocused:rest.currentInteraction==='focus',isHovered:rest.currentInteraction==='hover',isDisabled:Boolean(rest.isDisabled)});var borderColor=getIn(theme.colors,baseInputBorderColor[baseInputState]);var backgroundColor=getIn(theme.colors,baseInputBackgroundColor[baseInputState]);if(rest.validationState==='error'){borderColor=getIn(theme.colors,baseInputBorderColor.error);}else if(rest.validationState==='success'){borderColor=getIn(theme.colors,baseInputBorderColor.success);}var motionConfig={duration:castNativeType(makeMotionTime(getIn(theme.motion.duration,baseInputBorderBackgroundMotion[rest.currentInteraction==='focus'?'enter':'exit'].duration))),easing:castNativeType(theme.motion.easing[baseInputBorderBackgroundMotion[rest.currentInteraction==='focus'?'enter':'exit'].easing])};var animatedBorderAndBackgroundStyle=useAnimatedStyle(function(){return {borderWidth:rest.isTableInputCell?theme.border.width.none:theme.border.width.thin,borderRadius:theme.border.radius.medium,borderStyle:'solid',backgroundColor:withTiming(backgroundColor,motionConfig),borderColor:withTiming(borderColor,motionConfig)};},[borderColor,backgroundColor,motionConfig]);return jsx(StyledBaseInputWrapper,Object.assign({ref:ref,style:[isDropdownTrigger&&!isTextArea?Object.assign({},maxHeightStyleObject,animatedStyleObject):{},animatedBorderAndBackgroundStyle],isDropdownTrigger:isDropdownTrigger,numberOfLines:numberOfLines,setShowAllTagsWithAnimation:setShowAllTagsWithAnimation},rest,{children:children}));};var AnimatedBaseInputWrapper=React__default.forwardRef(_AnimatedBaseInputWrapper);

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