@razorpay/blade/build/lib/native/components/Spinner/BaseSpinner/BaseSpinner.js

The Design System that powers Razorpay

import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { dimensions } from './spinnerTokens.js';
import SpinnerIcon from './SpinnerIcon.js';
import { SpinningBox } from './SpinningBox.native.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../../BladeProvider/useTheme.js';
import 'react-native';
import '@babel/runtime/helpers/slicedToArray';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
import '../../BottomSheet/BottomSheetStack.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
import '../../../tokens/global/typography.js';
import '../../../tokens/global/motion.js';
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
import '../../Typography/Heading/Heading.js';
import { Text } from '../../Typography/Text/Text.js';
import '../../Typography/Code/Code.js';
import '../../Typography/Display/Display.js';
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.native.js';

var _excluded=["label","labelPosition","accessibilityLabel","color","size","testID"];var getColor=function getColor(_ref){var color=_ref.color,theme=_ref.theme;if(color&&color==='white'){return getIn(theme.colors,'interactive.icon.staticWhite.subtle');}if(color&&color!=='neutral'){return getIn(theme.colors,`interactive.icon.${color}.subtle`);}return getIn(theme.colors,'interactive.icon.gray.subtle');};var _BaseSpinner=function _BaseSpinner(_ref2,ref){var label=_ref2.label,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?'right':_ref2$labelPosition,accessibilityLabel=_ref2.accessibilityLabel,_ref2$color=_ref2.color,color=_ref2$color===void 0?'neutral':_ref2$color,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;return jsx(BaseBox,Object.assign({ref:ref},metaAttribute({name:MetaConstants.Spinner,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,Object.assign({display:"flex",alignItems:"center",flexDirection:labelPosition==='right'?'row':'column'},makeAccessible({label:accessibilityLabel,role:'progressbar'}),{children:[jsx(SpinningBox,{children:jsx(SpinnerIcon,{dimensions:makeSize(dimensions[size]),color:getColor({color:color,theme:theme})})}),label&&label.trim().length>0?jsx(BaseBox,{marginLeft:labelPosition==='right'?'spacing.3':'spacing.0',marginTop:labelPosition==='bottom'?'spacing.3':'spacing.0',children:jsx(Text,{variant:"body",weight:"regular",size:"small",color:"surface.text.gray.muted",children:label})}):null]}))}));};var BaseSpinner=React__default.forwardRef(_BaseSpinner);

export { BaseSpinner };
//# sourceMappingURL=BaseSpinner.js.map