@razorpay/blade
Version:
The Design System that powers Razorpay
19 lines (16 loc) • 6.61 kB
JavaScript
import { getBaseInputBorderStyles } from './getBaseInputBorderStyles.native.js';
import { baseInputBorderColor, baseInputBorderWidth, baseInputBorderlessBackgroundColor, baseInputBackgroundColor, baseInputPaddingTokens, baseInputHeight, baseInputWrapperMaxHeight } from './baseInputTokens.js';
import { getInputVisualsToBeRendered } from './BaseInputVisuals.js';
import getTextStyles from '../../Typography/Text/getTextStyles.js';
import { makeSpace } from '../../../utils/makeSpace/makeSpace.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 '../../BladeProvider/useTheme.js';
import getIn from '../../../utils/lodashButBetter/get.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;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 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]);}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.medium),borderStyle:'solid',display:'flex',flexDirection:'row',width:'100%',alignItems:isTextArea?'flex-start':undefined,position:'relative',height:isDropdownTrigger&&!isTextArea?'auto':undefined,border:'none'},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;if(isDropdownTrigger){return theme.spacing[0];}if(hasLeadingIcon||hasPrefix){return theme.spacing[3];}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;if(hasTrailingInteractionElement||hasSuffix||hasTrailingIcon){return theme.spacing[3];}return theme.spacing[baseInputPaddingTokens.right[size]];};var getBaseInputStyles=function getBaseInputStyles(_ref5){var theme=_ref5.theme,isDisabled=_ref5.isDisabled,leadingIcon=_ref5.leadingIcon,prefix=_ref5.prefix,trailingInteractionElement=_ref5.trailingInteractionElement,leadingInteractionElement=_ref5.leadingInteractionElement,suffix=_ref5.suffix,trailingIcon=_ref5.trailingIcon,textAlign=_ref5.textAlign,isTextArea=_ref5.isTextArea,hasTags=_ref5.hasTags,isDropdownTrigger=_ref5.isDropdownTrigger,size=_ref5.size,valueComponentType=_ref5.valueComponentType;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,weight:'regular',color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',theme:theme}):getTextStyles({size:size,variant:'body',weight:'regular',color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',theme:theme}),{flex:1,backgroundColor:theme.colors.transparent,paddingTop:makeSpace(theme.spacing[baseInputPaddingTokens.top[size]]),paddingBottom:makeSpace(theme.spacing[baseInputPaddingTokens.bottom[size]]),paddingLeft:makeSpace(getLeftPadding({theme:theme,isDropdownTrigger:isDropdownTrigger,hasLeadingIcon:hasLeadingIcon,hasPrefix:hasPrefix,size:size})),paddingRight:getRightPadding({theme:theme,hasTrailingInteractionElement:hasTrailingInteractionElement,hasSuffix:hasSuffix,hasTrailingIcon:hasTrailingIcon,size:size}),textAlign:textAlign,width:'100%',height:shouldHaveFlexibleHeight?undefined:makeSpace(baseInputHeight[size]),minHeight:shouldHaveFlexibleHeight?undefined:makeSpace(baseInputHeight[size])},isReactNative?{}:{resize:'none'});};var getAnimatedBaseInputWrapperMaxHeight=function getAnimatedBaseInputWrapperMaxHeight(_ref6){var maxTagRows=_ref6.maxTagRows,showAllTags=_ref6.showAllTags,size=_ref6.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