@razorpay/blade/build/lib/native/components/Button/BaseButton/BaseButton.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import styled from 'styled-components/native';
import StyledBaseButton from './StyledBaseButton.native.js';
import { typography, spinnerColor, buttonIconOnlySizeToIconSizeMap, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, buttonIconOnlyHeightWidth, buttonPadding, buttonBorderRadius, backgroundGradient, textColor, boxShadow } from './buttonTokens.js';
import AnimatedButtonContent from './AnimatedButtonContent.native.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import 'react-native';
import { throwBladeError } from '../../../utils/logger/logger.js';
import { isReactNative } from '../../../utils/platform/isReactNative.js';
import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
import '../../../tokens/global/typography.js';
import '../../../tokens/global/motion.js';
import { usePrevious } from '../../../utils/usePrevious/usePrevious.js';
import useTheme from '../../BladeProvider/useTheme.js';
import { useButtonGroupContext } from '../../ButtonGroup/ButtonGroupContext.js';
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
import { BaseText } from '../../Typography/BaseText/BaseText.native.js';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import '../../BottomSheet/BottomSheetStack.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { announce } from '../../LiveAnnouncer/LiveAnnouncer.native.js';
import { BaseSpinner } from '../../Spinner/BaseSpinner/BaseSpinner.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.native.js';
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { getStringFromReactText } from '../../../utils/getStringChildren/getStringChildren.js';
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';

var _excluded=["href","target","rel","tabIndex","id","variant","color","size","icon","iconPosition","isDisabled","isFullWidth","isLoading","onClick","onBlur","onKeyDown","type","children","testID","onFocus","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","accessibilityProps","onTouchEnd","onTouchStart"];var getRenderElement=function getRenderElement(href){if(isReactNative()){return undefined;}if(href){return 'a';}return 'button';};var getBackgroundColorToken=function getBackgroundColorToken(_ref){var variant=_ref.variant,state=_ref.state,color=_ref.color;var _state=state==='focus'||state==='hover'?'highlighted':state;var gradientColor=color==='white'||color==='transparent'||!color?'primary':color;var tokens=backgroundGradient(gradientColor);if(color==='white'){return tokens.white[variant][_state];}if(color==='transparent'){if(variant!=='tertiary'){throw new Error(`Transparent color can only be used with tertiary variant but received "${variant}"`);}return tokens.base.transparent[_state];}if(color&&color!=='primary'){if(variant==='tertiary'){throw new Error(`Tertiary variant can only be used with color: "primary" or "white" but received "${color}"`);}}return tokens.base[variant][_state];};var getBoxShadowToken=function getBoxShadowToken(_ref2){var variant=_ref2.variant,state=_ref2.state,color=_ref2.color;var _state=state==='focus'||state==='hover'?'highlighted':state;var tokenColor=color==='white'||color==='transparent'||!color?'primary':color;var tokens=boxShadow(tokenColor);if(color==='white'){return tokens.white[variant][_state];}if(color==='transparent'){if(variant!=='tertiary'){throw new Error(`Transparent color can only be used with tertiary variant but received "${variant}"`);}return tokens.base.transparent[_state];}return tokens.base[variant][_state];};var getTextColorToken=function getTextColorToken(_ref3){var property=_ref3.property,variant=_ref3.variant,state=_ref3.state,color=_ref3.color;var tokens=textColor(property);var _state=state==='focus'||state==='hover'?'highlighted':state;if(color==='white'){return tokens.white[variant][_state];}if(color==='transparent'){if(variant!=='tertiary'){throw new Error(`Transparent color can only be used with tertiary variant but received "${variant}"`);}return tokens.transparent.tertiary[_state];}if(color&&color!=='primary'){if(variant==='tertiary'){throw new Error(`Tertiary variant can only be used with color: "primary" or "white" but received "${color}"`);}return tokens.color(color)[variant][_state];}return tokens.base[variant][_state];};var getProps=function getProps(_ref4){var buttonTypographyTokens=_ref4.buttonTypographyTokens,childrenString=_ref4.childrenString,isDisabled=_ref4.isDisabled,size=_ref4.size,theme=_ref4.theme,variant=_ref4.variant,color=_ref4.color,hasIcon=_ref4.hasIcon;if(variant==='tertiary'&&color!=='primary'&&color!=='white'&&color!=='transparent'){throwBladeError({moduleName:'BaseButton',message:`Tertiary variant can only be used with color: "primary" or "white" or "transparent" but received "${color}"`});}var isIconOnly=hasIcon&&(!childrenString||(childrenString==null?void 0:childrenString.trim().length)===0);var resolveBackgroundValue=function resolveBackgroundValue(value){if(value.startsWith('linear-gradient')){return value;}return getIn(theme.colors,value);};var getDefaultBackground=function getDefaultBackground(){return resolveBackgroundValue(getBackgroundColorToken({variant:variant,color:color,state:'default'}));};var getBoxShadow=function getBoxShadow(state,btnColor){var shadowTokens=getBoxShadowToken({variant:variant,color:btnColor,state:state});if(shadowTokens.length===0){return undefined;}var shadows=shadowTokens.map(function(shadow){var resolvedColor=getIn(theme.colors,shadow.color);return `inset 0 ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${resolvedColor}`;});return shadows.join(', ');};var props={iconSize:isIconOnly?buttonIconOnlySizeToIconSizeMap[size]:buttonSizeToIconSizeMap[size],spinnerSize:buttonSizeToSpinnerSizeMap[size],fontSize:buttonTypographyTokens.fonts.size[size],lineHeight:buttonTypographyTokens.lineHeights[size],minHeight:makeSize(minHeight[size]),height:isIconOnly?buttonIconOnlyHeightWidth[size]:undefined,width:isIconOnly?buttonIconOnlyHeightWidth[size]:undefined,iconColor:getTextColorToken({property:'icon',variant:variant,color:color,state:'default'}),textColor:getTextColorToken({property:'text',variant:variant,color:color,state:'default'}),buttonPaddingTop:isIconOnly?makeSpace(0):makeSpace(theme.spacing[buttonPadding[size].top]),buttonPaddingBottom:isIconOnly?makeSpace(0):makeSpace(theme.spacing[buttonPadding[size].bottom]),buttonPaddingLeft:isIconOnly?makeSpace(0):makeSpace(theme.spacing[buttonPadding[size].left]),buttonPaddingRight:isIconOnly?makeSpace(0):makeSpace(theme.spacing[buttonPadding[size].right]),text:childrenString==null?void 0:childrenString.trim(),defaultBackgroundColor:getDefaultBackground(),defaultBoxShadow:getBoxShadow('default',color),hoverBackgroundColor:resolveBackgroundValue(getBackgroundColorToken({variant:variant,color:color,state:'hover'})),hoverBoxShadow:getBoxShadow('hover',color),hoverIconColor:getIn(theme.colors,getTextColorToken({property:'icon',variant:variant,color:color,state:'hover'})),focusBackgroundColor:resolveBackgroundValue(getBackgroundColorToken({variant:variant,color:color,state:'focus'})),focusBoxShadow:getBoxShadow('focus',color),focusRingColor:getIn(theme.colors,'surface.border.primary.muted'),borderRadius:makeBorderSize(theme.border.radius[buttonBorderRadius[size]]),motionDuration:'duration.xquick',motionEasing:'easing.standard'};if(isDisabled){var disabledBackgroundColor=resolveBackgroundValue(getBackgroundColorToken({variant:variant,color:color,state:'disabled'}));props.iconColor=getTextColorToken({property:'icon',variant:variant,color:color,state:'disabled'});props.textColor=getTextColorToken({property:'text',variant:variant,color:color,state:'disabled'});props.defaultBackgroundColor=disabledBackgroundColor;props.defaultBoxShadow=getBoxShadow('disabled',color);props.hoverBackgroundColor=disabledBackgroundColor;props.hoverBoxShadow=getBoxShadow('disabled',color);props.focusBackgroundColor=disabledBackgroundColor;props.focusBoxShadow=getBoxShadow('disabled',color);}return props;};var ButtonContent=styled(BaseBox)(function(_ref5){var isHidden=_ref5.isHidden;return {opacity:isHidden?0:1};});var _BaseButton=function _BaseButton(_ref6,ref){var _buttonGroupProps$siz,_buttonGroupProps$var,_buttonGroupProps$col,_accessibilityProps$r,_buttonGroupProps$var2,_buttonGroupProps$col2,_buttonGroupProps$siz2,_buttonGroupProps$isF;var href=_ref6.href,target=_ref6.target,rel=_ref6.rel,tabIndex=_ref6.tabIndex,id=_ref6.id,_ref6$variant=_ref6.variant,variant=_ref6$variant===void 0?'primary':_ref6$variant,_ref6$color=_ref6.color,color=_ref6$color===void 0?'primary':_ref6$color,_ref6$size=_ref6.size,size=_ref6$size===void 0?'medium':_ref6$size,Icon=_ref6.icon,_ref6$iconPosition=_ref6.iconPosition,iconPosition=_ref6$iconPosition===void 0?'left':_ref6$iconPosition,_ref6$isDisabled=_ref6.isDisabled,isDisabled=_ref6$isDisabled===void 0?false:_ref6$isDisabled,_ref6$isFullWidth=_ref6.isFullWidth,isFullWidth=_ref6$isFullWidth===void 0?false:_ref6$isFullWidth,_ref6$isLoading=_ref6.isLoading,isLoading=_ref6$isLoading===void 0?false:_ref6$isLoading,onClick=_ref6.onClick,onBlur=_ref6.onBlur,_onKeyDown=_ref6.onKeyDown,_ref6$type=_ref6.type,type=_ref6$type===void 0?'button':_ref6$type,children=_ref6.children,testID=_ref6.testID,onFocus=_ref6.onFocus,onMouseLeave=_ref6.onMouseLeave,onMouseMove=_ref6.onMouseMove,_onMouseDown=_ref6.onMouseDown,onPointerDown=_ref6.onPointerDown,onPointerEnter=_ref6.onPointerEnter,accessibilityProps=_ref6.accessibilityProps,_onTouchEnd=_ref6.onTouchEnd,_onTouchStart=_ref6.onTouchStart,rest=_objectWithoutProperties(_ref6,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var buttonGroupProps=useButtonGroupContext();var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];var isLink=Boolean(href);var childrenString=getStringFromReactText(children);var isChildrenComponent=React__default.isValidElement(children);var disabled=buttonGroupProps.isDisabled||isLoading||isDisabled&&!isLink;if(__DEV__){if(!Icon&&!(childrenString!=null&&childrenString.trim())){throwBladeError({message:'At least one of icon or text is required to render a button.',moduleName:'BaseButton'});}}var prevLoading=usePrevious(isLoading);React__default.useEffect(function(){if(isLoading)announce('Started loading');if(!isLoading&&prevLoading)announce('Stopped loading');},[isLoading,prevLoading]);var _getProps=getProps({buttonTypographyTokens:typography,childrenString:childrenString,isDisabled:disabled,size:(_buttonGroupProps$siz=buttonGroupProps.size)!=null?_buttonGroupProps$siz:size,variant:(_buttonGroupProps$var=buttonGroupProps.variant)!=null?_buttonGroupProps$var:variant,theme:theme,color:(_buttonGroupProps$col=buttonGroupProps.color)!=null?_buttonGroupProps$col:color,hasIcon:Boolean(Icon)}),defaultBackgroundColor=_getProps.defaultBackgroundColor,defaultBoxShadow=_getProps.defaultBoxShadow,minHeight=_getProps.minHeight,height=_getProps.height,width=_getProps.width,buttonPaddingTop=_getProps.buttonPaddingTop,buttonPaddingBottom=_getProps.buttonPaddingBottom,buttonPaddingLeft=_getProps.buttonPaddingLeft,buttonPaddingRight=_getProps.buttonPaddingRight,focusBoxShadow=_getProps.focusBoxShadow,focusBackgroundColor=_getProps.focusBackgroundColor,focusRingColor=_getProps.focusRingColor,fontSize=_getProps.fontSize,hoverBoxShadow=_getProps.hoverBoxShadow,hoverBackgroundColor=_getProps.hoverBackgroundColor,hoverIconColor=_getProps.hoverIconColor,iconColor=_getProps.iconColor,iconSize=_getProps.iconSize,spinnerSize=_getProps.spinnerSize,lineHeight=_getProps.lineHeight,text=_getProps.text,textColor=_getProps.textColor,borderRadius=_getProps.borderRadius,motionDuration=_getProps.motionDuration,motionEasing=_getProps.motionEasing;var renderElement=React__default.useMemo(function(){return getRenderElement(href);},[href]);var defaultRole=isLink?'link':'button';var handlePointerPressedIn=React__default.useCallback(function(){if(disabled)return;setIsPressed(true);},[disabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(disabled)return;setIsPressed(false);},[disabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(disabled)return;if(e.key===' '||e.key==='Enter'){setIsPressed(true);}},[disabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(disabled)return;if(e.key===' '||e.key==='Enter'){setIsPressed(false);}},[disabled]);return jsx(StyledBaseButton,Object.assign({ref:ref,id:id,as:renderElement,href:href,target:target,rel:rel,accessibilityProps:Object.assign({},makeAccessible(Object.assign({},accessibilityProps,{role:(_accessibilityProps$r=accessibilityProps==null?void 0:accessibilityProps.role)!=null?_accessibilityProps$r:defaultRole}))),variant:(_buttonGroupProps$var2=buttonGroupProps.variant)!=null?_buttonGroupProps$var2:variant,color:(_buttonGroupProps$col2=buttonGroupProps.color)!=null?_buttonGroupProps$col2:color,size:(_buttonGroupProps$siz2=buttonGroupProps.size)!=null?_buttonGroupProps$siz2:size,isLoading:isLoading,disabled:disabled,minHeight:minHeight,buttonPaddingTop:buttonPaddingTop,buttonPaddingBottom:buttonPaddingBottom,buttonPaddingLeft:buttonPaddingLeft,buttonPaddingRight:buttonPaddingRight,defaultBackgroundColor:defaultBackgroundColor,defaultBoxShadow:defaultBoxShadow,focusBoxShadow:focusBoxShadow,focusBackgroundColor:focusBackgroundColor,focusRingColor:focusRingColor,hoverBoxShadow:hoverBoxShadow,hoverBackgroundColor:hoverBackgroundColor,isFullWidth:(_buttonGroupProps$isF=buttonGroupProps.isFullWidth)!=null?_buttonGroupProps$isF:isFullWidth,onClick:onClick,onBlur:onBlur,onFocus:onFocus,onMouseLeave:onMouseLeave,onMouseMove:onMouseMove,tabIndex:tabIndex,onPointerDown:onPointerDown,onPointerEnter:onPointerEnter,onKeyDown:function onKeyDown(event){handleKeyboardPressedIn(event);_onKeyDown==null?void 0:_onKeyDown(event);},onTouchStart:function onTouchStart(event){handlePointerPressedIn();_onTouchStart==null?void 0:_onTouchStart(event);},onTouchEnd:function onTouchEnd(event){handlePointerPressedOut();_onTouchEnd==null?void 0:_onTouchEnd(event);},type:type,borderRadius:borderRadius,motionDuration:motionDuration,motionEasing:motionEasing,height:height,width:width,isPressed:isPressed,hoverIconColor:isDisabled?getIn(theme.colors,iconColor):hoverIconColor,onMouseDown:function onMouseDown(event){handlePointerPressedIn();_onMouseDown==null?void 0:_onMouseDown(event);},onMouseUp:handlePointerPressedOut,onMouseOut:handlePointerPressedOut,onKeyUp:handleKeyboardPressedOut},metaAttribute({name:MetaConstants.Button,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(AnimatedButtonContent,{motionDuration:motionDuration,motionEasing:motionEasing,isPressed:isPressed,children:[isLoading?jsx(BaseBox,{display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",top:"0px",left:"0px",bottom:"0px",right:"0px",zIndex:1,children:jsx(BaseSpinner,{accessibilityLabel:"Loading",size:spinnerSize,color:color&&color!=='primary'&&color!=='transparent'&&color in spinnerColor?spinnerColor[color][variant]:spinnerColor.base[variant]})}):null,jsxs(ButtonContent,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",flex:1,isHidden:isLoading,zIndex:1,children:[Icon&&iconPosition=='left'?jsx(BaseBox,{display:"flex",justifyContent:"center",alignItems:"center",children:jsx(Icon,{size:iconSize,color:iconColor})}):null,text?isChildrenComponent?children:jsx(BaseText,{marginX:"spacing.2",lineHeight:lineHeight,fontSize:fontSize,fontWeight:"medium",textAlign:"center",color:textColor,children:text}):null,Icon&&iconPosition=='right'?jsx(BaseBox,{display:"flex",justifyContent:"center",alignItems:"center",children:jsx(Icon,{size:iconSize,color:iconColor})}):null]})]})}));};var BaseButton=assignWithoutSideEffects(React__default.forwardRef(_BaseButton),{displayName:'BaseButton'});

export { BaseButton as default, getBackgroundColorToken, getBoxShadowToken, getTextColorToken };
//# sourceMappingURL=BaseButton.js.map