@razorpay/blade
Version:
The Design System that powers Razorpay
21 lines (18 loc) • 8.6 kB
JavaScript
import { getBaseInputBorderStyles } from './getBaseInputBorderStyles.native.js';
import { baseInputBorderColor, baseInputBorderWidth, baseInputBorderlessBackgroundColor, baseInputBorderRadius, baseInputBackgroundColor, baseInputHeight, baseInputWrapperMaxHeight, baseInputCounterInputPaddingTokens, baseInputPaddingTokens } from './baseInputTokens.js';
import { getInputVisualsToBeRendered } from './BaseInputVisuals.js';
import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
import 'react-native';
import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
import '@babel/runtime/helpers/slicedToArray';
import 'react';
import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
import '../../../tokens/global/typography.js';
import '../../../tokens/global/motion.js';
import '../../BladeProvider/useTheme.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import getTextStyles from '../../Typography/Text/getTextStyles.js';
import getHeadingStyles from '../../Typography/Heading/getHeadingStyles.js';
var getBaseInputState=function getBaseInputState(_ref){var isFocused=_ref.isFocused,isHovered=_ref.isHovered,isDisabled=_ref.isDisabled;if(isDisabled){return 'disabled';}else if(isFocused){return 'focused';}else if(isHovered){return 'hovered';}else {return 'default';}};var getInputBackgroundAndBorderStyles=function getInputBackgroundAndBorderStyles(_ref2){var theme=_ref2.theme,isHovered=_ref2.isHovered,isFocused=_ref2.isFocused,isDisabled=_ref2.isDisabled,validationState=_ref2.validationState,isTextArea=_ref2.isTextArea,isDropdownTrigger=_ref2.isDropdownTrigger,isTableInputCell=_ref2.isTableInputCell,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,borderRadius=_ref2.borderRadius;var backgroundColorTokens=isTableInputCell?baseInputBorderlessBackgroundColor:baseInputBackgroundColor;var backgroundColor=getIn(theme.colors,backgroundColorTokens.default);var borderColor=isTableInputCell?theme.colors.transparent:getIn(theme.colors,baseInputBorderColor.default);var borderWidth=getIn(theme.border.width,baseInputBorderWidth.default);var zIndex;var baseInputState=getBaseInputState({isFocused:isFocused,isHovered:isHovered,isDisabled:isDisabled});backgroundColor=getIn(theme.colors,backgroundColorTokens[baseInputState]);borderColor=isTableInputCell&&baseInputState!=='focused'?theme.colors.transparent:getIn(theme.colors,baseInputBorderColor[baseInputState]);borderWidth=getIn(theme.border.width,baseInputBorderWidth[baseInputState]);if(!isTableInputCell&&validationState&&validationState!=='none'){borderColor=getIn(theme.colors,baseInputBorderColor[validationState]);borderWidth=getIn(theme.border.width,baseInputBorderWidth[validationState]);zIndex=1;}else if(validationState&&validationState!=='none'){backgroundColor=getIn(theme.colors,baseInputBorderlessBackgroundColor[validationState]);}return Object.assign({backgroundColor:backgroundColor,borderRadius:makeBorderSize(isTableInputCell?theme.border.radius.none:theme.border.radius[borderRadius!=null?borderRadius:baseInputBorderRadius[size]]),overflow:'hidden',borderStyle:'solid',display:'flex',flexDirection:'row',width:'100%',alignItems:isTextArea?'flex-start':'center',position:'relative',height:isDropdownTrigger&&!isTextArea?'auto':undefined,border:'none',zIndex:zIndex},getBaseInputBorderStyles({theme:theme,borderColor:borderColor,borderWidth:borderWidth,isFocused:isFocused}));};var getLeftPadding=function getLeftPadding(_ref3){var theme=_ref3.theme,isDropdownTrigger=_ref3.isDropdownTrigger,hasLeadingIcon=_ref3.hasLeadingIcon,hasPrefix=_ref3.hasPrefix,size=_ref3.size,hasLeadingDropdown=_ref3.hasLeadingDropdown,isInsideCounterInput=_ref3.isInsideCounterInput;if(isDropdownTrigger){return theme.spacing[0];}if(hasLeadingIcon||hasPrefix||hasLeadingDropdown){return theme.spacing[3];}if(isInsideCounterInput){return theme.spacing[baseInputCounterInputPaddingTokens.left[size]];}return theme.spacing[baseInputPaddingTokens.left[size]];};var getRightPadding=function getRightPadding(_ref4){var theme=_ref4.theme,hasTrailingInteractionElement=_ref4.hasTrailingInteractionElement,hasSuffix=_ref4.hasSuffix,hasTrailingIcon=_ref4.hasTrailingIcon,size=_ref4.size,isInsideCounterInput=_ref4.isInsideCounterInput;if(hasTrailingInteractionElement||hasSuffix||hasTrailingIcon){return theme.spacing[3];}if(isInsideCounterInput){return theme.spacing[baseInputCounterInputPaddingTokens.right[size]];}return theme.spacing[baseInputPaddingTokens.right[size]];};var getTopPadding=function getTopPadding(_ref5){var theme=_ref5.theme,size=_ref5.size,isInsideCounterInput=_ref5.isInsideCounterInput;if(isInsideCounterInput){return theme.spacing[baseInputCounterInputPaddingTokens.top[size]];}return theme.spacing[baseInputPaddingTokens.top[size]];};var getBottomPadding=function getBottomPadding(_ref6){var theme=_ref6.theme,size=_ref6.size,isInsideCounterInput=_ref6.isInsideCounterInput;if(isInsideCounterInput){return theme.spacing[baseInputCounterInputPaddingTokens.top[size]];}return theme.spacing[baseInputPaddingTokens.bottom[size]];};var getBaseInputStyles=function getBaseInputStyles(_ref7){var theme=_ref7.theme,isDisabled=_ref7.isDisabled,leadingIcon=_ref7.leadingIcon,prefix=_ref7.prefix,trailingInteractionElement=_ref7.trailingInteractionElement,leadingInteractionElement=_ref7.leadingInteractionElement,suffix=_ref7.suffix,trailingIcon=_ref7.trailingIcon,textAlign=_ref7.textAlign,isTextArea=_ref7.isTextArea,hasTags=_ref7.hasTags,isDropdownTrigger=_ref7.isDropdownTrigger,size=_ref7.size,padding=_ref7.padding,valueComponentType=_ref7.valueComponentType,_ref7$hasLeadingDropd=_ref7.hasLeadingDropdown,hasLeadingDropdown=_ref7$hasLeadingDropd===void 0?false:_ref7$hasLeadingDropd,color=_ref7.color,disabledColor=_ref7.disabledColor,isInsideCounterInput=_ref7.isInsideCounterInput;var _getInputVisualsToBeR=getInputVisualsToBeRendered({leadingIcon:leadingIcon,prefix:prefix,trailingInteractionElement:trailingInteractionElement,leadingInteractionElement:leadingInteractionElement,suffix:suffix,trailingIcon:trailingIcon,size:size}),hasLeadingIcon=_getInputVisualsToBeR.hasLeadingIcon,hasPrefix=_getInputVisualsToBeR.hasPrefix,hasTrailingInteractionElement=_getInputVisualsToBeR.hasTrailingInteractionElement,hasSuffix=_getInputVisualsToBeR.hasSuffix,hasTrailingIcon=_getInputVisualsToBeR.hasTrailingIcon;var isDropdownWithTags=isDropdownTrigger&&hasTags;var isReactNative=getPlatformType()==='react-native';var shouldHaveFlexibleHeight=isTextArea||isDropdownWithTags;return Object.assign({},valueComponentType==='heading'?getHeadingStyles({size:size==='xsmall'?'small':size,weight:'regular',color:isDisabled?'surface.text.gray.disabled':'interactive.text.gray.normal',theme:theme}):getTextStyles({size:isInsideCounterInput&&size==='xsmall'?'small':size,variant:'body',weight:isInsideCounterInput?'semibold':'regular',color:isDisabled?disabledColor!=null?disabledColor:'surface.text.gray.disabled':color!=null?color:'interactive.text.gray.normal',theme:theme}),{flex:1,backgroundColor:theme.colors.transparent,paddingTop:padding!=null?padding:makeSpace(getTopPadding({theme:theme,size:size,isInsideCounterInput:isInsideCounterInput})),paddingBottom:padding!=null?padding:makeSpace(getBottomPadding({theme:theme,size:size,isInsideCounterInput:isInsideCounterInput})),paddingLeft:padding!=null?padding:makeSpace(getLeftPadding({theme:theme,isDropdownTrigger:isDropdownTrigger,hasLeadingIcon:hasLeadingIcon,hasPrefix:hasPrefix,size:size,hasLeadingDropdown:hasLeadingDropdown,isInsideCounterInput:isInsideCounterInput})),paddingRight:padding!=null?padding:getRightPadding({theme:theme,hasTrailingInteractionElement:hasTrailingInteractionElement,hasSuffix:hasSuffix,hasTrailingIcon:hasTrailingIcon,size:size,isInsideCounterInput:isInsideCounterInput}),textAlign:textAlign,width:'100%',height:shouldHaveFlexibleHeight?undefined:makeSpace(baseInputHeight[size]),minHeight:shouldHaveFlexibleHeight?undefined:makeSpace(baseInputHeight[size])},isReactNative?{}:{resize:'none',boxSizing:'border-box'});};var getAnimatedBaseInputWrapperMaxHeight=function getAnimatedBaseInputWrapperMaxHeight(_ref8){var maxTagRows=_ref8.maxTagRows,showAllTags=_ref8.showAllTags,size=_ref8.size;if(maxTagRows==='single'){return baseInputHeight[size];}if(maxTagRows==='multiple'){return baseInputWrapperMaxHeight[size];}return showAllTags?baseInputWrapperMaxHeight[size]:baseInputHeight[size];};
export { getAnimatedBaseInputWrapperMaxHeight, getBaseInputState, getBaseInputStyles, getInputBackgroundAndBorderStyles };
//# sourceMappingURL=baseInputStyles.js.map